|Design System

Design Language

Guidelines

Design principles, writing guidelines, and tone of voice for building AI interfaces. These aren't abstract ideals — they are actionable rules that shape every component, label, and interaction in the system.

Design Principles

Five principles that guide every design decision in this system.

01

Clarity over cleverness

Every interface decision should reduce ambiguity. If a user has to guess what something does, the design has failed. In AI interfaces, where output is unpredictable, the chrome around it must be maximally predictable.

02

Show the system's state

AI has latency. Models think, stream, and sometimes fail. The interface must always communicate what the system is doing — loading, generating, complete, errored. Never leave the user wondering.

03

Respect the content

In AI products, the content IS the product. Design should recede so generated text, code, and artifacts stay in focus. Minimal chrome, generous whitespace, high-contrast text on neutral backgrounds.

04

Progressive disclosure

Surface the essential, reveal the advanced. A chat input needs a send button — not a visible temperature slider. Settings, parameters, and model selection live behind intentional affordances.

05

Earn trust through transparency

Show model names, display confidence when available, surface citations. AI interfaces that hide how they work feel opaque. Transparency is a design choice, not a footnote.

Tone of Voice

How the interface speaks to users. Direct, helpful, and never condescending.

Do

  • Use plain language. 'Your message was sent' not 'Transmission successful'.
  • Be specific about errors. 'Rate limit reached — try again in 30s' not 'Something went wrong'.
  • Use active voice. 'Claude is generating a response' not 'A response is being generated'.
  • Name the model when relevant. Users care which model answered.
  • Acknowledge uncertainty. 'I'm not sure about this — here's what I found' builds trust.

Don't

  • Don't anthropomorphize excessively. AI 'processes' — it doesn't 'think' or 'feel'.
  • Don't use jargon in user-facing text. 'tokens', 'context window', 'temperature' need translation.
  • Don't be chatty in system UI. Buttons, labels, and tooltips should be terse.
  • Don't use 'please' in error messages. Be direct: 'Enter an API key' not 'Please enter an API key'.
  • Don't blame the user. 'Invalid format' not 'You entered an invalid format'.

Writing Patterns

Templates for common UI copy situations in AI products.

Empty states

“No conversations yet. Start one to see your history here.”

State the fact, then guide the action. Two sentences max.

Loading states

“Generating response...”

Present participle + ellipsis. No periods. Keep it short.

Error messages

“Could not reach the API. Check your connection and try again.”

What happened + what to do. No apologies, no jargon.

Success confirmations

“Conversation saved.”

Past tense. One sentence. Disappear after 3 seconds.

Destructive confirmations

“Delete this conversation? This can't be undone.”

Question + consequence. No filler. Red destructive button.

Tooltips

“Adjusts how creative the response is (0 = focused, 1 = creative)”

One line. Parenthetical for technical details. No periods.

Voice Characteristics

The system's personality on a spectrum.

Formal
Casual
Serious
Playful
Technical
Simple
Authoritative
Approachable
Verbose
Concise