Design System
The tokens, typography, and components used to build this portfolio—documented as a working design system.
Design Tokens
Primitive Colours
Token
Value
Preview
color.white
#ffffff
color.grey.50
#fafafa
color.grey.100
#f5f5f7
color.grey.200
#e5e5e5
color.grey.300
#d4d4d4
color.grey.500
#48484a
color.grey.900
#1d1d1f
color.blue.500
#0071e3
color.blue.600
#005bb5
color.blue.700
#004a94
color.green.500
#5ab88a
color.purple.500
#AB6FE9
color.yellow.500
#F3AC3C
color.coral.500
#E96F6F
Semantic Colours
Token
References
Preview
color.bg.primary
color.grey.50
color.bg.secondary
color.grey.100
color.bg.surface
color.white
color.text.primary
color.grey.900
color.text.secondary
color.grey.500
color.text.inverse
color.white
color.border.default
color.grey.200
color.border.hover
color.grey.300
color.interactive.primary
color.blue.500
color.interactive.hover
color.blue.600
color.interactive.active
color.blue.700
color.focus.ring
color.blue.500
Spacing
Token
Value
Preview
spacing.4
4px
spacing.8
8px
spacing.12
12px
spacing.16
16px
spacing.20
20px
spacing.24
24px
spacing.32
32px
spacing.48
48px
spacing.64
64px
Border Radius
Token
Value
Usage
radius.sm
10px
Tags
radius.lg
24px
Cards, sections, photos
radius.full
980px
Buttons, pills
Typography
Type Scale
Display
Aa
64px / 700 / -0.03em / 1.1
Heading 1
Design Systems
48px / 700 / -0.02em / 1.15
Heading 2
Featured Work
40px / 600 / -0.02em / 1.2
Heading 3
The Challenge
32px / 600 / -0.01em / 1.25
Heading 4
Component Details
24px / 600 / -0.01em / 1.3
Body Large
Senior Product Designer specialising in Design Systems and AI-assisted workflows.
20px / 400 / normal / 1.6
Body
8+ years helping teams build accessible, scalable systems that work across platforms.
16px / 400 / normal / 1.5
Body Small
Unified 4 fragmented libraries into a single source of truth, eliminating 75% component duplication.
14px / 400 / normal / 1.5
Caption
© 2025 Matthew Thomas. All rights reserved.
12px / 400 / normal / 1.4
Font Stack
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
Components
Accessibility
Standards
Colour Contrast
4.5:1 minimum
Text meets AA requirements
Touch Targets
44×44px minimum
All interactive elements
Focus Indicators
2px solid color.blue.500
Visible on all focusable elements
Reduced Motion
prefers-reduced-motion
Animations disabled when preferred
Skip Link
Skip to main content
Keyboard navigation support