W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Microsoft
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.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/microsoft/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/microsoft/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.
Microsoft
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 · [email protected] · 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 ([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 |
|---|---|---|
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: [email protected] from the encyclopedia.
Components — same template, themed by Microsoft
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.
Microsoft
A clear hierarchy in Microsoft'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
Microsoft
[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
→ microsoft-blue #00A4EF background
→ microsoft-white #FFFFFF identity
→ communications-blue #0078D4 logo-quadrant-blue
→ microsoft-blue #00A4EF logo-quadrant-green
→ microsoft-green #7FBA00 logo-quadrant-red
→ microsoft-red #F25022 logo-quadrant-yellow
→ microsoft-yellow #FFB900 on-identity
→ microsoft-white #FFFFFF primary
→ communications-blue #0078D4 primary-hover
→ microsoft-blue #00A4EF surface
→ microsoft-gray-20 #F3F2F1 text-primary
→ microsoft-near-black #1F1F1F text-secondary
→ microsoft-gray-160 #605E5C Typography
code
→ mono CascadiaCode Nerd Font display
→ heading Segoe UI prose
→ body Segoe UI Palette mode mappings (from microsoft)
Light mode (14 roles)
accent
→ microsoft-blue accent-hover
→ communications-blue background
→ microsoft-white error
→ microsoft-red primary
→ communications-blue primary-hover
→ microsoft-blue success
→ microsoft-green surface
→ microsoft-gray-20 surface-elevated
→ microsoft-white text-primary
→ microsoft-near-black text-secondary
→ microsoft-gray-160 text-tertiary
→ microsoft-gray-130 warning
→ microsoft-yellow warning-hover
→ microsoft-red Dark mode (14 roles)
accent
→ communications-blue accent-hover
→ microsoft-blue background
→ microsoft-near-black error
→ microsoft-red primary
→ microsoft-blue primary-hover
→ communications-blue success
→ microsoft-green surface
→ microsoft-black surface-elevated
→ microsoft-gray-160 text-primary
→ microsoft-white text-secondary
→ microsoft-gray-30 text-tertiary
→ microsoft-gray-130 warning
→ microsoft-yellow warning-hover
→ microsoft-red Rules (7 typed constraints)
error · 4 rules
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 rules
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.