Color

Color

• Cream on the dark greys. Canvas is near-black, canvas oklch(14.5% 0 none). Panels are panel oklch(20.5% 0 none). Type is an off-white with a little cream, type oklch(96.8% 0.009 84.6). Body is body oklch(65.2% 0.013 259.8). The grey is cool, like a work shirt, not a pure chip. Not stone. Not olive walls.

  114 Oak StreetLeak · dispatched

• Electric blue is the brand. accent oklch(55.8% 0.188 264.4) is Thorbis. Identity, focus, the one accent. It can mark a selected row or a focus ring. It is not every heading. It is not a wash on a quiet panel. Greys still carry the interface.

  7:30114 OakLeak8:1522 PineNo heat

• Olive and forest are extras. Soft warm olive olive oklch(47.9% 0.05 115.3) and forest forest oklch(38% 0.052 147.2) are sitting in the kit because I like them. A quiet badge, a bit of fun. They are not success. They are not “on-site.” Do not build a status system out of them. They do belong on a 16px place mark. Quiet. After the word, not before.

  oliveforest

• Pumpkin and burnt are extras too. Burnt pumpkin pumpkin oklch(59.4% 0.152 47.5) and burnt red burnt oklch(49.6% 0.143 34) are the same idea. Subtle, or just fun. The sponsor heart can be burnt. A warning does not have to be pumpkin. Do not invent a second brand with them.

  pumpkinburnt

• Perceptual tokens. Author color in OKLCH. Lightness is the first lever for contrast. Chroma and hue stay stable across a ramp. Ship the token as oklch(), not hex. On a swatch, the fill is the color. The type is off-white or off-black, whichever reads. One hue, many lightnesses.
• Greys work. Color is a guest. Most of the product is dark grey and a little cream. Brand blue is the guest that matters. Status is locked: success is shadcn green success oklch(62.7% 0.17 149.2), error is shadcn red error oklch(62.6% 0.193 23), info is shadcn blue info oklch(62.3% 0.188 259.8), warning is Shopify amber warning oklch(82.7% 0.171 80.5). Loading is cream busy oklch(96.8% 0.009 84.6) and it pulses. Olive is not success. Burnt is not error. They mark a copy, a keep, a failed save. They do not paint the board.

  CopiedFailedOverdueQueued

• System first. Light if we can’t tell. Default is System. If the OS will not say, we fall back to Light. Dark is always a choice, so is Light, so is System. All three stay visible. Do not mechanically invert a palette. Retune chroma and recheck every pair. One hatch on the root. No flash of the wrong morning.
• Theme generation is semantic. Reduce theme inputs to base, accent, and contrast. Derive surfaces, text, and controls. Electric blue is an input, not the color of the chrome.
• One brand, not six meanings. Electric blue is the brand. If it is also every heading, it stops being the brand. Give the second use a grey.
• Lightness, chroma, hue. We work in OKLCH. Lightness is whether you can read it. Chroma is how loud. Hue is which color. Fix a failing pair on lightness. Saturating it is a costume. Cream sits around hue 85. Accent around 264. Canvas has no hue. Full law: color theory.
• Warm cream on a cool void. Type is warm. The void is achromatic. Body grey is cool. Accent is cool blue and points. Do not warm the canvas to match the cream. Do not cool the type to match the blue. Light is a retune of lightness, not an invert.
• Quieter than 60 / 30 / 10. Canvas is the field. The sheet is the work. Accent is a pointer, not ten percent of the screen. A wash, a blue rail, a rainbow of node types: fail. Status hues are reserved words, not a triad. Showcase uses the same palette. No teal-and-orange grade.
• Chrome likes soft color. Place marks, menu icons, command glyphs may carry olive olive oklch(47.9% 0.05 115.3), forest forest oklch(38% 0.052 147.2), pumpkin pumpkin oklch(59.4% 0.152 47.5), burnt burnt oklch(49.6% 0.143 34), or accent mixed with marker until it sits with those. Phosphor Regular, 16px at rest. Fill when this is the place. The word stays cream or body. Only the mark is tinted. Selected fills the mark and lifts the word, not a blue wash. Directional marks (back, next, send) flip in RTL. Nudge a play triangle or a chevron in a circle when geometry lies. D-020. Do not grey every icon to look serious. Do not candy them. You notice the hue after you read the word. If the icon shouts first, drop chroma.
• Outline at rest. Fill when this is the place. Still icons stay Phosphor. Regular is the default. Fill marks the current place on a dock, a tab, a rail. Do not fill every glyph to make them “bold.” Morphicons only when the mark itself is the state (idle → loader → check). One SVG, currentColor, states from CSS. D-020.
• Prefer a preference. When the work varies person to person, let them change it. Theme, density, this list, saved views, default place, pinned places. Persist it. The default must still be complete. They may not rewrite the inverted L, the tokens, or the words. No hex picker. No display options on Arrive. A shared invoice does not wear their Light theme as the document. D-015.
• Prefer a mark. Buttons do not wear a label unless the action would be guessed wrong without it. Search, theme, command, close, back, overflow: a 16px Phosphor mark in a circle. A commit keeps a word when it is destructive, when two commits sit together, when the mark is not a household verb, or when it is the one action on a Guided view. Save invoice. Cancel job. A value chip stays a word. Every icon-only control has an accessible name, and a title on a mouse. Mystery meat is a defect. D-016.