Theme

Colors

Switch the theme with the button at the top and watch the values change. Components use these tokens instead of fixed colors.

Yellow works as a signal: it shows up in details like focus, check, an enabled switch, and the primary button, without taking over the whole screen.

Radii

--radius (0.75rem) is the base. The scale derives from it: xs 4px, sm 6px, md 9px, lg 12px, xl 18px, 2xl 24px. Change --radius and every size follows.

Buttons and fields have their own tokens, --radius-button and --radius-field, both defaulting to var(--radius). Override one to round only buttons (or only fields) without touching the rest:

:root {
  --radius-button: 9999px; /* pill buttons */
  --radius-field: 0;       /* square input, textarea, select */
}

Motion

One set of tokens drives every transition. Two curves set the rhythm: ease-out for entrances and responses, ease-in-out for elements that move. Durations go from 80 to 240ms.

Override

Redefine a token in :root to retune every component at once:

:root {
  --cd-duration-base: 200ms;
  --cd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

For a single component, set the token through a Tailwind arbitrary property in its className:

<Switch className="[--cd-duration-base:300ms]" />

With prefers-reduced-motion: reduce, one block in globals.css sets every duration to 0.01ms and --cd-scale-enter to 1. It sets the same tokens, so keep it after your overrides.

Customize

Want a different palette? Change the values in your globals.css. Here, the yellow accent turns green:

:root {
  --brand: #22c55e;
  --brand-foreground: #15803d;
  --brand-contrast: #052e16;
}