# WerkAI

The field in the WerkOS header that opens WerkAI, and the card in which WerkAI's text is read, accepted or discarded.

* Kind: component
* Page: https://design.werklist.com/components/werkai
* Version: 2.1.2

## When to use it

* Ask field: once per screen, at the center of the desktop header and across the phone header row.
* AI card, summary: above the newest message in the reading pane.
* AI card, suggestion: inside the reply box, above the editor.

## When not to use it

* Search: it keeps its own place in the rail and the command palette.
* Board values WerkAI fills: they stay in their cells (Generated content).
* Any icon inside the card other than the WerkAI mark.
* A colored, bordered or capsule shaped ask field.

## Anatomy

* Field container: a button, 36 px high, the full width of its slot, padding 16 px (12 px compact), radius 8 px, no border, no shadow (--surface-control, --radius-lg, --space-4, --space-3)
* Field glyph: sparkle glyph 17 px, stroke 2.25, in a gradient of the button blue, mixed with white at the bottom left and with navy at the top right; the same in both themes (--brand-true, --on-brand, --navy)
* Field label: 14/20 weight 500, one line with an ellipsis; while examples type, a 1 px caret follows the text (--type-product-body, --text-muted)
* Field gap: 8 px between the glyph and the label (--space-2)
* Card container: a gradient at 135 degrees; the summary has padding 12 by 16 px and runs to the edges of the reading pane; the suggestion has padding 12 px, radius 12 px, 12 px from the sides of the reply box, 8 px above the editor (--ai-from, --ai-to, --space-3, --space-4, --radius-xl, --space-2)
* WerkAI mark: the WerkAI sparkle at 20 px in the card ink, 2 px below the top of the first line, the only glyph in the card (--ai-ink)
* Card text: 14/20, line breaks kept; a suggested action follows as a second paragraph, 8 px below, at weight 500 (--type-product-body, --ai-ink)
* Card buttons: text buttons at least 32 px high (44 px on touch screens and below 768 px), padding 10 px, radius 8 px, 13/18; Accept at weight 500, Discard and Try again at 400; at the right, 4 px apart, 8 px under the text (--type-product-dense, --radius-lg, --ai-ink)

## Variants

* Ask field: At the center of the desktop header.
* Ask field, compact: In the phone header row, with its own short examples.
* AI card, summary: In the reading pane; no buttons; always in English.
* AI card, suggestion: In the reply box; Discard and Accept; in the language of the email.

## Sizes

* Field: height 36 px, padding 16 px, type 14/20 weight 500
* Field, compact: height 36 px, padding 12 px, type 14/20 weight 500

## States

* Field rest: The control fill and a muted label (--surface-control, --text-muted)
* Field hover and focus: The fill takes 14 percent of --brand-blue over the control fill; the label turns to full ink; with motion allowed, the glyph turns 12 degrees and grows to 1.1 over 300 ms (--brand-blue, --surface-control, --text, --duration-slow, --ease-standard)
* Field focus visible: A 2 px ring, 2 px out (--focus-ring, --focus-ring-width, --focus-ring-offset)
* Field pressed: Scale 0.99
* Field examples: On the home page, once per session, the field types a few example requests behind a blinking caret and erases each one; it stops when the person moves to another page
* Card waiting: The final height held; three 6 px dots 4 px apart, the lit dot moving every 260 ms, the others at 40 percent (--ai-ink)
* Card typing: The text appears over 600 ms at its final height
* Card shown: The full text and, in a suggestion, the two buttons
* Card failed: One sentence at 13/18 with Try again and Discard; the sentence is at least 192 px wide, so the buttons wrap under it on narrow screens (--ai-ink)
* Card button hover: A wash of the ink at 10 percent (--ai-ink)
* Card button focus: A 2 px ring, 2 px out (--focus-ring)
* Reduced motion: No examples, no caret, no glyph turn, no typing, still dots; the text appears whole

## Keyboard

* Tab: Moves to the field; in a suggestion, to Discard, then Accept
* Enter or Space: Opens WerkAI from the field, or presses the focused card button

## Accessibility

* The field is a button named Ask WerkAI that opens WerkAI. The typed examples are hidden from screen readers.
* The card is a region named AI summary or Suggested reply. The summary is marked as English.
* A screen reader receives the whole card text at once. The typed copy is hidden from it.
* The dots are hidden from screen readers, and a sentence beside them is read instead: Preparing the summary, Writing a suggested reply.
* After Accept the caret is in the editor. After Discard focus returns to the reply.
* The field label and the card text meet 4.5 to 1 in both themes.

## Content

* Name: WerkAI, one word with capital W, A and I.
* Field label: Ask WerkAI.
* Card names: AI summary; Suggested reply. Buttons: Accept, Discard, Try again.
* Desktop examples: Send an email to Martina; Show me what is overdue this week; Draft an offer for a new client; Find the candidates from Nepal; Who is working on the Bosnia project?; Summarize yesterday's meeting notes.
* Phone examples: Email Martina; What is overdue?; Draft an offer; Nepal candidates; Tasks for today.

## Tokens

* --surface-control
* --text-muted
* --text
* --brand-blue
* --brand-true
* --on-brand
* --navy
* --focus-ring
* --focus-ring-width
* --focus-ring-offset
* --radius-lg
* --radius-xl
* --space-2
* --space-3
* --space-4
* --type-product-body
* --type-product-dense
* --ai-from
* --ai-to
* --ai-ink
* --duration-slow
* --ease-standard