Wynter AI Panel

Surfaces

paper

--paper

page ground

paper-2

--paper-2

raised / callout

paper-3

--paper-3

sunken / input

Ink

ink

--ink

body + headings

ink-2

--ink-2

secondary

ink-3

--ink-3

disabled / markers

ink-4

--ink-4

hairlines / faintest

Brand & inverted

yellow / on-yellow

#FFDE00

Ink on yellow, never white. This pair is hard-coded in both themes because yellow only works with dark text.

invert-bg / fg

$1.10

Stays dark in both themes on purpose — a headline stat block whose ground flipped to near-white would make the yellow figure invisible.

yellow

--yellow

brand-primary

yellow-pale

--yellow-pale

brand-pale wash

accent

--accent

their tag colour

btn-bg

--btn-bg

button ground (flips)

onYellow yellowSame ground. The dark one is the CTA treatment — it matches wynter.com’s own .button.

small default big outline

Semantic

status-positive

--status-positive

pass fill

status-negative

--status-negative

fail fill

good

--good

pass / healthy

warn

--warn

attention

crit

--crit

failure / blocked

info

--info

neutral note

Kept deliberately separate from the yellow accent, so “needs attention” never collides with “brand”.

Message Layers ramp

Clarity

What is it?

Relevance

Is it for me?

Value

Do I want it?

Differentiation

Why you?

One hue ramp rather than four unrelated colours — a funnel that collapses should read as draining, not as a set of categories.

Type scale

Eyebrow · 0.72rem · +0.14em

Display

Hero headline

Section heading · 16.5px 800

Body copy at 15.5px with 1.6 line height, IBM Plex Sans — the face wynter.com actually ships. Kept near 65 characters wide so running text stays readable.

Secondary copy at 13px in ink-2, for notes and captions.

IBM Plex Mono · 12.5px

Radii & the hatch

radius-xs · 2px

radius-md · 8px (default)

hatch highlight

There is no radius token above 6px. If a rounded-xl appears in a diff, it’s off-brand.