Design Systems

Design Systems Cheat Sheet

Covers design tokens, component API patterns, governance and versioning practices, and documenting components with Storybook for a scalable system.

What Are Web Components?

Web Components are a set of native browser APIs — Custom Elements, Shadow DOM, and HTML Templates — that together let you define a reusable, encapsulated HTML…

What Color Contrast Ratios Does WCAG Require and Why?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold) against its background, because insufficie…

What Is the Atomic CSS Approach?

Atomic CSS is a styling methodology where each class maps to exactly one CSS declaration — like `.mt-4 { margin-top: 1rem; }` — so UI is composed by combining…

What Is Utility-First CSS and How Does It Differ From Semantic CSS?

Utility-first CSS is a workflow where a framework like Tailwind provides a large, pre-defined library of small utility classes (spacing, color, layout, typogra…