Guides
Color systems get nerdy fast — and that's the interesting part. Deep dives into APCA, OKLCH, eleven-step scales, and design tokens, written for designers and developers who'd rather understand a thing than just copy it.
APCA vs WCAG 2: A practical guide for designers and design systems
WCAG 2 contrast ratios have been the legal standard for over a decade. APCA is the perceptual contrast algorithm being adopted for WCAG 3. Here's how each works, where they disagree, and how to decide which to design against today.
·12 min read
How to build an 11-step color scale for your design system
Most modern design systems ship 11-step color scales (50–950). The number isn't magic — it's a balance between expressiveness and team cognitive load. Here's where the convention came from, how the lightness curve actually works, and how to avoid the common pitfalls.
·11 min read
OKLCH vs HSL vs HEX: A practical guide to picking a color format
HEX is the universal handoff format. HSL is intuitive but perceptually broken. OKLCH is the new default for design systems — perceptually uniform, predictable in interpolation, and now natively supported in every modern browser. Here's when to use each.
·10 min read
Tailwind color scales explained: How they're built and how to replicate them
Tailwind's default color palette is the most widely-used color system in modern web design. Here's how the scales were constructed (refreshed in v3, expanded with 950 in v3.3, moved to OKLCH in v4), why they work as well as they do, and how to build your own Tailwind-style scale.
·11 min read
Design tokens for Figma: A practical guide to DTCG and Token Studio
Design tokens are the single source of truth between your design system and your codebase. The DTCG format is the open standard for representing them. Token Studio is the most-used Figma plugin for working with token files. Here's how the pieces fit together.
·10 min read