Foundations

The visual language of Plex UI is built on three foundational layers — every component, demo, and example in these docs sits on top of them.

• Design tokens — the full set of var(--plex-*) CSS custom properties (spacing, radii, shadows, durations, easings) that drive all visual styling. Use these in your own components to stay consistent with the system without hardcoding values.
• Colors — primitive color palettes exposed as CSS variables, designed to work seamlessly with light and dark modes. Reference the semantic tokens (text-primary, bg-surface, etc.) instead of raw palette values.
• Typography — the heading and text scale (heading-5xl → text-3xs) with size, weight, line-height, and tracking baked in. Exposed to Tailwind as text-* and heading-* utilities.

Plex UI components consume these foundations directly, so anything you build alongside the system inherits the same visual rhythm by reusing the same tokens.