Establish design tokens, component architecture, taxonomies, and technical infrastructure for your design system.
Timeline: Week 3-4 of Phase 1
After completing discovery (stakeholder mapping, products mapping, and success metrics), you'll start establishing the technical and organizational foundations. This work happens in parallel with finalizing your discovery deliverables.
Copy link
What Are Foundations?
Foundations are the architectural decisions, infrastructure, and organizational structures that enable your design system to scale. This isn't about building every component—it's about creating the landscape and making the right decisions upfront.
Audit existing product experiences to understand the current landscape. This inventory becomes your source of truth for what exists, what needs consolidation, and what opportunities exist.
Using Tools for Inventory
SceneFile for Component Cataloging:
Catalog all components across product experiences
Add comments directly within product interfaces
Tag components for different purposes
Document context and usage
Export inventory for analysis
What to Capture in Your Inventory:
1. Component Variations
Document every instance and variation:
Button Component Inventory
├── Product A
│ ├── Primary button (3 size variants)
│ ├── Secondary button (custom styled)
│ ├── Danger button (2 color variants)
│ └── Ghost button (inconsistent spacing)
├── Product B
│ ├── CTA button (completely different design)
│ ├── Link button (no hover state)
│ └── Icon button (5 size variants)
└── Recommendation: Consolidate to 4 button types
2. Things to Refactor
Mark components that need work:
Technical Debt: Outdated implementations
Accessibility Issues: Missing ARIA, keyboard nav
Performance Problems: Heavy components, unnecessary re-renders
📌 Saved for inspiration
▪ Animated empty state (Product A)
└── Delightful micro-interaction
▪ Progressive form validation (Product B)
└── Better UX than current DS approach
▪ Smart table filtering (Product C)
└── Advanced pattern for complex data
▪ Contextual help tooltips (Product D)
└── Excellent accessibility implementation
Foundations Setup
Timeline: Week 3-4 of Phase 1
After completing discovery (stakeholder mapping, products mapping, and success metrics), you'll start establishing the technical and organizational foundations. This work happens in parallel with finalizing your discovery deliverables.
Foundations are the architectural decisions, infrastructure, and organizational structures that enable your design system to scale. This isn't about building every component—it's about creating the landscape and making the right decisions upfront.
What to Define:
Deliverables:
Tools & Decisions:
Component Families & Taxonomy
Organize your component library into logical families:
Example Taxonomy:
Component Planning:
For each component family, establish:
Research Questions:
Planning Deliverables:
Components & Patterns Inventorization
Audit existing product experiences to understand the current landscape. This inventory becomes your source of truth for what exists, what needs consolidation, and what opportunities exist.
Using Tools for Inventory
SceneFile for Component Cataloging:
What to Capture in Your Inventory:
1. Component Variations Document every instance and variation:
2. Things to Refactor Mark components that need work:
Tag in SceneFile:
3. Component Expansions Identify where teams have expanded beyond design system:
Small Expansions (acceptable customization):
Example:
4. Complete Deviations Document when teams built entirely custom solutions:
Good Deviations (innovation worth adopting):
Example:
Bad Deviations (should migrate to DS):
Example:
5. Actual Component Usage Track real-world usage patterns:
Usage Metrics:
Data Sources:
Format:
6. Inspiration & Innovation Capture interesting implementations for future consideration:
Innovation Categories:
Inspiration Board:
Component Inventory:
Pattern Inventory:
Inventory Process:
Step 1: Catalog (Week 3)
Step 2: Analyze (Week 3-4)
Step 3: Classify (Week 4)
Step 4: Synthesize (Week 4)
Deliverable Format:
Tools for Inventory:
Establishing Patterns:
Patterns are repeatable solutions to common problems:
Pattern Categories:
Pattern Documentation:
Figma Organization:
Example Structure:
Repository Organization:
Example Structure:
Pipeline Decisions:
Build & Test:
Publishing:
Documentation:
Quality Gates:
By end of Week 3-4, you should have:
Architecture:
Documentation:
Infrastructure:
Inventory: