Building a Design System

Pipi 9 has been headless and is now getting a web front end. It has its own working Content Management System (CMS) but doesn't have a Design System.

Design Systems

"A design system is a collection of reusable components and clear standards that can be assembled together to build any number of applications. Design systems aid in digital product design and development of products such as mobile applications or websites. They may contain but are not limited to, pattern/component libraries, design languages, style guides (font, color, spacing, placement), coded components, brand languages, and documentation.

It serves as a reference in combination with a design language that ensures the many different teams involved in designing and building a product create cohesive products that look and behave like each other.

Notable design systems include Lightning Design System (by Salesforce), Material Design (by Google), Carbon Design System (by IBM), and Fluent Design System (by Microsoft). ..." From Wikipedia 

Examples of Design Systems

Material design by Google

‍Apple Design Resources
Audi User Interface Guidelines
Base: Uber's design system
Microsoft Fluent Design System
IBM carbon design system
UK Gov Design System
Spectrum: Adobe Design System
Nord Health Design System
GitLab Design System
More here

Useful Resources


A component is a single, reusable chunk of a user interface.

Examples of components from UK Govt Design System

  • Accordion
  • Backlink
  • Breadcrumbs
  • Button
  • Character count
  • Checkboxes
  • Cookie banner
  • Date input
  • Details
  • Error message
  • Error summary
  • Exit this page
  • Fieldset
  • File upload
  • Footer
  • Header
  • Inset text
  • Notification banner
  • Pagination
  • Panel
  • Phase banner
  • Radios
  • Select
  • Skip link
  • Summary list
  • Table
  • Tabs
  • Tag
  • Task list
  • Text input
  • Textarea
  • Warning text

Component Resources

Design Tokens

"Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code. Design tokens represent the small, repeated design decisions that make up a design system's visual style. ... Tokens replace static values, such as hex codes for color, with self-explanatory names. ..." (From Material Design System)

Nathan Curtis has worked on many projects and has written many articles about design tokens.

Resources from The Component Gallery


  • styleguides.ui is a collection of website style guide articles, books, podcasts, talks, tools, and examples. 


No comments:

Post a Comment