<h2>When should I use it?</h2>
<p><strong>Neutral variant</strong> provides a <strong>lower-emphasis</strong> alternative to Brand color, helping teams create <strong>clearer visual hierarchy</strong> across experiences.</p>
<p>Use <strong>neutral</strong> when a component supports the experience <strong>without needing to draw attention</strong>. Also recommended for AI-powered experiences.</p>
<p>Use <strong>brand</strong> when a component should <strong>stand out</strong>, guide decisions, or drive action.</p>
<h2>Supported components</h2>
<p>Neutral variants available in <strong><a href="https://www.figma.com/design/9R6misT0WAdjAGkdF0XoK3/Dell-Design-System-v3?m=auto&amp;node-id=8494-69874&amp;t=edSpEJH05dEhV4Ct-1">DDS v3 UI Kit</a></strong> and <strong><a href="/getting-started/storybooks">Storybooks</a></strong>:</p>
<ul>
<li>Checkbox</li>
<li>Date Picker</li>
<li>Loading Indicator</li>
<li>Menu Item</li>
<li>Pagination</li>
<li>Progress Tracker</li>
<li>Radio Button</li>
<li>Switch</li>
<li>Tabs</li>
<li>View More/Less</li>
</ul>
<h2>Which variant to use</h2>
<p>Rule of thumb: Use <strong>brand</strong> for <strong>emphasis</strong>. Use <strong>neutral</strong> for <strong>support</strong>.</p>
<p>When designing <strong>AI-powered experiences</strong>, we recommend using the <strong>Neutral</strong> variant.</p>
<table>
<thead>
<tr>
<th>Brand</th>
<th>Neutral</th>
</tr>
</thead>
<tbody><tr>
<td>Primary actions</td>
<td>Secondary actions</td>
</tr>
<tr>
<td>Primary navigation</td>
<td>Secondary navigation</td>
</tr>
<tr>
<td>High-priority selections</td>
<td>Supporting selections</td>
</tr>
<tr>
<td>Elements that should stand out</td>
<td>Elements that communicate state</td>
</tr>
</tbody></table>
<h3>Decision tree</h3>
<details data-name='image-block' data-images='[{"alt":"Flowchart decision tree for selecting a color variant. The first question asks, “Is there already a Brand element nearby?” If yes, use Neutral for supporting actions. If no, continue to “Is this the primary action or focal point?” If yes, use Brand for the primary action. If no, continue to “Does this need additional emphasis to guide the user?” If yes, use Brand because it needs to stand out. If no, use Neutral for supporting actions.","caption":"Decision tree for choosing between brand and neutral variants.","url":"https://dds.dell.com/site/v3/getting-started/tree---neutral.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details><h3>Do&#39;s and dont&#39;s</h3>
<details data-name='image-block' data-images='[{"alt":"Form example with Brand styling applied throughout inputs, selection controls, slider, and primary action button.","caption":"Use Brand across all form elements to create a consistent branded experience.","url":"https://dds.dell.com/site/v3/getting-started/do1---neutral.png"},{"alt":"Form example with Neutral inputs and selection controls, paired with a Brand primary button that stands out as the primary action.","caption":"Use Neutral form controls and a Brand primary action to reduce visual noise and highlight the main action.","url":"https://dds.dell.com/site/v3/getting-started/do2---neutral.png"},{"alt":"Form example using Neutral styling consistently across selection controls, slider, and inputs, with a Brand primary button for the main action.","caption":"Use a consistent visual style across similar form controls.","url":"https://dds.dell.com/site/v3/getting-started/do3---neutral.png"},{"alt":"Form example where selection controls and the slider use different color variants, creating an inconsistent visual pattern within the form.","caption":"Don&#39;t mix Brand and Neutral styles across similar form controls.","url":"https://dds.dell.com/site/v3/getting-started/dont---neutral.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>


Use the neutral variant when a component should communicate state or functionality without competing with primary actions.

Neutral Color

Neutral color

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

Table

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