|Design System

Design Tokens

Colors

8 semantic color tokens with light and dark mode values. Every color is referenced by role, not by value — so the palette adapts across themes without touching components.

Full Palette

All color tokens rendered with their current theme value. Toggle dark mode to see them adapt.

Background

--bg
bg-background

Surface

--surface
bg-surface

Foreground

--fg
text-foreground

Accent

--accent
text-accent / bg-accent

Secondary

--secondary
text-secondary

Tertiary

--tertiary
text-tertiary

Contrast

--contrast
text-contrast / bg-contrast

Overlay

--overlay
bg-overlay / border-overlay

Backgrounds

Surface layers that content sits on.

Background

Primary page background. The canvas everything sits on.

Surface

Elevated surface for cards, panels, and contained content areas.

Prompt Guide — Background

Use for

  • Page-level backgrounds
  • Chat message area canvas
  • Full-bleed sections

Don't use for

  • Card or panel surfaces — use 'surface' instead
  • Interactive element fills

AI Context

In AI chat interfaces, this is the outermost canvas. It recedes so content — messages, artifacts, streaming text — stays in focus. Neutral enough for extended reading sessions.

Prompt Guide — Surface

Use for

  • Chat bubbles and message containers
  • Artifact cards and code blocks
  • Sidebar backgrounds
  • Input field backgrounds

Don't use for

  • Page-level backgrounds — use 'background' instead
  • Borders or dividers — use 'overlay' with opacity

AI Context

The one-step-up layer. AI-generated cards, tool results, and artifact previews sit on this surface. Provides subtle depth without hard shadows.

Content

Five-level text hierarchy from primary to ambient.

Foreground

Primary text color. Maximum readability for body content.

Secondary

Medium-emphasis text for navigation, labels, and supporting content.

Tertiary

Low-emphasis text. Meta info, placeholders, and ambient labels.

Prompt Guide — Foreground

Use for

  • Body text and paragraphs
  • AI-generated response text
  • Headings and titles
  • Primary labels

Don't use for

  • Muted or secondary information — use 'secondary' or 'tertiary'
  • Placeholder text — use 'tertiary'

AI Context

The default text color for AI-streamed content. Optimized for long-form reading against both light and dark backgrounds. Use this for any text the user needs to read carefully.

Prompt Guide — Secondary

Use for

  • Navigation items (inactive state)
  • Section labels and overlines
  • Sidebar text and menu items
  • Tool/plugin names in AI responses

Don't use for

  • Primary headings — use 'foreground'
  • Backgrounds — this is a text-only token

AI Context

The bridge between foreground and muted. Navigation, sidebar labels, and section headers in AI tool panels. Readable but clearly subordinate to primary content.

Prompt Guide — Tertiary

Use for

  • Meta information (timestamps, byline, word counts)
  • Placeholder text in inputs
  • Decorative labels and watermarks

Don't use for

  • Any text the user must read carefully — use 'secondary'
  • Interactive elements — invisible as affordances

AI Context

The quietest text level. Model version tags, generation IDs, placeholder prompts. There if you look but never shouts.

Interactive

Accent color for actions, links, and status.

Accent

Brand accent for interactive elements, highlights, and status indicators.

Prompt Guide — Accent

Use for

  • Call-to-action buttons
  • Active navigation states
  • Success indicators and confirmations
  • Links and interactive affordances
  • User-sent message indicators

Don't use for

  • Large background fills — too saturated for reading surfaces
  • Error states — use a red semantic token instead
  • Body text — reserve for interactive or status signals

AI Context

Accent signals interactivity and positive state. In AI interfaces, use for 'send' buttons, completion confirmations, and active tool indicators. The dark mode variant is intentionally brighter for WCAG contrast on dark surfaces.

Utility

Contrast and overlay tokens for borders, dividers, and emphasis.

Contrast

Maximum contrast color. Inverts role between light and dark modes.

Overlay

Utility color for borders, dividers, and transparent overlays. Always used with opacity.

Prompt Guide — Contrast

Use for

  • High-emphasis buttons (CTA backgrounds)
  • Inverted text on accent backgrounds
  • Focus rings and outlines

Don't use for

  • Body text — use 'foreground' for natural reading
  • Large surface fills — too harsh

AI Context

The 'loudest' color in the system. Use for primary CTAs like 'Send message' or 'Run prompt'. In dark mode it's pure white; in light mode, near-black. Always paired with its inverse for text.

Prompt Guide — Overlay

Use for

  • Borders and dividers (at 5-15% opacity)
  • Hover state backgrounds (at 5-10% opacity)
  • Modal backdrops (at 40-60% opacity)
  • Subtle shadows and separators

Don't use for

  • Solid fills — always apply opacity
  • Text color — use semantic text tokens

AI Context

The universal border/divider color. At overlay/10, it creates subtle separators between chat messages. At overlay/5, gentle hover states. Never used at full opacity — it's a modifier, not a value.

AI Interface Mapping

How these tokens map to a typical AI chat interface.

Here is the analysis you requested. I found three key insights from the data.

Claude 3.5 Sonnet

Artifact

Data Analysis Report

3 charts, 12 data points

Can you break down the second insight?

Token mapping

Page canvas: background
Chat bubble: surface
Response text: foreground
Model label: tertiary
User message: contrast
Artifact label: accent