<h2>About the product</h2>
<p>Dell Design System (DDS) is a comprehensive set of foundational standards and guidelines that document the design and development of reusable patterns and components. The DDS v2 website provides a single, extensible, and easily accessible location for all usage guidelines and code for foundations, patterns, and components. This ensures that all Dell teams, regardless of their location, can access the most up-to-date resources. The organization of the website allows for scalability. So, as our design system grows, our digital presence can grow with it.</p>
<details data-name='image-block' data-images='[{"alt":"The DDS v2 website","caption":"\nThe DDS v2 website provides a single easily accessible location for all design assets and code.","url":"https://dds.dell.com/site/v2/resources/case-studies/dds-v2-website/website-case-study-about-2x.jpg"}]' data-numberofcolumns='1'></details>

<h2>Business impact</h2>
<p>The Dell Design System v2 website was launched in 2021. Now, in 2025, DDS components and patterns are in over 400+ applications at Dell. The business impact on these applications is evidenced in three major ways: </p>
<ol>
<li><strong>Increased efficiency and productivity</strong>: By providing a library of pre-approved design elements, the DDS v2 website has allowed designers and developers to work faster and more efficiently.</li>
<li><strong>Consistency and brand integrity</strong>: The DDS v2 website was designed and built using DDS design elements and following DDS guidelines. Using DDS will ensure a consistent look and feel for any Dell product, strengthening brand identity and building trust with customers. </li>
<li><strong>Scalability</strong>: The DDS v2 website was designed in a way as to allow it to easily scale to accommodate new products, features, and platforms.</li>
</ol>
<p> </p>
<p>Overall, the DDS v2 website has increased the efficiency and effectiveness of the design and development process and contributed to the overall success and growth of Dell products.</p>
<h2>Problem statement</h2>
<p>The DDS team built DDS v2 as a unified design language to support the hundreds of applications in the Dell universe, ensuring design is consistent, useful, and accessible. DDS customers (Dell Designers, Product Management teams and Developers, along with external agencies and approved Dell 3rd party vendors) needed a website that would provide centralized access to all design assets and the guidelines for their use. The DDS team set out to build a website that not only housed their homegrown design and code assets but would also be built using some of those same assets. </p>
<h2>Design process</h2>
<p>The design process was an agile approach that included discovery, framing, building, measuring, learning, and validating.  </p>
<p>The discovery process included ten Dell product applications chosen to help with discovery, development, testing and launching DDS v2 assets and the website. The team also ran detailed competitor analyses to see how other design systems organized and documented their content. </p>
<p>After the website was launched, the team conducted usability tests to assess how well the design performed with real users. This allowed them to gather feedback and make informed improvements to enhance the user experience. </p>
<p>The early success of the agile process led to its adoption and use by current DDS teams.</p>
<h2>Engineering process</h2>
<p>The previous Dell Design System website was built using Bootstrap components and Webflow. However, Webflow was not a user-friendly tool and required a license, which led to the engineering team searching for a new architecture. After multiple workshops to research industry standards, the team settled on three projects: a front-end with NextJS, a headless CMS with Strapi, and a back-end solution using a back end to front end pattern with NestJS.  </p>
<p>To create the website’s architecture, the engineering team adopted a NextJS full stack application, which simplified the environment and minimized costs. </p>
<p>Following DDS standards was essential. This allowed the engineering team to maintain its user- centric focus, building a site that was accessible, responsive, and integrous. </p>
<h2>Leveraging DDS foundations and components</h2>
<p>Following the release of Dell Design System v2 foundations and components, the team embarked on creating a website to host the new design system. This simultaneous development of the website and the design system provided a practical example for customers on how to integrate DDS foundations
and components into their own product design and build.</p>
<h3>Foundations</h3>
<p>DDS foundations are the bedrock on which the DDS v2 website was built. </p>
<p><strong>Typography</strong> – DDS typography classes were used across components during development and made sure to follow all DDS guidelines for headers and body font to ensure optimal readability. </p>
<p><strong>Colors</strong> – The website incorporated the DDS color palette and usage guidelines throughout all pages and components. This increased consistency, usability, and accessibility. </p>
<p><strong>Icons</strong> - DDS icons were incorporated across the website to add visual cues and guide customer’s attention to key elements. Icons were used in the masthead, footer, side navigation items, navigational cards, search input, component status, and all copy and download buttons.  </p>
<p><strong>Standardized spacing and sizing</strong> – The website team followed sizing and spacing guidelines when designing and writing content for documentation pages to maximize readability. The engineering team used the spacing classes to ensure consistent spacing between the section header and body texts. </p>
<p><strong>Accessibility</strong> – DDS components were built to meet WCAG 2.0 standards, including focus, hover, and active states. In building the website, the engineering team included the same DDS focus state for consistency.</p>
<details data-name='image-block' data-images='[{"alt":"The DDS color palette","caption":"The website incorporated the DDS color palette and usage guidelines.","url":"https://dds.dell.com/site/v2/resources/case-studies/dds-v2-website/website-case-study-foundation-2.jpg"}]' data-numberofcolumns='1'></details>

