Outlook Design System Deep Dive

1. Brand Overview

Outlook’s design system is Microsoft’s long-evolved visual language applied to email and calendar UX. This is not a playful consumer brand—it’s a productivity platform dressed in a corporate suit. The vibe is professional, minimal, and engineered for clarity. You can feel the weight of enterprise usage here: millions of users, meaning every pixel choice is about consistency, accessibility, and performance.

The design philosophy leans into Microsoft's Fluent Design principles: restrained use of color outside of CTAs, generous spacing, and typography that’s functional rather than expressive. The system is built on "Segoe UI Variable" fonts, which adapt well across devices and resolutions. The look is clean, but not sterile—there’s a touch of friendliness in the rounded corners and occasional soft blue gradients.

Outlook’s audience is broad: from corporate IT deployments to individual Outlook.com users. That means the design system has to scale from dense desktop apps to lightweight mobile web. The responsive breakpoints show that they’ve built for everything from 320px mobile screens up to 1779px desktops.

One thing to note: Microsoft’s brands share DNA. If you put Outlook next to Teams or Word online, you’ll see the same primary blue, similar button radii, and the same type stack. This works because it creates a unified ecosystem—users don’t have to re-learn visual cues when switching apps.

Outlook’s design system is not about visual experimentation. It’s about trust and efficiency. Buttons are predictable. Links behave the same across contexts. Accessibility is clearly considered—lots of high-contrast text colors, consistent hover states, and focus outlines.

I’d call the vibe: corporate-modern, subtly friendly. It’s modern enough to feel current, but you can tell it’s designed to be future-proof for at least a decade. No trendy typefaces, no fad gradients (except one very controlled linear gradient token). Every choice says: “We’re here to help you work, not to impress you.”

2. Color System

2.1 Primary Colors

The primary brand color is rgb(23, 37, 61)—a deep navy. This is used for headers, key backgrounds, and high-contrast text in dark contexts. The secondary semantic color is transparent (rgba(0, 0, 0, 0)), which basically means they rely on underlying surfaces for secondary accents.

The other high-frequency brand blue is #0067b8 (rgb(0, 103, 184)), used for links, CTAs, and active states. This is a saturated blue, slightly lighter than Teams’ primary, with enough contrast against white for WCAG AA compliance.

Compared to Gmail (which leans on red), Outlook’s blue feels calmer and more corporate. It’s also more versatile in dark mode.

2.2 Complete Palette

Here’s the entire extracted palette from semantic and CSS variables:

Note: The CSS variables list is massive—there are over 300 named tokens like --root-color-brilliant-blue-500: #0078d4. These cover every shade from mint green to maroon. The functional naming matches Microsoft’s global design token convention.

Some notable functional colors:

• --root-color-error-700: #9e2331 — Error text/buttons.
• --root-color-success-500: #0e8728 — Success states.
• --root-color-warning-500: #fada23 — Warning highlights.
• --ds-theme-background-special-color — A linear gradient used for special backgrounds.

2.3 Color Relationships

