Richard Hallows

Lead UX Engineer

Highlighted projects

Screenshot of a Stylelint documentation page

Created a linter to help tens of thousands write modern CSS

I created Stylelint, an open-source CSS linter. It has over 100 built-in rules to help enforce error-free and modern code.

It's downloaded over 30 million times a month and used worldwide by companies like Google and Microsoft.

Screenshot of the gift selection page of the Freddie's Flowers website

Delivered a design system for the UK's best flower service

I created the design system for Freddie's Flowers, voted the UK's best flower subscription service by the Telegraph.

Built from the ground up using modern CSS, the system is blazingly fast, accessible and maintainable.

Screenshot of the home page of The Standard website

Improved the experience of London's most-read newspaper

I consulted on the design system for The Standard. It uses fluid typography to create an optimal reading experience for 1.4 million daily users.

I brought about effective collaboration and cost savings by bridging the gap between design and development.

Screenshot of the getting started page of the Barnardo's Design System

Built the design system for the UK's largest children's charity

I built the design system for Barnardo's. It contains principles and guidance for creating accessible digital products.

I researched and included the best UX patterns and components for making large content websites easy to use.

Screenshot of the homepage of Thrift+

Doubled the conversion rate of Thrift+'s e-commerce platform

I co-created the design system for Thrift+, the UK's leading preloved clothing platform.

By researching and using e-commerce best practices, the website redesign doubled the sales conversion rate.

About me

I'm a CSS expert specialising in design systems for fast, easy-to-use, accessible web apps and websites.

I bridge AI agent-assisted design and engineering teams to streamline collaboration and help them deliver exceptional user interfaces.

I have an eye for detail from working at creative agencies on award-winning projects such as Google's Inside Abbey Road (Webby) 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.

consultancy@richardhallows.com

The following is my digital garden. It outlines how I leverage the browser to write less code or nothing at all.

I mostly design in the browser for the fewest capabilities:

Then I responsibly enhance the design to minimise the impact on:

While acknowledging the lack of control I have on the web.

I put my work in front of users early and often by:

I practise inclusive design to meet permanent, temporary or situational needs, and I use established patterns that are familiar to users.

When designing in Figma, I use features that align with the web:

Writing content

To ensure everyone understands me, I:

I aim for a reading age of about 9. For technical and professional content, I aim for 12. I check the reading age of content using Hemingway.

Writing code

I respect that:

I write modern CSS following the practices I've outlined at:

I additionally harness:

Browser's default styles

I layer accessibility improvements onto the browser's default styles. 

@layer defaults {
  /**
   * Improve the browser's default focus visible styles
   */
  :focus-visible {
    box-shadow: 0 0 0 1px white;
    outline: 2px solid black;
    outline-offset: 2px;
  }
}

Cascade and inheritance

I only override styles between cascade layers to minimise side effects, and leverage scoping, the inheritance of properties and custom properties to encapsulate styling and provide flexibility. 

@layer components {
  /**
   * The child component dictates a styling API by
   * declaring what's inherited.
   *
   * By setting padding-inline, we signal it's unchangeable.
   */
  @scope (child-component) {
    :scope {
      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
   */
  @scope (parent-component) {
    :scope {
      --child-background-color: black;
      color: white;
    }
  }
}

Parents lay out children

I create reusable 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, and use intrinsic sizing where appropriate. 

/**
 * The parent component controls the size, position
 * and spacing between child components.
 */
parent-component {
  display: block grid;
  gap: 1rem;
  grid:
    "img . content" auto
    "nav nav nav" 2rem
    / max-content repeat(2, 1fr);
}

Ensuring consistency and quality

I use tools to ensure my code and designs are consistent.

I enforce specific units with Stylelint: 

{
  "declaration-property-unit-allowed-list": {
    "/^font/": ["em", "vi", "cqi"],
    "letter-spacing": ["em"],
    "line-height": [],
  }
}

And consistent numeric design tokens with my stylelint-scales plugin: 

{
  "scales/line-heights": [1, 1.25, 1.5]
}

I use GitHub Flow for workflow and version control, and GitHub Actions for continuous integration and delivery.

I adhere to Page Experience signals, including the Web Core Vitals.

I test with PageSpeed Insights and: