Theme Studio

Hydrateless is themed entirely through CSS variables, so a handful of tokens restyles every component at once. Adjust the controls below and watch real components update live, then copy the generated CSS into your global stylesheet to apply it across your app.

Primary colorBorder colorRadius

8px

Base size

16px

FontSystemGeometricSerifMonoModeLightDark

Project settings

Preview your theme across real components.

New Active

Workspace name

Enable notifications

Your changes preview live as you edit tokens.

Tabs, accordions, and the rest pick up your tokens too.

Drop this into your global stylesheet to apply the theme:

:root {
  color-scheme: light;
  --hl-primary: hsl(217deg 91% 60%);
  --hl-primary-hover: hsl(217deg 91% 68%);
  --hl-primary-active: hsl(217deg 91% 76%);
  --hl-primary-fg: #000000;
  --hl-primary-subtle: hsl(217deg 100% 95%);
  --hl-primary-subtle-fg: hsl(217deg 91% 20%);
  --hl-ring: hsl(217deg 91% 60%);
  --hl-focus-ring: var(--hl-border-width-2) solid var(--hl-ring);
  --hl-focus-shadow: 0 0 0 3px color-mix(in oklab, var(--hl-ring) 30%, transparent);
  --hl-border: #e2e8f0;
  --hl-border-strong: #e2e8f0;
  --hl-radius-xs: 2px;
  --hl-radius-sm: 4px;
  --hl-radius-md: 8px;
  --hl-radius-lg: 12px;
  --hl-radius-xl: 16px;
  --hl-radius-2xl: 20px;
  --hl-text-base: 16px;
  --hl-text-xs: 12px;
  --hl-text-sm: 14px;
  --hl-text-lg: 18px;
  --hl-text-xl: 20px;
  --hl-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}