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

HTML - no build step

Fastest path: link the compiled CSS and copy markup from ds-check.html.

<link rel="stylesheet" href="my-design-system/dist/my-design-system.min.css" />
<header class="my-header">
  <nav class="my-container">…</nav>
</header>
<button class="my-btn">Primary</button>
<button class="my-btn my-btn--outline">Outline</button>

All tokens are CSS custom properties under your prefix - change one and the whole system follows. See CSS and Tokens.

Dark mode (one attribute)

<html data-theme="dark">

Neutrals invert, brand colors stay. No JS required.

JS only when needed

Accordion, carousel, tooltip work with zero JS. For modal/drawer/tabs add ani.js (~2 KB):

<script src="my-design-system/ani.js"></script>
<button data-my-toggle="#my-modal">Open</button>
<div id="my-modal" class="my-modal">…</div>

Next: React · Download

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.