Customization

husk uses CSS custom properties for all design decisions. Override them on :root to theme everything at once.

Quick theming

Add a <style> block after the husk CSS import to override tokens:

<link rel="stylesheet" href="husk.css">
<style>
  :root {
    --husk-accent: #e11d48;
    --husk-radius: 8px;
    --husk-font: "Inter", sans-serif;
  }
</style>

That's it. Every component that uses these tokens will update automatically — buttons, links, focus rings, progress bars, switches, and more.

Colors

The color system uses a small set of semantic tokens. Each semantic color has three variants: the base, a light background (-bg), and a dark foreground (-fg).

Core

Borders

Semantic colors

Typography

Override the font to use a custom typeface:

:root {
  --husk-font: "Inter", -apple-system, sans-serif;
  --husk-font-mono: "JetBrains Mono", monospace;
}

Shape & Radius

Want fully rounded? Set all to the same value:

:root {
  --husk-radius: 9999px;
  --husk-radius-sm: 9999px;
  --husk-radius-lg: 9999px;
}

Want sharp corners?

:root {
  --husk-radius: 0;
  --husk-radius-sm: 0;
  --husk-radius-lg: 0;
}

Shadows

Disable all shadows:

:root {
  --husk-shadow-sm: none;
  --husk-shadow: none;
  --husk-shadow-md: none;
  --husk-shadow-lg: none;
}

Motion

For reduced motion or no transitions:

:root {
  --husk-ease: 0ms;
}

Dark mode

husk respects prefers-color-scheme: dark automatically. All tokens are redefined in the dark media query — you don't need to do anything.

To override dark mode colors specifically:

@media (prefers-color-scheme: dark) {
  :root {
    --husk-accent: #f472b6;
    --husk-bg: #0f0f0f;
  }
}

To force a specific mode regardless of system preference, set the tokens explicitly on your page and disable the automatic detection with color-scheme:

/* Force light mode */
:root {
  color-scheme: light;
}

/* Force dark mode */
:root {
  color-scheme: dark;
  --husk-bg: #191919;
  --husk-fg: #ffffffcf;
  /* ... override all dark tokens ... */
}

All tokens

Complete list of every --husk-* custom property.