Created as a reference for studying design systems, but flexible enough to serve as a template or a production-ready base for your projects.
For learning and for real work
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.
Learn
Explore a complete, reference-level design system to understand how tokens, components, and documentation come together.
Adapt
Use Superforma as a base template to build your own system faster, with clarity and minimal setup.
Apply
Implement Superforma directly in real projects — it’s structured, minimal, and production-ready.
Why choose Superforma
Minimal yet complete, Superforma combines clarity, flexibility, and extendability — everything you expect from a modern design system.
Minimal by design
Easy to understand, use, and adapt without clutter.
Extendable structure
Built to grow and change as your system evolves.
Color Builder
Generate palettes and themes effortlessly.
Semantic colors
Carefully structured tokens for consistency and clarity.
Slots for components
Universal, adaptable components without variant overload.
Automatic dark theme
Built-in token mapping for seamless light/dark.
High standards
Designed with modern best practices, ensuring quality and consistency across every detail.
Proven in practice
Tested and refined on real websites and products.
WCAG compliant
Accessibility baked into contrast and interaction.
Color as a system
Superforma includes a flexible Color Builder and a set of semantic tokens.
Build custom palettes and ensure consistency across light and dark themes.
Semantic colors
Tokens like fg-accent, bg-subtle, border-strong for clarity and reuse.
Color Builder
Generate scalable palettes
from a base color.
Adaptability
Replace or extend palettes
easily for branding.
Dark theme included
Superforma switches to dark automatically using semantic tokens.
Contrast and accessibility remain consistent with no extra effort.
Token mapping
Automatic mapping between light and dark tokens keeps styles consistent across the entire system.
WCAG contrasts
All colors are tuned for accessible contrast, ensuring readability in both light and dark modes.
Smooth switching
Components adapt instantly when switching themes, with no extra setup or manual adjustments.
Universal components with slots
Superforma uses slot-based components, making them flexible, reusable,
and free from variant overload.
Slot logic
One component adapts to many use cases through slots.
Less clutter
Avoids hundreds of variants for small differences.
Consistency
Predictable, easy-to-maintain structure.
What’s inside Superforma
A structured design system file — from tokens and components to frameworks and practical examples.
Tokens & variables
Colors, typography, spacing, sizes, shadows, and effects.
Typography system
Modular scales, text styles, and responsive settings.
Grids & spacing
Layout grids and spacing rules for consistent rhythm.
Color system
Palettes built with Color Builder and semantic tokens.
Core components
Buttons, forms, cards, navigation, alerts, lists, and more.
Frameworks
Flexible structures for building cards and content blocks.
Patterns
Auth flows: login, registration, and password reset with different states.
Templates
Two schematic wireframes to illustrate real-world composition.
Guidelines
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.
Simple pricing
One-time purchase, lifetime updates. No subscriptions or hidden costs.
All licenses include lifetime updates and use in unlimited projects.
Frequently asked questions
What do I get after the purchase?
After purchasing through Lemon Squeezy, you will receive a .fig file that you can import into Figma.
Will I get a Sketch or Adobe XD version?
No. Superforma is made only for Figma and has no versions for Sketch or Adobe XD.
Do you offer technical support?
Superforma is provided as is. It requires no special knowledge to use, and we do not offer technical support.
Can I use Superforma for commercial projects?
Yes. You can use the design system for any project, without any restrictions.
How often is Superforma updated?
Superforma receives periodic updates with improvements and refinements, all included in your license.
Do I need a paid Figma plan to use Superforma?
No. The .fig file works on both free and paid Figma plans.
Can I share the file with my team?
Yes, if you purchase the Team license. The Solo license is intended for individual use only.
Is there a refund policy?
Since this is a digital product, all sales are final. But if you run into issues, reach out and I’ll help.
dkjgvo65776inru43654