# Outlook

> `outlook@1.0.0`

Outlook is Microsoft's email-and-calendar product — the consumer side of Microsoft 365 personal mail and a flagship enterprise productivity surface. Outlook is a product-brand under the Microsoft parent (see brands/microsoft/1.0.0); it inherits the Fluent design language, the Segoe UI typographic family, and Microsoft's enterprise-clear voice. The visual fingerprint that distinguishes Outlook specifically is the envelope-with-O mark — a deep-navy envelope outer, a pale-blue inner flap, and the white "O" ring — and the Communications Blue primary (#0078D4 / #0067B8) used for the Compose button and primary links across the product surface.


**Tags:** `outlook`, `microsoft`, `email`, `product-brand`, `fluent`, `productivity`, `enterprise`

## Atoms

### Palette

**Outlook** · `outlook@1.0.0` · Proprietary — All Rights Reserved

> Outlook's product palette, anchored on the Outlook envelope-with-O mark (a deep-navy envelope, a pale-blue flap, and the white "O" ring) and on Microsoft's Communications Blue (#0067B8 / #0078D4) as the primary product action color. Outlook is a product-brand under the Microsoft parent (see brands/microsoft/1.0.0); it inherits Microsoft's Fluent design language, the Segoe UI typographic family, and the enterprise-clear voice. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Segoe UI** `(segoe-ui@1.0.0)` | Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
| `body` | **Segoe UI** `(segoe-ui@1.0.0)` | Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
| `mono` | **CascadiaCode Nerd Font** `(cascadiacode-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `outlook-deep-blue` | Outlook Deep Blue | `#2A446F` |
| `outlook-action-blue` | Outlook Action Blue | `#0066FF` |
| `outlook-sky` | Outlook Sky | `#B3DAF0` |
| `communications-blue` | Communications Blue | `#0078D4` |
| `outlook-link-blue` | Outlook Link Blue | `#0067B8` |
| `outlook-ink` | Outlook Ink | `#17253D` |
| `outlook-near-black` | Outlook Near-Black | `#1F1F1F` |
| `outlook-gray-160` | Outlook Gray 160 | `#605E5C` |
| `outlook-gray-30` | Outlook Gray 30 | `#EDEBE9` |
| `outlook-canvas` | Outlook Canvas | `#FFFDFB` |
| `outlook-white` | Outlook White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `outlook-canvas` | `#FFFDFB` |
| `surface` | `outlook-gray-30` | `#EDEBE9` |
| `surface-elevated` | `outlook-white` | `#FFFFFF` |
| `text-primary` | `outlook-ink` | `#17253D` |
| `text-secondary` | `outlook-gray-160` | `#605E5C` |
| `primary` | `outlook-link-blue` | `#0067B8` |
| `primary-hover` | `communications-blue` | `#0078D4` |
| `accent` | `outlook-action-blue` | `#0066FF` |
| `accent-hover` | `outlook-link-blue` | `#0067B8` |
| `error` | `outlook-action-blue` | `#0066FF` |
| `success` | `outlook-action-blue` | `#0066FF` |
| `border` | `outlook-gray-30` | `#EDEBE9` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `outlook-ink` | `#17253D` |
| `surface` | `outlook-deep-blue` | `#2A446F` |
| `surface-elevated` | `outlook-gray-160` | `#605E5C` |
| `text-primary` | `outlook-white` | `#FFFFFF` |
| `text-secondary` | `outlook-sky` | `#B3DAF0` |
| `primary` | `outlook-sky` | `#B3DAF0` |
| `primary-hover` | `outlook-action-blue` | `#0066FF` |
| `accent` | `outlook-action-blue` | `#0066FF` |
| `accent-hover` | `outlook-sky` | `#B3DAF0` |
| `border` | `outlook-gray-160` | `#605E5C` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `outlook-deep-blue` | `#2A446F` |
| `on-identity` | `outlook-white` | `#FFFFFF` |
| `primary` | `outlook-link-blue` | `#0067B8` |
| `primary-hover` | `communications-blue` | `#0078D4` |
| `accent` | `outlook-action-blue` | `#0066FF` |
| `accent-hover` | `outlook-link-blue` | `#0067B8` |
| `mark-envelope-outer` | `outlook-deep-blue` | `#2A446F` |
| `mark-envelope-flap` | `outlook-sky` | `#B3DAF0` |
| `mark-letter-o` | `outlook-action-blue` | `#0066FF` |
| `background` | `outlook-canvas` | `#FFFDFB` |
| `surface` | `outlook-gray-30` | `#EDEBE9` |
| `text-primary` | `outlook-ink` | `#17253D` |
| `text-secondary` | `outlook-gray-160` | `#605E5C` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `logo.envelope-mark`

- **allowed:** outlook-deep-blue, outlook-sky, outlook-action-blue, outlook-white
- **forbidden:** communications-blue, outlook-ink

> The Outlook envelope-with-O mark uses exactly four fills — Deep Blue (#2A446F) outer, Sky (#B3DAF0) flap, Action Blue (#0066FF) on the "O" ring, and white negative space. Communications Blue (#0078D4) is the Fluent system primary for product chrome and link affordances, not a logo fill — substituting it muddies the envelope's intentional contrast between deep navy and bright "O". 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, separated-envelope-and-o, reverted-to-old-blue-envelope

> Microsoft's brand guidelines explicitly prohibit altering the proportions, colors, or arrangement of the Outlook envelope mark. The "O" and the envelope are a unified mark — separating them, or reverting to the pre-2018 wireframe envelope, breaks brand recognition. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast requirement for body text. Outlook Ink (#17253D) on Outlook Canvas (#FFFDFB) clears AA at ~15:1, matching Fluent's accessibility floor for text-on-background pairings. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Outlook Link Blue (#0067B8) on Outlook Canvas clears AA at ~5.3:1 — the live product uses #0067B8 in place of the lighter #0078D4 Communications Blue specifically because #0078D4 on a warm-white canvas drops below 4.5:1 for small body-text links. 

#### `colorChoice` → `roles.colors.primary`

- **allowed:** outlook-link-blue, communications-blue
- **forbidden:** outlook-action-blue, outlook-deep-blue

> Primary action affordances (Compose, Send, link text) must use one of the two Fluent / Outlook system blues. The brighter Action Blue (#0066FF) is reserved for the envelope-mark "O" ring; the deep-navy envelope outer is identity-only and lacks the affordance signal for "clickable." 

### 💡 recommendation (3)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** outlook-white, outlook-canvas, outlook-sky
- **doesNotPairWith:** outlook-action-blue

> The deep-navy envelope reads cleanest against white or against its own pale-blue flap. Pairing the navy outer with the bright Action Blue "O" at large scale (without the envelope context) reads as two competing blues fighting for hierarchy. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.4`

> Outlook inherits Fluent's Segoe UI for both heading and body. A 1.4× minimum size ratio preserves hierarchy when one family does double duty — Fluent's type ramp runs from Caption (~12px) to Title (~32px+), and Outlook's product chrome uses the same scale. 

#### `enumMembership` → `typography.body.fontWeight`

- **allowed:** 400, 600

> Outlook inherits Fluent's type-weight discipline — Segoe UI Regular (400) and Semibold (600) for the majority of UI surfaces. Lighter and heavier weights are reserved for specific roles (Light for hero display, Bold for emphasis). 

## Provenance

- **Source:** <https://www.microsoft.com/design/fluent/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Outlook, the Outlook envelope-with-O mark, Microsoft, Fluent, and Segoe UI are trademarks of the Microsoft group of companies. Brand colors and identity guidance documented here are derived from microsoft.com/design/, the Fluent 2 design system at fluent2.microsoft.design, and the live Outlook product surface at outlook.live.com. 
- **Imported:** `2026-05-18`
- **Notes:** Outlook inherits from the Microsoft Fluent design language; see brands/microsoft/1.0.0. Identity role uses the Outlook envelope mark colors specifically. This atom is brand-atoms' read of public Outlook surfaces; it is not an official Microsoft brand document. The Outlook mark is among the most-protected trademarks on the internet; no asset files are bundled here. Outlook's primary typeface is Segoe UI (referenced via segoe-ui@1). 

---

*Generated by the brand-atoms converter. Source: `outlook@1.0.0` from the encyclopedia.*