Lookbook

Every section below renders straight from the Saydee design tokens in packages/ui/theme.css. Edit a token there and this page changes live.

Type scale

--text-meta

Saydee reads your screen aloud, plainly.

--text-body

Saydee reads your screen aloud, plainly.

--text-transcript

Saydee reads your screen aloud, plainly.

--text-title

Saydee reads your screen aloud, plainly.

--text-heading

Saydee reads your screen aloud, plainly.

--text-display

Saydee reads your screen aloud, plainly.

--text-hero

Saydee reads your screen aloud, plainly.

Color roles

--color-surface

--color-surface-raised

--color-surface-brand

--color-ink

--color-ink-soft

--color-border

--color-primary

--color-primary-hover

--color-accent

--color-presence

--color-focus

--color-on-primary

--color-success

--color-error

--color-warning

--color-info

--color-neutral

--color-success-surface

--color-error-surface

Paired roles

Continue--color-on-primary text on --color-primary

--color-focus ring on keyboard focus

Spacing

--space-0

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-8

--space-10

--space-12

--space-16

--space-20

--space-24

Radii

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-2xl

--radius-pill

Shadows

--shadow-sm

--shadow-md

--shadow-lg

--shadow-overlay

Motion

Hover or focus a sample. The theme's global reduced-motion rule collapses every transition to a 60ms opacity fade when the OS setting is on — try it with your system's reduce-motion toggle.

--dur-fast / --ease-out

--dur-base / --ease-out

--dur-slow / --ease-in-out

--dur-breath / --ease-in-out

Marketing components

SiteHeader — see page chrome above

SiteFooter — see page chrome above

Hero — not yet built

Section — not yet built

CTA — not yet built

Prose block — not yet built