<h2>What is a design system?</h2>
<p>A design system is a library of reusable components governed by a set of foundational standards, such as color, typography, and grid. Additionally, guidelines and documentation accompany all components along with guiding patterns and best practices. Teams are encouraged to leverage the system and its documentation to build repeatable designs within applications or interfaces.</p>
<h2>Approach</h2>
<p>We’ve rebuilt our components in the Dell Design System (DDS) v2 from the ground up, creating a system that is accessible, scalable, and flexible. Our engineering team has provided reusable front-end code in addition to design guidance and code implementation documentation to help teams create consistent experiences within Dell’s digital universe.</p>
<h2>Advantages</h2>
<p>The DDS is aligned to <a href="https://dell.sharepoint.com/sites/GlobalBrand?e=1%3a6ce42335becf4b069fe0ec7d3a6b968a&xsdata=MDV8MDJ8TV9CYWNjaGllcmlARGVsbC5jb218NWUxM2U5MmYyODBjNDFiZGIwN2UwOGRkOTg5NWRiNjZ8OTQ1YzE5OWE4M2EyNGU4MDlmOGM1YTkxYmU1NzUyZGR8MHwwfDYzODgzNDQ5MTYwNTIzNjEwMHxVbmtub3dufFRXRnBiR1pzYjNkOGV5SkZiWEIwZVUxaGNHa2lPblJ5ZFdVc0lsWWlPaUl3TGpBdU1EQXdNQ0lzSWxBaU9pSlhhVzR6TWlJc0lrRk9Jam9pVFdGcGJDSXNJbGRVSWpveWZRPT18MHx8fA%3d%3d&sdata=djl4RWxTMGxTTWZ0SzVxa3Z6SDN0a2V5c3pBYkk2Q1RsV3RPdjNNeEpvST0%3d">Dell Technologies Brand guidelines</a> and supports a company-wide initiative to create optimal business outcomes in digital experiences that are modern, measurable, and unified.</p>
<p><a href="https://www.delldesignsystem.com/partners/accessibility/">Accessibility</a> is a priority for every team within Dell. DDS team members frequently consult with Dell’s <a href="https://dell.sharepoint.com/:u:/r/sites/AccessibilityCoE/SitePages/Accessibility-Policy.aspx?csf=1&web=1&e=E76RVZ">Accessibility Center of Excellence</a> to ensure all system components meet Web Content Accessibility Guidelines (WCAG) 2.2 AA standards. While the components themselves meet accessibility requirements, please note that the implementation does not assure an accessible experience.</p>
<p>The DDS library is built in-house, with no third-party dependencies or security risks. By creating our own design library, we know what’s in it.</p>
<p>There is a community built around the DDS library. Support and contributions come from other Dell designers and engineers, not just our team. That&#39;s why we created the <a href="https://www.figma.com/design/uFlXa0sRIr56e8LEGYgw0M/DDS-Contributor-Sandbox?node-id=0-1&p=f&t=2YnpolBuQUnXtT9D-0">DDS Contributor Sandbox</a>, a space Dell product team designers can place new component designs to be considered for adoption into the DDS UI Kit.</p>
<p>Make sure to <a href="https://forms.office.com/pages/responsepage.aspx?id=mhlclKKDgE6fjFqRvldS3dNp78o7Z-ZIhzK-hiOGWKFUNjJOWE1FUEtLNk1ITzdKQ1BRQ0NJMkgyTC4u">register your application</a> to be part of the community we interview and influence product decisions.</p>
<h2>Principles</h2>
<details data-name='card-collection' data-cards='[{"title":"Flexibility","subtitle":"","description":"Adaptable and consistent experiences across devices and platforms.","icon":"device-screen-size","link":{"type":"External","path":"","label":""}},{"title":"Collaboration","subtitle":"","description":"A scalable system that allows teams to contribute their designs and explore others&#39; contributions.","link":{"label":"","path":"","type":"External"},"icon":"user-group-chat"},{"image":{"url":"","alt":""},"link":{"label":"","path":"","type":"Internal"},"description":"Framework-free DDS components and web components, with Angular and React on our roadmap.","title":"Reusable Code","icon":"document"},{"image":{"url":"","alt":""},"link":{"label":"","path":"","type":"Internal"},"title":"Accessibility","description":"Each element reviewed by Dell’s Accessibility team in pursuit of design that works for everyone.","icon":"accessibility"},{"image":{"url":"","alt":""},"link":{"label":"","path":"","type":"Internal"},"title":"Branding","description":"Design guidance that speaks Dell’s language.","icon":"brand-dell"},{"image":{"url":"","alt":""},"link":{"label":"","path":"","type":"Internal"},"title":"Support","description":"Maintenance by a team of designers, developers, writers, and product managers.","icon":"assistance"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='undefined' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


A unified design language to support Dell’s digital universe⁠⁠—ensuring design is accessible, inclusive, and useful.


About the Dell Design System

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>


DDS React components

Home

About DDS

Figma

Vanilla

Angular

React

Data visualization

Migration guide

A11y annotation kit

AI chat toolkit

Contributor sandbox

Getting started

Changelog

Roadmap

Updates

Overview

Color

Elevation

Grid

Icons

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Category navigation

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

Table

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Sign-in

Table view

Patterns

Accessibility

Brand

Partners

Case studies

FAQs

Tools

Videos

Dell Design System v1

Resources

Send Feedback

Check my tickets

Find us on Teams

Support