W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Microsoft Azure
Microsoft Azure is Microsoft's public-cloud platform, providing compute, storage, networking, databases, AI/ML, identity, and developer-platform services. The Azure sub-brand is anchored on a single signature blue — Azure Blue (#0078D4), which doubles as the Microsoft Fluent Communications primary — paired with the Fluent neutral ramp and the Segoe UI typeface family inherited from the Microsoft parent brand. Where the Microsoft parent identity uses the four-square quadrant set, the Azure identity tightens to a single hue so cloud surfaces read unambiguously as Azure rather than corporate Microsoft. The voice is enterprise-clear and architecture-forward: reference-architecture diagrams, ARM/Bicep IaC, and the Azure Portal share the same chrome dialect.
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/azure/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/azure/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 Azure
Microsoft Azure is Microsoft's public-cloud platform, providing compute, storage, networking, databases, AI/ML, identity, and developer-platform services. The Azure sub-brand is anchored on a single signature blue — Azure Blue (#0078D4), which doubles as the Microsoft Fluent Communications primary — paired with the Fluent neutral ramp and the Segoe UI typeface family inherited from the Microsoft parent brand. Where the Microsoft parent identity uses the four-square quadrant set, the Azure identity tightens to a single hue so cloud surfaces read unambiguously as Azure rather than corporate Microsoft. The voice is enterprise-clear and architecture-forward: reference-architecture diagrams, ARM/Bicep IaC, and the Azure Portal share the same chrome dialect.
Tags: tech, cloud, azure, microsoft, fluent, enterprise, infrastructure
Atoms
Palette
Microsoft Azure · [email protected] · Proprietary — All Rights Reserved
Microsoft Azure palette anchored on Azure Blue (#0078D4) — the Fluent communications blue carried across the Azure Portal chrome, azure.microsoft.com, and the Azure architecture icon library. The Azure sub-brand uses the Microsoft Fluent neutral ramp and the same Segoe UI typography as the parent brand, but tightens the hue identity around a single blue — distinct from the four-square parent quadrant set — so that Azure surfaces read unambiguously as cloud-platform rather than corporate Microsoft.
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 |
|---|---|---|
azure-blue |
Azure Blue | #0078D4 |
azure-blue-dark |
Azure Blue Dark | #005A9E |
azure-blue-light |
Azure Blue Light | #50E6FF |
azure-navy |
Azure Navy | #243A5E |
azure-navy-deep |
Azure Navy Deep | #0B2545 |
fluent-near-black |
Fluent Near-Black | #1F1F1F |
fluent-gray-160 |
Fluent Gray 160 | #605E5C |
fluent-gray-130 |
Fluent Gray 130 | #8A8886 |
fluent-gray-30 |
Fluent Gray 30 | #EDEBE9 |
fluent-gray-20 |
Fluent Gray 20 | #F3F2F1 |
fluent-white |
Fluent White | #FFFFFF |
azure-error |
Azure Error | #A4262C |
azure-success |
Azure Success | #107C10 |
azure-warning |
Azure Warning | #797673 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
fluent-white |
#FFFFFF |
surface |
fluent-gray-20 |
#F3F2F1 |
surface-elevated |
fluent-white |
#FFFFFF |
text-primary |
fluent-near-black |
#1F1F1F |
text-secondary |
fluent-gray-160 |
#605E5C |
text-tertiary |
fluent-gray-130 |
#8A8886 |
primary |
azure-blue |
#0078D4 |
primary-hover |
azure-blue-dark |
#005A9E |
accent |
azure-blue-light |
#50E6FF |
accent-hover |
azure-blue |
#0078D4 |
warning |
azure-warning |
#797673 |
warning-hover |
azure-navy |
#243A5E |
error |
azure-error |
#A4262C |
success |
azure-success |
#107C10 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
azure-navy-deep |
#0B2545 |
surface |
azure-navy |
#243A5E |
surface-elevated |
azure-blue-dark |
#005A9E |
text-primary |
fluent-white |
#FFFFFF |
text-secondary |
fluent-gray-30 |
#EDEBE9 |
text-tertiary |
fluent-gray-130 |
#8A8886 |
primary |
azure-blue |
#0078D4 |
primary-hover |
azure-blue-light |
#50E6FF |
accent |
azure-blue-light |
#50E6FF |
accent-hover |
azure-blue |
#0078D4 |
warning |
azure-warning |
#797673 |
warning-hover |
azure-navy |
#243A5E |
error |
azure-error |
#A4262C |
success |
azure-success |
#107C10 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
azure-blue |
#0078D4 |
on-identity |
fluent-white |
#FFFFFF |
primary |
azure-blue |
#0078D4 |
primary-hover |
azure-blue-dark |
#005A9E |
accent |
azure-blue-light |
#50E6FF |
accent-hover |
azure-blue |
#0078D4 |
background |
fluent-white |
#FFFFFF |
surface |
fluent-gray-20 |
#F3F2F1 |
surface-elevated |
fluent-white |
#FFFFFF |
text-primary |
fluent-near-black |
#1F1F1F |
text-secondary |
fluent-gray-160 |
#605E5C |
text-tertiary |
fluent-gray-130 |
#8A8886 |
chrome |
azure-navy |
#243A5E |
chrome-deep |
azure-navy-deep |
#0B2545 |
mark |
azure-blue |
#0078D4 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
colorChoice → logo.mark.fill
- allowed: azure-blue, azure-blue-light
- forbidden: azure-blue-dark, azure-navy, fluent-near-black
The Azure cloud-glyph fills in Azure Blue (#0078D4) with the lighter cyan accent (#50E6FF) as the secondary cloud-tone. The hover/pressed Azure Blue Dark and the Azure Navy chrome color are interactive-state and canvas tokens — never logo fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, cloud-detached-from-wordmark
Microsoft's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the Azure mark. The cloud-glyph is part of the Azure lockup and must not be detached from the Azure wordmark on shared surfaces.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Fluent Near-Black (#1F1F1F) on Fluent White gives ~17:1 — comfortably above WCAG 2.1 Level AA. Fluent's accessibility guidance specifies AA as the floor for text-on-background pairings on Azure marketing and the Azure Portal.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Azure Blue on Fluent White gives ~4.8:1 — clearing WCAG AA for body-sized text. Unlike many brand primaries, Azure Blue is safe for interactive labels at standard body size; the rule encodes the published Fluent guarantee.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fluent 2 tokens are AA-compliant by construction; the Azure Portal and azure.microsoft.com both inherit that floor.
💡 recommendation (3)
compositionConstraint → roles.colors.primary
- pairsWith: azure-navy, fluent-white, azure-blue-light
- doesNotPairWith: azure-error
The canonical Azure composition is Azure Blue against Fluent White or Azure Navy, with the lighter cyan as a paired accent. Combining Azure Blue with the Fluent error red on the same composition reads as a status conflict rather than a brand signature.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.4
Azure marketing surfaces and the Azure Portal both use Segoe UI for heading and body, with a clear size differential. The Fluent type ramp preserves hierarchy through size; a 1.4× floor keeps the display-to-prose distinction intact when one family does both jobs.
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, Azure, the Azure logo, 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 site (fluent2.microsoft.design), and the publicly distributed Azure architecture icon library (learn.microsoft.com/azure/architecture/ icons).
- Imported:
2026-05-18 - Notes: Azure is documented as a distinct brand atom because the cloud surfaces tighten the Microsoft Fluent palette to a single signature blue, distinct from the four-square corporate logo. Azure shares the parent's Segoe UI typography. No assets are bundled here — the Azure cloud-logo glyph and the Azure wordmark are trademarked and must be retrieved from the Microsoft brand-resources site under Microsoft's stated terms.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Microsoft Azure
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 Azure
A clear hierarchy in Microsoft Azure'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 Azure
[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
→ azure-blue-light #50E6FF accent-hover
→ azure-blue #0078D4 background
→ fluent-white #FFFFFF chrome
→ azure-navy #243A5E chrome-deep
→ azure-navy-deep #0B2545 identity
→ azure-blue #0078D4 mark
→ azure-blue #0078D4 on-identity
→ fluent-white #FFFFFF primary
→ azure-blue #0078D4 primary-hover
→ azure-blue-dark #005A9E surface
→ fluent-gray-20 #F3F2F1 surface-elevated
→ fluent-white #FFFFFF text-primary
→ fluent-near-black #1F1F1F text-secondary
→ fluent-gray-160 #605E5C text-tertiary
→ fluent-gray-130 #8A8886 Typography
code
→ mono CascadiaCode Nerd Font display
→ heading Segoe UI prose
→ body Segoe UI Palette mode mappings (from azure)
Light mode (14 roles)
accent
→ azure-blue-light accent-hover
→ azure-blue background
→ fluent-white error
→ azure-error primary
→ azure-blue primary-hover
→ azure-blue-dark success
→ azure-success surface
→ fluent-gray-20 surface-elevated
→ fluent-white text-primary
→ fluent-near-black text-secondary
→ fluent-gray-160 text-tertiary
→ fluent-gray-130 warning
→ azure-warning warning-hover
→ azure-navy Dark mode (14 roles)
accent
→ azure-blue-light accent-hover
→ azure-blue background
→ azure-navy-deep error
→ azure-error primary
→ azure-blue primary-hover
→ azure-blue-light success
→ azure-success surface
→ azure-navy surface-elevated
→ azure-blue-dark text-primary
→ fluent-white text-secondary
→ fluent-gray-30 text-tertiary
→ fluent-gray-130 warning
→ azure-warning warning-hover
→ azure-navy Rules (8 typed constraints)
error · 5 rules
colorChoice logo.mark.fill allowed azure-blue, azure-blue-light forbidden azure-blue-dark, azure-navy, fluent-near-black The Azure cloud-glyph fills in Azure Blue (#0078D4) with the lighter cyan accent (#50E6FF) as the secondary cloud-tone. The hover/pressed Azure Blue Dark and the Azure Navy chrome color are interactive-state and canvas tokens — never logo fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, cloud-detached-from-wordmark Microsoft's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the Azure mark. The cloud-glyph is part of the Azure lockup and must not be detached from the Azure wordmark on shared surfaces.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Fluent Near-Black (#1F1F1F) on Fluent White gives ~17:1 — comfortably above WCAG 2.1 Level AA. Fluent's accessibility guidance specifies AA as the floor for text-on-background pairings on Azure marketing and the Azure Portal.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Azure Blue on Fluent White gives ~4.8:1 — clearing WCAG AA for body-sized text. Unlike many brand primaries, Azure Blue is safe for interactive labels at standard body size; the rule encodes the published Fluent guarantee.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fluent 2 tokens are AA-compliant by construction; the Azure Portal and azure.microsoft.com both inherit that floor.
recommendation · 3 rules
compositionConstraint roles.colors.primary pairsWith azure-navy, fluent-white, azure-blue-light doesNotPairWith azure-error The canonical Azure composition is Azure Blue against Fluent White or Azure Navy, with the lighter cyan as a paired accent. Combining Azure Blue with the Fluent error red on the same composition reads as a status conflict rather than a brand signature.
fontPairing typography.heading requires body minSizeRatio 1.4 Azure marketing surfaces and the Azure Portal both use Segoe UI for heading and body, with a clear size differential. The Fluent type ramp preserves hierarchy through size; a 1.4× floor keeps the display-to-prose distinction intact when one family does both jobs.
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, Azure, the Azure logo, 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 site (fluent2.microsoft.design), and the publicly distributed Azure architecture icon library (learn.microsoft.com/azure/architecture/ icons).
- Imported
2026-05-18- Notes
- Azure is documented as a distinct brand atom because the cloud surfaces tighten the Microsoft Fluent palette to a single signature blue, distinct from the four-square corporate logo. Azure shares the parent's Segoe UI typography. No assets are bundled here — the Azure cloud-logo glyph and the Azure wordmark are trademarked and must be retrieved from the Microsoft brand-resources site under Microsoft's stated terms.