Reference

Design Tokens

Complete token reference for the HIG-inspired design system. Every value is intentional, semantic, and maps to a CSS custom property.

Semantic Colors

These CSS custom properties adapt automatically between light and dark mode via the [data-theme="dark"] selector.

Token	Light Value	Usage
`--color-bg-primary`	#ffffff	Main page background
`--color-bg-secondary`	#f5f5f7	Cards, sidebars, inset areas
`--color-bg-tertiary`	#ebebf0	Table headers, nested sections
`--color-text-primary`	#1d1d1f	Headings, primary body text
`--color-text-secondary`	#6e6e73	Captions, supporting copy
`--color-text-tertiary`	#aeaeb2	Placeholder, disabled text
`--color-accent`	#0066cc	Primary CTA, links, focus rings
`--color-accent-tint`	rgba(0,102,204,0.1)	Accent backgrounds, badges
`--color-success`	#34c759	Success states, confirmations
`--color-warning`	#ff9500	Warnings, caution indicators
`--color-danger`	#ff3b30	Errors, destructive actions
`--color-info`	#32ade6	Informational messages
`--color-purple`	#af52de	Premium features, accessibility tags
`--color-separator`	rgba(60,60,67,0.12)	Dividers, table row separators
`--color-glass`	rgba(255,255,255,0.72)	Liquid Glass backgrounds
`--color-fill-tertiary`	rgba(118,118,128,0.12)	Subtle fills, tag backgrounds

CSS Variables — Colors

:root {
  --color-bg-primary:    #ffffff;
  --color-bg-secondary:  #f5f5f7;
  --color-bg-tertiary:   #ebebf0;
  --color-text-primary:  #1d1d1f;
  --color-text-secondary:#6e6e73;
  --color-text-tertiary: #aeaeb2;
  --color-accent:         #0066cc;
  --color-accent-tint:    rgba(0, 102, 204, 0.1);
  --color-success:        #34c759;
  --color-warning:        #ff9500;
  --color-danger:         #ff3b30;
  --color-separator:      rgba(60, 60, 67, 0.12);
  --color-glass:          rgba(255, 255, 255, 0.72);
}

Type Scale

Based on Apple's SF Pro type system. All sizes use the system font stack for native rendering quality.

Token	Preview	Size	Usage
`--text-display`	Aa	56px	Hero headlines, landing pages
`--text-large-title`	Aa	40px	Page titles, modal headers
`--text-title1`	Aa	32px	Section headings
`--text-title2`	Aa	26px	Card titles, sub-sections
`--text-title3`	Aa	22px	List headers, group labels
`--text-headline`	Aa	17px / semibold	Emphasized body, nav items
`--text-body`	The quick brown fox	17px / regular	Primary reading text
`--text-callout`	The quick brown fox	16px	Callouts, descriptions
`--text-subhead`	The quick brown fox	15px	Supporting text, metadata
`--text-footnote`	The quick brown fox	13px	Footnotes, timestamps
`--text-caption`	The quick brown fox	12px	Labels, badges, status text

Weight Token	Preview	Value	Usage
`--weight-regular`	Regular Text	400	Body copy
`--weight-medium`	Medium Text	500	UI labels, buttons
`--weight-semibold`	Semibold Text	600	Emphasis, nav items
`--weight-bold`	Bold Text	700	Headings, hero text

8pt Grid Spacing

All spacing values follow an 8pt grid system, ensuring pixel-perfect alignment across all components.

Token	Visual	Value	Usage
`--space-1`	4px	4px	Micro gaps, icon padding
`--space-2`	8px	8px	Inline element gaps
`--space-3`	12px	12px	Tight component padding
`--space-4`	16px	16px	Default component padding
`--space-5`	20px	20px	Medium gaps, list items
`--space-6`		24px	Card padding, section gaps
`--space-8`		32px	Container padding, generous gaps
`--space-10`		40px	Section spacing
`--space-12`		48px	Page padding, large gaps
`--space-16`		64px	Major section separation
`--space-20`		80px	Hero padding, page sections
`--space-24`		96px	Top-of-page hero clearance

Border Radius

Corner radius scales with component size. Small components use small radii; large surfaces use large radii — a key principle of Apple's continuous curvature style.

Token	Value	Usage
`--radius-xs`	4px	Micro elements, code badges
`--radius-sm`	8px	Buttons, inputs, small cards
`--radius-md`	12px	Medium cards, dropdowns
`--radius-lg`	16px	Large cards, panels
`--radius-xl`	20px	Modals, sheets
`--radius-2xl`	28px	Full-screen sheets, app icons
`--radius-full`	9999px	Pills, tags, toggle switches

Elevation Shadows

Shadows are subtle, tinted, and layered — never black outlines. Each level represents a higher elevation in the z-stack.

