Awesome Design Systems

Articles

• 2024-01-09 — A Global Design System
  • 2024-02-05 — Thoughts on a Global Design System
  • 2024-03-13 — What’s Next for a Global Design System
• 2023-10-23 — Ship Faster by Building Design Systems Slower | Big Medium
• 2023-09-21 — The Design System Ecosystem

Collection of Design Systems (Showcases)

• Awesome Design Systems
• Design Systems Gallery
• Design Systems Repo A frequently updated collection of Design System examples, articles, tools
• Design Systems Resources (via Brad Frost)
• Design Systems List Maintained by Marcin Treder and talks.
• Design Systems For Figma Curated by Josh Cusick, the site is a growing repository of freely available Figma kits
• Design Systems: Useful Examples and Resources
• The Ultimate Design Systems Resources List

Accessible Design Systems

• City of Helsinki DS
  • Source
• Scottish Government DS
• City of Calgary DS
• Oslo’s design system

Pre-built Design Systems / UI Kits

• ★★★★☆ Reshaped Design System in React & Figma
• ★★★★☆ Untitled UI v4 by Jordan Hughes (Australia)
• ★★☆☆☆ UI Prep

Design Tokens

• Awesome Design Tokens
• Design Tokens Guide
• Style Dictionnary
  • Style-Dictionary-Play
  • Token Configurator
• Cobalt CI
• Open Props
• Specify

Specify helps you generate design tokens that are always updated so you can transform them with Style Dictionary. Specify doesn’t replace Style Dictionary. It enhances it.

Figma

• Tokens Studio for Figma
• Synchronizing Figma variables with Design Tokens

Design Tokens Naming

• Curtis, N. (2020). Naming Tokens in Design Systems

• Curtis, N. (2022). Reimagining a Token Taxonomy

• Fluin, S. (2022, August 16). The Pyramid Design Token Structure: The Best Way to Format, Organize, and Name Your Design Tokens

• Gossmann, T. (2022, April 21). The Primary/Secondary Controversy in Design Systems

• Naming in Nord Design System n-color-{role}-{modifier}-{theme}

/* Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content. */
--n-color-text: unset;
/* Weak text color for Nordhealth. Used for e.g. introduction paragraphs and help texts that are coupled with form elements. */
--n-color-text-weak: unset;
/* Weaker text color for Nordhealth. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts. */
--n-color-text-weaker: unset;
/* Weakest text color for Nordhealth. Used for e.g. disabled input text and placeholder text in focused inputs. */
--n-color-text-weakest: unset;
/* Default border color for Nordhealth. */
--n-color-border: unset;

• Naming in Netlify Mineral Design System [target]_[property]_[variation]_[state]
• Naming in Lightning Design System $color-text-destructive-hover

/* Body text color */
$color-text-default: unset;
/* Inverse text color for dark backgrounds */
$color-text-inverse: unset;
/* Color for text that is purposefully de-emphasized to create visual hierarchy. */
$color-text-weak: unset;
/* Color for texts or icons that are related to warnings on a dark background. */
$color-text-warning: unset;
/* Text color for field labels. */
$color-text-label: unset;

• Naming in CleverCloud Design System --cc-color-bg-primary-weaker

/* Usage: regular text. */
--cc-color-text-default: var(--color-grey-90);
/* Usage: Opposite of default text color - use this with plain backgrounds like primary / success / danger, etc. For instance: text inside primary cc-button. */
--cc-color-text-inverted: var(--color-white);
/* Usage: info, main color used through the application. For instance: text color inside outlined primary cc-button. */
--cc-color-text-primary: var(--color-blue-60);
/* Usage: information that need to stand out a little bit more than the rest of the text. For instance: links. */
--cc-color-text-primary-highlight: var(--color-blue-70);
/* Usage: More contrasted text than primary. For instance: percentage chart value. */
--cc-color-text-primary-strong: var(--color-blue-80);
/* Usage: Very contrasted text but not black and not default text color. For instance: headings. */
--cc-color-text-primary-strongest: var(--color-blue-100);
/* Usage: bold text that needs to stand out from normal / light variants. For instance: text inside <strong> tags. */
--cc-color-text-strongest: var(--color-grey-100);
/* Usage: success or valid feedback. For instance: text saying an app is running correctly */
--cc-color-text-success: var(--color-green-100);
/* Usage: cautionnary text. For instance: text saying an app is stopped. */
--cc-color-text-warning: var(--color-orange-100);
/* Usage: text less important than normal text. For instance: sidenotes, the required mention inside forms. */
--cc-color-text-weak: var(--color-grey-80);

