A composed frame for expressive detail. Layered dark surfaces, softly lit controls and quiet typography create depth while giving colour, shape and movement room to be noticed.
Search every component and system from one place. Opens with ⌘K and remembers what you picked last.
Select a type to highlight it in the card above. Select again to clear.
A panel is a step lighter than what it sits on, at 16px. No outline. Depth comes from the surface, not from a line around it.
A selected or pressable chip gets a white 6–8% fill, a one-pixel inset highlight on its top edge and a tight drop shadow. Never a border.
Nav, tabs, actions and arrows are fully rounded, 30–36px tall, 13px medium text. Square corners are for content, round ones for controls.
Near-white for what you read, a mid grey (#979797) for everything else. Labels are 11px and quiet, never uppercase.
The accent is a single blue, used for links, focus and the one call to action. Everything else is greyscale.
Calculated from this system’s colours in both modes. These are contrast checks, not an overall accessibility score or certification.
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
Normal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text: AA ≥ 3:1, AAA ≥ 4.5:1 (24px regular or approximately 18.67px bold). Non-text indicators: AA ≥ 3:1. Ratios are displayed rounded down; results use full precision.