Contrast
Contrast
Light
Light
SIGN SYSTEM
SIGN SYSTEM
SIGN SYSTEM
SIGN SYSTEM
4-LAYER D
4-LAYER D
4-LAYER D
4-LAYER D
E
E
E
E
WCAG 2.1 AA compliant ⁕ Automatic theme switching
WCAG 2.1 AA compliant ⁕ Automatic theme switching
WCAG 2.1 AA compliant ⁕ Automatic theme switching
Company
FreeDi
FreeDi
Timeline
June 2024
June 2024
My Role
UX/UI Designer
UX/UI Designer
Duration
2 week foundation sprint → 6 months iterative refinement
2 week foundation sprint → 6 months iterative refinement
Platform
Web Application (Responsive)
Web Application (Responsive)
The Challenge: Can Three People Build Like Thirty?
The Challenge: Can Three People Build Like Thirty?
The Challenge: Can Three People Build Like Thirty?
The Challenge: Can Three People Build Like Thirty?
Small teams hit a wall: you can move fast OR maintain quality, but rarely both.
As Delib.org's solo designer with 2 developers, I was becoming the bottleneck.
I built the infrastructure - and had one week to prove it would work.
The requirements:
Accessibility: WCAG AA compliance - Light and Contrast themes mandatory
Responsive: 4 breakpoints (1920px to 390px) systematically
Efficiency: Developers must build independently
Scalability: Foundation that grows with the product
Small teams hit a wall: you can move fast OR maintain quality, but rarely both.
As Delib.org's solo designer with 2 developers, I was becoming the bottleneck.
I built the infrastructure - and had one week to prove it would work.
The requirements:
Accessibility: WCAG AA compliance - Light and Contrast themes mandatory
Responsive: 4 breakpoints (1920px to 390px) systematically
Efficiency: Developers must build independently
Scalability: Foundation that grows with the product
Solution: Build the Foundation First
Solution: Build the Foundation First
Solution: Build the Foundation First
A 239-token system organized in four levels. Think of it like a smart spreadsheet—change one value at the top, everything below updates automatically.
Here's the structure:
Level 1 - Brand: Raw values (#4276BB, 16px) - the basic building blocks
Level 2 - Alias: Named references (color-primary-500) - semantic blocks
Level 3 - Mapped: Semantic meaning (action-default, text-primary) - this is where themes switch
Level 4 - Components: UI elements (button-primary-bg) - the actual interface parts
The key insight:
Theme switching happens at Level 3 (Mapped). Everything below stays the same.
This means developers can't accidentally break accessibility - the architecture won't let them.
A 239-token system organized in four levels. Think of it like a smart spreadsheet—change one value at the top, everything below updates automatically.
Here's the structure:
Level 1 - Brand: Raw values (#4276BB, 16px) - the basic building blocks
Level 2 - Alias: Named references (color-primary-500) - semantic blocks
Level 3 - Mapped: Semantic meaning (action-default, text-primary) - this is where themes switch
Level 4 - Components: UI elements (button-primary-bg) - the actual interface parts
The key insight:
Theme switching happens at Level 3 (Mapped). Everything below stays the same.
This means developers can't accidentally break accessibility - the architecture won't let them.
Level 1: Brand
Raw values — the basic building blocks
4276BB
426742
D63C3C
1A1A2C
Level 2: Alias
Named references — semantic blocks
color-primary-500
color-success-600
color-error-500
color-neutral-900
Level 3: Mapped
Semantic meaning — where theme switching happens
action-default
success-text
error-default
text-primary
Level 4: Components
UI elements — the actual interface parts
button-primary-bg
alert-success-text
snackbar-urgent
card-heading-text
Level 1: Brand
Raw values — the basic building blocks
4276BB
426742
D63C3C
1A1A2C
Level 2: Alias
Named references — semantic blocks
color-primary-500
color-success-600
color-error-500
color-neutral-900
Level 3: Mapped
Semantic meaning — where theme switching happens
action-default
success-text
error-default
text-primary
Level 4: Components
UI elements — the actual interface parts
button-primary-bg
alert-success-text
snackbar-urgent
card-heading-text
Level 1: Brand
Raw values — the basic building blocks
4276BB
426742
D63C3C
1A1A2C
Level 2: Alias
Named references — semantic blocks
color-primary-500
color-success-600
color-error-500
color-neutral-900
Level 3: Mapped
Semantic meaning — where theme switching happens
action-default
success-text
error-default
text-primary
Level 4: Components
UI elements — the actual interface parts
button-primary-bg
alert-success-text
snackbar-urgent
card-heading-text
Token Architecture: Four Levels
Token Architecture: Four Levels
Token Architecture: Four Levels
Four-level token architecture where theme switching happens at the Mapped layer.
Four-level token architecture where theme switching happens at the Mapped layer.
Type Style
Desktop XL
Desktop
Tablet
Mobile
1920px+
1440px
1024px
390px
H1
Aa
76px
Aa
76px
Aa
56px
Aa
36px
H2
Aa
60px
Aa
60px
Aa
48px
Aa
32px
H3
Aa
48px
Aa
48px
Aa
40px
Aa
28px
H4
Aa
36px
Aa
36px
Aa
32px
Aa
26px
Body Large
The quick brown fox
20px
The quick brown fox
20px
The quick brown fox
20px
The quick brown fox
20px
Body Medium
The quick brown fox
16px
The quick brown fox
16px
The quick brown fox
16px
The quick brown fox
16px
Body Small
The quick brown fox
14px
The quick brown fox
14px
The quick brown fox
14px
The quick brown fox
14px
Type Style
Desktop XL
Desktop
Tablet
Mobile
1920px+
1440px
1024px
390px
H1
Aa
76px
Aa
76px
Aa
56px
Aa
36px
H2
Aa
60px
Aa
60px
Aa
48px
Aa
32px
H3
Aa
48px
Aa
48px
Aa
40px
Aa
28px
H4
Aa
36px
Aa
36px
Aa
32px
Aa
26px
Body Large
The quick brown fox
20px
The quick brown fox
20px
The quick brown fox
20px
The quick brown fox
20px
Body Medium
The quick brown fox
16px
The quick brown fox
16px
The quick brown fox
16px
The quick brown fox
16px
Body Small
The quick brown fox
14px
The quick brown fox
14px
The quick brown fox
14px
The quick brown fox
14px
Type Style
Desktop XL
Desktop
Tablet
Mobile
1920px+
1440px
1024px
390px
H1
Aa
76px
Aa
76px
Aa
56px
Aa
36px
H2
Aa
60px
Aa
60px
Aa
48px
Aa
32px
H3
Aa
48px
Aa
48px
Aa
40px
Aa
28px
H4
Aa
36px
Aa
36px
Aa
32px
Aa
26px
Body Large
The quick brown fox
20px
The quick brown fox
20px
The quick brown fox
20px
The quick brown fox
20px
Body Medium
The quick brown fox
16px
The quick brown fox
16px
The quick brown fox
16px
The quick brown fox
16px
Body Small
The quick brown fox
14px
The quick brown fox
14px
The quick brown fox
14px
The quick brown fox
14px
Typography Scale: Systematic Responsive Adaptation
Developers reference typography tokens → responsive behavior automatic
Developers reference typography tokens → responsive behavior automatic
The Design System
The Design System
The Design System
Radius scale
2
4
8
12
16
20
24
96
Spacing scale
2
2
4
+2
8
+4
12
+4
16
+4
20
+4
24
+4
28
+4
32
+4
36
+4
99
Full
Radius scale
2
4
8
12
16
20
24
96
Spacing scale
2
2
4
+2
8
+4
12
+4
16
+4
20
+4
24
+4
28
+4
32
+4
36
+4
99
Full
Radius scale
2
4
8
12
16
20
24
96
Spacing scale
2
2
4
+2
8
+4
12
+4
16
+4
20
+4
24
+4
28
+4
32
+4
36
+4
99
Full
Spacing: Consistent Rhythm
Every spacing decision comes from the scale - no arbitrary values.
Used consistently for padding, margins, gaps, and border radius.
This creates visual rhythm automatically.
Clusters
Clusters
node cards and UI elements use design system tokens for consistency.
node cards and UI elements use design system tokens for consistency.
Consensus maps with multiple view modes
Consensus maps with multiple view modes
Color-coded zones maintain token consistency.
Color-coded zones maintain token consistency.
Voting results with bar charts
Interactive voting with bar charts use semantic tokens for automatic accessibility
Interactive voting with bar charts use semantic tokens for automatic accessibility
Real-time polarization tracking
scatter plots and tooltips using mapped tokens for data visualization.
scatter plots and tooltips using mapped tokens for data visualization.
Features Built with the System Contrast theme
Features Built with the System Contrast theme
Features Built with the System Contrast theme
Features Built with the System Contrast theme
Results & Impact
Results & Impact
Results & Impact
Results & Impact
The token architecture transformed how our 3-person team builds—enabling systematic quality and developer independence.
The token architecture transformed how our 3-person team builds—enabling systematic quality and developer independence.
System Built:
System Built:
• 239 tokens across 4 architectural levels
• 2 accessible themes (Light + Contrast)
• 4 responsive breakpoints handled systematically
• 20+ features using the system
Quality Achieved:
Quality Achieved:
• 100% WCAG AA compliance—all text meets 4.5:1 minimum contrast
• Consistent spacing, typography, and colors across all interfaces
• Theme switching maintains compliance automatically
Developer Experience:
Developer Experience:
• Developers select semantic tokens—accessibility guaranteed by architecture
• Theme switching requires zero manual accessibility checks
• Responsive behavior handled systematically through tokens
• System prevents violations rather than catching them
• Developers select semantic tokens—accessibility guaranteed by architecture
• Theme switching requires zero manual accessibility checks
• Responsive behavior handled systematically through tokens
• System prevents violations rather than catching them
Outcome:
Outcome:
Small teams need smart systems.
By building accessibility and consistency into the token architecture, we achieved enterprise-level quality with 3 people—proving you don't need more headcount, you need better infrastructure.
Technical Specifications
Technical Specifications
Technical Specifications
Technical Specifications
Token Count: 239
Architecture: Brand → Alias → Mapped → Components
Color Tokens: 90+ across Light + Contrast themes
Spacing Scale: 19 tokens (0-88px)
Typography Tokens: 30+ with responsive scaling
Radius Tokens: 14 options (0-96px)
Token Count: 239
Architecture: Brand → Alias → Mapped → Components
Color Tokens: 90+ across Light + Contrast themes
Spacing Scale: 19 tokens (0-88px)
Typography Tokens: 30+ with responsive scaling
Radius Tokens: 14 options (0-96px)
Token Count: 239
Architecture: Brand → Alias → Mapped → Components
Color Tokens: 90+ across Light + Contrast themes
Spacing Scale: 19 tokens (0-88px)
Typography Tokens: 30+ with responsive scaling
Radius Tokens: 14 options (0-96px)
Other projects
Full detailed view available on desktop