Guides & Insights

WCAG contrast explained: AA, AAA, and when it actually matters

WCAG contrast ratios are widely cited and widely misunderstood. Here is what the numbers mean, where the standard falls short, and how to use contrast checking in real design work.

CMYK to HEX: understanding color spaces for print and screen

Sending a brand color to print? The HEX value is only the starting point. Here is what actually happens when a color moves between screen and press — and how to control it.

Tints, shades, and tones: building a color scale that works

Figma variables, Tailwind palettes, design tokens — all of them need a color scale underneath. Here is how to build one that stays perceptually consistent from step to step.

Modular scale: building a typography system that makes sense

Ad-hoc font sizes — 13, 15, 18, 22, 31 — feel arbitrary because they are. A modular scale replaces arbitrary choices with a mathematically derived sequence that produces inherent visual harmony.

Smooth CSS shadows: the multi-layer technique

A single box-shadow looks hard-edged and flat. The multi-layer technique — stacking several shadows at increasing blur and offset — produces the smooth, atmospheric depth that feels natural.

Extracting color palettes from images — a designer's workflow

A well-composed photograph has already solved the hard problem of color harmony. Light, shadow, and material reflectance have done the work — the colors in the image coexist in the physical world, and that relationship carries into the palette. Extraction is not a shortcut. It is a constraint: the image tells you what belongs together, and your job is to assign those colors roles.

Aspect ratios in CSS: from 16:9 to container queries

The aspect-ratio property solved the padding-top hack. But there is more to aspect ratio management than one CSS line — here is the complete picture for responsive layouts.

Print-ready design: bleed, safe zones, and format standards

Getting a file to press without surprises requires understanding three spatial concepts: the trim, the bleed, and the safe zone. Here is how they work and why each number exists.