Token	Value	Usage
`--shadow-xs`	0 1px 2px rgba(0,0,0,0.04)	Subtle lift, focused inputs
`--shadow-sm`	0 2px 8px rgba(0,0,0,0.06)	Default cards, list items
`--shadow-md`	0 4px 16px rgba(0,0,0,0.08)	Floating elements, tooltips
`--shadow-lg`	0 8px 32px rgba(0,0,0,0.1)	Popovers, context menus
`--shadow-xl`	0 16px 48px rgba(0,0,0,0.12)	Modals, full-page sheets

Motion Tokens

Duration and easing tokens for consistent, intentional animation across all interactions.

Token	Value	Usage
`--duration-instant`	100ms	Color changes, hover fills
`--duration-fast`	200ms	Button feedback, micro interactions
`--duration-normal`	300ms	Standard UI transitions
`--duration-slow`	500ms	Page/screen level transitions

Token	Bezier	Character	Best For
`--easing-standard`	cubic-bezier(0.2, 0, 0, 1)	Smooth, purposeful	Most UI element movement
`--easing-decelerate`	cubic-bezier(0, 0, 0.2, 1)	Fast start, gentle stop	Elements entering the screen
`--easing-spring`	cubic-bezier(0.34, 1.56, 0.64, 1)	Overshoot + settle	Buttons, cards, modals

Complete Token Reference — CSS

:root {
  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  --font-mono: "SF Mono", "Fira Code", monospace;
  --text-display:    56px;   --text-large-title: 40px;
  --text-title1:     32px;   --text-title2:      26px;
  --text-title3:     22px;   --text-body:        17px;
  --text-callout:    16px;   --text-subhead:     15px;
  --text-footnote:   13px;   --text-caption:     12px;
  --weight-regular:  400;    --weight-medium:    500;
  --weight-semibold: 600;    --weight-bold:      700;

  /* ── Spacing (8pt grid) ── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ── Border Radius ── */
  --radius-xs:   4px;    --radius-sm:   8px;
  --radius-md:   12px;   --radius-lg:   16px;
  --radius-xl:   20px;   --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --duration-instant: 100ms;  --duration-fast:   200ms;
  --duration-normal:  300ms;  --duration-slow:   500ms;
  --easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
}

Export

JSON Token Export

Use this JSON structure to import tokens into Figma, Style Dictionary, or any design token toolchain.

tokens.json

{
  "color": {
    "background": {
      "primary":   { "value": "#ffffff",  "type": "color" },
      "secondary": { "value": "#f5f5f7",  "type": "color" },
      "tertiary":  { "value": "#ebebf0",  "type": "color" }
    },
    "text": {
      "primary":   { "value": "#1d1d1f",  "type": "color" },
      "secondary": { "value": "#6e6e73",  "type": "color" },
      "tertiary":  { "value": "#aeaeb2",  "type": "color" }
    },
    "accent":   { "value": "#0066cc", "type": "color" },
    "success":  { "value": "#34c759", "type": "color" },
    "warning":  { "value": "#ff9500", "type": "color" },
    "danger":   { "value": "#ff3b30", "type": "color" }
  },
  "typography": {
    "fontFamily": {
      "sans": { "value": "-apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif" },
      "mono": { "value": "'SF Mono', 'Fira Code', monospace" }
    },
    "fontSize": {
      "display":    { "value": "56px" },
      "largeTitle": { "value": "40px" },
      "title1":     { "value": "32px" },
      "title2":     { "value": "26px" },
      "body":       { "value": "17px" },
      "footnote":   { "value": "13px" },
      "caption":    { "value": "12px" }
    }
  },
  "spacing": {
    "1":  { "value": "4px"  },
    "2":  { "value": "8px"  },
    "3":  { "value": "12px" },
    "4":  { "value": "16px" },
    "6":  { "value": "24px" },
    "8":  { "value": "32px" },
    "12": { "value": "48px" },
    "16": { "value": "64px" }
  },
  "borderRadius": {
    "xs":   { "value": "4px"    },
    "sm":   { "value": "8px"    },
    "md":   { "value": "12px"   },
    "lg":   { "value": "16px"   },
    "xl":   { "value": "20px"   },
    "2xl":  { "value": "28px"   },
    "full": { "value": "9999px" }
  },
  "motion": {
    "duration": {
      "instant": { "value": "100ms" },
      "fast":    { "value": "200ms" },
      "normal":  { "value": "300ms" },
      "slow":    { "value": "500ms" }
    },
    "easing": {
      "standard":   { "value": "cubic-bezier(0.2, 0, 0, 1)" },
      "decelerate": { "value": "cubic-bezier(0, 0, 0.2, 1)" },
      "spring":     { "value": "cubic-bezier(0.34, 1.56, 0.64, 1)" }
    }
  }
}