Design Tokens
Typography
9 type tokens across a single font family. Every size and weight is chosen for readability in AI interfaces — where text streams in real time and users scan before they read.
Font Families
Two typefaces with distinct roles.
Manrope
PrimaryGeometric sans-serif with humanist touches. Clean enough for UI, warm enough for reading.
--font-manropefont-sansWeights: 300, 400, 500, 600, 700DM Sans
Logo / BrandLow-contrast geometric sans used for the wordmark and branding elements.
--font-dm-sansfont-logoWeights: 400, 500Type Scale
From Display (48px) to Caption (12px). Each level includes a live specimen and metadata.
Design with intent
text-5xl font-lightPrimary heading
text-4xl font-boldSection heading
text-3xl font-semiboldSubsection heading
text-2xl font-semiboldBody large is for introductory paragraphs and emphasized reading.
text-lgBody text is the default for all content. Optimized for extended reading at screen distance.
text-baseCompact text for dense interfaces and secondary information.
text-smCaption text for timestamps, footnotes, and fine print.
text-xsSECTION LABEL
text-xs font-semibold uppercase tracking-widestWeight Specimens
Manrope at each available weight.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
AI Interface Recommendations
How to apply the type scale in AI product patterns.
Streaming text
Use Body (16px/400) for all AI-generated streaming content. The 1.6 line-height prevents text from feeling cramped as it appears character by character.
Artifact card titles
Use Heading 3 (24px/600) for artifact card titles. Large enough to anchor the card, small enough to coexist with body content.
Code output
Switch to a monospace font for code blocks. Use Body Small (14px) sizing to keep code compact but readable alongside prose.
Chat timestamps
Use Caption (12px) paired with the tertiary color token. Present but never competing with message content.
Prompt Guides
Per-token usage guidance for AI interface development.
Prompt Guide — Display
Use for
- Hero headings and landing sections
- Design system title pages
- Full-screen takeover headings
Don't use for
- Content within AI chat — too large for conversational context
- Mobile viewports without responsive scaling
AI Context
Reserved for page-level hero moments. In AI products, this might appear on a welcome screen or empty state. Never inside a chat thread or artifact card — it would overwhelm the content hierarchy.
Prompt Guide — Heading 1
Use for
- Page titles and primary section headings
- Artifact card titles when expanded to full view
Don't use for
- Inside chat bubbles — use Heading 3 or Body Large
- Repeated headings in a list — too heavy
AI Context
Top-level page headings. In AI documentation or artifact viewers, this is the title of a full-page artifact. One per viewport — multiple H1s create visual confusion.
Prompt Guide — Heading 2
Use for
- Major section dividers within a page
- Settings panel group titles
- Multi-step wizard step titles
Don't use for
- Card titles — too large for contained spaces
- AI response section breaks — use Heading 3
AI Context
Section-level heading. In AI tool panels or settings pages, this delineates major groups. In streaming responses, AI rarely needs this — content sections within a response are better served by H3.
Prompt Guide — Heading 3
Use for
- Artifact card titles
- AI response section headers
- Modal and dialog titles
- Sidebar section titles
Don't use for
- Body text emphasis — use bold weight instead
- Navigation items — too large
AI Context
The most versatile heading in AI interfaces. Artifact card titles, section breaks in long AI responses, and dialog headers. Large enough to establish hierarchy, small enough to coexist with body content.
Prompt Guide — Body Large
Use for
- Introductory paragraphs and ledes
- AI welcome messages and onboarding text
- Empty state descriptions
Don't use for
- Long-form AI responses — use Body for sustained reading
- Dense data tables or lists
AI Context
Slightly elevated body text. Use for the first message in a conversation, onboarding instructions, or feature descriptions. Not for streaming content — Body (16px) is better for extended reading.
Prompt Guide — Body
Use for
- AI-streamed response text
- Chat messages (user and assistant)
- Documentation paragraphs
- Form labels and descriptions
Don't use for
- Headings — too small to establish hierarchy
- Fine print or legal text — use Caption
AI Context
The default. Every AI-generated paragraph, every chat message, every piece of content the user reads in a sustained way. 16px at 1.6 line-height is the readability sweet spot for screen text.
Prompt Guide — Body Small
Use for
- Table cell text
- Compact list items
- Badge and tag labels
- AI tool parameter labels
Don't use for
- Primary reading content — too small for comfort
- Headings of any kind
AI Context
For compact UI elements in AI interfaces: parameter labels, badge text, compact menus, secondary metadata inside cards. Readable but clearly subordinate to Body text.
Prompt Guide — Caption
Use for
- Timestamps on chat messages
- Token count displays
- Copyright and attribution text
- Image captions and alt descriptions
Don't use for
- Anything the user must read to complete a task
- Error messages — must be readable at a glance
AI Context
The smallest text in the system. Timestamps below chat messages, token usage counters, model version labels. Present but never demanding. Pair with 'tertiary' or 'muted' color tokens.
Prompt Guide — Overline
Use for
- Section labels above headings
- Category tags on artifact cards
- Tab group labels
- Form section dividers
Don't use for
- Body text — all-caps is hard to read in paragraphs
- Buttons — use sentence case instead
AI Context
The labeling typeface. 'TOOLS', 'ARTIFACTS', 'SETTINGS' — structural labels that organize AI interface chrome. Always uppercase with wide tracking. Pair with 'accent' or 'secondary' color.