live token editor
Theme editor
Every component below renders with the active theme's tokens. Tweak any token live with the editor in the bottom-right, then download a complete theme.css.
This page uses real UI components to validate your theme, but cia does not ship a component library. You own your markup and components — cia provides the styling system underneath them.
What you can edit
Color
Paper, ink, surfaces, and borders; action/brand colors; status, feedback, and guide tones; AI and code accents — every color token, light and dark set independently.
Layout
Corner radius, the numbered spacing scale, and blur.
Type
Display, body, and mono font stacks, plus size, weight, and line-height.
Motion
Durations, easing curves, shadows, glows, and z-index layers.
Click Print in the dock to preview how the active theme prints, and edit its Ink/Paper/Rules/Muted palette separately from the screen colors — persists per theme.
Edit any token live in the dock (bottom-right) and watch every component on this page reskin instantly, per light/dark mode. Download a complete theme.css, copy a share link that reproduces your exact edits, or upload an existing theme.css to keep editing it.
Badge & Tag
Status indicators (Badge) and removable labels (Tag).
<Badge status="success" dot>Input
Text fields with focus rings driven by --ai tokens.
<Input invalid />Checkbox · Radio · Switch
Form selections — multi, single-of-many, and instant toggle.
<Checkbox /> <Radio /> <Switch />Alert
System messages — info, success, warning, error.
Heads up.
Saved.
Trial ends in 3 days.
Couldn't process payment.
<Alert status="error" />Card
Containers for grouped content.
Production deploy
Deployed 3m ago by alex. All checks passed in 1m 42s.
Team members
8 collaborators across 3 workspaces. Roles synced from SSO.
Storage used
4.2 GB of 10 GB. Resets monthly on the 1st.
<Card title="…">Tabs
Roving-focus tabs with arrow-key navigation.
<Tabs.Trigger value="…" />Avatar
Initials by default; image when src is provided.
<Avatar name="…" size="lg" />Progress & Skeleton
Loading affordances — determinate progress, indeterminate spinner, shimmer skeletons.
<Progress value={68} />Want to see all eight theme families side by side? Open the theme gallery →