06 /2026 · in progress
ConceptForma — a scalable design system for digital studios
Designing a scalable design system for a digital studio: from base design tokens and a component library to usage rules, responsive patterns and documentation. Work in progress.
- #Design System: all cases with this tag
- #Tokens: all cases with this tag
- #UI Kit: all cases with this tag
- Design System
- UI Design
- Design Tokens
- Accessibility
Work in progress. Forma Studio is a fictional client. Layouts and documentation will appear here as soon as they are ready.
01 /06
About the project
Forma is a design system concept for a digital studio that runs several client projects at once: corporate websites, admin panels and SaaS products.
Forma Studio is a fictional client. This is a self-initiated concept with no real commission, so the results here are goals, not measured numbers.
The case shows the work of a design system designer: token architecture, scaling components, responsiveness, accessibility and handoff to development.
- Type
- Self-initiated concept
- Client
- Forma Studio (fictional)
- My role
- UI/UX Designer, Design System Designer
- Products
- Websites · Admin panels · SaaS
- Status
- In progress: token architecture and library plan
02 /06
One foundation, many brands
Every studio project starts almost from scratch: components get duplicated, styles drift apart and handoff is different every time.
The task is to standardise components, styles and rules while still giving each client its own visual identity without copying the library.
- 01
Studio designer
builds a new client’s interface from ready components, changing only the brand.
- 02
Front-end developer
sees the same token and property names as in the code.
- 03
Studio client
gets its own brand without losing quality or accessibility.
03 /06
Token architecture
Brand and theme change values, not components. That is why tokens sit on three levels.
- 01
Base tokens
Palette, type scale, 4 px step, radii, shadows. Raw values with no meaning.
- 02
Semantic tokens
Roles: background, text, accent, border, success, error. A client’s brand and the theme only change which base value stands behind a role.
- 03
Component tokens
Button, input and card refer only to semantic roles. A new brand needs no change to any component.
04 /06
System scope
This is the planned scope of the concept, not a list of finished materials.
Foundations
- Semantic colours
- Type scale
- 4 px grid
- Radii, shadows, borders
- Responsive grids
Components
- Buttons and inputs
- Selects, checkboxes, radios
- Cards, modals, tooltips
- Navigation, tabs, breadcrumbs
- Tables, filters, pagination
- Alerts and toasts
Component architecture
- Variants and properties
- Interactive states
- Light and dark themes
- Responsive behaviour
- Accessibility
Docs and handoff
- Usage rules
- Do and Don’t examples
- State specs
- Token structure
- Naming rules
05 /06
Work plan
Work in progress. Each stage will appear here once it is ready in Figma.
- 01
UI audit
An inventory of common components and of what really differs between brands.
- 02
Foundations
Colour, type, spacing, grids, themes.
- 03
Components
A library with variants, properties and states.
- 04
Patterns and templates
Forms, filtered tables, a dashboard, on real website, admin and SaaS screens.
- 05
Documentation
Usage rules, Do and Don’t, specs for developers.
- 06
System overview
A presentation page and two brands on the same components.
06 /06
Goals
These are concept goals, not achieved results. They can only be checked on real projects.
80–90% component reuse. 30% less time on a new project’s layouts. 40% fewer duplicate components. 100% of core components documented. Light and dark themes. Desktop, tablet and mobile.
Next case · 01 / 06
Product designer workspace
Tell me briefly about the product and the timeline — I'll reply within a day.