visual-design-foundations

Define primitive tokens for raw values like colors and spacing, then create semantic tokens that reference them by purpose, such as --color-text-primary or --spacing-md. This two-tier approach lets you retheme by changing primitives without touching component code.

Compute relative luminance from RGB values using the WCAG formula, then divide the lighter luminance plus 0.05 by the darker plus 0.05. Body text requires 4.5:1 for AA compliance, while large text and UI components need 3:1.

The 8-point grid is the industry standard, using multiples of 4px or 8px for all margins and padding. Define the scale as CSS custom properties like --space-4 for 16px, then add semantic aliases such as --spacing-stack for consistent component gaps.

Define theme values as custom properties on :root for light mode, then override them under a [data-theme="dark"] attribute selector. A React theme context can toggle the attribute and respect the prefers-color-scheme media query for system defaults.

Yes, the CSS clamp() function scales font sizes smoothly between a minimum and maximum based on viewport width, such as clamp(2rem, 5vw + 1rem, 4rem) for headings. This removes the need for breakpoint-specific font size overrides.

Common issues include relying on color alone to convey meaning, failing contrast requirements, and using arbitrary hex values instead of a generated scale. Use perceptually uniform scales like OKLCH and test palettes with color blindness simulators.