Foundations
Foundation sheets
The visual sheets behind the tokens: how the colors are built, the type specimen, the space and corner scale, elevation and the motion vocabulary — each live, in both themes.
Colors · Type · Space and elevation · Icons · Motion
Colors
Neutral ramps
One ramp per theme on the 1.19.0 anchors, with the role each step plays.Open on its own ↗User accent
Lime by default. Text, ring and label are derived, so any accent holds AA.Open on its own ↗Wayfinding palette
18 swatches for projects, clients and the accent, plus --bone. --ink on all.Open on its own ↗Billing zones and priority
Four fixed zone hues; priority as four strengths of one neutral.Open on its own ↗Focus
A 2 px --accent-ring outline at 2 px offset, 3:1 for any accent. Inputs add the 3 px --accent-halo.Open on its own ↗Type
Type styles
Eleven styles on eight sizes plus the big number, in Bricolage Grotesque and Inter.Open on its own ↗Big number
One big-number style that takes 15% of its card's width, from 28 to 46 px. Always tabular.Open on its own ↗Space and elevation
Elevation levels
Flat by default. A shadow only for things that float: level 1 raised, level 2 the dialog.Open on its own ↗Glass
One recipe used twice: the brand-tinted top bar and the floating timer, both at a 16 px blur.Open on its own ↗Z layers
Named --z-* layers replace the bare numbers. The dialog uses the browser's top layer.Open on its own ↗Icons
Icon set
52 glyphs on the 20 px grid at a 1.75 stroke. Same names as 1.19.0; sizes 16, 20, 24.Open on its own ↗Motion
Curves and durations
All four 1.19.0 curves kept. cubic-bezier(0,0,0,1) is the signature.Open on its own ↗Hover and press
Point and press. Cards lift 9, buttons lift 1 and press .97, icon buttons scale 1.08 and press .86.Open on its own ↗Reduced mode
[data-motion=reduced] stills movement and keeps fades. The card lift is the one motion kept.Open on its own ↗HeyGoal design system 0.6.0 · generated from tokens.json and the component CSS in
design-system\HeyGoal design system · works offline, open any page in a browser.