Sample project card
Surface, border, shadow, radius, type, and motion — every value on this card comes from a token. Hover to feel the elevation change.
Warm pastels, crisp surfaces, soft motion. Two token layers: named color sets (primitives) that never change, and semantic tokens that remap between light and dark. Click any swatch to copy its hex.
Figma naming: Blush/500, Oat/100, …
Pastel steps (100–300) are fills behind dark text; 600–700
are the accessible text steps on light backgrounds.
Components only use these — never raw palette values. Toggle the theme above and watch them remap.
IBM Plex Sans across display, headings, and body (700 for display/bold, 600 for headings), with IBM Plex Mono for accents. Body line-height 1.6; headings 1.15 with −2% tracking.
4px base grid. Use the scale — never arbitrary values.
Soft corners, warm-tinted shadows. Elevation is subtle — crisp beats floaty.
Buttons, tags, and a project card assembled purely from semantic tokens.
Surface, border, shadow, radius, type, and motion — every value on this card comes from a token. Hover to feel the elevation change.