Design Systems
A design system is more than a component library. It's the combination of design tokens, reusable components, interaction patterns, usage guidelines, tooling, and governance that keeps a product's UI consistent as it scales. Done well, it accelerates development, creates a shared vocabulary between designers and developers, and bakes accessibility in from the start.
Choosing a Design Approach
Every frontend project starts with a design question. The answer depends on what the client brings to the table.
Client has no design preference
Pick an existing design system and theme it to match the brand. This is the fastest, cheapest path and produces good results for most projects.
- MUI — best when you need a large, complete component set out of the box.
- shadcn/ui — best when you need full control over markup and styling.
Client has an existing design system
Evaluate its maturity:
- PDF / brand guidelines only — extract colors, typography, and spacing into tokens; pick a component library to theme.
- Figma file — check if it maps to an existing library (Material, Ant Design, etc.). If so, use that library and customize.
- Token set / coded components — integrate directly; assess quality and coverage gaps.
Client wants custom design
- Engage a UI designer. Figma is the standard tool.
- Structure the component hierarchy using Atomic Design.
- This is the most expensive option — factor it into the estimation.
Component Library vs. Design System
| Aspect | Component Library | Design System |
|---|---|---|
| Scope | UI components in code | Tokens + components + docs + patterns + Figma + governance |
| Design tokens | Optional | Core part |
| Figma kit | Usually not included | Included |
| Documentation | API docs only | Usage guidelines, patterns, do's and don'ts |
| Governance | Version + publish | Contribution model, review, adoption tracking |
| Team to maintain | 1–2 developers | Cross-functional (design + engineering) |
Many teams think they need "a design system" when they actually need "a component library with some tokens." Be honest about what the project really requires — the full design system investment is significant.
Popular Design Systems
| System | Maintainer | React Library | Notes |
|---|---|---|---|
| Material Design 3 | MUI | Dynamic color, tokens, most widely adopted | |
| Fluent 2 | Microsoft | @fluentui/react-components | Good for Microsoft ecosystem projects |
| Carbon | IBM | @carbon/react | Strong data visualization (Carbon Charts) |
| Ant Design | Ant Group | antd | Popular for enterprise/B2B, especially in Asia |
| shadcn/ui | Community | Built on Radix + Tailwind | Code distribution, not a library — recommended |
| Radix | WorkOS | @radix-ui/react-* | Unstyled accessible primitives, foundation for shadcn/ui |
| React Aria / Spectrum | Adobe | react-aria-components | Best-in-class accessibility primitives |
| Mantine | Community | @mantine/core | 100+ components, batteries-included |
| Chakra UI | Community | @chakra-ui/react | Good DX, theming, accessibility |
Discovery resource: Design Systems Repo
For most Aliz projects, start with shadcn/ui (maximum flexibility) or MUI (maximum out-of-the-box completeness). See the Tech Stack overview for the full recommendation.
Design Tokens
Design tokens are atomic design decisions stored as platform-agnostic key-value pairs — colors, spacing, typography, shadows, border-radius. They are the bridge between design tools and code.
- W3C DTCG spec — the first stable specification landed in October 2025. This is the standard format going forward.
- Tooling:
- Style Dictionary (Amazon) — most widely used token transformer. Converts tokens to CSS custom properties, SCSS, JS, iOS, Android.
- Tokens Studio — Figma plugin with DTCG support; syncs tokens between Figma and code repos.
Even if you're not building a full design system, extract design decisions into CSS custom properties early. It's cheap to do and expensive to retrofit.
Example DTCG token file:
{
"color": {
"primary": {
"$type": "color",
"$value": "#0066cc"
}
}
}
Figma–Code Workflow
Figma Variables (introduced 2023) provide a native way to define design tokens inside Figma. The challenge is getting them into code reliably.
Common workflows:
- Tokens Studio plugin → export DTCG JSON → Style Dictionary → CSS/code
- Figma Variables → Figma REST API → build pipeline
- Dev Mode → inspect specs → manual or AI-assisted code generation
The key principle: tokens should have a single source of truth — either Figma or code, not both maintained independently.
The Figma-to-code token pipeline is still maturing. Expect some manual steps. The W3C DTCG spec stabilization in 2025 should improve tooling interoperability.
Atomic Design
Brad Frost's Atomic Design methodology, mapped to React:
- Atoms —
<Button>,<Input>,<Badge>,<Icon>— basic HTML elements styled with tokens. - Molecules —
<SearchField>(input + button),<NavItem>(icon + text) — small functional groups. - Organisms —
<Header>,<ProductCard>,<DataTable>— complex, self-contained sections. - Templates — Page layouts with placeholder content.
- Pages — Specific instances with real data.
A good mental model for structuring a component library. Not every team follows it strictly, but the vocabulary is widely understood.
Building a Custom Design System
When to build: strong brand identity, unique interaction patterns, multiple products sharing UI, dedicated design team available.
When NOT to: small team, single product, tight timeline, no designer. Use an existing system instead.
Approaches
- Extend existing — take shadcn/ui, customize tokens and components. Lowest cost.
- Build on primitives — use Radix or React Aria for accessibility, add your own styling. Medium cost.
- From scratch — only for large organizations with dedicated teams. Highest cost.
Tooling
- Storybook — component development environment, documentation, visual testing.
- Chromatic — visual regression testing and review workflow (by the Storybook team).
Governance
- Semver for versioning, changelog for every release.
- Contribution models: centralized (dedicated team owns it), federated (product teams contribute), or hybrid.
- Every component needs: usage guidelines, API docs, accessibility notes, and live examples.
Building a design system from scratch is a multi-month investment. For most consulting projects, extending shadcn/ui or theming MUI is the right call. Factor the cost into your estimation.