Xerox Design System Deep-Dive

1. Brand Overview

Xerox is one of those names that’s become shorthand for what it does. For decades, the brand was tied to copiers and office printing, but today it’s repositioning as a technology-forward, workflow-driven solutions company. The design system reflects that shift: clean, functional, and stripped of ornament. No gratuitous gradients. No “fun” rounded corners unless they’re intentional.

The vibe is very corporate, but not in a cold way — more like practical minimalism. This is for people who spend most of their day moving between document management systems, enterprise dashboards, and email. The design language needs to stay out of the way while signalling reliability. Xerox’s site feels like a machine made for work, not a lifestyle boutique.

They lean heavily into bold typography (Roboto Condensed, mostly), generous whitespace, and a restrained palette. Black, white, and greys dominate, with red accents in shadows — an interesting choice since Xerox’s core brand color historically is red. The actual red here (rgb(217, 34, 49)) is used in subtle ways, like inset shadows on buttons. Blue (#0000ee and #1a6fc5) appears in links and hover states, suggesting a secondary digital accent.

This is not a flashy brand system. It’s about clarity. Buttons are flat with sharp edges. Links are underlined or plain. Shadows are used sparingly and mostly as inset borders. Even the breakpoints are utilitarian — a full spread from 380px up to 1920px. It feels like the design team values predictability over “surprise and delight,” which makes sense for a brand that serves enterprise users who need things to be consistent.

Overall, Xerox’s design philosophy here is utilitarian minimalism with a corporate polish. The brand is signalling: “We handle complex business processes. You can trust our tools. We won’t waste your time.”

2. Color System

2.1 Primary Colors

There’s no single “primary” color in the classic sense. Xerox’s historical red is present (#d92231 as rgb(217, 34, 49)), but it’s not splashed everywhere — instead, it shows up in shadows and borders, almost as a hidden brand signature.

Black (#000000) is the dominant functional color — used for text, borders, and hover backgrounds. White (#ffffff) is the main background. Grey tones (#333333, #c1c1c1, #737373) handle secondary text, dividers, and muted UI elements.

Blue (#0000ee) is used for links in the “web default” style — almost nostalgic. A single medium blue (#1a6fc5) appears in hover/focus states.

This works because Xerox’s product is about work clarity. Black/white ensure maximum contrast. Red accents are brand DNA. Blue signals interactivity.

2.2 Complete Palette

2.3 Color Relationships

Black/white contrast is perfect (21:1). Dark grey #333333 on white gives ~12.6:1 — well above WCAG AAA for normal text. Light grey #c1c1c1 on white fails for body text but is fine for borders/dividers. Blue #0000ee on white hits ~8.6:1 — accessible. Xerox Red #d92231 on white hits ~4.6:1 — acceptable for large text, borderline for small text.

No dark mode here. The palette is optimised for light backgrounds.

2.4 Usage Guide

• Good combos: Black text on white, dark grey on white for secondary info, red on white for emphasis.
• Avoid: Light grey text on white — readability drops.
• Interactive cues: Use blue for links, red for primary action accents.
• Hover states: Keep hover backgrounds high contrast (black or blue) with white text.

3. Typography

3.1 Font Families

Primary heading font: Roboto Condensed. Body font: Roboto. Serif fallback: Times. No Google Fonts or Adobe Fonts detected — likely self-hosted.

Roboto Condensed is used across headings and links, giving a tight, utilitarian feel. Roboto handles body and captions. Times shows up in some contexts — possibly legacy or specific content modules.

3.2 Type Scale

(Other 16px Times/Roboto variants exist for buttons/headings.)

3.3 Hierarchy

The jump from 72px H1 to 48px and 36px is clean — no awkward gaps. Smaller headings (24px, 21px) are still Roboto Condensed, keeping the visual voice consistent. Captions drop to 14px and 12px, often with uppercase transforms for emphasis.

This hierarchy works for a corporate site — big headline, clear section heads, legible body. No “display” typefaces; everything is functional.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px-ish, but there are odd values (3px, 6px, 9px, 15px). This suggests a mix of fixed pixel tweaks and grid-based spacing.

4.2 Layout

Breakpoints: 380px, 428px, 599px, 600px, 711px, 768px, 823px, 1080px, 1200px, 1920px. This is a pragmatic spread covering phones, tablets, laptops, desktops.

No explicit max-width in data, but pattern suggests content adapts fully up to 1920px.

5. Visual Elements

Border Radius

Only one value: 50%. Used for circular elements (social icons, dismiss buttons). Everything else is square — consistent with the sharp-edged corporate look.

Shadows

Two inset shadows:

• #c1c1c1 -1px 0px 0px 0px inset — thin inner border, grey.
• #d92231 0px -4px 0px -1px inset, #ffffff -1px 0px 0px 0px inset — red accent line at bottom, white inner edge.

Shadows aren’t used for depth — they’re decorative borders.

Borders

Mostly 1px solid lines in black, grey, or red. Tabs use 1px 0px combinations for separators. No thick borders — everything is hairline.

6. Components

6.1 Buttons

Primary Button
Default: white background, black text, 18px padding, 0 radius, red/white inset shadow.
Hover: black background, white text, 1px black border.

Secondary Button
Default: rgb(248,248,248) background, black text, grey inset shadow.
Hover: same as primary hover — black background, white text.

Text Button
Default: transparent background, medium grey text, no padding, transparent border.
Hover: black background, white text, 1px black border.

6.2 Links

Four styles:

1. Dark grey, underline 2px, bold — hover turns white.
2. Blue, no underline — hover turns white.
3. Off-white, underline 2px, bold — hover turns white.
4. White, underline — hover stays white.

6.3 Forms

Search input: white background, black text, 1px light grey border, 0 radius, padding 12px 48px 12px 12px. No focus style in data — possibly default browser.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-web-blue: #0000ee;
  --color-dark-grey: #333333;
  --color-white: #ffffff;
  --color-light-grey: #c1c1c1;
  --color-medium-grey: #737373;
  --color-xerox-red: #d92231;
  --color-medium-blue-accent: #1a6fc5;

  /* Typography */
  --font-roboto-condensed: "Roboto Condensed", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --font-times: "Times", serif;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-9: 9px;
  --space-12: 12px;
  --space-15: 15px;
  --space-18: 18px;
  --space-24: 24px;
  --space-30: 30px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;

  /* Border Radius */
  --radius-circle: 50%;

  /* Shadows */
  --shadow-grey-inset: #c1c1c1 -1px 0px 0px 0px inset;
  --shadow-red-white-inset: #d92231 0px -4px 0px -1px inset, #ffffff -1px 0px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# Xerox Design System Specification

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

## Brand Context
Xerox’s design language is utilitarian, minimal, and corporate. It uses sharp edges, high-contrast black/white, muted greys, and subtle brand-red accents. Typography is condensed and functional, with generous whitespace and predictable spacing.

## Color Palette
- Black: #000000 — Primary text, borders, hover backgrounds
- Web Blue: #0000ee — Default link color
- Dark Grey: #333333 — Secondary text, bold links
- White: #ffffff — Background, hover text
- Light Grey: #c1c1c1 — Borders, dividers
- Medium Grey: #737373 — Muted text, disabled states
- Xerox Red: #d92231 — Brand accent in shadows, borders
- Medium Blue Accent: #1a6fc5 — Rare hover/focus background

## Typography
Fonts:
- Headings: "Roboto Condensed", sans-serif
- Body: "Roboto", sans-serif
- Serif content: "Times", serif

Type scale:
| Level   | Font              | Size | Weight | Line Height | Use For          |
|---------|-------------------|------|--------|-------------|------------------|
| H1      | Roboto Condensed  | 72px | 300/400| 1.06        | Page titles      |
| H2      | Roboto Condensed  | 48px | 300    | 1.08        | Section titles   |
| H3      | Roboto Condensed  | 36px | 300    | 1.11        | Subsections      |
| H4      | Roboto Condensed  | 30px | 300    | 1.13        | Module headings  |
| H5/H6   | Roboto Condensed  | 24px | 300/400| 1.17–1.50   | Smaller headings |
| Link    | Roboto Condensed  | 21px | 700    | 1.19        | Navigation links |
| Body    | Roboto            | 16px | 400/700| 1.50        | Paragraph text   |
| Caption | Roboto            | 14px | 400    | 1.50        | Labels, notes    |
| Small   | Roboto            | 12px | 400    | 1.50        | Fine print       |

## Spacing & Grid
Base: ~8px grid with micro values
Scale: 3px, 4px, 6px, 9px, 12px, 15px, 18px, 24px, 30px, 36px, 48px, 60px
Usage: Button padding (15px/18px), input padding (12px), section gaps (24px+)

## Border Radius
- Circle: 50% — Social icons, circular buttons
- None: 0 — Buttons, inputs, cards

## Shadows & Depth
- Grey inset: #c1c1c1 -1px 0px 0px 0px inset — Divider effect
- Red/white inset: #d92231 0px -4px 0px -1px inset, #ffffff -1px 0px 0px 0px inset — Primary button accent
Avoid drop shadows; use borders/insets.

## Component Specifications

### Primary Button
Default:
```css
background-color: #ffffff;
color: #000000;
padding: 18px;
border-radius: 0;
box-shadow: #d92231 0px -4px 0px -1px inset, #ffffff -1px 0px 0px 0px inset;
font-weight: 400;
font-size: 16px;
```
Hover:
```css
background-color: #000000;
color: #ffffff;
border: 1px solid #000000;
```

### Secondary Button
Default:
```css
background-color: #f8f8f8;
color: #000000;
padding: 18px;
border-radius: 0;
box-shadow: #c1c1c1 -1px 0px 0px 0px inset;
```
Hover:
Same as primary hover.

### Text Button
Default:
```css
background-color: transparent;
color: #737373;
padding: 0;
border: 1px solid transparent;
```
Hover: same black/white swap.

### Navigation Links
- Style 1: Dark grey, underline 2px, bold — hover white.
- Style 2: Blue, no underline — hover white.
- Style 3: Off-white, underline 2px, bold — hover white.
- Style 4: White, underline — hover white.

### Input Fields
Search:
```css
background-color: #ffffff;
color: #000000;
border: 1px solid #c1c1c1;
border-radius: 0;
padding: 12px 48px 12px 12px;
```

## Layout & Responsive Rules
Breakpoints: 380px, 428px, 599px, 600px, 711px, 768px, 823px, 1080px, 1200px, 1920px
Adjust padding/gaps per breakpoint; maintain proportions.

## Interaction Rules
- State changes: 150ms ease
- Hover: clear background/text swap
- Focus: visible outline matching brand colors

## DO
- Use only palette colors
- Maintain multiples of base spacing
- Keep corners square unless 50% for circular UI
- Use Roboto Condensed for headings, Roboto for body
- Keep hover states high-contrast

## DON'T
- Add drop shadows
- Mix rounded and square corners
- Use grey for body text
- Invent new accent colors
- Remove button insets

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #000000;
  padding: 18px;
  border-radius: 0;
  box-shadow: #d92231 0px -4px 0px -1px inset, #ffffff -1px 0px 0px 0px inset;
  font-weight: 400;
  font-size: 16px;
}
.btn-primary:hover {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #c1c1c1;
  padding: 24px;
  border-radius: 0;
}
```

Input:
```css
.input-search {
  background: #ffffff;
  color: #000000;
  border: 1px solid #c1c1c1;
  padding: 12px 48px 12px 12px;
  border-radius: 0;
}
```

9. Summary

TL;DR — Xerox’s design system is corporate minimalism: square edges, high-contrast black/white, muted greys, subtle red accents. Typography is condensed and utilitarian. Spacing is tight and grid-based. Buttons are flat with inset shadows as brand signatures.

Brand Keywords

• corporate-minimalist
• utilitarian-sharp
• high-contrast
• brand-red-accent