Skip to main content
Context GrammarDesign for context-aware AI

Design system catalogue

AI

The parts of the interface that belong to working with AI: asking, waiting, reading an answer, changing your mind.

Input

01

Prompt field

Ask
›
Plain words are fine.
Ask
Ask
›
Type a question first.

Where a question to the AI starts. The spark caret marks the field as a prompt, the hint says what it takes, and an error says what to do next in words — never colour alone.

02

Mic button

Default

Hover

Focus

Active

Disabled

Listening

The only inline SVG glyph in the system. While it listens, the border and icon turn spark and pulse, so the state is visible without sound.

Reading intent

03

Syntax tree

├─ intent CANCEL
├─ context.event 4 p.m. sync -> today
└─ constraint.notify required

A request read as structure: the intent first, in spark, then the context and constraints that shape it. It shows what the system understood, so a person can correct it.

04

Confidence meter

Above threshold

confidence82%

Below threshold

confidence40% · below θ

A value the interface says out loud. Below the threshold the bar goes grey and the label says so, because a low score is a reason to ask, not to guess.

05

Instrument

◆ instrument
confidence70%
modelv2

An on-demand readout: a gauge and key–value rows, for when someone wants to see how the system decided.

06

Decision checklist

Before sending

  • The right people are listed
  • The time zone is clear
  • A note explains why

What the system checked before it acted, as a short list. Each line is a reason a person can read and challenge.

On the site

07

Parser console

Intent Parser

ctx.parse/v1

Specimens

Intent First reads language as intent, context, and constraints instead of forcing users through menu paths.

Cancelthe 4 p.m.with theTokyo teamand let them know why.

├─ intent CANCEL
├─ context.event 4 p.m. sync -> today
├─ context.audience Tokyo team (n=5)
├─ constraint.notify required
└─ constraint.reversible true
confidence92%
Composed surface - Confirmation

Cancel - 4 p.m. Sync - Tokyo Team

Apologising - I need to move our 4 p.m. We will find a new slot tomorrow inside Tokyo hours.
Cancel and send noteEdit draft

The home page’s own console: pick a request and see it read as intent, context and constraints, with a confidence and the surface the system would compose. It runs on prepared examples; nothing is sent.

08

Ask AI button

The site’s single Ask AI entry point, in the header. It toggles the side panel and reports its state to assistive technology. Pressing it here opens the real panel; nothing is sent until you ask a question.