Created as a reference for studying design systems, but flexible enough to serve as a template or a production-ready base for your projects.
Superforma is designed to be both an example and a tool. Learn its structure, adapt it as a template, or use it as a production system.
Explore a complete, reference-level design system to understand how tokens, components, and documentation come together.
Use Superforma as a base template to build your own system faster, with clarity and minimal setup.
Implement Superforma directly in real projects — it’s structured, minimal, and production-ready.
Minimal yet complete, Superforma combines clarity, flexibility, and extendability — everything you expect from a modern design system.
Easy to understand, use, and adapt without clutter.
Built to grow and change as your system evolves.
Generate palettes and themes effortlessly.
Carefully structured tokens for consistency and clarity.
Universal, adaptable components without variant overload.
Built-in token mapping for seamless light/dark.
Designed with modern best practices, ensuring quality and consistency across every detail.
Tested and refined on real websites and products.
Accessibility baked into contrast and interaction.
Superforma includes a flexible Color Builder and a set of semantic tokens.
Build custom palettes and ensure consistency across light and dark themes.
Tokens like fg-accent, bg-subtle, border-strong for clarity and reuse.
Generate scalable palettes
from a base color.
Replace or extend palettes
easily for branding.
Superforma switches to dark automatically using semantic tokens.
Contrast and accessibility remain consistent with no extra effort.
Automatic mapping between light and dark tokens keeps styles consistent across the entire system.
All colors are tuned for accessible contrast, ensuring readability in both light and dark modes.
Components adapt instantly when switching themes, with no extra setup or manual adjustments.
Superforma uses slot-based components, making them flexible, reusable,
and free from variant overload.
One component adapts to many use cases through slots.
Avoids hundreds of variants for small differences.
Predictable, easy-to-maintain structure.
A structured design system file — from tokens and components to frameworks and practical examples.
Colors, typography, spacing, sizes, shadows, and effects.
Modular scales, text styles, and responsive settings.
Layout grids and spacing rules for consistent rhythm.
Palettes built with Color Builder and semantic tokens.
Buttons, forms, cards, navigation, alerts, lists, and more.
Flexible structures for building cards and content blocks.
Auth flows: login, registration, and password reset with different states.
Two schematic wireframes to illustrate real-world composition.
Notes on naming, accessibility, and usage rules.
From the book to the system
Superforma is created as a direct extension of the book “Designing Design Systems”. Every rule, principle, and guideline is applied in practice — ready for you to explore and use.
One-time purchase, lifetime updates. No subscriptions or hidden costs.
All licenses include lifetime updates and use in unlimited projects.
After purchasing through Lemon Squeezy, you will receive a .fig file that you can import into Figma.
No. Superforma is made only for Figma and has no versions for Sketch or Adobe XD.
Superforma is provided as is. It requires no special knowledge to use, and we do not offer technical support.
Yes. You can use the design system for any project, without any restrictions.
Superforma receives periodic updates with improvements and refinements, all included in your license.
No. The .fig file works on both free and paid Figma plans.
Yes, if you purchase the Team license. The Solo license is intended for individual use only.
Since this is a digital product, all sales are final. But if you run into issues, reach out and I’ll help.