Live (Microsoft Outlook) Brand Design System Deep Dive

1. Brand Overview

The "Live" experience here is really Microsoft Outlook's web presence — the consumer-facing side of their email and calendar platform. This is a productivity brand at its core, but the design language does a lot of heavy lifting to make something inherently technical feel approachable.

The vibe: corporate, but not cold. Professional, but with flashes of friendliness in the palette. There’s a lot of deep blues and near-black neutrals — the sort of tones that signal reliability and trust — paired with clean whites and pale blues for breathing room. You can see the Microsoft DNA here: clarity, accessibility, and consistency across a huge ecosystem. Every detail feels like it needs to be compatible not just with Outlook, but with Teams, Office, and Windows.

There's a heavy reliance on the Segoe UI Variable font family — a Microsoft-owned typeface optimized for screen readability — reinforcing the brand's platform-native feel. Spacing sticks to an 8px grid, which is predictable and developer-friendly. This isn't a playful brand; the visual language is designed to scale across millions of users and multiple device contexts.

What's interesting is the mix of flat design elements with very subtle shadows and borders. It's not pure flat — buttons sometimes get a box-shadow on hover — but depth is used sparingly. The UI is more about crisp separation than skeuomorphic realism.

Overall, this is a design system aimed squarely at people who spend hours in the interface daily. It values comfort over flash, prioritizes legibility, and ensures that interactive states are obvious without being loud. It’s built for productivity, and it shows.

2. Color System

2.1 Primary Colors

