I tested the service with users by building accessible prototypes in the browser using the GOV.UK Design System.
About me
I create design systems for fast, easy-to-use and accessible websites. I'm a CSS expert, but I'm also as comfortable designing and prototyping flows in Figma as I am writing code.
I have an eye for detail from working at creative agencies on award-winning projects such as Inside Abbey Road for Google Creative Lab (Webby), GEOX Amphibiox (Cannes Cyber Lion), and The Kaiser Chiefs' The Future is Medieval (D&AD Yellow Pencil).
Let's talk
Whether you're kicking off a new project or needing a hand with an existing one, I can create a design system to help you deliver.
@layer components{/**
* The child component dictates a styling API
* by declaring what is inherited.
*
* By setting padding-inline, we signal it's unchangeable.
*/child-component{background-color:var(--child-background-color, white);padding-inline: 1rem;}/**
* The parent component can change the child component's
* background and text color via inheritance as:
*
* - background-color is defined as a custom property
* - color inherits by default when not defined
*/parent-component{--child-background-color: black;color: white;}}
Fluid web design
I use comparison math functions to size space and elements relative to the viewport or container size.
example-component{/**
* A font size that has a:
* - minimum value of 1rem
* - central value relative to the container's inline size
* - maximum value of 2rem
*/font-size:clamp(1rem, 0.5rem + 0.57cqi, 2rem);/**
* An inline padding size that's either relative to the
* size of the characters within or the viewport's
* inline size
*/padding-inline:max(50% - 28ch, 4vi);}
Parents lay out children
I create components that look inwards so that their parent can lay them out.
I embrace the browser's default of Flow Layout then responsibly enhance with layout modules like Grid, Flex and Multicol.
/**
* A parent component controls the size, position
* and spacing between child components.
*/parent-component{display: grid;gap: 1rem;grid:"img . content" auto
"nav nav nav" 2rem
/ max-content repeat(2, 1fr);}
Additive properties
I avoid overriding properties within components.
example-component{/* These properties apply to all conditions. */color: red;container: example / inline-size;padding-block: 2rem;/* This property is added based on the selector. */&:not(:first-child){margin-block-start: 1rem;}/**
* The background-color property is added based on
* non-overlapping container conditions.
*/@container example (width <= 20em){background-color: blue;}@container example (20em < width <= 40em ){background-color: yellow;}@container example (width > 40em ){background-color: pink;}}
Parents respond to children
I create smart components that adapt themselves based on their children.
/**
* Parent component adapts depending on the presence of child
*/parent-component{&:has(child-component){border-color: red;}}
Perceptually uniform lightness
I use perceptually uniform lightness for colour scales to ensure accessible contrast.
/**
* Both colours have the same perceptual lightness
*/:root{--blue-50:oklch(50% 0.12 250deg);--purple-50:oklch(50% 0.12 285deg);}
Nesting pseudo-classes and at-rules
I nest pseudo-classes and at-rules, and use an explicit nesting selector for rules.
example-component{/**
* Often combining nesting with the :is() pseudo-class
*/&:is(:hover, :focus-within){color: orange;}@media(width >= 20em){place-items: center;}}
Ensuring consistency and quality
I use tools to ensure my code and designs are consistent.