Workflows

Landing Page Design Token Kit

Build colors, accessibility, surfaces, typography, and placeholder content in one session.

1. 1

   Color palette

   Generate OKLab palette and export CSS variables.

   Open tool →
2. 2

   Contrast check

   Verify WCAG AA/AAA on text and UI pairs.

   Open tool →
3. 3

   Glass cards

   Create frosted hero panel CSS.

   Open tool →
4. 4

   Elevation

   Add button and modal shadow tokens.

   Open tool →
5. 5

   Typography

   Preview heading + body font pairings and export CSS.

   Open tool →
6. 6

   Mock content

   Fill features and testimonials with JSON.

   Open tool →