Design Tokens

Color Palette

Raw numeric scale — lower number = darker. All values are warm-toned for the paper notebook aesthetic. Defined in @layer ag-color-palette.

Semantic Theme Tokens

Defined in @layer ag-theme. These flip automatically when [data-theme="dark"] is applied. Use these in components, never raw palette values.

• --ag-color-surface-raised Card / raised surface
• --ag-color-surface-default Page background
• --ag-color-surface-lowered Recessed / darker inset
• --ag-color-surface-border Default border color
• --ag-color-text-normal Body text
• --ag-color-text-quiet Secondary / muted text
• --ag-color-text-link Hyperlinks
• --ag-color-focus Focus ring color
• --ag-color-brand-fill-quiet Brand fill — subtle
• --ag-color-brand-fill-normal Brand fill — default
• --ag-color-brand-fill-loud Brand fill — primary CTA
• --ag-color-brand-border-normal Brand border
• --ag-color-success-fill-loud Success state fill
• --ag-color-success-on-normal Success text on tint
• --ag-color-warning-fill-loud Warning state fill
• --ag-color-warning-on-normal Warning text on tint

Typography

Font Families

• Special Elite — display & headings --ag-font-family-heading alias: --font-display, --font-heading
• Work Sans — body & UI text --ag-font-family-body alias: --font-body
• Courier New — code & mono labels --ag-font-family-code alias: --font-mono
• Caveat — handwritten annotations --ag-font-family-longform alias: --font-annotation

Font Size Scale

Major Second (×1.125) scale anchored at 1rem (16px). Rule: nothing below 12px hard floor; body copy minimum 16px.

• Aa — 3xs --ag-font-size-3xs ~10px Below hard floor — do not use
• Aa — 2xs --ag-font-size-2xs ~11px Below hard floor — do not use
• Aa — xs --ag-font-size-xs ~13px Hard floor — labels, annotations only
• Aa — s --ag-font-size-s ~14px Below 16px — captions, meta only
• Aa — m --ag-font-size-m 16px Base — minimum for body copy
• Aa — l --ag-font-size-l ~20px Subheadings, emphasized body
• Aa — xl --ag-font-size-xl ~25px h3 / section headings
• Aa — 2xl --ag-font-size-2xl ~32px h2 / page section titles
• Aa — 3xl --ag-font-size-3xl ~40px h1 / hero headings
• Aa — 4xl --ag-font-size-4xl ~51px Display — very large
• Aa — 5xl --ag-font-size-5xl ~64px Display — maximum

Spacing Scale

T-shirt scale multiplied by --ag-space-scale (default 1) for density control. Use these for all margin, padding, and gap values.

• --ag-space-3xs 3xs 2px
• --ag-space-2xs 2xs 4px
• --ag-space-xs xs 8px
• --ag-space-s s 12px
• --ag-space-m m 16px
• --ag-space-l l 24px
• --ag-space-xl xl 32px
• --ag-space-2xl 2xl 40px
• --ag-space-3xl 3xl 48px
• --ag-space-4xl 4xl 64px

Shadows

Hard cel-shadows: offset with no blur, ink-colored. --ag-shadow-blur-scale: 0 collapses all blur to zero. Alias: --shadow-cel → --ag-shadow-s.

• --ag-shadow-s s 2px offset, no blur — tight cel
• --ag-shadow-m m 3px offset, no blur — default cel
• --ag-shadow-l l 4px offset, no blur — lifted cel

Border Radius

Tight squares match the cel/sketch aesthetic. Alias: --radius-cel → --ag-border-radius-s.

• --ag-border-radius-s s — 2px
• --ag-border-radius-m m — 4px
• --ag-border-radius-l l — 8px
• --ag-border-radius-pill pill — 9999px

Legacy Aliases

Defined in @layer ag-theme-overrides. These map the old --paper, --ink, --brand-1, etc. names onto --ag-* semantic tokens. Theme switching propagates through automatically. Prefer --ag-* tokens in new code.