Warm, playful product UI built from DESIGN.md alone

Warm cream backgrounds, oat borders, exact Outfit typography, layered shadows, and playful hover motion now come straight from the written spec instead of a second design language.

Named swatches stay bold and explicit

Matcha, Slushie, Lemon, Ube, Pomegranate, and Blueberry stay available as named colors for dramatic sections and expressive surfaces.

Ink Black

#000000

Text, headings, and strongest contrast surfaces

Pure White

#ffffff

Cards, white buttons, and inverse text

Warm Cream

#faf9f7

Page background and warm canvas

Matcha 300

#84e7a5

Supporting text on dark Matcha sections

Matcha 600

#078a52

Green accent and section backgrounds

Matcha 800

#02492a

Dark Matcha section background

Slushie 500

#3bd3fd

Bright cyan section accent

Slushie 800

#0089ad

Deep teal section accent

Lemon 400

#f8cc65

Soft gold highlight

Lemon 500

#fbbd41

Primary gold swatch background

Lemon 700

#d08a11

Deep amber support tone

Lemon 800

#9d6a09

Dark amber support tone

Ube 300

#c1b0ff

Soft lavender supporting contrast

Ube 800

#43089f

Primary Ube section background

Ube 900

#32037d

Dark Ube support tone

Pomegranate 400

#fc7981

Pink warning and accent moments

Blueberry 800

#01418d

Link and deep blue accent color

Warm Silver

#9f9b93

Secondary text and footnote copy

button

Locked Contract
varianttransparent | white | ghost
sizesm | md | lg

card

Locked Contract
variantdefault | dashed
paddingsm | md | lg

badge

Locked Contract
variantdefault

field

Locked Contract
statesdefault | invalid | disabled

Sharp

--radius-sharp

4px

Ghost buttons, inputs, and compact controls

Standard

--radius-standard

8px

Small cards, images, and links

Badge

--radius-badge

11px

Tag badges

Card

--radius-card

12px

Standard cards and white buttons

Feature

--radius-feature

24px

Feature cards, panels, and inset media

Section

--radius-section

40px

Large section containers

Pill

--radius-pill

1584px

Pill-shaped CTAs

Space 1

1px

Space 2

2px

Space 4

4px

Space 6.4

6.4px

Space 8

8px

Space 12

12px

Space 12.8

12.8px

Space 16

16px

Space 18

18px

Space 20

20px

Space 24

24px

White card on a dark swatch

The layered shadow, oat border, and generous radius keep the card tactile without drifting into a different system.

Display Hero

80px / 600

Sphinx of black quartz, judge my vow.

1.00 line-height, -3.2px tracking, Primary hero headlines.

Display Secondary

60px / 600

Sphinx of black quartz, judge my vow.

1.00 line-height, -2.4px tracking, Supporting display headlines.

Section Heading

44px / 600

Sphinx of black quartz, judge my vow.

1.10 line-height, -0.88px to -1.32px tracking, Section titles.

Card Heading

32px / 600

Sphinx of black quartz, judge my vow.

1.10 line-height, -0.64px tracking, Card titles.

Feature Title

20px / 600

Sphinx of black quartz, judge my vow.

1.40 line-height, -0.4px tracking, Feature titles.

Sub-heading

20px / 500

Sphinx of black quartz, judge my vow.

1.50 line-height, -0.16px tracking, Secondary headings and UI headings.

Body Large

20px / 400

Sphinx of black quartz, judge my vow.

1.40 line-height, normal tracking, Large supporting body copy.

Body

18px / 400

Sphinx of black quartz, judge my vow.

1.60 line-height, -0.36px tracking, Default long-form body copy.

Body Standard

16px / 400

Sphinx of black quartz, judge my vow.

1.50 line-height, normal tracking, Standard body copy.

Body Medium

16px / 500

Sphinx of black quartz, judge my vow.

1.20-1.40 line-height, -0.16px to -0.32px tracking, Medium-weight UI copy.

Button

16px / 500

Sphinx of black quartz, judge my vow.

1.50 line-height, -0.16px tracking, Default button text.

Button Large

24px / 400

Sphinx of black quartz, judge my vow.

1.50 line-height, normal tracking, Large CTA text.

Button Small

12.8px / 500

Sphinx of black quartz, judge my vow.

1.50 line-height, -0.128px tracking, Compact button text.

Nav Link

15px / 500

Sphinx of black quartz, judge my vow.

1.60 line-height, normal tracking, Navigation links.

Caption

14px / 400

Sphinx of black quartz, judge my vow.

1.50-1.60 line-height, -0.14px tracking, Supporting captions and helper text.

Small

12px / 400

Sphinx of black quartz, judge my vow.

1.50 line-height, normal tracking, Small text.

Uppercase Label

12px / 600

Section Label

1.20 line-height, 1.08px tracking, Wayfinding labels.

Badge

9.6px / 600

Badge

1.20 line-height, normal tracking, Badge text.

Outlined inputs use the exact 4px radius and documented control border.

The focus state uses the documented solid 2px blue outline.

Behavior-heavy wrappers reuse the same field chrome instead of inventing a new UI.

Invalid states lean on the spec-approved Pomegranate swatch.

Accessibility comes from Radix; visuals come from DESIGN.md.