Turn Your Website Into a Bespoke SCSS Design System.
Palette + fonts free, full layout Pro where detectable - deterministic extraction from any public URL, Figma, or presets. Tokens, type, space, components and code grounded in your brand.
- 46
- production components
- 15
- 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 24 in the examples.
Open this brand in the builder → See all 24 examples → free · live preview · no account
From brand to system in three steps.
Figma, URL, or preset - pick your path. About five minutes.
Paste a URL, link a Figma file, or start from a preset - live preview restyles as you type.
- Any public URL - palette + fonts free, full layout Pro where detectable
- Figma (Pro) - link + token or Token Exporter plugin
- 24 presets - all free
46 components across 6 groups - buttons to modals to skeletons. Tick what you ship.
- BEM classes under your prefix
- Dark theme + fluid scales included
- Updates live in the preview
ZIP with SCSS, compiled CSS, docs and tokens - MIT, no lock-in.
- Free: 15 comps + view/copy design.md
- Pro $12 once: all 46 + tokens.json + example.html
- Rebuild anytime free at your tier
Stop shipping someone else’s system.
Same button. Same layout. Completely different ownership - compare the code you ship.
You still end up with the same Inter, same rounded-lg.
<!-- Other CSS Frameworks -->
<button class="btn btn-primary rounded-lg">
Primary
</button>
<!-- their tokens, their CDN -->
.bg-primary { background: #3b82f6; }
--bs-primary: #0d6efd;
font-family: Inter, sans-serif;- Recognisably “Other CSS Frameworks” - every site looks the same
- Their scale, their naming, their version upgrades
- You override - they update - you fix
Generated from any public URL / Figma - your palette, your fonts, your rules (where detectable, deterministic extraction).
<!-- Your system - BEM under your prefix -->
<button class="my-btn">Primary</button>
<!-- your tokens, your file -->
--my-colour-primary: #8f0a33;
--my-colour-primary-h: 345;
--my-radius-m: 10px;
--my-step-0: clamp(15px, 1vw, 16px);
.my-btn { background: var(--my-colour-primary); }.my-btn- your prefix, your palette, your scales- Only the 46 components you picked - nothing else ships
- MIT - it’s yours if we disappear tomorrow
Bespoke system, not a starter.
Tokens, type, space, components and code - grounded in your brand via deterministic extraction, not lorem ipsum. Where values aren’t detectable, defaults are kept. Architecture details live in Docs.
Your primary, secondary, neutrals and states as HSL tokens - plus dark theme automatically generated.
Heading + body fonts, fluid clamp() scale, line-heights and weights mapped from your brand.
Fluid space scale, container, 12-col grid and breakpoints - no jumps at breakpoints.
46 production components in 6 groups. Ship only what you tick, BEM under your prefix.
tokens.json for Style Dictionary / Figma, design.md 9-section spec, and clean SCSS + compiled CSS.
Bespoke SCSS system, MIT licensed. No runtime, no lock-in. Change a token and the whole system re-themes. Where URL/Figma values weren’t detectable, defaults were kept.
free tier · pro - one $12 payment · See all variants →
Built for the people who actually ship.
No design system team required.
Ship a bespoke SCSS brand in an afternoon - not a reskinned Bootstrap template.
- No designer required to start
- From your public URL in minutes
- MIT - client work OK
A distinct system per client without rebuilding from scratch.
- Prefix + tokens per brand
- Figma → code hand-off
- One Pro unlock, infinite clients
Generate standards, docs and code in one go - design.md is your spec.
- 9-section design.md
- tokens.json for tooling
- Agent-ready prompt guide
10 brands. One generator.
Same library, ten different products - each a complete system rendered from its own tokens. Browse all 24 →
Four are shown in their generated dark theme - every system ships light + dark. See full gallery →
Why teams switch.
The trade - what you give up with a framework, what you get back.
Other CSS Frameworks
- - 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
Simple pricing
One plan free forever, one payment for everything else. Both MIT licensed - the code is yours forever.
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 - 15 core components, full SCSS source, MIT licensed, no account needed. A free account is optional and saves every system you build for later rebuilds. Pro is a single $12 payment (not a subscription) that unlocks all 46 components and the developer kit. Either way the code lives in your repo - we could disappear tomorrow and your design system keeps working.
My designer works in Figma - can I import their design system?
Yes (Pro). Two paths. Link + token: paste the Figma file URL and a read-only personal access token - we read the file’s styles and frames and prefill everything: every named colour style (success/warning/error matched by name, the rest kept as extra palettes), text styles as fonts, sizes, line heights and letter spacing (H1–H6-named styles pin those exact heading sizes and weights), drop shadows as elevation, corner radii as roundness, auto-layout gaps as the spacing scale, the column grid, breakpoints from your device frames, content width, and the component checklist pre-selected when ≥3 components are matched. Then fine-tune anything in the live preview before you download. It maps the design language onto our components - it doesn’t pixel-copy your component designs. Where values aren’t detectable (e.g. unnamed radii, missing grids), defaults are kept. Plugin (no token): install the free AniStyl Token Exporter plugin and run it inside Figma. It reads your local styles with no network access and exports colours, fonts, spacing, radii, shadows, and breakpoints - paste the JSON into the builder and fine-tune. Components aren’t auto-selected via the plugin, so tick what you need in the Components step.
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.
Ready to turn your website into a bespoke SCSS system?
Paste any public URL, link Figma (Pro), or pick a preset - deterministic extraction, no hallucinated tokens. Where values aren’t detectable, defaults are kept. Free, MIT licensed.