Global system

Design controls, not patchwork.

Change the global tokens here, preview the site, then copy the final CSS into the token file when the direction feels right.

Live site preview

The frame receives the same token values, so you can judge the full page instead of guessing from samples.

Sample card

Radius, spacing, and type move together.

Text link

Dark theme

Check contrast before it touches pages.

Button

Brand pink

Magenta should feel confident, not loud.

Start brief

CSS override

Use this as the clean handoff. When approved, we move these values into the matching token names.