CSS

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:

Prefix	Output
`--` (default)	`--color-brand-primary`
`--ds`	`--ds-color-brand-primary`
`--humic`	`--humic-color-brand-primary`

Naming convention

Convention	Output
`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")

Getting Started

API Reference

Export Formats

Integrations

Output format

Configuration

Prefix

Naming convention

Usage in code

Dark mode

​Output format

​Configuration

​Prefix

​Naming convention

​Usage in code

​Dark mode

Output format

Configuration

Prefix

Naming convention

Usage in code

Dark mode