Skip to main content
niels nielsen design studionndesign.co
Connect with meAvailable for remote FT / PT workniels@nielsn.com480-271-2795

Work

All work

Every project, one wall.

A full look at past projects. Select any image to open its story, details and gallery.

Use case

Government design system

A high-level design system for the government sector, built in Figma and grounded in the U.S. Web Design System (USWDS) — typography, spacing, and components that agencies can trust.

Client

Alpha Omega

Role

UX/UI Designer

Outcome

5 years on the project

Typography

Aa

The quick brown fox jumps over the lazy dog.

USWDS pairs open-source typefaces for clear, readable government interfaces.

  • Public Sans
  • Source Sans Pro
  • Merriweather
  • Roboto Mono

Spacing

Layout runs on a consistent 8px-based spacing scale, so every component lines up.

  • 8px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px

Components

A shared library of accessible, reusable interface parts, modeled on the USWDS component list.

  • Accordion
  • Alert
  • Banner
  • Breadcrumb
  • Button
  • Button group
  • Card
  • Checkbox
  • Combo box
  • Date picker
  • File input
  • Footer
  • Header
  • Modal
  • Pagination
  • Radio buttons
  • Search
  • Side navigation
  • Step indicator
  • Summary box
  • Table
  • Tag
  • Text input
  • Tooltip

Inside the system

A look at the design system as it lives in Figma and Storybook.

Figma
Screenshot of the design system component library in Figma
The component library with variants, states, and shared styles.
Storybook
Screenshot of the design system documented in Storybook
Coded components documented with live states and controls.

How the system fits together

1

Foundations in Figma

Typography, color, and spacing captured as shared styles and variables.

2

Components

USWDS components rebuilt with variants, states, and accessibility notes.

3

Storybook

Coded examples documented so design and engineering stay in sync.

4

Guidance

Usage rules and patterns teams can adopt without guesswork.

Use case — in depth

How I used USWDS to design for government

Scroll to walk through how the U.S. Web Design System became the backbone for patterns, components, and standards across multiple federal websites.

Design patterns

Patterns for every government journey

I used USWDS guidance to document repeatable UX patterns so every federal team solves the same problem the same way.

  • Form and multi-step flows built on USWDS patterns
  • Page layouts, navigation, and content hierarchy templates
  • Accessible error, validation, and confirmation behavior

Component designs

A Figma library built from USWDS components

Each USWDS component was rebuilt in Figma with variants, states, and usage notes so designers can assemble screens with confidence.

  • Variants and states for buttons, inputs, tables, and alerts
  • Auto layout and variables tied to USWDS tokens
  • Accessibility notes documented on every component

Design standards

Standards teams can actually follow

Typography, color, and the 8px spacing scale were captured as clear standards, replacing one-off decisions with shared rules.

  • Type scale and font pairing rules from USWDS
  • Spacing, grid, and padding standards
  • Color contrast and accessibility requirements

Federal rollout

One system across multiple federal websites

The same foundations, components, and guidance were applied across several federal sites, keeping the experience consistent for the public.

  • Shared library reused across agency websites
  • Design and engineering kept in sync through documentation
  • Guidance teams adopt without guesswork

More case studies

Three more stories.

03 / Live websites and historical projects

The breadth behind the craft.

Federal and public services

Agency, platforms and additional historical sites

Links go to current company sites, which may have changed since my work.