Penpot. A deep violet hero stage where one bright teal button and one teal word ignite an otherwise monochrome canvas.

Primary brand surface — hero background, navigation, dark panels, code/token sidebars, and the product UI shell. Sets the dark-mode identity and creates the canvas against which the teal accent glows

Primary action fill, emphasis word in headlines, active tab indicator, and decorative spark. The single chromatic note — rationed to CTAs, highlights, and one word per headline — making each occurrence feel switched on

Secondary violet for subtle borders, dividers, and accent strokes within the dark panels. A bridge between Deep Space Violet and Bright Teal on the dark canvas

Body text on light surfaces and maximum-contrast borders where the violet would be too soft. Sparingly used — the violet handles most dark roles

Button borders and disabled/secondary control outlines. Slightly heavier than Light Gray — used when a border needs to define a control edge

Hairline borders, subtle dividers, and nav separators on light surfaces. The quietest neutral — present but never demanding attention

Page canvas, light card surfaces, body text on dark surfaces, icon fills. The light-mode workhorse — never pure white, slightly warm to soften the contrast against Deep Space Violet