18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government

Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.

When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.

There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.

The lessons learned make for good design principles:

  • Talk to the people
  • Look for duplication of efforts
  • Know your values
  • Empower your team
  • Start small and iterate
  • Don’t work in a vacuum
  • Reuse and specialize
  • Promote your system
  • Be flexible

Tagged with

Related links

Public Sans

A free and open source neutral sans-serif typeface, released as part of version two of the design system for the US federal government.

Tagged with

A Cohesive & Unified Identity for British Government — Paul Robert Lloyd

In search of typographical consistency in government departments.

Tagged with

Better typography with text-wrap pretty | WebKit

Everything you ever wanted to know about text-wrap: pretty in CSS.

Tagged with

Tagged with

Justified Text: Better Than Expected? – Cloud Four

Some interesting experiments in web typography here.

Tagged with

Related posts

Composability in design systems

There’s probably a Pace Layer analogy in here somewhere.

Decision time

Balancing the ledger.

Performative performance

When it comes to sustainable web design, the hard work is invisible.

Declarative design systems

Is your design system really a system …or is it more like a collection of components?

More writing on web.dev

Another five articles on modern responsive web design.