Theme Builder

Tune an accent and gray base 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
Gray
Form controls
Radius
Shadow
Focus ring
Structural
Radius
Shadow
Card border
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.

Cotton UI components are built on the zinc scale, so a non-zinc gray base is applied by remapping those variables.