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-raisedCard / raised surface
• --ag-color-surface-defaultPage background
• --ag-color-surface-loweredRecessed / darker inset
• --ag-color-surface-borderDefault border color
• --ag-color-text-normalBody text
• --ag-color-text-quietSecondary / muted text
• --ag-color-text-linkHyperlinks
• --ag-color-focusFocus ring color
• --ag-color-brand-fill-quietBrand fill — subtle
• --ag-color-brand-fill-normalBrand fill — default
• --ag-color-brand-fill-loudBrand fill — primary CTA
• --ag-color-brand-border-normalBrand border
• --ag-color-success-fill-loudSuccess state fill
• --ag-color-success-on-normalSuccess text on tint
• --ag-color-warning-fill-loudWarning state fill
• --ag-color-warning-on-normalWarning text on tint

Typography

Font Families

• Special Elite — display & headings--ag-font-family-headingalias: --font-display, --font-heading
• Work Sans — body & UI text--ag-font-family-bodyalias: --font-body
• Courier New — code & mono labels--ag-font-family-codealias: --font-mono
• Patrick Hand — handwritten annotations--ag-font-family-longformalias: --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~10pxBelow hard floor — do not use
• Aa — 2xs--ag-font-size-2xs~11pxBelow hard floor — do not use
• Aa — xs--ag-font-size-xs~13pxHard floor — labels, annotations only
• Aa — s--ag-font-size-s~14pxBelow 16px — captions, meta only
• Aa — m--ag-font-size-m16pxBase — minimum for body copy
• Aa — l--ag-font-size-l~20pxSubheadings, emphasized body
• Aa — xl--ag-font-size-xl~25pxh3 / section headings
• Aa — 2xl--ag-font-size-2xl~32pxh2 / page section titles
• Aa — 3xl--ag-font-size-3xl~40pxh1 / hero headings
• Aa — 4xl--ag-font-size-4xl~51pxDisplay — very large
• Aa — 5xl--ag-font-size-5xl~64pxDisplay — 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-3xs3xs2px
• --ag-space-2xs2xs4px
• --ag-space-xsxs8px
• --ag-space-ss12px
• --ag-space-mm16px
• --ag-space-ll24px
• --ag-space-xlxl32px
• --ag-space-2xl2xl40px
• --ag-space-3xl3xl48px
• --ag-space-4xl4xl64px

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-ss2px offset, no blur — tight cel
• --ag-shadow-mm3px offset, no blur — default cel
• --ag-shadow-ll4px offset, no blur — lifted cel

Border Radius

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

• --ag-border-radius-ss — 2px
• --ag-border-radius-mm — 4px
• --ag-border-radius-ll — 8px
• --ag-border-radius-pillpill — 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.