Stop shipping someone else’s design system.
Bootstrap and Tailwind make every site look the same. AniStyl generates a design system from your brand - and you download the source, forever.
- 42
- production components
- 14
- free, no account
- $12
- launch offer (usually $19)
- MIT
- licensed - it’s yours
One library. Watch -
The same components re-theme themselves every few seconds - live generated CSS, the exact tokens you download. Hover to pause, type your own colour, or browse all 10 in the examples.
Open this brand in the builder → See all 10 examples → free · live preview · no account
Everything Bootstrap gives you.
In your brand.
42 components, generated with your colours, your fonts, your radius, your prefix - pick only what you need, ship nothing you don’t.
free tier · pro - one $12 payment
How it compares
Side by side with Bootstrap and Tailwind - what you give up, what you get back.
Bootstrap / Tailwind
- - Recognisably generic - every site looks the same
- - Their classes, their scales, their naming
- - A framework dependency with version upgrades, forever
- - Ships everything to everyone
- - Type & spacing jump at breakpoints
- - Free, but generic
AniStyl
- ✓ Generated from your brand
- ✓ Your prefix, your palette, your scales
- ✓ You download the source - it’s yours forever
- ✓ Ships only the components you picked
- ✓ Fluid clamp() - smooth at every width
- ✓ Free core · $12 once for everything
Brand in. Design system out.
Three steps, about five minutes.
Colours, Google or custom fonts, heading personality, fluid type & spacing ranges, roundness - and watch the live preview restyle itself as you type.
42 production-grade components - buttons to modals, carousels to skeletons. Tick what you need; the bundle contains nothing else.
Full SCSS source + compiled CSS + docs. The core library is free; all 42 components and the developer kit are one $12 payment. MIT licensed - client work included.
What lands in the ZIP
A complete 7-1 SCSS architecture with your tokens - plus compiled CSS for projects without a build step.
ani-design-system/ ├── main.scss one import, whole system ├── abstracts/ your tokens │ ├── _colours.scss HSL palette → --acme-colour-* + dark theme │ ├── _typography.scss fluid clamp() type scale │ ├── _spacing.scss fluid clamp() space scale │ ├── _effects.scss shadows · motion · layers │ └── _fonts.scss Google / self-hosted / system ├── base/ reset + h1-h6, p ├── components/ only the ones you picked ├── layouts/ container · grid · header · footer ├── utilities/ spacing · colour · type helpers ├── dist/ │ └── ani-design-system.min.css no build step? just <link> it ├── ds-check.html every component, live, with copy-paste HTML ├── ani.js ~2 KB helper - modals, tabs, drawers ├── tokens.json Figma / Style Dictionary export Pro ├── anistyl.config.json regenerate any time - free └── README.md + LICENSE MIT - it's yours
Simple pricing
Start free, upgrade once when you need the full library. Both tiers are MIT licensed - the code is yours forever.
Free
- 14 core components (buttons, cards, forms, tables…)
- Full SCSS source + compiled CSS
- Fluid type & space scales clamp()
- Google Fonts / custom @font-face wiring
- Component docs with copy-paste HTML
- MIT license - client work included
Pro
- All 42 components - modals, drawers, skeletons…
- tokens.json - Figma / Style Dictionary export
- example.html starter page built from your system
- npm build kit (package.json, watch scripts)
- No attribution in the compiled CSS
- Free regenerations - tweak & rebuild from your download link
Questions
The short answers, before you download. Everything else lives in the README that ships inside your ZIP.
Do I need SCSS to use it?
No. The ZIP includes compiled, minified CSS - one <link> tag and you’re styled. The SCSS source is there when you want to customise deeper.
Is it really free? What’s the catch?
The free tier is really free - 14 core components, full SCSS source, MIT licensed, no account needed. Pro is a single $12 payment (not a subscription) that unlocks all 42 components and the developer kit. Either way the code lives in your repo - we could disappear tomorrow and your design system keeps working.
Can I use my own fonts?
Yes - three ways. System font stacks (nothing to load), any Google Font (previewed live in the builder, wired with per-weight imports so one missing weight can’t break the family), or “custom” - we generate the @font-face boilerplate and you drop your .woff2 files into assets/fonts/.
Does it support dark mode?
Yes - every system ships a dark theme generated from your own palette. Add data-theme="dark" to <html> and the neutrals invert: surfaces go dark, text goes light, while your brand colours and button text keep their contrast. Four of the examples are shown in their dark theme. One honest caveat: a near-black primary has nowhere to go on dark surfaces - pick a lighter shade if dark mode matters to you.
Do the components need JavaScript?
Mostly no - the accordion uses native <details> and the carousel is pure scroll-snap. For modal, drawer, dropdown, tabs and toast, the ZIP includes ani.js (~2 KB, no dependencies): add a data-yourprefix-toggle attribute to any trigger and Esc, overlay-click and outside-click are handled. Using React or your own framework instead? Delete the file - the CSS only cares about the .is-open class.
Can I use gradients?
Yes. Every colour token ships as -h/-s/-l parts plus a composite, so gradients compose straight from your tokens - and re-theme automatically when a token changes:
/* brand-to-brand */
background: linear-gradient(135deg,
var(--my-colour-primary), var(--my-colour-secondary));
/* tonal - one brand colour, lightness swept */
background: linear-gradient(180deg,
hsl(var(--my-colour-primary-h), var(--my-colour-primary-s), 55%),
hsl(var(--my-colour-primary-h), var(--my-colour-primary-s), 30%));Drop either into your downloaded SCSS (or use the alpha() helper for fade-to-transparent). The generated components stay flat by default - gradients are a choice you own, not a look we impose.
What if I want to tweak it later?
Two ways, both free. Everything is driven by CSS custom properties in abstracts/ - change a token and the whole system re-themes. Or open “Edit & regenerate” from your download page: it reloads your exact configuration in the builder and rebuilds at the tier you already paid for. You bought the system, not a single compile.