{
  "title": "WerkAI",
  "path": "/components/werkai",
  "url": "https://design.werklist.com/components/werkai",
  "text": "https://design.werklist.com/agent/components/werkai",
  "summary": "The field where you ask WerkAI, and the card where its answer appears.",
  "version": "2.1.2",
  "kind": "component",
  "name": "WerkAI",
  "purpose": "The field in the WerkOS header that opens WerkAI, and the card in which WerkAI's text is read, accepted or discarded.",
  "use": [
    "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."
  ],
  "avoid": [
    "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": [
    {
      "part": "Field container",
      "measure": "a button, 36 px high, the full width of its slot, padding 16 px (12 px compact), radius 8 px, no border, no shadow",
      "token": "--surface-control, --radius-lg, --space-4, --space-3"
    },
    {
      "part": "Field glyph",
      "measure": "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",
      "token": "--brand-true, --on-brand, --navy"
    },
    {
      "part": "Field label",
      "measure": "14/20 weight 500, one line with an ellipsis; while examples type, a 1 px caret follows the text",
      "token": "--type-product-body, --text-muted"
    },
    {
      "part": "Field gap",
      "measure": "8 px between the glyph and the label",
      "token": "--space-2"
    },
    {
      "part": "Card container",
      "measure": "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",
      "token": "--ai-from, --ai-to, --space-3, --space-4, --radius-xl, --space-2"
    },
    {
      "part": "WerkAI mark",
      "measure": "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",
      "token": "--ai-ink"
    },
    {
      "part": "Card text",
      "measure": "14/20, line breaks kept; a suggested action follows as a second paragraph, 8 px below, at weight 500",
      "token": "--type-product-body, --ai-ink"
    },
    {
      "part": "Card buttons",
      "measure": "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",
      "token": "--type-product-dense, --radius-lg, --ai-ink"
    }
  ],
  "variants": [
    {
      "name": "Ask field",
      "use": "At the center of the desktop header."
    },
    {
      "name": "Ask field, compact",
      "use": "In the phone header row, with its own short examples."
    },
    {
      "name": "AI card, summary",
      "use": "In the reading pane; no buttons; always in English."
    },
    {
      "name": "AI card, suggestion",
      "use": "In the reply box; Discard and Accept; in the language of the email."
    }
  ],
  "sizes": [
    {
      "name": "Field",
      "height": "36 px",
      "padding": "16 px",
      "type": "14/20 weight 500"
    },
    {
      "name": "Field, compact",
      "height": "36 px",
      "padding": "12 px",
      "type": "14/20 weight 500"
    }
  ],
  "states": [
    {
      "name": "Field rest",
      "change": "The control fill and a muted label",
      "tokens": [
        "--surface-control",
        "--text-muted"
      ]
    },
    {
      "name": "Field hover and focus",
      "change": "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",
      "tokens": [
        "--brand-blue",
        "--surface-control",
        "--text",
        "--duration-slow",
        "--ease-standard"
      ]
    },
    {
      "name": "Field focus visible",
      "change": "A 2 px ring, 2 px out",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    },
    {
      "name": "Field pressed",
      "change": "Scale 0.99",
      "tokens": []
    },
    {
      "name": "Field examples",
      "change": "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",
      "tokens": []
    },
    {
      "name": "Card waiting",
      "change": "The final height held; three 6 px dots 4 px apart, the lit dot moving every 260 ms, the others at 40 percent",
      "tokens": [
        "--ai-ink"
      ]
    },
    {
      "name": "Card typing",
      "change": "The text appears over 600 ms at its final height",
      "tokens": []
    },
    {
      "name": "Card shown",
      "change": "The full text and, in a suggestion, the two buttons",
      "tokens": []
    },
    {
      "name": "Card failed",
      "change": "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",
      "tokens": [
        "--ai-ink"
      ]
    },
    {
      "name": "Card button hover",
      "change": "A wash of the ink at 10 percent",
      "tokens": [
        "--ai-ink"
      ]
    },
    {
      "name": "Card button focus",
      "change": "A 2 px ring, 2 px out",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "Reduced motion",
      "change": "No examples, no caret, no glyph turn, no typing, still dots; the text appears whole",
      "tokens": []
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves to the field; in a suggestion, to Discard, then Accept"
    },
    {
      "key": "Enter or Space",
      "action": "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"
  ]
}