Skip to main content
The CSS export generates custom properties (CSS variables) with automatic dark mode support.

​
Output format

:root {
  --color-brand-primary: #36AA08;
  --color-brand-secondary: #1E5B0F;
  --color-neutral-50: #FAFAFA;
  --spacing-page-gutter: 16px;
  --spacing-card-padding: 24px;
  --radius-card: 8px;
  --font-size-body: 16px;
  --font-weight-bold: 700;
  --font-family-sans: "Inter";
  --shadow-card: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  --opacity-disabled: 0.4;
  --duration-fast: 100ms;
  --easing-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-index-modal: 50;
}

[data-theme="dark"] {
  --color-brand-primary: #5DC731;
  --color-brand-secondary: #BAF59B;
  --color-neutral-50: #0A0A0A;
}
Only tokens with different dark values get a [data-theme="dark"] override. Non-color tokens are the same in both modes.

​
Configuration

​
Prefix

The default prefix is --. You can customize it per design system:
PrefixOutput
-- (default)--color-brand-primary
--ds--ds-color-brand-primary
--humic--humic-color-brand-primary

​
Naming convention

ConventionOutput
kebab-case (default)--color-brand-primary
camelCase--colorBrandPrimary
snake_case--color_brand_primary
Configure these in your design system settings or pass them as query parameters to the export API.

​
Usage in code

.card {
  background: var(--color-neutral-50);
  padding: var(--spacing-card-padding);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

​
Dark mode

The CSS export uses [data-theme="dark"] for dark mode. Add this attribute to your root element to switch themes: 
<html data-theme="dark">
Or toggle it with JavaScript: 
document.documentElement.setAttribute("data-theme", "dark")