W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Outlook
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/outlook/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/outlook/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Outlook
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 · [email protected] · 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 ([email protected]) |
Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
body |
Segoe UI ([email protected]) |
Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
mono |
CascadiaCode Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Outlook
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Outlook
A clear hierarchy in Outlook's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Outlook
[email protected]font · heading
Segoe UI
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Segoe UI
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
CascadiaCode Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ outlook-action-blue #0066FF accent-hover
→ outlook-link-blue #0067B8 background
→ outlook-canvas #FFFDFB identity
→ outlook-deep-blue #2A446F mark-envelope-flap
→ outlook-sky #B3DAF0 mark-envelope-outer
→ outlook-deep-blue #2A446F mark-letter-o
→ outlook-action-blue #0066FF on-identity
→ outlook-white #FFFFFF primary
→ outlook-link-blue #0067B8 primary-hover
→ communications-blue #0078D4 surface
→ outlook-gray-30 #EDEBE9 text-primary
→ outlook-ink #17253D text-secondary
→ outlook-gray-160 #605E5C Typography
code
→ mono CascadiaCode Nerd Font display
→ heading Segoe UI prose
→ body Segoe UI Palette mode mappings (from outlook)
Light mode (12 roles)
accent
→ outlook-action-blue accent-hover
→ outlook-link-blue background
→ outlook-canvas border
→ outlook-gray-30 error
→ outlook-action-blue primary
→ outlook-link-blue primary-hover
→ communications-blue success
→ outlook-action-blue surface
→ outlook-gray-30 surface-elevated
→ outlook-white text-primary
→ outlook-ink text-secondary
→ outlook-gray-160 Dark mode (10 roles)
accent
→ outlook-action-blue accent-hover
→ outlook-sky background
→ outlook-ink border
→ outlook-gray-160 primary
→ outlook-sky primary-hover
→ outlook-action-blue surface
→ outlook-deep-blue surface-elevated
→ outlook-gray-160 text-primary
→ outlook-white text-secondary
→ outlook-sky Rules (8 typed constraints)
error · 5 rules
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 rules
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).