Design System
This is how I build a Design System from scratch
Scroll down
01
Audit & diagnosis
I start by analyzing:
Visual inconsistencies
Repeated patterns
Design debt
Accessibility issues
Duplicated components
Misalignment with development
First, I don’t design anything
02
Define foundations
No components yet
Color architecture
✅ I define a 50–900 scale
✅ I create semantic tokens (Success / Error / Warning / Info)
✅ I validate WCAG contrast
✅ I design for light and dark mode from the start
#1D4945
Color/500
#33706B
Color/400
#4A968F
Color/300
#73C0B9
Color/200
#A9E4DE
Color/100
#E7FAF8
Color/50
Spacing & grid
✅ 4pt or 8pt system
✅ Spacing tokens
✅ 12-column grid
Defined breakpoints
Typography system
✅ Roles (Display / Heading / Body / Caption)
✅ Responsive behavior
✅ Line-height coherente
Tittle/H1-bold
H1
Font-Family: Helvetica
Style: Bold
Font Size: 60px
Line Height: 58px
Letter spacing: 0px
Tittle/H3-regular
H2
Font-Family: Helvetica
Style: Regular
Font Size: 48px
Line Height: 47px
Letter spacing: 0px
Tittle/H3-italic
H3
Font-Family: Helvetica
Style: Italic
Font Size: 39px
Line Height: 40px
Letter spacing: 0px
Tittle/H4-light
H4
Font-Family: Helvetica
Style: Light
Font Size: 31px
Line Height: 33px
Letter spacing: 0px
03
Atomic System
Structural rules: ➜
▪️ All components use Auto Layout
▪️ Spacing defined via tokens
▪️ No hard-coded values
▪️ Base component + variants logic
▪️ Semantic naming
css
color.primary.500
color.semantic.success.600
spacing.200
radius.medium
Atoms
Molecules
Organisms
Templates
Pages
04
Component architecture
I identify repeated patterns
I create base components
I build variants
I define states
I document correct and incorrect usage
Default
Hover
Active
Focus
Disabled
05
Documentation
Component usage guidelines
Tokens (colors, typography, spacing)
Accessibility rules
Interaction patterns
Best practices
Correct and incorrect usage examples
Versioning and change management
06
Continuous validation
A design system is not static
Adoption strategy
✅ Explain the system logic
✅ Teach how to use the library
✅ Show when to use each component
✅ Align criteria between designers
✅ Align naming with development
It is constantly validated through
✅ Team feedback
✅ User testing
✅ Visual QA
✅ Review with development
✅ New use cases
