Design
Matched on #design-system · works with cursor
Generate light and dark colour tokens from the brand colour hex.
Output CSS custom properties for: page background, raised surface, sunken surface, primary text, secondary text, muted text, hairline, control border, focus ring and the primary button.
Rules:
· Body text must reach 4.5:1 against its background in both themes. Show the ratio next to each pair.
· Don't put the brand colour on large surfaces.
· Dark mode is designed, not inverted: lift surfaces with lightness, not shadows.
:root { /* light */ }
data-theme="dark" { /* dark */ }
Sofia Marquez640 uses