# Microsoft

> `microsoft@1.0.0`

Microsoft Corporation is a global technology company whose portfolio spans operating systems (Windows), productivity (Microsoft 365), cloud (Azure), developer tools (GitHub, Visual Studio), gaming (Xbox), and AI (Copilot). The corporate identity is anchored on the four-square logo — red, green, blue, and yellow quadrants — and on Communications Blue (#0078D4) as the Fluent system primary. The voice is enterprise-clear: confident, productivity-oriented, technically precise, and welcoming to both end users and developers.


**Tags:** `tech`, `enterprise`, `productivity`, `microsoft`, `fluent`

## Atoms

### Palette

**Microsoft** · `microsoft@1.0.0` · Proprietary — All Rights Reserved

> Microsoft corporate palette anchored on the four-quadrant logo colors (Red #F25022, Green #7FBA00, Blue #00A4EF, Yellow #FFB900) and on Microsoft Communications Blue (#0078D4) — the Fluent / Office system primary used across product UI, the corporate marketing site, and the Microsoft.com chrome. 

### 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 |
|----|------|-------|
| `microsoft-red` | Microsoft Red | `#F25022` |
| `microsoft-green` | Microsoft Green | `#7FBA00` |
| `microsoft-blue` | Microsoft Blue (Logo) | `#00A4EF` |
| `microsoft-yellow` | Microsoft Yellow | `#FFB900` |
| `communications-blue` | Communications Blue | `#0078D4` |
| `microsoft-black` | Microsoft Black | `#000000` |
| `microsoft-near-black` | Microsoft Near-Black | `#1F1F1F` |
| `microsoft-gray-160` | Microsoft Gray 160 | `#605E5C` |
| `microsoft-gray-130` | Microsoft Gray 130 | `#8A8886` |
| `microsoft-gray-30` | Microsoft Gray 30 | `#EDEBE9` |
| `microsoft-gray-20` | Microsoft Gray 20 | `#F3F2F1` |
| `microsoft-white` | Microsoft White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `microsoft-white` | `#FFFFFF` |
| `surface` | `microsoft-gray-20` | `#F3F2F1` |
| `surface-elevated` | `microsoft-white` | `#FFFFFF` |
| `text-primary` | `microsoft-near-black` | `#1F1F1F` |
| `text-secondary` | `microsoft-gray-160` | `#605E5C` |
| `text-tertiary` | `microsoft-gray-130` | `#8A8886` |
| `primary` | `communications-blue` | `#0078D4` |
| `primary-hover` | `microsoft-blue` | `#00A4EF` |
| `accent` | `microsoft-blue` | `#00A4EF` |
| `accent-hover` | `communications-blue` | `#0078D4` |
| `warning` | `microsoft-yellow` | `#FFB900` |
| `warning-hover` | `microsoft-red` | `#F25022` |
| `error` | `microsoft-red` | `#F25022` |
| `success` | `microsoft-green` | `#7FBA00` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `microsoft-near-black` | `#1F1F1F` |
| `surface` | `microsoft-black` | `#000000` |
| `surface-elevated` | `microsoft-gray-160` | `#605E5C` |
| `text-primary` | `microsoft-white` | `#FFFFFF` |
| `text-secondary` | `microsoft-gray-30` | `#EDEBE9` |
| `text-tertiary` | `microsoft-gray-130` | `#8A8886` |
| `primary` | `microsoft-blue` | `#00A4EF` |
| `primary-hover` | `communications-blue` | `#0078D4` |
| `accent` | `communications-blue` | `#0078D4` |
| `accent-hover` | `microsoft-blue` | `#00A4EF` |
| `warning` | `microsoft-yellow` | `#FFB900` |
| `warning-hover` | `microsoft-red` | `#F25022` |
| `error` | `microsoft-red` | `#F25022` |
| `success` | `microsoft-green` | `#7FBA00` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `communications-blue` | `#0078D4` |
| `on-identity` | `microsoft-white` | `#FFFFFF` |
| `primary` | `communications-blue` | `#0078D4` |
| `primary-hover` | `microsoft-blue` | `#00A4EF` |
| `accent` | `microsoft-blue` | `#00A4EF` |
| `background` | `microsoft-white` | `#FFFFFF` |
| `surface` | `microsoft-gray-20` | `#F3F2F1` |
| `text-primary` | `microsoft-near-black` | `#1F1F1F` |
| `text-secondary` | `microsoft-gray-160` | `#605E5C` |
| `logo-quadrant-red` | `microsoft-red` | `#F25022` |
| `logo-quadrant-green` | `microsoft-green` | `#7FBA00` |
| `logo-quadrant-blue` | `microsoft-blue` | `#00A4EF` |
| `logo-quadrant-yellow` | `microsoft-yellow` | `#FFB900` |

### Typography

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

## Rules

### 🛑 error (4)

#### `colorChoice` → `logo.quadrants`

- **allowed:** microsoft-red, microsoft-green, microsoft-blue, microsoft-yellow
- **forbidden:** communications-blue

> The Microsoft four-square logo uses the canonical quadrant hues (#F25022, #7FBA00, #00A4EF, #FFB900). Communications Blue (#0078D4) is the Fluent system primary for UI chrome, not a logo fill. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, separated-quadrants

> Microsoft's brand guidelines explicitly prohibit altering the proportions, colors, or arrangement of the four-square mark, and require sufficient clearspace around the logo on any surface. 

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

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

> WCAG 2.1 Level AA contrast requirement for body text. Microsoft Near-Black (#1F1F1F) on Microsoft White clears AA at ~17:1, and Fluent's accessibility guidance specifies AA as the floor for text-on-background pairings. 

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

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Communications Blue on Microsoft White must remain perceptible at link / large-text sizes. Below 3:1, interactive affordance collapses — Fluent's color system relies on this contrast to signal "clickable." 

### 💡 recommendation (3)

#### `compositionConstraint` → `roles.colors.primary`

- **doesNotPairWith:** microsoft-red, microsoft-green, microsoft-yellow

> The four logo-quadrant hues belong together as the brand mark. Pairing Communications Blue with one quadrant hue alone (without the full quadrant set) reads as a brand-identity conflict rather than a coordinated palette. 

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

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

> Fluent uses Segoe UI for both heading and body. Maintain a meaningful size ratio (Fluent's type ramp goes from Caption at ~12px to Title at ~32px+) to preserve hierarchy when one family does double duty. 

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

- **allowed:** 400, 600

> Fluent's type ramp uses Segoe UI Regular (400) and Semibold (600) for the majority of UI surfaces. Other weights exist but are reserved for specific roles (Light for hero display, Bold for emphasis). 

## Provenance

- **Source:** <https://www.microsoft.com/design/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Microsoft, the Microsoft logo, Windows, Office, Azure, Fluent, and related names and marks are trademarks of the Microsoft group of companies. Brand colors and identity guidance documented here are derived from microsoft.com/design/ and the Fluent 2 design system site at fluent2.microsoft.design. 
- **Imported:** `2026-05-17`
- **Notes:** Brand-atoms' read of Microsoft's public Fluent and brand-resource guidance. This file is not an official Microsoft brand document. Microsoft's four-square logo is one of the most-protected marks on the internet; no asset files are bundled here. 

---

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