<h3>Components</h3>
<p>The team used DDS components in the construction of our website, proving the viability of existing components. These are a few examples of the components used: </p>
<p><strong>Button</strong> – The use of DDS buttons across the site followed usage guidelines in determining primary and secondary buttons. After careful analysis of carousel actions and the use of primary buttons, these were included in its design. The team also modified buttons for use in masthead search, and tabs.</p>
<p><strong>Links</strong> – We used DDS links for both internal and external page navigation across the website. We used links in cards along with a description of where it would take the user. DDS links were also incorporated in the masthead, footer, and status items. </p>
<p><strong>Divider</strong> – Using the DDS divider component allowed us to separate different elements in groups of content and create a clear visual hierarchy, making it easier for customers to understand and navigate the interface. </p>
<h3>Adapting foundations and components</h3>
<p>Adapting components to the team&#39;s needs on the fly was a testament to the flexibility of DDS A few of the components adapted to meet the team’s needs are: </p>
<p><strong>Icon Gallery</strong> - The website originally displayed all the icons on the page. Included were small buttons using DDS icons to download as well as copy the class names of the icons. When importing the icons to the v2 website, the team added the option to import the icons via the CDN link. This allowed for the option to keep older DDS icons to mark as deprecated on the website.  </p>
<p><strong>Carousel</strong> - The design team needed a carousel component to efficiently display multiple pieces of content in a limited space, but no carousel component existed. The engineering team collaborated with design to build a carousel from existing icons and components. </p>
<details data-name='image-block' data-images='[{"alt":"The evolution of the DDS carousel","caption":"The evolution of the DDS carousel.","url":"https://dds.dell.com/site/v2/resources/case-studies/dds-v2-website/website-case-study-adapting-2.jpg"}]' data-numberofcolumns='1'></details>

<p><strong>Table of contents</strong> - To improve website navigation, we created a table of contents, using the components and foundations provided by DDS. The team utilized DDS typography and defined the hover, select, and focus states, drawing inspiration from other components and their state designs. </p>
<details data-name='image-block' data-images='[{"alt":"The DDS table of contents","caption":"To build the table of contents, the team utilized DDS typography and defined the hover, select, and focus states.","url":"https://dds.dell.com/site/v2/resources/case-studies/dds-v2-website/dellcase-table-of-contents--1--1.jpg"}]' data-numberofcolumns='1'></details>

<p><strong>Search</strong> - The v2 website called for a more robust search feature. The team decided to use a search input component, allowing users to look for a specific keyword or phrase and obtain contextual results. The team built the search input using DDS spacing and typography requirements.</p>
<details data-name='image-block' data-images='[{"alt":"The DDs search tool","caption":"A search input component helped make the DDS search tool more robust.","url":"https://dds.dell.com/site/v2/resources/case-studies/dds-v2-website/ddscase-search2.jpg"}]' data-numberofcolumns='1'></details>

<h2>Project analysis</h2>
<p>Throughout the development of the DDS website, the DDS team gained several key insights. </p>
<p>First, we carefully designed v2 components to meet usability standards and accessibility requirements and adopted many into the website design.</p>
<p>For components that we needed but were not yet available, adaptability was essential. When we needed new components, we placed priority on reviewing all available documentation to ensure an existing solution wasn’t already provided. If we found no suitable component, we created one, and the accessibility team reviewed it to ensure compliance with accessibility standards.</p>
<p>Additionally, importance was placed on aligning new components with DDS guidelines. Whenever possible, we followed established patterns to maintain design consistency.</p>
<p>Another key learning was identifying opportunities for improving existing components. While working on the feedback form, the team tested all available DDS form components, before fully establishing the form patterns. Through this process, we discovered areas for improvement and established new guidelines to enhance usability.</p>
<p>Ultimately, flexibility and adaptability were crucial, but they had to be balanced with a structured approach: first verifying that a component doesn’t already exist in the design system, then ensuring new components meet accessibility requirements, and obtaining approval from the DDS team, as a whole, before implementation.</p>
<h2>Roadmap</h2>
<p>The DDS team&#39;s success in building a website that is accessible, usable, and scalable provided a solid foundation on which DDS can continue to iterate on ways to further improve the site. </p>
<p>Creating an easy-to-use contribution model, robust live demos, a helpful automated support system, and adding more AI capabilities are only a few of the many next steps for advancing the DDS website. ​ </p>
<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"View guidelines","path":"/foundations/foundations-overview/","type":"Internal"},"title":"DDS Foundations","subtitle":"Foundations are the styles, effects, and structure that govern the creation of components within the design system."},{"image":{"url":"","alt":""},"link":{"label":"View guidelines","path":"/components/components-overview/","type":"Internal"},"title":"DDS Components","subtitle":"Components are the building blocks used to create scalable, responsive online experiences within Dell. "}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


How the Dell Design System team used an agile process and homegrown foundations and components to build a website that houses Dell Design System v2.

Dell Design System v2 Website

Website v2 Case Study

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