<h1>Design Tokens</h1>
<h2>Overview</h2>
<p>Design tokens are the shared language of our design system. They capture the smallest design decisions—such as color, spacing, and typography—as reusable, named values that work across both design and code. Instead of relying on raw values like hex codes or pixel sizes, tokens let teams use clear, meaningful names that describe intent, such as <em>primary text color</em> or <em>default spacing</em>.</p>
<p>Tokens represent our core design foundations, including color, typography, spacing, radius, elevation, and motion. Because they are platform‑agnostic, the same token can be used consistently in Figma and in code across web, iOS, and Android, helping everything stay aligned.</p>
<p>A token usually has two parts:</p>
<ul>
<li><strong>A clear, code‑style name</strong> (for example, <code>--dds-color-brand-strong</code>)</li>
<li><strong>A value,</strong> such as a hex color or numeric value, defined behind the scenes</li>
</ul>
<p>This shifts the focus from choosing exact values (“this shade of blue”) to choosing purpose (“brand strong color”). When designers and engineers use the same token—such as <code>space-md</code>—updates automatically flow everywhere.</p>
<p>In short, design tokens make it easier to build consistent interfaces, reduce rework, and scale the design system with confidence.</p>
<h2>Why use tokens</h2>
<p>Tokens keep DDS usage consistent, scalable, and easy to maintain across all products and platforms.</p>
<p>They provide three key benefits:</p>
<ul>
<li><strong>Single source of truth:</strong> Tokens centralize style decisions (such as colors, spacing, and typography) in one location. Any update to a token automatically propagates through the entire ecosystem, keeping design and code in sync without manual fixes.</li>
<li><strong>Scale and flexibility:</strong> Tokens enable support for multiple themes—such as light, dark, and high‑contrast—using a single set of definitions. This ensures visual consistency while allowing products to adapt to different contexts and user needs.</li>
<li><strong>Design‑to‑code parity:</strong> Tokens help designers and engineers speak the same language. By moving away from raw hex codes and pixel values toward semantic intent, DDS ensures that both design and code reference the same meaningful, purpose‑driven definitions.</li>
</ul>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/getting-started/tokens/tokens-1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>How to get started</h2>
<p>Tokens support designers and developers in different workflows. Designers apply them like styles in Figma, while developers consume them through helper classes and CSS variables.</p>
<h3>For designers</h3>
<p>All tokens are available directly in the Figma UI Kit.</p>
<p>They behave like familiar color styles, text styles, and effects, with one key difference: they are powered by intentional, semantic meaning rather than hard‑coded values. Use them the same way you would apply any style in Figma.</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/getting-started/tokens/tokens-2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>For developers</h3>
<p>All tokens are exposed through DDS libraries as CSS variables and are available in Storybooks.</p>
<p>In practice, developers consume tokens through helper classes, which wrap semantic tokens and provide a ready‑to‑use interface. Using tokens eliminates guesswork and removes “magic numbers” from styles.</p>
<details data-name='image-block' data-images='[]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>How tokens work in DDS</h2>
<p>Design tokens do not replace DDS—they make it stronger. Tokens keep products consistent, scalable, and easier to maintain over time.</p>
<p>Instead of hard‑coding raw values like <code>16px</code> or <code>#0052CC</code>, DDS uses tokens that describe the purpose behind a value.</p>
<p><strong>Example:</strong> Rather than using a “success” color directly, reference a token such as <code>var(--dds-color-text-success-rest)</code>. If the success color changes, updating the token once updates the entire product automatically.</p>
<h2>Token levels</h2>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/getting-started/tokens/token-levels.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>Global tokens</h3>
<p>Global tokens form the foundation of the system. They store raw values such as hex colors, spacing units, or font sizes and act as the base source of truth.</p>
<p><strong>Example:</strong> <code>color.slate.10 = #1D2C3B</code></p>
<p>Global tokens are intended for internal DDS use only. Product teams should not reference them directly and should instead consume semantic tokens.</p>
<h3>Semantic tokens</h3>
<p>Semantic tokens describe the purpose of a value—what it means and when it should be used. They reference global tokens and translate them into meaningful roles such as primary text, success background, or subtle border.</p>
<p><strong>Example:</strong> <code>color.text.primary = color.slate.10</code></p>
<p>Here, the meaning (“primary text”) matters more than the exact value.</p>
<h3>Component tokens</h3>
<p>Component tokens are the most specific level. They define styling unique to a single component when precise control is required. Component tokens reference semantic tokens and are used only when changes should remain isolated.</p>
<p><strong>Example:</strong> <code>messagebar.timer.color.background</code></p>
<p>Common use cases include:</p>
<ul>
<li>A specific gap between elements inside a badge</li>
<li>The track color of a switch</li>
<li>The divider size in a tab component</li>
</ul>
<p><strong>Example (Button):</strong></p>
<ul>
<li><code>button.gap.xs</code></li>
<li><code>button.size.xs</code></li>
<li><code>button.padding-horizontal.xs</code></li>
</ul>
<h2>Token anatomy</h2>
<p>Design token names follow a predictable structure that makes them easy to read, search, and maintain. Each part of the name adds meaning and context.</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/getting-started/tokens/token-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<p>The DDS token naming system has four parts:</p>
<ul>
<li><strong>Category</strong></li>
<li><strong>Type</strong></li>
<li><strong>Variant</strong></li>
<li><strong>State</strong></li>
</ul>
<p><em>Note:</em> For component tokens, the component name becomes the category (for example, <code>button</code>, <code>accordion</code>, <code>tag</code>).</p>
<p><strong>Example:</strong><br><code>button.background.color.primary.hover</code></p>
<h3>Naming structure</h3>
<p>Token name format: <code>{prefix}-{category}-{type}-{variant}--{state}</code></p>
<ul>
<li><strong>Prefix</strong>: All DDS tokens start with <code>dds-</code> to avoid conflicts.</li>
<li><strong>Category</strong>: Broad design property (for example, <code>color</code>, <code>spacing</code>, <code>typography</code>).</li>
<li><strong>Type</strong>: The specific attribute being modified (for example, <code>text</code>, <code>border</code>, <code>radius</code>).</li>
<li><strong>Variant</strong>: Stylistic or semantic meaning (for example, <code>primary</code>, <code>subtle</code>).</li>
<li><strong>State</strong>: Interaction or condition (for example, <code>hover</code>, <code>active</code>, <code>focus</code>).</li>
</ul>
<p>Together, these parts create tokens that are clear, predictable, and scalable.</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/getting-started/tokens/tokens-naming.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Token types</h2>
<p>Foundations are the design decisions that define our visual language. Tokens translate those concepts into structured, reusable values.</p>
<h3>Color tokens</h3>
<p><a href="https://www.figma.com/design/9R6misT0WAdjAGkdF0XoK3/Dell-Design-System-v3?node-id=6559-37544">Color tokens</a> transform raw palette values into semantic names. They allow the UI to adapt across themes, modes, and accessibility requirements without updating individual components.</p>
<p>Icon colors are mapped to the same semantic text color tokens because icons are read like text and serve the same communicative purpose in the interface.</p>
<p><strong>Examples:</strong></p>
<ul>
<li><code>color.text.primary</code></li>
<li><code>color.status.success</code></li>
</ul>
<h3>Typography tokens</h3>
<p><a href="https://www.figma.com/design/9R6misT0WAdjAGkdF0XoK3/Dell-Design-System-v3?node-id=6559-37544">Typography tokens</a> transform type scales, weights, and line‑height rules into reusable values. Each typography style is defined by a set of tokens—such as size, weight, and line height—ensuring clear hierarchy and consistent typography across products and platforms.</p>
<p><strong>Examples:</strong></p>
<ul>
<li><code>typography/display/display-3/weight/default</code></li>
<li><code>typography/display/display-3/size/default</code></li>
</ul>
<h3>Spacing tokens</h3>
<p>Spacing tokens define the layout scale (for example, <code>space.4</code>, <code>space.8</code>, <code>space.16</code>). They standardize rhythm, structure, and responsive behavior by keeping margins and padding consistent.</p>
<h3>Structural tokens</h3>
<p>Structural tokens control shape and motion patterns such as radius, elevation, and animation duration (for example, <code>radius.md</code>, <code>elevation.sm</code>, <code>motion.duration.fast</code>). They reduce subjective styling decisions and reinforce UI consistency.</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/getting-started/tokens/tokens-types.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Enabling modes and themes</h2>
<p>Design tokens enable our system to adapt its visual expression consistently across <strong>modes</strong> and <strong>themes</strong>.</p>
<ul>
<li>A <strong>mode</strong> defines how colors adapt to different viewing environments, such as light mode and dark mode.</li>
<li>A <strong>theme</strong> defines the visual identity or brand styling applied across those modes.</li>
</ul>
<p>Because tokens define colors, surfaces, and interaction states at a semantic level, the same UI can automatically switch between modes or themes without redesigning components or changing code.</p>
<p>By centralizing these values, tokens help ensure that every mode and theme maintains accessible contrast, visual consistency, and a cohesive experience across platforms.</p>
<h2>Usage best practices</h2>
<h3>For designers</h3>
<ul>
<li>Always use tokenized styles.</li>
<li>Do not enter raw hex values, spacing units, or font sizes.</li>
<li>Choose tokens based on semantic meaning, not visual appearance.</li>
<li>Do not modify or redefine tokens locally.</li>
</ul>
<h3>For developers</h3>
<ul>
<li>Use tokens as the single source of truth for visual values and consume them through helper classes.</li>
<li>Prefer semantic tokens when building product UI by using helper classes that wrap tokens.</li>
<li>Rely on default design‑system behavior such as states, accessibility, and inheritance.</li>
<li>Avoid duplicating token values or redefining them in custom code.</li>
<li>Favor token‑based configurations and variants over ad‑hoc custom CSS.</li>
</ul>
<p>For more questions, review our <strong><a href="/resources/faq">v3 FAQs</a></strong>.</p>


Design tokens translate design decisions into consistent, reusable values that enable scalable and aligned experiences across all platforms.

Tokens

Home

About DDS

Migration guide

AI chat toolkit

A11y annotation kit

Figma

Storybooks

Community library

Getting started

Overview

Color

Elevation

Grid

Icons

Spacing

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

AI design library

Micro-moments

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Data visualization

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Sign-in

Patterns

Accessibility

Brand

Partners

Case studies

Blog

FAQs

Tools

Videos

Resources

Send Feedback

Check My Tickets

Find us on Teams

Support