Design system

Token gallery

Live examples of every surface, brand, and semantic token rendered side-by-side in light and dark modes. See SURFACE_TOKENS.md and TYPOGRAPHY_SPACING_TOKENS.md.

Light mode

Surfaces

bg-background

bg-surface

bg-surface-muted

bg-surface-tint

bg-card

bg-popover

bg-muted

border-border

Brand & semantic

bg-primary

bg-secondary

bg-accent

bg-destructive

bg-brand-500

bg-brand-700

bg-neutral-100

bg-neutral-900

Typography scale

type-eyebrow · kicker

type-h1 · Hero headline

type-h2 · Section headline

type-h3 · Sub-section

type-h4 · Card title

type-body-lg · Lead paragraph for hero and section intros.

type-body · Default paragraph text.

type-body-sm · Secondary paragraph.

type-caption · Meta / footnote.

Buttons

Cards & elevation

Resting card

Uses bg-card, rounded-spynn-md, shadow-spynn-card.

Elevated

shadow-spynn-elevated for hover / modals.

Tinted callout

bg-surface-tint for brand-toned highlights.

Form controls

EmailMessage

Badges & status

PrimarySecondaryMutedDestructiveOutline

Gradients & shadows

bg-spynn-gradient-primary

bg-spynn-gradient-section

shadow-spynn-section

Dark mode