AniStyl
DemoExamplesDocsPricingAccountCreate yours
DocumentationAniStyl Docs
Getting Started
Overview
Frameworks
HTML React Next.js Vue Other
Workflow
Import from URL Import from Figma Customize Download Regenerate
Developer
Tokens Components SCSS CSS Layout & grid Utilities Fonts Dark mode CLI Agent Skill
Support
Licence & support
Open builderFree · live preview · no account

CSS - no build step

dist/my-design-system.min.css is complete: tokens (CSS vars), base, your selected components, utilities, layouts. Link it.

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

Customize without SCSS: override any token in your own CSS:

:root { --my-colour-primary: #635bff; }

See Tokens for variable names and Dark mode for data-theme="dark".

AniStyl

Generate a design system that is actually yours. MIT licensed output - we could disappear tomorrow and your code keeps working.

ProductThe builderExamplesDocsComponentsPricingQuestions
Supportsupport@anistyl.comYour account & buildsDonate - keep it running
LegalTerms of ServicePrivacy PolicyRefund Policy
This site runs on its own generated design system - fluid scales, an HSL colour map, one accent.