<h2>F﻿oundations</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"https://dds.dell.com/site/development/c9/88/c988e485083b823cb5b32c0bd15fbef5f46a5ee0.png","alt":"Color image"},"link":{"label":"Review guidelines","path":"/foundations/color/","type":"Internal"},"description":"The use of color in an experience helps define communication, meaning, brand, and roles, making it easier for users to interact, search, and differentiate elements.\n","title":"Color"},{"image":{"url":"https://dds.dell.com/site/development/34/67/3467defa7af4811d31cb08a8b3b8d1dc19a9f7f0.png","alt":"Elevation image"},"link":{"label":"Review guidelines","path":"/foundations/elevation/","type":"Internal"},"description":"Elevation uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is \"elevated\" in priority or hierarchy.\n","title":"Elevation"},{"image":{"url":"https://dds.dell.com/site/development/cc/48/cc48f62bc91c7135220b6c363287e371cf9f2c2a.png","alt":"Grid image"},"link":{"label":"Review guidelines","path":"/foundations/grid","type":"Internal"},"description":"The grid is the structural foundation of all visual elements, from typography to columns, boxes, icons, and illustrations.\n","title":"Grid"},{"image":{"url":"https://dds.dell.com/site/development/63/0a/630ac7c4193eaca8c20b886ebfa0056f2d53225b.png","alt":"Icons image"},"link":{"label":"Review guidelines","path":"/foundations/icons","type":"Internal"},"title":"Icons","description":"Icons represent items and ideas in a simple graphic format. They help communicate with universal understanding."},{"image":{"url":"https://dds.dell.com/site/development/b9/08/b9083ca092b67c0941e7171102efd01dcc0c5882.png","alt":"Typography image"},"link":{"label":"Review guidelines","path":"/foundations/typography","type":"Internal"},"title":"Typography","description":"Typography is a deliberate system of letters, numbers, and characters. Good typography ensures legibility, clean aesthetics, and a well-defined information hierarchy."}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>

Foundations are the styles, effects, and structure that govern the creation of components within the design system. They are aligned to brand, accessibility, and UX best practices to achieve an equitable, unified experience.


Overview

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

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