Primary semantic color is rgb(23, 37, 61) (#17253d). This deep blue-gray is used for navigation, headers, and key structural elements. It’s conservative — less saturated than pure blue — which works for a brand that wants to feel stable rather than trendy.

Secondary semantic color is rgba(0, 0, 0, 0) — essentially transparent. That tells you secondary is often about empty space, overlays, or non-interfering backgrounds.

The main accent in the palette is rgb(0, 103, 184) (#0067b8), the signature Microsoft blue. This is used for CTAs, highlighted links, and active states. It’s bright enough to stand out against white or pale backgrounds, but not neon — it holds up in accessibility contrast tests.

2.2 Complete Palette

Here’s the full extracted palette from the site:

This is just the high-confidence palette from usage counts. The full design tokens include hundreds of specific shades — Microsoft's design system covers every possible functional color: success greens, warning yellows, error reds, Teams purple, etc. For example: --root-color-brilliant-blue-500 (#0078d4), --root-color-success-500 (#0e8728), --root-color-error-800 (#7a1b26).

2.3 Color Relationships

Contrast is solid across primary actions: #0067b8 on white has a contrast ratio over 4.5:1, meeting WCAG AA for normal text. The darker #17253d against white is even stronger.

Dark mode readiness is clear — the palette already has deep neutrals (#000000, #091f2c, #051118) and pale variants (#dceef8, #ffffff) that can invert easily.

Functional colors are tuned for clarity:

• Success greens: #0e8728 (500) and lighter #90c89c for backgrounds
• Error reds: #ad2636 (700), #f5bfc5 for light error backgrounds
• Warning yellows: #fada23 (500), #fffbe9 for light backgrounds

2.4 Usage Guide

Good combos:

• #0067b8 (primary blue) text on #ffffff background — high contrast, branded.
• #17253d backgrounds with #ffffff text — strong, calm backdrop.
• #dceef8 background for callout sections, with #051118 text — subtle emphasis.

Avoid:

• Using #0067b8 on #dceef8 — contrast drops.
• Dark gray (#262626) text on deep slate (#2a446f) — too low contrast for body copy.
• Mixing multiple accent colors in one component — e.g., green and blue in the same button.

3. Typography

3.1 Font Families

This is 100% Microsoft territory:

• Primary: Segoe UI Variable Text — fallback stack: Segoe UI, segoeui, Helvetica Neue, helvetica, arial
• Display: Segoe UI Variable Display — same fallbacks
• Legacy/UI elements: Segoe UI — fallback SegoeUI, Helvetica Neue, Helvetica, Arial

No Google Fonts, no Adobe Fonts. This is a custom system font designed for screen clarity.

3.2 Type Scale

3.3 Hierarchy

They use a wide range of heading sizes — from 124px hero headlines down to 20px section headers. This keeps big marketing pages dramatic, but still aligns with the utilitarian UI text sizes inside the app.

Body text sits around 16px–20px depending on context, which is comfortable for long reading. Captions and small labels drop to 14px or 12px, but rarely smaller — accessibility is taken seriously.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

This is predictable — everything is a multiple of 4px, anchored on 8px.

4.2 Layout

Breakpoints cover every device class:

• Mobile starts at 320px
• Tablet around 768px–820px
• Desktop from 1024px upwards
• Extra-large screens at 1440px–1779px

They've even got odd intermediate points (539px, 859px) — probably tuned for specific device classes or component layouts.

5. Visual Elements

Border Radius

They use multiple discrete radii:

• 4px: small elements, dialogs
• 8px: buttons
• 16px: images, media
• 24px: modals/cards
• 200px: pill buttons
• 50%: circular inputs

There are asymmetric radii for tabs (16px 0px 0px 16px), but most are uniform.

Shadows

Two shadow tokens:

• rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.14) 0px 2px 4px — subtle, used 231 times.
• Slight variant with 1.008px offset — minor usage.

Depth is minimal — this is mostly flat design with rare shadows.

Borders

Common:

• 1px solid #e6f2fb — card dividers
• 2px solid #091f2c — buttons
• Bottom borders in #17253d for nav

6. Components

6.1 Buttons

They have multiple button styles:

Style 1 — Minimal text button

Default:

• bg: transparent
• text: #262626
• padding: 16px 30px 16px 16px
• radius: 0 Hover:
• bg: #000000
• text: #f2f2f2 Active:
• bg: #0067b8
• text: #000000

Style 2 — Solid dark button

Default:

• bg: #091f2c
• text: #ffffff
• padding: 12px 16px
• radius: 8px Hover:
• bg: #ffffff
• text: rgba(0,0,0,0.9)
• border: 1px solid #cccccc Focus:
• outline dashed 1px

Style 3 — Pill active

Default:

• bg: #06161f
• text: #ffffff
• padding: 8px 24px
• radius: 200px

Style 4 — Pill inactive

Default:

• bg: rgba(6,22,31,0.1)
• text: #051118
• radius: 200px

Style 5 — Solid black button

Default:

• bg: #000000
• text: #ffffff
• radius: 8px

Style 6 — Outset gray

Default:

• bg: #727272
• text: #ffffff
• border: 2px outset #000000

6.2 Links

Variants:

• Blue (#0067b8) underline — hover removes underline, changes to rgba(0,0,0,0.8)
• White (#ffffff) underline — used on dark backgrounds
• Gray (#616161) no underline — hover underlines

6.3 Forms

No text inputs extracted here — likely styled with 4px or 8px radius, 1px border.

6.4 Cards

Cards use 1px solid #e6f2fb borders, 4px–24px radii, and subtle shadows if elevated.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #17253d;
  --color-secondary: transparent;
  --color-black: #000000;
  --color-blue: #0067b8;
  --color-slate-blue: #2a446f;
  --color-dark-navy: #051118;
  --color-white: #ffffff;
  --color-gray: #616161;
  --color-pale-blue: #dceef8;
  --color-dark-gray: #262626;
  --color-deep-teal-navy: #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-family-ui: "Segoe UI", SegoeUI, Helvetica Neue, Helvetica, Arial;

  --font-size-h1-lg: 124px;
  --font-size-h1-md: 100px;
  --font-size-h1-display: 62px;
  --font-size-h1-sm: 48px;
  --font-size-h1-xs: 32px;
  --font-size-body-lg: 20px;
  --font-size-body: 16px;
  --font-size-caption: 14px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-96: 96px;

  /* 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, rgba(0,0,0,0.14) 0px 2px 4px;
}

8. AI Coding Assistant Prompt

# Live (Microsoft Outlook) Design System Specification

You are a Live (Microsoft Outlook) design expert. Build UIs matching their visual language exactly.

## Brand Context
Microsoft Outlook's design is functional, professional, and consistent across devices. It uses deep blues, neutral grays, and crisp whites to create a reliable productivity environment. Typography is Segoe UI Variable — optimized for legibility.

## Color Palette
- Primary: #17253d — Navigation bars, headers
- Accent Blue: #0067b8 — Primary CTAs, links
- Dark Navy: #051118 — Buttons, modal controls
- White: #ffffff — Backgrounds, text on dark
- Medium Gray: #616161 — Secondary text
- Pale Blue: #dceef8 — Section backgrounds, callouts
- Black: #000000 — Text, icons
- Dark Gray: #262626 — Navigation text/icons
- Deep Teal Navy: #091f2c — Button outlines, dark backgrounds

## Typography
Font Families:
- Segoe UI Variable Text — headings, body
- Segoe UI Variable Display — large display headings
- Segoe UI — legacy UI text

Type Sizes:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 Hero | Segoe UI Variable Text | 124px | 400 | 1.05 | Marketing hero titles |
| H1 Large | Segoe UI Variable Text | 100px | 400 | 1.06 | Large headings |
| H1 Display | Segoe UI Variable Display | 62px | 500 | 1.16 | Section titles |
| H1 Medium | Segoe UI Variable Display/Text | 48px | 500 | 1.17 | Subsection headings |
| H1 Small | Segoe UI Variable Display/Text | 32px | 500 | 1.25 | Smaller headings |
| Body Large | Segoe UI Variable Text | 20px | 400 | 1.60 | Paragraphs |
| Body Bold | Segoe UI Variable Display/Text | 20px | 600 | 1.40 | Emphasized body |
| Link | Segoe UI Variable Text | 16px | 400 | - | Hyperlinks |
| Button | Segoe UI Variable Text | 16px | 600 | 1.50 | Buttons |
| Caption | Segoe UI Variable Text | 14px | 400 | 1.43 | Small labels |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 96px
Use 8px for tight gaps, 16px for padding, 24px for section spacing, 32px+ for large layouts.

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

## Shadows & Depth
- Subtle shadow: rgba(0,0,0,0.12) 0px 0px 2px, rgba(0,0,0,0.14) 0px 2px 4px
Use sparingly for elevation.

## Component Specifications

### Primary Button
Default: bg #091f2c, text #ffffff, padding 12px 16px, radius 8px, border 2px solid transparent
Hover: bg #ffffff, text rgba(0,0,0,0.9), border 1px solid #cccccc
Active: bg initial, text rgba(0,0,0,0.8), border 2px solid
Focus: outline dashed 1px, box-shadow #777 2px 2px 2px

### Secondary Link Button
Default: bg transparent, text #262626, padding 16px 30px 16px 16px, radius 0
Hover: bg #000000, text #f2f2f2
Active: bg #0067b8, text #000000

### Pill Active
Default: bg #06161f, text #ffffff, padding 8px 24px, radius 200px

### Links
Blue link: default underline, hover removes underline and turns text rgba(0,0,0,0.8)
Gray link: no underline, hover adds underline

## Layout & Responsive Rules
- Mobile: 320px–539px
- Tablet: 768px–820px
- Desktop: 1024px+
- Large: 1440px–1779px

## Interaction Rules
- Transitions: 150ms ease for hover/focus state changes
- Focus indicators: dashed outlines in currentcolor
- Loading states: reduce opacity to 0.5

## DO
- Use only palette colors
- Keep spacing multiples of 8px
- Apply correct radius per component type
- Maintain text contrast > 4.5:1
- Use Segoe UI Variable family

## DON'T
- Invent new colors
- Mix multiple accent colors in one button
- Apply heavy shadows
- Use inconsistent corner radii
- Shrink text below 12px

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #091f2c;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid #cccccc;
}
.btn-primary:focus {
  outline: dashed 1px;
  box-shadow: #777 2px 2px 2px;
}
```

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

### Card
```css
.card {
  background: #ffffff;
  border: 1px solid #e6f2fb;
  border-radius: 24px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.12) 0px 0px 2px, rgba(0,0,0,0.14) 0px 2px 4px;
}
```

9. Summary

TL;DR — Microsoft's Live/Outlook design system is a disciplined, productivity-first UI language. Deep blues and neutrals dominate, Segoe UI Variable ensures legibility, and an 8px grid keeps layouts tidy. Components are flat with minimal shadows, and interaction states are clear but restrained.

Brand Keywords:

• corporate-reliable
• productivity-focused
• clarity-first
• microsoft-native
• accessible-consistent