Clear edges.
Quiet character.

Square controls, fine borders and small copper details. Coal has its own visual language without imposing a layout or resetting your application.

Explore typography, motion and status rules →

The palette

Make it yours

Import the CSS once, then override the prefixed variables in your own stylesheet. No Tailwind configuration is needed.

:root {
  --coal-bg: #faf9f6;
  --coal-fg: #24221e;
  --coal-primary: #24221e;
  --coal-on-primary: #faf9f6;
  --coal-brand: #b96b23;
  --coal-border: #d9d5cd;
}

Dark mode

Add the dark class to the document element. The same components inherit the dark tokens. Put the theme on the document when using portaled overlays so they inherit it too.

document.documentElement.classList.toggle("dark", isDark);

Styles that stay in their lane

• All component selectors and custom properties are prefixed with coal.
• No body, heading or button reset is applied to unrelated elements.
• Components accept className and native props for application-specific styling.
• Controls and containers use zero border radius. The circular spinner is a loading symbol.
• Focus, disabled states and reduced-motion behavior are included.