Core building blocks

Foundations

The shared visual language behind every UX4G component — color, typography, spacing, and structure, defined once and applied everywhere.

Color

Primary, semantic, and neutral palettes with contrast ratios and token names.

Type scale, weights, and line heights.

A base-4 spacing scale and responsive grid used across every component.

Shadow levels that communicate hierarchy, depth, and focus.

A consistent SVG icon set with sizing, spacing, and usage rules.

Every color, spacing, type, and radius value as a copyable CSS variable.

WCAG 2.1 AA criteria, keyboard maps, and screen-reader guidance.

Plain-language standards and multilingual content guidelines.