<h2>About the v3 release</h2>
<h3>What’s new in Dell Design System v3?</h3>
<p>DDS v3 introduces structural and visual updates to improve consistency, flexibility, and design–engineering collaboration.</p>
<ul>
<li><strong>Design tokens:</strong> The system is now tokenized. Design decisions are defined as platform‑independent tokens shared across design and code. Visual values can be updated without changing component code, and shared tokens across desktop and mobile keep experiences consistent.</li>
<li><strong>Refactored components:</strong> Components consume tokens directly and have been rebuilt with improved properties, more intuitive usage, and support for small, intentional customizations.</li>
<li><strong>Modernized codebase:</strong> Legacy constraints have been removed, enabling modern CSS, cleaner APIs, and a simpler component structure. DDS v3 is reducing overrides, easing implementation, and lowering long‑term maintenance.</li>
<li><strong>Design–engineering alignment:</strong> Figma and code now share the same token names and structure, reducing mismatches, improving handoff, and cutting back‑and‑forth between teams.</li>
<li><strong>Future‑ready architecture:</strong> Token‑based theming supports brand evolution, scalability, multi‑platform needs, and lays the groundwork for AI‑driven design and development workflows.</li>
</ul>
<h3>How does v3 help teams build faster and more consistently?</h3>
<p>The changes in v3 help product teams move faster and deliver more consistent results.</p>
<ul>
<li><strong>Shared tokens reduce back‑and‑forth:</strong> Design and engineering reference the same token names, so decisions don’t get lost in translation between Figma and code.</li>
<li><strong>Faster, safer visual updates:</strong> Token values can be changed once and flow through the system — no need to update individual components manually.</li>
<li><strong>Fewer overrides and less rework:</strong> Modern CSS and a cleaner component structure mean implementations are simpler out of the box.</li>
<li><strong>Greater flexibility in code:</strong> v3 introduces clearer extension points and more flexible component APIs, allowing teams to customize safely without working against the system.</li>
<li><strong>Consistent by default:</strong> Shared tokens keep experiences aligned across products and platforms without extra effort.</li>
<li><strong>Accessibility built in:</strong> Foundations and patterns are designed to support compliant implementations from the start.</li>
<li><strong>Clearer documentation:</strong> Updated guidelines and examples make it easier to understand when and how to use components correctly.</li>
</ul>
<h3>How does v3 support accessibility?</h3>
<p>Accessibility is built into the foundation of DDS v3, not treated as an add‑on.</p>
<ul>
<li><strong>Components designed for compliance:</strong> V3 components have been refactored with accessibility in mind, providing a more reliable starting point for building compliant experiences.</li>
<li><strong>Token‑driven consistency:</strong> Shared tokens enforce consistent color, spacing, and typography across products, keeping experiences accessible at scale.</li>
</ul>
<p>For more information, see <a href="/getting-started/annotation-kit">Accessibility Annotation Kit</a> and <a href="https://dell.sharepoint.com/sites/AccessibilityCoE">Accessibility CoE SharePoint</a>.</p>
<h2>Migration and adoption</h2>
<h3>How do I migrate my product to DDS v3?</h3>
<ul>
<li><strong>Designers:</strong> Update your files to use DDS v3 components, tokens, and patterns.</li>
<li><strong>Developers:</strong> Update your code to DDS v3 packages and migrate components and APIs as needed.</li>
</ul>
<p>For detailed instructions, see the <a href="/getting-started/migration">DDS v3 Migration Guide</a>.</p>
<h3>Can I use v2 and v3 in the same product during the transition, and are there breaking changes?</h3>
<p>No, DDS v2 and v3 cannot be used together in the same product. They use different CSS, class names, and styling architectures, which will conflict and cause unpredictable results. Plan to migrate a product to DDS v3 in a single, coordinated update rather than mixing versions.</p>
<p>DDS v3 does include breaking changes, so migration requires planning. To support this, each Storybook includes dedicated Migration pages with detailed guidance for that specific implementation.</p>
<h3>Do I need to move to v3 right now?</h3>
<p>No, moving to DDS v3 is not mandatory right now. Teams can continue using v2 while planning their transition to v3. </p>
<p>After the v3 release, the team will providing 6 more months of support for regular defects and 12 more months for security issues for DDS v2.</p>
<h2>Working with tokens</h2>
<h3>What are design tokens and why does v3 use them?</h3>
<p>Design tokens are named values that store core design decisions, such as color, spacing, typography, and elevation. Instead of hard‑coding values like <code>#0672CB</code> or <code>16px</code>, the system uses meaningful names like 
<code>$--dds-color-background-info-base-hover</code>or <code>--dds-spacing-xs.</code></p>
<p>DDS v3 uses tokens to:</p>
<ul>
<li><strong>Create a single source of truth:</strong> Update a value once, and it flows across components, platforms, and design files.</li>
<li><strong>Keep design and code aligned:</strong> Tokens use the same names in Figma and in code, reducing mismatches during handoff.</li>
<li><strong>Enable safer theming and visual updates:</strong> Brand or visual changes can be made at the token level without modifying component code.</li>
<li><strong>Support cross-platform consistency:</strong> The same tokens are shared across web and mobile, keeping experiences aligned.</li>
</ul>
<p>Read more on <a href="/getting-started/tokens">tokens </a>page.</p>
<h3>Where can I find the full list of available tokens?</h3>
<p>You can find tokens in the following places:</p>
<ul>
<li><a href="/components/components-overview"><strong>Component documentation:</strong> </a>Each component includes a Tokens tab listing all tokens specific to that component.</li>
<li><strong><a href="https://www.figma.com/design/9R6misT0WAdjAGkdF0XoK3/Dell-Design-System-v3?m=auto&t=fjFJPoJMlAIeYFTt-6">Figma UI Kit:</a></strong> All tokens are available in the UI Kit for easy reference during design.</li>
<li><strong><a href="/getting-started/storybooks">Storybook:</a></strong> Tokens can also be explored alongside component implementations in Storybook.</li>
</ul>
<h3>How do I use tokens in Figma and in code?</h3>
<p>Tokens are used the same way in both environments. Select the token that matches your intent instead of applying custom values.</p>
<p><strong>In Figma:</strong> Use tokens through Figma variables and styles. Select the token that matches your design need (color, spacing, text) instead of entering custom values. This keeps your designs consistent with what is implemented in code. Read more in <a href="https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles">Figma&#39;s documentation.</a></p>
<p><strong>In code:</strong> Use tokens provided by the design system instead of hard‑coded values. Tokens are exposed as variables that you reference when styling components and layouts. This keeps implementations consistent, easier to update, and aligned with design.</p>
<h2>Components, foundations, and patterns</h2>
<h3>What’s new in v3 components?</h3>
<p>v3 components are a complete rebuild designed for consistency, flexibility, and scale:</p>
<ul>
<li>Rebuilt from the v2 library using a token‑based system that embeds design decisions directly into components</li>
<li>Tokens expose color, spacing, typography, and sizing, with definitions visible when inspecting components in Figma</li>
<li>Built with the latest Figma capabilities, offering more control and easier customization through component properties</li>
<li>Slots enable more flexible compositions and support scalable, tailored product experiences</li>
</ul>
<h3>Are any v2 components deprecated, removed, or not ready for use yet?</h3>
<p>No components that have been removed or deprecated.</p>
<p>Not ready for use yet: Table component, category navigation component, clickable cards, AI components.</p>
<h3>Can I customize tokens? Why are components more flexible?</h3>
<p>Tokens can’t be customized directly in the UI Kit. They’re fixed to keep the system consistent and scalable. Contributors can propose token changes through the Sandbox.</p>
<p>Components are more flexible by design. V3 components use slots and enhanced Figma properties, allowing customization without changing tokens.</p>
<p>Why this works:</p>
<ul>
<li>Tokens provide consistency and clear design decisions</li>
<li>Components adapt to different use cases</li>
<li>Flexibility without breaking the system</li>
</ul>
<p>This approach keeps the system stable while still supporting creative and practical needs.</p>
<h2>Support and contribution</h2>
<h3>How do I report a bug or request a feature in v3?</h3>
<ul>
<li><strong>For bugs, feature requests, and support consultations:</strong> Use the <a href="https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdell.service-now.com%2Fesc%3Fid%3Dsc_cat_item%26sys_id%3Dbdcedc1f4709f6d0e9bcb5ea216d439b&data=05%7C02%7CBruna.Mombach%40Dell.com%7C68a3e87dde4d42bd352f08de9c8d0211%7C945c199a83a24e809f8c5a91be5752dd%7C0%7C0%7C639120326635798392%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=OuGqvuHUHcnu%2BFlLXecbMRximDcxO55BzzW7mBO732E%3D&reserved=0">Dell Design System Contact Form</a> in the Team Member Center on ServiceNow.</li>
<li><strong>For quicker and simpler questions:</strong> Reach out to our team on Microsoft Teams. Find the <a href="https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fteams.microsoft.com%2Fl%2Fchannel%2F19%253A9354a17c845d4069af19fccdd15fdecb%2540thread.skype%2FGeneral%3FgroupId%3De7dbbb3b-12b5-444b-982f-3deb03d25261%26tenantId%3D945c199a-83a2-4e80-9f8c-5a91be5752dd&data=05%7C02%7CBruna.Mombach%40Dell.com%7C4276db938e4f471caf0108de9c8f9317%7C945c199a83a24e809f8c5a91be5752dd%7C0%7C0%7C639120337701945624%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=8N7om8Ji8TqqSfmfwqp0T1B7k58l6aW1kBbvnU%2BapdA%3D&reserved=0">&quot;Dell Design System&quot; on Teams</a> and post your question or reply to a thread in the General channel.</li>
</ul>
<h3>How can I contribute a new component to the system?</h3>
<p>Dell Design System now has the <a href="https://www.figma.com/design/uFlXa0sRIr56e8LEGYgw0M/DDS-Contributor-Sandbox?node-id=0-1&p=f&t=2YnpolBuQUnXtT9D-0">Community Library in Figma</a>, for Dell product designers to contribute or borrow new component designs.</p>
<p>The Community Library makes it easy to design, test, and share your components with the broader DDS community.</p>
<p>Read the guidelines on <a href="/getting-started/community-library">Community Library</a> page.</p>


Find answers to common questions about Dell Design System v3, including migration, design tokens, component updates, and new features.

v3 FAQs

Frequently Asked Questions (FAQs)

Home

About DDS

Migration guide

A11y annotation kit

Figma

Storybooks

Community library

Tokens

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

AI Chat  - Community Library

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