Patterns · Brand · Implementation
Strong foundations.
Distinctive experiences.
I use design systems to bring clarity, consistency and pace to a product, then shape them around its people, brand and purpose. A useful foundation should leave room for personality.
My approach
Consistency with
character.
I admire established design systems and appreciate the thinking behind familiar UI patterns and Gestalt principles: proximity, similarity, continuity and how people group information. These help an interface feel coherent and understandable.
But applied without judgement, patterns can make design formulaic and constrain creativity. I treat a system as a starting point, then question what the product and its audience actually need. Consistency should support an experience, without flattening its identity.
01
Google
Material Design
Material Design is Google’s design system. MUI, often called Material UI, is a separate React component library that implements Material principles. I value the design language and the practical bridge that a component library can provide.
Why I like it
The connection between hierarchy, component behaviour, colour roles and motion gives teams a shared vocabulary. It is a useful basis for a product that needs to scale while retaining a coherent interaction model.
- Use established component states and interaction patterns as a foundation.
- Adapt colour, typography, shape and spacing to a bespoke brand.
- Evaluate the implementation against the product’s accessibility and usability needs.
02
IBM
Carbon
Carbon is IBM’s open-source design system, built around its design language and the needs of complex enterprise products.
Why I like it
I admire its disciplined approach to information-heavy experiences. Clear structure and reusable patterns can help a team make complicated workflows easier to understand, without redesigning every control from scratch.
- Use a consistent grid and hierarchy to organise dense information.
- Define reusable components, their variants and the rules for using them.
- Document behaviour alongside appearance so design and development share the same intent.
03
Microsoft
Fluent 2
Fluent 2 is Microsoft’s design system. It is a reference I appreciate for connecting design foundations, components and implementation across a broad product family.
Why I like it
Its attention to coherent interaction, accessible experiences and the relationship between design assets and working components appeals to me. I like systems that make collaboration easier while giving a product team room to adapt.
- Align Figma components and implementation around shared foundations.
- Consider focus, contrast, states and feedback throughout the experience.
- Use themes and tokens to express brand decisions consistently.
Another reference
Shopify
Polaris.
Polaris is another system I admire, especially for commerce. Its focus on familiar merchant workflows is a reminder that a system should be grounded in the tasks people need to complete. I appreciate the way Shopify connects consistent UI with practical components for its platform.
From Figma to code
A foundation.
Made your own.
I am well versed in building and working with design systems in Figma, and in how their styling translates into HTML and CSS. I connect variables, component variants, typography, spacing and interaction states to tokens, CSS custom properties and reusable interface patterns.
An established system can be a great place to begin. I incorporate bespoke branding and themes, refine the components and document the decisions so the resulting system belongs to the product. The aim is a practical, maintainable foundation with enough flexibility for thoughtful, distinctive design.