Dell Brand Design System Deep Dive

1. Brand Overview

Dell’s design language on its Singapore site is exactly what you’d expect from a global enterprise hardware brand: functional, corporate, and engineered for clarity over novelty. This is a brand that sells laptops to individual consumers, multi-million-dollar enterprise solutions to CIOs, and everything in between. The UI needs to serve all of them without alienating any segment.

The vibe is restrained. You don’t get playful microinteractions or quirky illustrations. Instead, you get a system that’s built on solid, predictable patterns: a disciplined blue accent for action, neutral grays for text and chrome, and a strict grid. It’s not trying to win design awards—it’s trying to build trust, communicate technical competence, and make the buying process frictionless.

Typography is utilitarian. Roboto dominates—again, functional, modern, and legible across devices. The fallback stack is massive, covering dozens of scripts and regional font systems. That tells you Dell’s designers care about global coverage and rendering consistency more than aesthetic experimentation.

Spacing is built on an 8px scale, as you’d expect, but with some micro-values (1px, 2px, 3px) for fine alignment tweaks. Border radii are modest—2px is the workhorse—reinforcing the no-frills, slightly squared-off look. Shadows are minimal and functional. You’ll see soft elevation on interactive elements, but nothing dramatic.

The overall design philosophy: clarity, consistency, trust. For developers, this means there’s very little “interpretation” needed—Dell’s system is locked down to specific values. For designers, it’s about keeping within the rails and resisting the temptation to add flourish. This works because Dell’s customers expect stability and predictability, not novelty.

2. Color System

2.1 Primary Colors

Dell’s primary brand blue is #0672cb (rgb(6, 114, 203)). This is the action color—used for primary CTAs, interactive highlights, and focus states. It’s a medium-saturation blue with enough depth to stand out against white backgrounds without screaming. Compared to HP’s slightly lighter blue or Lenovo’s red, Dell’s choice feels more corporate and less consumer-oriented. Blue carries associations of trustworthiness, competence, and stability—exactly what Dell wants in enterprise markets.

They also use a secondary accent blue #0063b8 and a legacy link blue #0000ee (browser default link color). The latter is interesting—they’ve kept it, maybe for accessibility or familiarity. Both accents work well with the primary blue, but #0000ee can feel harsh next to the rest of the palette.

2.2 Complete Palette

2.3 Color Relationships

