Dark-first design tokens in AtroUI
How AtroUI’s dark-first tokens work: black canvas, brand blue #0b7bff, glass surfaces, Outfit, and how to override them in atroui/globals.css.
Most “dark mode” systems are light themes with an invert toggle. AtroUI is dark-first: the default canvas is near black, type and surfaces are designed for that canvas, and light is the exception, not the starting point.
That framing matters for product UIs that stay dark for hours (dashboards, creator tools, AI workspaces). You are not fighting a light-first token map every time you ship a panel.
The visual system in one pass
Canvas near black. Brand blue at #0b7bff (and the matching --brand CSS variable). Cyan mist accents. Glass panels via utilities like ms-panel / md-glass. Rounded-full CTAs that match the docs site.
Display type expects Outfit exposed as --font-outfit. Sans and mono fall through the same token sheet so marketing pages and app chrome share one rhythm.
Where tokens live
Tokens live in atroui/globals.css: CSS variables under :root and .dark. Host apps import that stylesheet once in the root layout. You do not need a separate Tailwind theme file just to use the catalog tokens.
Components consume those variables. Override the variables and the catalog restyles without rewriting every section.
Customize without forking the catalog
After importing globals, override --brand and related neutrals in your own CSS. Prefer small, intentional overrides over a full fork until you know which tokens you actually change.
.dark {
--brand: oklch(0.62 0.2 255);
--background: oklch(0 0 0);
--primary: oklch(0.99 0 0);
--primary-foreground: oklch(0 0 0);
--font-sans: var(--font-outfit);
}Brand chrome vs visual tokens
Visual tokens control color and type. Product chrome (logo wordmark, default SEO name, mailto) resolves through getBrand(). Keep those concerns separate: restyle the canvas with CSS variables; rename the product with env or props.
More on chrome: Rebranding with getBrand(). Token map and theming notes: Theming docs. Brand assets: Brand kit.
Why this helps shipping
A dark-first token sheet reduces decision fatigue. New sections inherit the same black canvas, brand accent, and glass language, so marketing and app surfaces feel like one product instead of a collage of kit defaults.
For the longer argument, see Why dark-first design systems age better.