Catalyst

Foundations

The Catalyst design language

Every token below is defined once in src/styles.css and consumed everywhere. Components never hardcode color, radius, shadow or timing.

Typography

Poppins for display and UI. One family, tight tracking on headings, generous leading on body.

Display XL

text-5xl sm:text-6xl font-semibold tracking-tightHero statements

Display L

text-4xl font-semibold tracking-tightSection headings

Heading

text-2xl font-semibold tracking-tightPage titles

Subheading

text-lg font-semiboldCard titles

Body

text-base leading-relaxedParagraphs

Small

text-sm text-muted-foregroundSecondary text

Eyebrow

text-[11px] uppercase tracking-[0.28em] text-muted-foregroundSection labels

Color

Midnight navy canvas, spectrum accent (blue → violet → teal). All values are OKLCH and theme-aware.

background

--background

surface

--surface

surface-2

--surface-2

primary

--primary

violet

--violet

teal

--teal

amber

--amber

destructive

--destructive

muted-foreground

--muted-foreground

foreground

--foreground

Spectrum gradient

--gradient-spectrum

Veil (ambient wash)

--gradient-veil

Spacing & grid

4px base unit. Layout uses a 12-column grid, max width 1280px, 24px gutters (16px on mobile).

2xs4pxp-1
xs8pxp-2
sm12pxp-3
md16pxp-4
lg24pxp-6
xl32pxp-8
2xl48pxp-12
3xl80pxp-20
section112–176pxp-28–44

12-column grid · content max-w-7xl · section rhythm py-28 → py-36

Elevation, radius & glass

Depth is expressed with soft, wide shadows and a spectrum glow reserved for primary moments.

Flat — level 0/1

Inline content, list rows

Raised — level 2/3

Cards, popovers, sheets

Floating — level 4

Primary CTA, AI insight

sm

12px

md

16px

lg

20px

xl

24px

2xl

28px

3xl

36px

full

pill

Glass recipe

background: color-mix(in oklab, var(--surface) 55%, transparent);
backdrop-filter: blur(18px);
border: 1px solid oklch(1 0 0 / 8%);

Motion

Motion explains change; it never decorates. Entrances ease out, exits ease in, nothing bounces.

instant100msState flips: checkbox, toggle
fast200msHover, focus, button press
base300msCard lift, dropdown, tooltip
slow600msPanel and drawer transitions
cinematic900msScroll reveals, hero choreography
  • Entrance easing: cubic-bezier(0.16, 1, 0.3, 1)
  • Standard easing: cubic-bezier(0.4, 0, 0.2, 1)
  • Scroll reveals: 28px rise + fade, staggered 100ms
  • Ambient loops (drift, float, spin) run 7–40s and never compete with content
  • All motion collapses under prefers-reduced-motion

Dark & light mode

Dark is the default canvas. Light mode keeps the identical spectrum accent on a near-white surface.

Working

Toggle the theme in the header — every token remaps, no component changes.

Accessibility rules

  • Body text meets WCAG AA (4.5:1); large display text meets 3:1 in both modes.
  • Never use color alone — status is always color + label (and icon where possible).
  • Focus is always visible: 2px ring in --ring with a background offset.
  • Tap targets are at least 44×44px; icon buttons carry an aria-label.
  • One <main> per screen, one h1, no skipped heading levels.
  • Live regions announce AI activity and completion states.
  • Every flow is completable with keyboard only; modals trap and restore focus.