DuckDuckGo Design Tokens

A repo to generate style variables for all the things. But we're starting with static-pages. Tokens act as our single source of truth. They can be transformed and formatted to meet the needs of any platform (Web, Android, iOS, etc). A single change to a property file can be transformed and compiled for consumption by any platform using our tokens.

Style Dictionary Docs

Table of Contents

• DuckDuckGo Design Tokens
  • Table of Contents
  • Getting started
  • What is a Design Token?
  • Token Types
    • Option Tokens
    • Semantic Tokens
    • Component Tokens
  • Naming Approach
    • Option & Semantic Tokens
      • Prefix
    • Component Tokens
  • Creating Tokens
    • Desktop Browsers
  • Release Process

Getting started

Recommended node version: v22

npm i

npm run build

Then check out what is output to build folder

What is a Design Token?

Top level answer: A key-value pair representing a design decision in code.

Token Types

We have 3 types of tokens that have varying levels of specificity. This increased specificity creates a visible path from design decisions to implementation.

Option Tokens

These are primitive values represented by context-agnostic names. This token type generally consist of global styles like color, typography and spacing, elevation. These tokens are commonly referenced and inherited by the other 3 token types.

Semantic Tokens

Semantic tokens have a contextual name that communicates their intended purpose. These types of tokens often inherit option tokens.

Examples

• ds-color-primary
• ds-color-disabled-text-color
• ds-color-page-background

Component Tokens

These are hyper-specific tokens relating to a single component and its various variants and states. They can inherit option or semantic tokens and have a very specific name to ensure correct usage during component development.

Naming Approach

Option & Semantic Tokens

prefix-property-variant or prefix-property-variant-modifier

Examples:

• ds-color-white
• ds-color-mandarin-400
• ds-radius-x04
• ds-font-family-display

Prefix

The dedicated prefix for our design system values is ds

Component Tokens

prefix-component-variant-state-property

Creating Tokens

Desktop Browsers

The Desktop Browsers' theme colors (src/properties/desktop-browsers/theme.ts) are automatically generated from an export of the Global Colors & Styles theme in Figma.

To re-generate this file, obtain a Figma JSON export (e.g. theme-variables.json) and then run:

node scripts/convert-figma-theme-export-to-tokens.ts --input theme-variables.json --output src/properties/web/desktop-browsers/theme.ts

Release Process

1. Navigate to https://github.com/duckduckgo/design-tokens/actions/workflows/release.yml
2. Click Run workflow and type in the version number to release. For example, 1.0.0