Design Systems.
I create design systems that act as a single source of truth for product teams, aligning design and development around consistent, scalable UI patterns. By defining reusable design tokens (variables), teams can work faster, reduce rework, and maintain visual and functional consistency across every digital touchpoint.​​​
Design Tokens
Design tokens typically include:
-
Colour variables
-
Typography variables
-
Spacing variables
-
Border radius variables
-
Border width variables
-
Shadow variables
-
Component variables
-
Grids and breakpoint variables
Naming Structure of Tokens​
​
The above structure is simple, yet powerful. This ensures that the naming convention is flexibleenough to scale to complex design systems.
​
The name of each token is comprised of five words words that describe the element of the design system.
​
These are:
-
Object
-
Property
-
Attribute
-
Variant
-
State
UI Style Guides
​
UI Style Guides translate a design system into practical, day-to-day guidance teams can apply consistently across products. They define the visual and interaction rules that keep interfaces cohesive. They cover everything from layout and hierarchy to component usage and states.
UI Style Guides typically include:
-
Brand and product principles
-
Colour and type specifications
-
Spacing, layout, and grid guidance
-
Interaction patterns (hover, focus, active, disabled)
-
Form and validation patterns
-
Iconography and imagery guidelines
-
Accessibility requirements (WCAG considerations)
-
Responsive behaviour and breakpoint guidance
