Theme Builder

Tune the two colours a theme is built on, accent and ink, and watch the whole page re-theme. When it looks right, copy the CSS into your own app.css. Changes here stay on this page.

Accent

Your brand colour: buttons, links, focus rings and active states.

Ink

The neutral base: text, borders, surfaces and the off-accent fill.

Form controls
Radius
Button radius
Shadow
Focus ring
Structural
Radius
Shadow
Card border
Surface lift (light)
Surface lift (dark)
Dark depth
Buttons
Select
Radio
Checkbox & switch
Input
Badges
Operational Degraded Tag
Generated CSS

Copy this into the inline <style> from your base template (no build) or your app.css after the kit import (custom build), to make this theme yours. It overrides the kit's default tokens, so no component files change. See the Theming guide for how it works, or the full token reference.

Ink is the kit's themeable neutral (--color-ink-*), defaulting to the zinc look, so re-toning it is just a token override (no rebuild). Your own zinc usage is untouched.