Design dictionary

Color

sRGB

The standard color space most screens have used for decades. All hex values live here. Its gamut is limited: there are colors a modern display can show that sRGB cannot describe.

#4080c0

Red · R64

Green · G128

Blue · B192

P3

A wider color space supported by most modern screens. Allows more vivid colors, particularly greens and reds, that sRGB cannot reach.

sRGB

Display P3

P3 needs a compatible display and browser. Other screens show the sRGB fallback in both circles.

OKLCH

A color space that matches how humans perceive brightness. Unlike HSL, two colors at the same lightness value actually look the same brightness. Useful for generating palettes and accessible color mixes.

HSL · L 65%

OKLCH · L 65%

Lightness · L65%

Every color in a row shares the same L value. Compare the changes in brightness across each row.

Alpha

The transparency component of a color, from fully opaque to fully invisible. An alpha border recedes into the surface beneath it. A solid hex sits on top. The difference is subtle but consistently felt.

Alpha 50%#808080

Alpha50%

Compare an alpha border with solid #808080 on different surfaces.

Semantic token

A color variable named for its purpose rather than its value. --color-border-subtle instead of #e0e0e0. When the value changes, everything using the token updates.

In progressA new idea

Project name

Continue

--color-border-subtle
#e0e0e0

Change --color-border-subtle to update all three borders together.

Contrast ratio

The luminance difference between a foreground and background color. WCAG requires 4.5:1 for body text, 3:1 for large text and UI components.

6.28:1

AA body · PassAA large · PassAA UI · Pass

Text gray level96

WCAG AA: 4.5:1 for body text; 3:1 for large text and UI components.

Tinted neutral

A grey with a slight hue bias. Pure #808080 looks like a placeholder. A tinted neutral feels chosen.

Saturation

How vivid or muted a color is. Brand colors at full saturation in dark mode can vibrate off the screen. Pulling back 20-30% settles them.

Chroma

The OKLCH equivalent of saturation, but perceptually accurate. Reducing chroma for a light tint keeps the color alive. Reducing opacity does the same but turns it grey and lifeless.

Gradient

A transition between two or more colors. In HSL or sRGB, the midpoint often goes grey. Building gradients in OKLCH keeps the colors vivid throughout.

Opacity vs visibility

Two ways to hide an element. Opacity zero still occupies space and receives pointer events. Visibility hidden removes interaction but keeps the space. Worth knowing which you need.

Dark mode

An interface built on dark surfaces. The brightest surface should sit at the top of the layering hierarchy. Light mode tokens rarely translate directly, so every color decision needs rechecking.

Blending

How a layer interacts with what’s beneath it. Multiply darkens, Screen lightens, Overlay does both depending on the base color. Useful for integrating images with colored surfaces and adding depth to illustrations.