Design System Architect - Screenshots

Each screen prints on its own page
1 - Welcome
Design System Architect
Design System Architect
Generate production-ready design foundations from your brand inputs.
What gets created
Color system
Primitives + semantic tokens across Light, Dark & High Contrast
WCAG AA guaranteed
Every color pair validated. Auto-corrected when contrast fails.
Typography at 13 scales
Display, Heading, Body, Caption, Label - responsive across breakpoints
Responsive foundations
Spacing, margins, gutters and containers for 4 breakpoints
Enterprise-ready
Material, Atlassian, Carbon, Polaris and Fluent inspired patterns
700+Variables
3Themes
<2 minTo create
All generation happens inside your open Figma file
2 - Brand identity
Design System Architect
Step 1 of 6Brand
Brand identity
Used to tune accessibility rules, color saturation, and spatial density.
Healthcare and Banking use stricter WCAG AAA thresholds.
Brand personality
Modern
Clean and contemporary
Enterprise
Professional and structured
Premium
Polished and sophisticated
Minimal
Focused and distraction-free
Friendly
Warm and approachable
Technical
Precise and data-driven
Affects border radius, motion speed, and spacing density.
3 - Brand colors
Design System Architect
Step 2 of 6Colors
Brand colors
Brand Colors
Your main brand color - buttons, links, focus rings
Optional brand color
Supporting brand color for accents and highlights
Generated from your primary
11-step scale generated automatically • All shades WCAG-validated
4 - Typography
Design System Architect
Step 3 of 6Typography
Typography
Fonts must be installed in Figma. Inter is always the fallback.
Preview
Display - Acme Corp
Heading - The quick brown fox
Body - Jumps over the lazy dog. A well-designed type scale creates hierarchy without demanding attention.
LABEL - Caption text
Used for all UI text. Falls back to Inter if not installed in Figma.
Applied to Display XL / L / M only.
Scale style
Aa
Compact
Dense scales for data-heavy UIs
Aa
Balanced
Versatile, suits most products
Aa
Enterprise
Conservative with clear hierarchy
Aa
Editorial
Large display type, brand-forward
5 - Visual style
Design System Architect
Step 4 of 6Style
Visual style
Drives radius, elevation, spacing density, and motion defaults.
Modern SaaS
Balanced radius, moderate elevation, clean hierarchy.
8px radiusLayered shadows12 columns
Enterprise
Conservative proportions, high information density.
4px radiusHairline borders
Apple-inspired
Large radius, flat surfaces, generous whitespace.
20px radiusSpacious
Material Design 3
Google Material aesthetic with tonal surfaces.
12px radiusMotion-forward
Minimal
Near-flat design with hairline borders and sharp edges.
0px radiusFlat
6 - Breakpoints
Design System Architect
Step 5 of 6Layout
Breakpoints
Set the pixel widths at which your layout switches. These drive the responsive spacing, layout margin, gutter, and container-width variables.
px
Default: 375px
px
Default: 768px
px
Default: 1280px
px
Default: 1440px
What this generates
Breakpoints collection - 4 px values
Layout/Margin, Gutter, Columns, ContainerWidth
Spacing - all 35 steps with per-breakpoint values
7 - Review & generate
Design System Architect
Step 6 of 6Review
Review & generate
Confirm your settings then generate the design system inside your Figma file.
Brand
Acme CorpSaaS · Modern
Colors
Typography
InterBalanced
Style
Modern SaaS
Layout
375 · 768 · 1280 · 1440 px
Theme modes
☀️LightAlways included
🌙DarkRequires Pro
👁High ContrastRequires Pro
What will be created
Color - 244 primitives (Tailwind CSS v3 full palette)
+Brand - semantic roles × Light · Dark
+Theme - 300+ tokens × Light · Dark
Typography - 13 text styles
Spacing · Sizing · Border · Motion · Opacity
Breakpoints - 4 viewport values
8 - Success
Design System Architect
Design system created
All variables and styles are now available in your Figma file.
742Variables
13Text styles
3.2sDuration
Collections created
Color
+Brand
Spacing
Sizing
Border
Typography
Breakpoints
Opacity
+Theme
Accessibility
WCAG grade AA
Pairs passing AA 48 / 48