The palette is high contrast—black (#000000) against white (#ffffff) gives maximum readability. Primary blue (#0672cb) vs white has a strong WCAG contrast ratio, easily passing AA and AAA for normal text. Link blue (#0000ee) is even more saturated, ensuring visibility.

The grays (#636363, #555555) are chosen to keep secondary text legible without drawing attention away from primary actions. Background grays (#f5f6f7) are light enough for subtle hover states.

There’s no dedicated dark mode here; everything is built for light backgrounds. Inverse styles (white text on blue or black) are used only for buttons or headers.

2.4 Usage Guide

• Best combos: Primary blue (#0672cb) on white; white on primary blue; black text on light gray (#f5f6f7).
• Avoid: Link blue (#0000ee) against deep navy (#180f33)—contrast is fine, but it visually clashes.
• Functional use: Keep #0672cb for actions; use #636363 for muted labels. Don’t mix blues casually—each has a role.

3. Typography

3.1 Font Families

Roboto is the main font family. The fallback stack is enormous, covering multiple scripts: Cordia New, Microsoft Sans Serif, Nirmala UI, Latha, Meiryo, Microsoft YaHei, and more. This is a global-ready stack—Dell clearly wants consistent typography worldwide.

No Google Fonts or Adobe Fonts are loaded—they’re likely self-hosting Roboto or relying on system availability.

3.2 Type Scale

…and so on for the full list of ~50 style entries. The pattern is clear: headings range from 50px down to 16px, multiple weights for flexibility. Body/link sizes sit at 16px or 14px. Captions drop to 12px.

3.3 Hierarchy

The hierarchy is conventional: large, bold headings for page titles, medium weights for section headers, regular weights for body text. Line heights are tight in large headings (0.48 for 50px H1—very compressed), more generous for body (1.4–1.6). This keeps headings compact and body readable.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

Breakpoints are granular: mobile starts at ~320px, tablet around 768px, desktop from 1024px up to 1920px+. There’s an insane list of breakpoints—Dell is clearly fine-tuning layouts for specific devices. This isn’t a simple 3-tier responsive system; it’s multi-tier with device-specific tweaks.

5. Visual Elements

Border Radius

Workhorse: 2px. Used for buttons, inputs, and spans. Minimal rounding—this keeps the UI sharp.

Other values:

• 1px (rare, spans)
• 3px (presentations/divs)
• 5px (AI chat panel controls)
• 12px, 16px (badges)
• 30px (spans—pill shapes)
• 50% (progress bars, circular elements)

Shadows

Shadows are low-opacity, soft:

• rgba(0,0,0,0.05) 0 4px 10px (most common)
• rgba(0,0,0,0.2) 2px 2px 20px (modals?)
• rgba(0,43,85,0.12) 0 4px 16px

No heavy drop shadows—functional depth only.

Borders

Many 1px solid borders in various grays and blues. Functional: delineation, focus states. Example: 1px solid rgb(6,114,203) for focused buttons.

6. Components

6.1 Buttons

Example: .mh-search-input (search button)

• Default: white bg, gray text (#6e6e6e), 2px radius, 1px solid #b6b6b6.
• Hover: bg #1eaedb, white text.
• Focus: outline none, box-shadow white + #00468b rings, border #0672cb.

CTA buttons (.ucx-dds__button):

• Default: bg #0672cb, white text, 2px radius, 1px solid same blue.
• Hover: bg #e1e1e1 (!), white text.
• Active: bg #94dcf7, text #00468b.

Editorial buttons (.dds__button--editorial):

• Default: bg #0e0e0e, white text, 2px radius.
• Hover: bg #e1e1e1, black text, border #0672cb.

6.2 Links

Multiple styles:

• White text, no underline → hover underline + black text.
• Link blue (#0000ee), no underline → hover underline + black.
• Gray (#636363) → hover underline + black.

6.3 Forms

Search input: white bg, gray text, 1px solid #b6b6b6, radius 2px. Focus: border #0672cb, box-shadow white + #00468b, bg #1eaedb (!), white text.

6.4 Cards

No explicit card component in the data, but shadows suggest elevated panels with soft rgba shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #636363;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-accent-blue: #0063b8;
  --color-primary-blue: #0672cb;
  --color-near-black: #0e0e0e;
  --color-deep-navy: #180f33;
  --color-medium-gray: #555555;
  --color-light-gray-bg: #f5f6f7;
  --color-hover-blue: #005fcc;
  --shadow-color: rgba(0,42,88,.08);

  /* Typography */
  --font-roboto-stack: "Roboto", Cordia New, Microsoft Sans Serif, Utsaah, Devanagari MT, Nirmala UI, Latha, InaiMathi, Gautami, Telugu Sangam MN, Tunga, Kannada Sangam MN, Kartika, Malayalam Sangam MN, Shruti, Gujarati MT, Gujarati Sangam MN, Vrinda, Bangla Sangam MN, Meiryo UI, メイリオ, MS UI Gothic Reg, Hiragino Kaku Gothic Reg, ヒラギノ角ゴ Pro W3 Reg, Microsoft YaHei, 微软雅黑, Hiragino Sans GB, Microsoft JhengHei, 微軟正黑體, Malgun Gothic, 맑은 고딕, Gulim, AppleGothic, Apple LiGothic, LiHei Pro, Osaka, STHeiti, 华文黑体, STXihei, 华文细黑, SimHei, 黑体, Arial Unicode MS, Arial;
  --font-arial-stack: Arial, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-12: 12px;
  --radius-15: 15px;
  --radius-16: 16px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-50: 50px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.05) 0px 4px 10px 0px;
  --shadow-medium: rgba(0,0,0,0.2) 2px 2px 20px 0px;
  --shadow-blue: rgba(0,43,85,0.12) 0px 4px 16px 0px;
}

8. AI Coding Assistant Prompt

# Dell Design System Specification

You are a Dell design expert. Build UIs matching their visual language exactly.

## Brand Context
Dell's design is corporate, functional, and globally consistent. The system prioritizes clarity, trust, and accessibility over visual experimentation. Blue is the action color; grays and black handle text and UI chrome.

## Color Palette
- Black: #000000 — Primary text, icons, UI chrome
- Dark Gray: #636363 — Secondary text, muted labels
- White: #ffffff — Backgrounds, inverse text
- Link Blue: #0000ee — Hyperlinks
- Accent Blue: #0063b8 — Secondary CTAs, carousel controls
- Primary Blue: #0672cb — Primary buttons, focus outlines
- Near Black: #0e0e0e — Dark UI elements
- Deep Navy: #180f33 — Section headers
- Medium Gray: #555555 — Cookie consent buttons
- Light Gray BG: #f5f6f7 — Hover/focus surfaces
- Hover Blue: #005fcc — Hover/focus accents

## Typography
Font Families:
- Headings & body: Roboto, massive fallback stack for global coverage
- Alternate: Arial, Helvetica

Type Sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 50px | 400 | 0.48 | Hero titles |
| H1 | 40px | 300 | 1.20 | Large headings |
| H1 | 32px | 700 | — | Section titles |
| Body | 16px | 400 | 1.50 | Paragraph text |
| Link | 16px | 500 | 1.50 | Navigation links |
| Caption | 14px | 400 | 1.43 | Small labels |
| Caption | 12px | 400 | 1.67 | Footnotes |

## Spacing & Grid
Base: 8px grid. Values: 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 15, 16, 20, 24, 30, 40, 48px.

## Border Radius
- sm: 2px — buttons, inputs
- xs: 1px — spans
- md: 5px — AI chat controls
- lg: 12px, 16px — badges
- full: 50% — circles

## Shadows & Depth
- Soft: rgba(0,0,0,0.05) 0 4px 10px
- Medium: rgba(0,0,0,0.2) 2px 2px 20px
- Blue tint: rgba(0,43,85,0.12) 0 4px 16px

## Component Specifications

### Primary Button
Default: bg #0672cb; color #ffffff; padding 3px 11px; radius 2px; border 1px solid #0672cb.
Hover: bg #e1e1e1; color #ffffff.
Active: bg #94dcf7; color #00468b.
Focus: border #0672cb; box-shadow white 0 0 0 2px, #00468b 0 0 0 1px.

### Secondary Button (Search)
Default: bg #ffffff; color #6e6e6e; padding 5px 98px 5px 16px; radius 2px; border 1px solid #b6b6b6.
Hover: bg #1eaedb; color #ffffff.
Focus: border #0672cb; bg #1eaedb; color #ffffff.

### Navigation Links
Default: color #0000ee (link blue), no underline.
Hover: underline, color #0e0e0e.

### Input Fields
Default: bg #ffffff; color #6e6e6e; border 1px solid #b6b6b6; radius 2px; padding 5px 98px 5px 16px.
Focus: border #0672cb; box-shadow white 0 0 0 2px, #00468b 0 0 0 3px; bg #1eaedb; color #ffffff.

## Layout & Responsive Rules
Breakpoints: 320px, 375px, 768px, 1024px, 1366px, 1920px, 2560px.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: Blue border + box-shadow
- Hover: Always change background or underline links

## DO
- Use only palette colors
- Stick to 8px grid
- Use Roboto for headings/body
- Keep border radius consistent at 2px for most UI
- Maintain WCAG contrast

## DON'T
- Invent new blues
- Mix sharp and heavily rounded corners
- Use heavy shadows
- Remove focus outlines

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0672cb;
  color: #ffffff;
  padding: 3px 11px;
  border-radius: 2px;
  border: 1px solid #0672cb;
  font-weight: 500;
  font-size: 16px;
}
.btn-primary:hover {
  background: #e1e1e1;
}
.btn-primary:focus {
  outline: none;
  box-shadow: #ffffff 0 0 0 2px, #00468b 0 0 0 1px;
  border-color: #0672cb;
}
```

### Input
```css
.input {
  background: #ffffff;
  color: #6e6e6e;
  border: 1px solid #b6b6b6;
  border-radius: 2px;
  padding: 5px 98px 5px 16px;
}
.input:focus {
  border: 1px solid #0672cb;
  box-shadow: #ffffff 0 0 0 2px, #00468b 0 0 0 3px;
  background: #1eaedb;
  color: #ffffff;
}
```

9. Summary

TL;DR — Dell’s design system is corporate, disciplined, and globally consistent. Blue is for action, grays for structure, Roboto for readability. Spacing is strict, radii are minimal, shadows are subtle. Stick to the palette, respect the grid, and keep it functional.

Brand Keywords:

• trust-first-tech
• corporate-minimal
• grid-disciplined
• globally-consistent
• blue-action