Quick start

Everything below refers to the ZIP you download from the builder. Your system is generated with your class prefix - the examples use my; substitute your own.

Option A - plain CSS, no build step

<link rel="stylesheet" href="my-design-system/dist/my-design-system.min.css" />
<button class="my-btn">Hello</button>

The compiled CSS in dist/ is complete: tokens, base styles, your selected components and utilities. Typically 6–10 KB gzipped.

Option B - SCSS source (recommended)

Recompile from source so you can change any token or component:

cd my-design-system
npm install          # sass + utopia-core-scss - the only build deps
npm run build:css    # recompiles dist/*.css
npm run watch:css    # rebuild on save

Or import into an existing SCSS setup with this folder on the load path: @use 'my-design-system/main';

Your component documentation ships in the ZIP

Open ds-check.html in a browser: every component you selected, rendered live with your tokens, each with copy-paste HTML. Pro ZIPs also include example.html (a full starter page) and tokens.json (for Figma token plugins and Style Dictionary).

Regenerating

anistyl.config.json in the ZIP is your exact configuration. Rebuilds are free at your purchased tier - reopen your download link and click “Edit & regenerate”.