The deep navy (#17253d) with white (#ffffff) gives a contrast ratio of ~12:1 — well above WCAG AAA. The brand blue (#0067b8) on white is ~5:1 — comfortably AA compliant.

Dark mode is supported indirectly: many tokens have both 50 and 900 levels (e.g., --root-color-brilliant-blue-100 and --root-color-brilliant-blue-900). This suggests automatic theme switching by token, not manual overrides.

Gradients are rare—only one special background token. Most surfaces are flat fills.

2.4 Usage Guide

Works:

• Brand blue (#0067b8) for links and CTA buttons over white.
• Deep navy (#17253d) for header backgrounds with white text.
• Light blue (#dceef8) for subtle section highlights.

Avoid:

• Using brand blue for body text—it’s meant for interactive elements.
• Combining low-contrast grays (#616161) with light blue backgrounds—they’ll fail accessibility in certain lighting.
• Overusing gradient token—it’s meant for special hero areas.

3. Typography

3.1 Font Families

Primary font: Segoe UI Variable Text and Segoe UI Variable Display. Fallback stack: Segoe UI, segoeui, Helvetica Neue, helvetica, arial. No Google or Adobe fonts—these are Microsoft’s own variable fonts.

Segoe UI Variable allows optical sizing and weight interpolation, making headings crisp at large sizes and body text readable at small sizes.

3.2 Type Scale

Here’s a condensed table of key sizes:

3.3 Hierarchy

They use scale jumps of ~1.25x between major heading sizes. Line heights tighten at large sizes (1.05–1.17) to keep headlines compact. Smaller text gets generous line height (1.5+) for readability.

Weights are mostly 400 for body, 500–600 for headings/buttons. The consistent use of 600 for interactive elements reinforces clickability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

Odd values like 13.5px appear rarely—probably legacy alignment tweaks.

4.2 Layout

Breakpoints range from 320px (mobile) to 1779px (large desktop). They have multiple close breakpoints (768px, 820px, 860px) suggesting fine control over tablet vs small desktop layouts.

5. Visual Elements

Border Radius:

• 4px — small elements (div, span)
• 8px — buttons
• 16px — images/videos
• 24px — modals/cards
• 200px — pill buttons
• 50% — circular inputs/avatars

Shadows:
Two values, both subtle:

• rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.14) 0px 2px 4px
• Slight variant with 1.008px offset.

Borders:
Mostly 1px solid, light colors for dividers (rgb(230, 242, 251)). Buttons get 2px solid for emphasis.

6. Components

6.1 Buttons

They have multiple button styles:

Example: Dark Primary Button

• Default: bg rgb(9,31,44), text white, padding 12px 16px, radius 8px, no shadow.
• Hover: box-shadow rgb(119,119,119) 2px 2px 2px, bg white, text dark.
• Active: bg initial, text dark, border 2px solid.
• Focus: dashed outline, same hover bg/text.

Pill Button

• Default: bg rgb(6,22,31), text white, padding 8px 24px, radius 200px.
• Hover: bg black, text white.
• Active: bg brand blue, text black.

All have consistent hover transitions—color flip on hover, border changes on active.

6.2 Links

Variants:

• Brand blue (#0067b8), underline by default, hover removes underline.
• Neutral gray (#616161), no underline default, adds underline on hover.
• White, underline default, hover removes.

6.3 Forms

No extracted text inputs—likely styled similarly to buttons: 4px radius, 1px border.

6.4 Cards

Cards use 24px radius, 1px solid light border, subtle shadow.

7. Design Tokens

:root {
  /* Semantic Colors */
  --color-primary: #17253d;
  --color-secondary: transparent;
  --color-black: #000000;
  --color-brand-blue: #0067b8;
  --color-slate-blue: #2a446f;
  --color-deep-navy: #051118;
  --color-white: #ffffff;
  --color-gray-97: #616161;
  --color-light-blue: #dceef8;
  --color-dark-gray: #262626;
  --color-dark-slate: #091f2c;

  /* Typography */
  --font-family-text: "Segoe UI Variable Text", "Segoe UI", "segoeui", "Helvetica Neue", "helvetica", "arial";
  --font-family-display: "Segoe UI Variable Display", "Segoe UI", "segoeui", "Helvetica Neue", "helvetica", "arial";
  --font-size-h1-xl: 7.75rem;
  --font-size-h1-lg: 6.25rem;
  --font-size-h1-md: 3.88rem;
  --font-size-body: 1rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 200px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.12) 0px 0px 2px 0px, rgba(0,0,0,0.14) 0px 2px 4px 0px;
}

8. AI Coding Assistant Prompt

# Outlook Design System Specification

You are an Outlook design expert. Build UIs matching their visual language exactly.

## Brand Context
Outlook’s design is corporate-modern, subtly friendly. Built for productivity, it uses restrained color, clear hierarchy, and consistent spacing. Accessibility and clarity take priority over decoration.

## Color Palette
- Primary Navy: #17253d — Headers, dark buttons
- Brand Blue: #0067b8 — Links, primary CTAs
- White: #ffffff — Backgrounds, text on dark
- Gray 97: #616161 — Footer links, secondary text
- Light Blue: #dceef8 — Section highlights
- Dark Slate: #091f2c — Secondary dark buttons
- Black: #000000 — Text, icons

## Typography
Font families:
- Headings: "Segoe UI Variable Display", "Segoe UI", "segoeui", "Helvetica Neue", "helvetica", "arial"
- Body: "Segoe UI Variable Text", same fallbacks

Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 XL | 124px | 400 | 1.05 | Hero titles |
| H1 LG | 100px | 400 | 1.06 | Page titles |
| H1 MD | 62px | 500 | 1.16 | Section titles |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Button | 15px | 600 | 1.47 | UI buttons |
| Caption | 14px | 400 | 1.43 | Small labels |

## Spacing & Grid
Base: 8px grid. Values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 96px.
Use multiples for padding, margins, gaps.

## Border Radius
- sm: 4px — small UI elements
- md: 8px — buttons
- lg: 16px — images
- xl: 24px — cards, modals
- pill: 200px — pill buttons
- full: 50% — circles

## Shadows & Depth
- Light shadow: rgba(0,0,0,0.12) 0px 0px 2px, rgba(0,0,0,0.14) 0px 2px 4px

## Components
Primary Button:
```css
.btn-primary {
  background: #091f2c;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 15px;
}
.btn-primary:hover {
  background: #ffffff;
  color: rgba(0,0,0,0.9);
  box-shadow: rgb(119,119,119) 2px 2px 2px;
}
.btn-primary:active {
  background: initial;
  border: 2px solid;
}
```

Pill Button:
```css
.btn-pill {
  background: #06161f;
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 200px;
  font-weight: 600;
  font-size: 16px;
}
.btn-pill:hover {
  background: #000000;
}
.btn-pill:active {
  background: #0067b8;
  color: #000000;
}
```

Link:
```css
.link {
  color: #0067b8;
  text-decoration: underline;
}
.link:hover {
  text-decoration: none;
  color: rgba(0,0,0,0.8);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
```

## Layout & Responsive Rules
Breakpoints: 320px, 768px, 1024px, 1440px, 1779px.
Mobile: 16px page padding. Desktop: 32px page padding.

## Interaction Rules
- 150ms ease for state changes
- Focus indicators: dashed outline 1px
- Hover: color inversions on buttons

## DO List
- Use only palette colors
- Maintain 8px grid
- Use Segoe UI Variable fonts
- Apply correct radius per component
- Keep button states consistent

## DON'T List
- Don’t invent new colors
- Don’t mix sharp and rounded corners
- Don’t remove focus outlines
- Don’t use heavy shadows

## Code Examples
```css
/* Primary Button */
.btn-primary { ... }

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: #262626;
  padding: 16px 30px 16px 16px;
  border: 1px solid transparent;
}

/* Input Field */
.input {
  border: 1px solid #e6f2fb;
  border-radius: 4px;
  padding: 8px;
}
.input:focus {
  border-color: #0067b8;
}
```

9. Summary

TL;DR
Outlook’s design system is Microsoft’s Fluent DNA applied to email: deep navy, brand blue CTAs, Segoe UI Variable fonts, 8px grid, and consistent button/link states. Built for clarity, accessibility, and enterprise scale.

Brand Keywords

• corporate-modern
• productivity-focused
• accessible-minimal
• ecosystem-consistent