|Design System

Design Tokens

Spacing

9 spacing tokens from 2px to 96px. A consistent scale that creates visual rhythm across components, pages, and breakpoints.

Spacing Scale

Each step visualized proportionally. All values map to Tailwind utility classes.

2xs
2px0.5
xs
4px1
sm
8px2
md
16px4
lg
24px6
xl
32px8
2xl
48px12
3xl
64px16
4xl
96px24

Layout Principles

Structural constraints that keep content readable across viewports.

Content max-width

Prevents lines from exceeding comfortable reading length

80rem / max-w-7xl

Page padding (mobile)

Minimum breathing room on small viewports

1rem / px-4

Page padding (desktop)

Generous margins on wide viewports

4rem / px-16

Sidebar width

Fixed sidebar in documentation layouts

260px

Breakpoints

Responsive breakpoints aligned with Tailwind defaults.

sm640px
md768px
lg1024px
xl1280px

AI Interface Spacing

Recommended spacing for common AI product patterns.

Chat bubble padding

Internal padding for message containers

md (16px)

Message gap (same sender)

Between consecutive messages from the same participant

sm (8px)

Message gap (different sender)

Between messages from different participants

md (16px)

Artifact card padding

Internal padding for artifact and tool result cards

lg (24px)

Sidebar section gap

Between sections in a navigation sidebar

xl (32px)

Prompt Guides

Per-token usage guidance for AI interface development.

Prompt Guide — 2xs

Use for

  • Hairline gaps between inline elements
  • Icon-to-text micro gaps

Don't use for

  • Component padding — too tight
  • Section spacing

AI Context

Micro adjustment. Rarely used directly — exists for fine-tuning icon alignment or inline element gaps.

Prompt Guide — xs

Use for

  • Inner padding on small badges and tags
  • Gap between icon and label in compact buttons

Don't use for

  • Section spacing — too tight
  • Card padding — needs more breathing room

AI Context

Tightest usable spacing. Badge padding, compact chip gaps, inline tag spacing in AI tool parameter lists.

Prompt Guide — sm

Use for

  • Gap between chat message bubbles
  • Inner padding on compact buttons
  • Space between list items in menus

Don't use for

  • Page-level section gaps — too tight
  • Card padding — use 'md' or 'lg'

AI Context

The message gap. Between consecutive chat bubbles from the same sender, 8px keeps them visually grouped without merging.

Prompt Guide — md

Use for

  • Default card padding
  • Chat bubble internal padding
  • Form field spacing
  • Gap between sender groups in chat

Don't use for

  • Page margins on mobile — too tight
  • Between major page sections — use 'xl' or '2xl'

AI Context

The default spacing unit. Chat bubble padding, card padding, form field gaps. If you're not sure which spacing to use, start here.

Prompt Guide — lg

Use for

  • Card padding for content-heavy cards
  • Artifact card internal padding
  • Section padding within a page

Don't use for

  • Tight component gaps — too loose
  • Between inline elements

AI Context

Generous card padding. Artifact cards, expanded tool results, and modal content areas. Gives content room to breathe inside contained surfaces.

Prompt Guide — xl

Use for

  • Gap between major content sections
  • Page padding on mobile
  • Sidebar content padding

Don't use for

  • Between list items — too much whitespace
  • Inner component padding

AI Context

Section-level spacing. Between the chat area and sidebar. Between settings groups. The break that says 'new context' without a heading.

Prompt Guide — 2xl

Use for

  • Page section gaps
  • Top/bottom padding on major content areas
  • Hero section padding

Don't use for

  • Component-level spacing — too much
  • Between form fields

AI Context

Major section breaks. Between the hero and first content section. Between feature blocks. The 'big breath' spacing.

Prompt Guide — 3xl

Use for

  • Page-level vertical rhythm
  • Large section separators
  • Content area max-padding

Don't use for

  • Inside cards or panels
  • Mobile viewports — too much space consumed

AI Context

The largest intentional spacing. Page-level vertical rhythm on desktop. Between major sections of a documentation page or settings panel.

Prompt Guide — 4xl

Use for

  • Hero section vertical padding
  • Full-page empty state centering
  • Landing page section breaks

Don't use for

  • Application UI — too much dead space
  • Chat interfaces — wasteful

AI Context

Marketing-level spacing. Welcome screens, onboarding flows, empty states. Not for dense application UI — reserved for moments of visual calm.