visual-design-foundations

Use a modular scale by multiplying a base font size (typically 16px) by a ratio like 1.25 (major third) or 1.333 (perfect fourth) for each step. Define the results as CSS custom properties or Tailwind fontSize entries with paired line heights.

WCAG AA requires 4.5:1 for body text, 3:1 for large text (18px+) and UI components, while AAA requires 7:1 for normal text. You can verify ratios programmatically by computing relative luminance from hex colors and comparing foreground against background.

Define semantic color tokens on :root for the light theme, then override them under a [data-theme="dark"] selector. A React theme context can toggle the attribute and respect the prefers-color-scheme media query for system-based switching.

The 8-point grid defines all spacing values as multiples of 8px (with 4px for fine adjustments), creating consistent vertical rhythm and alignment. It is implemented as a spacing token scale like --space-1 through --space-16 in CSS custom properties.

OKLCH provides perceptual uniformity, meaning equal lightness steps look equally different to the human eye, unlike HSL where perceived brightness varies by hue. This makes generated color scales more consistent across different hues.

Use font-display: swap in @font-face rules so fallback text renders immediately, and preload critical woff2 files with a link preload tag. You can also define a fallback font with size-adjust and ascent-override to match the custom font's metrics.