Quickstart

Get your design tokens into your codebase in three steps.

Prerequisites

A Humic account
Node.js 18 or later

Step 1: Log in

npx @humicdev/cli login

This opens your browser to authenticate. After signing in, your credentials are saved locally.

Step 2: Create a design system

If you already have a design system on Humic, skip to step 3.

npx @humicdev/cli new --template tailwind

Pick your organization and name your design system. The --template flag seeds it with a starter set of tokens — choose from blank, tailwind, bootstrap, or material.

Step 3: Pull tokens

Initialize Humic in your project and pull the tokens:

npx @humicdev/cli init
npx @humicdev/cli pull

This writes your design tokens as CSS custom properties (and optionally a Tailwind config) to your project. You’ll see files like:

humic.config.json        # Project configuration
tokens/variables.css     # CSS custom properties
tokens/tailwind.config.ts # Tailwind theme (if applicable)

Keep tokens in sync

Run watch mode to automatically update files when tokens change:

npx @humicdev/cli sync --watch

Or add a CI check to catch drift:

npx @humicdev/cli sync --check

What’s next?

API Reference

Integrate Humic into your own tools with the REST API.

Export Formats

CSS, JSON (W3C), and Tailwind export options.

AI Agents

Use Humic with Claude Code, Cursor, and other AI coding agents.

Getting Started

API Reference

Export Formats

Integrations

Prerequisites

Step 1: Log in

Step 2: Create a design system

Step 3: Pull tokens

Keep tokens in sync

What’s next?

API Reference

Export Formats

AI Agents

​Prerequisites

​Step 1: Log in

​Step 2: Create a design system

​Step 3: Pull tokens

​Keep tokens in sync

​What’s next?

API Reference

Export Formats

AI Agents

Prerequisites

Step 1: Log in

Step 2: Create a design system

Step 3: Pull tokens

Keep tokens in sync

What’s next?