visual-design-foundations

Use a modular scale with ratio-based sizing, defining CSS custom properties from 0.75rem up to 3rem. Pair sizes with appropriate line heights: 1.1-1.3 for headings and 1.5-1.7 for body text, and use clamp() for fluid responsive sizing.

Extend the Tailwind theme configuration with custom fontFamily, fontSize with line heights, color palettes, and spacing values. Map semantic token names like brand colors to hex values so utilities stay consistent across the project.

WCAG AA requires 4.5:1 for body text, 3:1 for large text of 18px or more, and 3:1 for UI components. The enhanced AAA level requires 7:1. You can verify ratios programmatically by computing relative luminance of foreground and background colors.

Define semantic tokens like background, text, and border colors as CSS custom properties on :root, then override them under a [data-theme="dark"] selector. This lets components reference purpose-based tokens that switch values automatically with the theme.

Inconsistency usually comes from arbitrary magic numbers instead of a defined spacing scale, too many font families or weights, and missing semantic tokens. Adopt an 8-point spacing grid, limit fonts to 2-3 weights, and name tokens by purpose rather than appearance.