Foundations
Foundational tokens and interaction rules
The visual system is intentionally compact: pale surfaces, soft rules, low-contrast metadata, and type that stays close in scale so the pages feel editorial rather than promotional.
Color
| Token | Value | Use |
|---|---|---|
| surface | #fdfdfc | Primary page background |
| surface-elevated | #ffffff | Soft lifted surfaces |
| text | #111111 | Primary copy and headings |
| muted | rgba(0, 0, 0, 0.4) | Metadata and supporting text |
| divider | #f5f5f5 | Rules, rails, and quiet separators |
| accent | #f09637 | Small highlight moments and section flashes |
| link | #2480ed | Inline links and actionable text |
| shadow | rgba(0, 0, 0, 0.06) | Subtle elevation only when needed |
| focus | rgba(0, 122, 255, 0.5) | Accessible focus ring |
Type
| Role | Spec | Use |
|---|---|---|
| doc-title | 14px / 20px / 500 | Page titles and compact document headings |
| body | 14px / 20px / 460 | Primary reading rhythm and table text |
| section-title | 18px / 24px / 500 | Major section headings |
| sidebar-item | 13px / 16px / 460 | Local navigation items |
| caption | 12px / 16px / 460 | Metadata, labels, and helper copy |
| small-label | 12px / 16px / 500 | Small interface labels |
The title and body stay intentionally close in scale. That tension is part of the system; it keeps the pages feeling like documents instead of landing pages.
Spacing
| Token | Value | Use |
|---|---|---|
| page-x | 1rem | Horizontal page padding on desktop |
| page-x-mobile | 1.5rem | Horizontal page padding on mobile |
| page-top | 5rem | Top offset for document pages |
| section-gap | 2.25rem | Gap between major document sections |
| heading-gap | 1.125rem | Gap between a section title and its divider |
| figure-gap-top | 2.5rem | Top breathing room around media blocks |
| figure-gap-bottom | 2.25rem | Bottom breathing room around media blocks |
| card-padding | 1rem | Default note and callout padding |
Shape and elevation
| Element | Value | Note |
|---|---|---|
| card | 24px | Default soft card radius |
| card-wide | 32px | Larger surfaces with gentle corners |
| note | 14px | Compact callouts and notes |
| inline-highlight | 4px | Small rounded text highlight |
| round | 999px | Fully rounded controls |
| soft | 0 0 0 1px rgba(0,0,0,.04), 0 1.625rem 3.375rem rgba(0,0,0,.04) | Use sparingly for notes and lightweight overlays |
| micro | 0 0.5rem 1rem rgba(0,0,0,.03) | Use sparingly for notes and lightweight overlays |
Motion
| Interaction | Duration | Behavior |
|---|---|---|
| hover | 160ms | Quiet hover changes for links and controls |
| press | 120ms | Tiny press feedback |
| highlight-flash | 2800ms | Slow fade for section highlights |
| page-entry | 500ms | Gentle load-in for stacked sections |
| ease-out | cubic-bezier(0.19, 1, 0.22, 1) | Default docs easing |
- Prefer ease-out transitions and crisp hover states.
- Avoid broad horizontal shifts unless navigation intent truly needs it.
- Decorative motion should stay subtle enough that copy remains the focus.
Text interaction states
Text interactions should stay quiet and avoid layout shift. Hover is usually a color darkening, a subtle underline change, or a very small vertical lift. Font size, line height, and baseline should not change between resting and hover states.
| Element | Default | Hover |
|---|---|---|
| Top-level nav item | Muted and lightweight | Darker text with a very small lift |
| Inline link | Body-colored text with a soft underline rule | Darker rule and small lift only |
| Local anchor item | Muted in the sidebar rail | Dark text with accent border when active |