<h2>Atomic structure</h2>
Atomic structure means building components from the smallest possible parts such that system becomes reliable, extensible and understandable. 
This structure is further enhanced by adding:
<ul>
<li><a href="/getting-started/tokens">Tokens</a>: smallest unit of visual style of each component.</li>
<li>Accessibility: every rebuilt building block meets accessibility requirements independently.</li>
</ul>
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/home/lp2-atomic-structure.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>Why this structure helps you</h3>
<ul>
<li>Consistency at scale: Every component draws from the same atoms. Visual drift is reduced.</li>
<li>Easier updates: A token change flows through all components automatically. </li>
<li>Shared language: Designers and engineers talk about the same foundations.</li>
<li>AI-friendly logic: Clear atomic relationships make tokens and components easier to analyze, generate, and validate. </li>
<li>Facilitated contributions: Flexibility for DDS users to create new styles while staying aligned with the system.</li>
</ul>
 
<h2>Slot-based architecture</h2>
Slots are a Figma component property that lets you swap in your content—text, icons, images, or nested components—directly inside a main component without detaching it.     Instead of breaking the link to the source component to make customizations, you use slots to insert content while preserving the component’s structure, overrides, and ability to receive system’s updates. 
Example:
Consider a drawer component may expose: 
What’s fixed 
<ul>
<li>Drawer width and slide-in behavior </li>
<li>Padding and spacing between sections </li>
<li>Divider placement </li>
<li>Typography styles </li>
<li>Background and elevation</li>
</ul>
 
Card structure (defined by slots) 
<ul>
<li>Header slot </li>
<li>Content Slot </li>
<li>Action slot (buttons or links)</li>
</ul>
  
You can choose to keep any or all these slots in your component without breaking the structure of the component.
<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/home/lp2-slot-based-architecture.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>Why slots matter</h3>
<ul>
<li>Fewer variants, more use cases: A single slot-enabled component can support a wide range of content scenarios without requiring dedicated variants or detached copies.</li>
<li>Creative freedom within the system: Slots remove the tension between creativity and compliance. You can explore novel layouts and component combinations inside the DDS structure.</li>
<li>Seamless, unified yet adaptable experiences: Slot enabled DDS components provide a shared foundation, allowing teams to customize project content while maintaining visual and structural coherence across Dell’s product portfolio.</li>
<li>Design community collaboration: Slots ensure your contributions stay structurally tied to the system, making it easier for the DDS team to evaluate, absorb and share them across Dell’s design community.</li>
</ul>
<details data-name='image-block' data-images='[{"alt":"Graphic titled “Why Slots Matter” showing four columns with icons and short descriptions: “Fewer variants, more use cases” – a slot-enabled component supports multiple content scenarios without extra variants. “Creative freedom within the system” – slots allow flexible layouts while maintaining structure. “Seamless, unified yet adaptable experiences” – slots provide a shared foundation across components and products. “Design community collaboration” – slots keep contributions aligned and easier to review across a design system.","caption":"**Why slots matter:** Enabling flexibility, consistency, scalability, and collaboration in design systems.\n\n>","url":"https://dds.dell.com/site/v3/home/lp2-why-slots-matter.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>How slots work</h3>
Some components now include a property called “has slot”, which unlocks the slots within the component.  
Slots are represented by nested elements or properties. Create and select the elements you want to place in the slot and delete unnecessary elements directly within the slot frame. 
Auto layout and constraints manage spacing safely. The component is now customized and ready to use with no detachment required. 
Learn more about using slots in <a href="https://www.figma.com/design/9R6misT0WAdjAGkdF0XoK3/Dell-Design-System-v3?m=auto&t=fjFJPoJMlAIeYFTt-6">DDS v3 UI Kit</a>. 
In code  
Slots define areas of a component where content can be placed:
<ul>
<li>Media slot → for icons or images</li>
<li>Actions slot → for buttons or links</li>
<li>Content area → for the main information inside the card</li>
</ul>
The layout is enforced. Custom content stays within guardrails.
<h2>Customization without breaking consistency</h2>
Atomic structure ensures everything is built from shared foundations. Slots make components flexible without becoming fragile. 
Example: 
The same card can be used for:
<ul>
<li>Marketing content with imagery</li>
<li>Admin dashboards with dense text</li>
<li>AI‑generated summaries filling the body slot</li>
</ul>
Why this works 
<ul>
<li>System integrity: Structure is enforced by components, not documentation.</li>
<li>Safe flexibility: Teams adapt without rewriting patterns. </li>
<li>Scalable automation: AI can assemble layouts by filling known slots with known components.</li>
<li>Customization becomes configuration. The system stays intact.</li>
</ul>

DDS v3 introduces a clearer system structure that makes the design system easier to use, safer to extend, and more predictable at scale. This page explains how v3’s structure works and why it matters for day‑to‑day product work. 

Structured foundations for humans and AI 

Home

About DDS

Migration guide

AI chat toolkit

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

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