v150 · CSS · Color

Design System Builder

Pick one primary brand color and one accent color. The builder generates a complete set of CSS custom property tokens using alpha(from var(--brand) / N%) for every opacity tier — --brand-10 through --brand-100 — and previews them across real UI components: buttons, alerts, badges, and cards. Copy the generated token block for your own design system.

Token colors

Primary brand color

Accent color

Danger color

Rendering mode

Checking CSS Color 5 alpha() support…

Generated tokens

Buttons

Alerts

Info alert — uses alpha(from var(--brand) / 10%) background

Success alert — uses alpha(from var(--accent) / 10%) background

Danger alert — uses alpha(from var(--danger) / 10%) background

Badges

Brand Accent Danger Muted

Card

Card component

Surface uses alpha(from var(--brand) / 5%) as the background tint.

Generated CSS tokens

/* loading… */

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