• Naming in Auro Design System --ds-color-text-primary-default)

--ds-color-text-primary-default: #222222;
--ds-color-text-secondary-default: #626b79;
--ds-color-background-lightest:	#ffffff;
--ds-color-background-lighter:	#f8f8f8;
--ds-color-background-darker:	#01426a;
--ds-color-background-darkest: #00274a;

• Naming in Twilio Paste Design System

$color-text: unset;
$color-text-weak: unset;
$color-text-weaker: unset;
$color-text-weakest: unset;
$color-text-link: unset;
$color-text-icon: unset;
$color-background-success-weakest: unset;
$color-border-destructive: unset;

• Naming in Polaris Design System --p-color-{element}-{role}-{variant}-{state} (--p-color-bg-critical-subdued-hover)

--p-color-text-brand-on-bg-fill-active: #ccc;
--p-color-text-brand-on-bg-fill-disabled: #fff;
--p-color-text-brand-on-bg-fill-hover: #e3e3e3;
--p-color-text-brand-on-bg-fill: #fff;
--p-color-text-caution-active: #1f1c00;
--p-color-text-caution-hover: #332e00;
--p-color-text-caution-on-bg-fill: #332e00;
--p-color-text-critical-on-bg-fill: #fffbfb;
--p-color-text-emphasis-on-bg-fill-active: #d5dcff;
--p-color-text-emphasis-on-bg-fill-hover: #e2e7ff;
--p-color-text-emphasis-on-bg-fill: #fcfdff;
--p-color-text-info-active: #002133;
--p-color-text-info-hover: #003a5a;
--p-color-text-magic-on-bg-fill: #fdfdff;
--p-color-text-success-active: #092a1b;
--p-color-text-success-hover: #083d25;
--p-color-text-success-on-bg-fill: #f8fffb;
--p-color-text-warning-active: #251a00;
--p-color-text-warning-hover: #412d00;
--p-color-text-warning-on-bg-fill: #251a00;
--p-color-bg-surface: var(--p-color-bg);
--p-color-bg-surface-hover: #f7f7f7;
--p-color-bg-surface-active: #f3f3f3;
--p-color-bg-surface-disabled: rgba(0,0,0,.05);
--p-color-bg-surface-emphasis-active: #e2e7ff;
--p-color-bg-surface-emphasis-hover: #eaedff;
--p-color-bg-surface-emphasis: #f0f2ff;
--p-color-bg-surface-inverse: #303030;
--p-color-bg-surface-brand: #e3e3e3;
--p-color-bg-surface-brand-hover: #ebebeb;
--p-color-bg-surface-brand-active: #f1f1f1;
--p-color-bg-surface-brand-selected: #f1f1f1;
--p-color-bg-surface-magic-active: #e4deff;
--p-color-bg-surface-secondary-selected: #ebebeb;
--p-color-bg-surface-tertiary-active: #e3e3e3;
--p-color-bg-surface-tertiary-hover: #ebebeb;
--p-color-bg-surface-warning-active: #ffe4c6;
--p-color-bg-surface-warning-hover: #ffebd5;
--p-color-bg-surface-secondary: var(--p-color-bg-subdued);
--p-color-bg-surface-secondary-hover: var(--p-color-bg-subdued-hover);
--p-color-bg-surface-secondary-active: var(--p-color-bg-subdued-active);
--p-color-bg-surface-tertiary: var(--p-color-bg-secondary-experimental);
--p-color-bg-fill-success: var(--p-color-bg-success-strong);
--p-color-bg-fill-success-hover: var(--p-color-bg-success-strong-hover-experimental);
--p-color-bg-fill-success-active: var(--p-color-bg-success-strong-active-experimental);
--p-color-bg-fill-success-secondary: var(--p-color-bg-success);
--p-color-bg-surface-success: var(--p-color-bg-success-subdued);
--p-color-bg-surface-success-hover: var(--p-color-bg-success-subdued-hover);
--p-color-bg-surface-success-active: var(--p-color-bg-success-subdued-active);
--p-color-bg-fill-critical: var(--p-color-bg-critical-strong);
--p-color-bg-fill-critical-hover: var(--p-color-bg-critical-strong-hover);
--p-color-bg-fill-critical-active: var(--p-color-bg-critical-strong-active);
--p-color-bg-fill-critical-secondary: var(--p-color-bg-critical);
--p-color-bg-fill-tertiary: var(--p-color-bg-strong);
--p-color-bg-fill-tertiary-hover: var(--p-color-bg-strong-hover);
--p-color-bg-fill-tertiary-active: var(--p-color-bg-strong-active);
--p-color-bg-fill-brand: #303030;
--p-color-bg-fill-brand-hover: #1a1a1a;
--p-color-bg-fill-brand-active: #1a1a1a;
--p-color-input-bg-surface: var(--p-color-bg-input);
--p-color-input-bg-surface-hover: var(--p-color-bg-input-hover-experimental);
--p-color-input-bg-surface-active: var(--p-color-bg-input-active-experimental);

