UX/UI

[VIP] Imperavi: Superforma

Created as a reference for studying design systems, but flexible enough to serve as a template or a production-ready base for your projects.

Jun 10, 2026 - 07:22

Jun 11, 2026 - 12:20

0 65

https://vk.com/doc1040652818_697552854

Open Figma Preview

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.

Download