--pc-button-color: var(--p-color-bg-primary);
--pc-button-text: var(--p-color-text-on-color);
--pc-button-color-hover: var(--p-color-bg-primary-hover);
--pc-button-color-active: var(--p-color-bg-primary-active);
--pc-button-color-depressed: var(--p-color-bg-primary-active);

'headingXs' | 'headingSm' | 'headingMd' | 'headingLg' | 'headingXl' | 'heading2xl' | 'heading3xl' | 'heading4xl' | 'bodySm' | 'bodyMd' | 'bodyLg'

• Naming in Adobe Spectrum Design System --spectrum-alias-text-color-invalid

--spectrum-alias-text-color-invalid: unset;

• Naming in Atlassian Design System

# Use for primary text, such as body copy, sentence case headers, and buttons.
color.text
# Use for text on bold backgrounds.
color.text.inverse
# Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.
color.text.subtle
# Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.
color.text.subtlest
# Use for text that reinforces our brand.
color.text.brand
# Use for informative text or to communicate something is in progress, such as in-progress lozenges.
color.text.information
# Use for text to communicate a favorable outcome, such as input field success messaging.
color.text.success
# Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.
color.text.accent.green

• Naming in Material 3

# Main color used across screens and components
md.sys.color.primary
# Standout container color for key components
md.sys.color.primary-container
# Text and icons shown against the primary color
md.sys.color.on-primary
# Contrast-passing color shown against the primary container
md.sys.color.on-primary-container
# Displays opposite of the primary color
md.sys.color.inverse-primary
# Accent color used across screens and components
md.sys.color.secondary
# Less prominent container color, for components like tonal buttons
md.sys.color.secondary-container

md.sys.shape.corner.full
md.sys.typescale.display-large.font
md.sys.elevation.level1

• Naming in Vitamin

/* Background */
--vtmn-semantic-color_background-primary: unset;
--vtmn-semantic-color_background-secondary: unset;
--vtmn-semantic-color_background-tertiary: unset;
--vtmn-semantic-color_background-accent: unset;
/* Content */
--vtmn-semantic-color_content-primary: unset;
--vtmn-semantic-color_content-secondary: unset;
--vtmn-semantic-color_content-tertiary: unset;
--vtmn-semantic-color_content-action: unset;
--vtmn-semantic-color_content-active: unset;
--vtmn-semantic-color_content-inactive: unset;
--vtmn-semantic-color_content-negative: unset;
--vtmn-semantic-color_content-accent: unset;
/* Borders */
--vtmn-semantic-color_border-primary: unset;

• Naming in Captiv8

Design Systems Documentation

• Zeroheight

  • Decathlon Example
  • Doctolib Example
  • GetAround Example

• Supernova

  • Supernova Documentation demo
  • Supernova Figma variables import
  • Supernova Token Types

• Backlight Design systems, code-side

  • Best design system documentation sites

• Knapsack

• Storybook

  • Chromatic
    • Chromatic is a cloud-based toolchain for Storybook that helps teams ship UI components faster. It’s made by the team behind Storybook.

Multi-frameworks Design Systems

• NL Design System

Tools

• Tools
• Luro Build and track your design system

Resources

• Sidebar, Category: Design Systems
• ROI Calculator

CSS System Colors

• CSS Color Module Level 4

body {
  color: CanvasText;
  background-color: Canvas;
}

By default, CanvasText results in a color close to black and Canvas is a color that's close to white. The actual implementation depends on the browser. For example, CanvasText in Chrome results in #121212 whereas Safari has it specified as the slightly lighter #1e1e1e.