# Microsoft: brand book and build spec

Neutral grounds, navy Segoe type, one action blue and soft rounded cards, signed with four colored squares. Fluent 2 sets the rules; microsoft.com applies them softly.

From unfairly.ai/brand-guidelines/microsoft, checked 2026-10-29. Unofficial study; not affiliated with Microsoft.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Calm by default, unmistakable in the details. Microsoft keeps the page quiet (white and ice grounds, plain sentence-case Segoe, one blue) so the four-square logo, product photos and rounded Fluent shapes carry the recognition. Based on: From Fluent's 'Built for focus' and 'Unmistakably Microsoft' principles and the observed homepage.

## Purpose

Mission: Empower every person and every organization on the planet to achieve more. (published; https://www.microsoft.com/en-us/about)

Story: Microsoft redrew its logo in 2012, the first change in 25 years: a four-square symbol and a Segoe logotype meant to move across PCs, phones, tablets and TVs (paraphrase of the launch post). Fluent 2 is the design system that carries that one look across Windows, web, iOS and Android today. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Natural on every platform | Adapt to the device and build on what people already know; reuse native patterns most of the time (paraphrase). | published: https://fluent2.microsoft.design/design-principles |
| Built for focus | Keep people in flow; less visual clutter keeps them calm and confident (paraphrase). | published: https://fluent2.microsoft.design/design-principles |
| One for all, all for one | Include a range of abilities and perspectives early; everyone should feel they belong (paraphrase). | published: https://fluent2.microsoft.design/design-principles |
| Unmistakably Microsoft | Signature experiences in color, sound, illustration and icons make products feel like one Microsoft (paraphrase). | published: https://fluent2.microsoft.design/design-principles |

## Fixed and flexible

Never changes:
- The four-square logo with the gray Segoe logotype
- Segoe type in sentence case
- Neutral grounds with one action blue
- Rounded shapes and soft Fluent shadows
- Plain, second-person writing

The one thing that varies: From product UI (Fluent tokens: 4px radius, 32px buttons, #0F6CBD) to marketing pages (24px-radius cards, 40px buttons, #0078D4, gradient grounds): the same type, color logic and voice at different softness.

## Positioning

- **Statement**: One Microsoft across every device: products, AI and stories presented in one calm, familiar system (our reading of the Fluent principles and the homepage). (our reading)
- **Category**: Software, cloud, devices and AI for people and organizations (paraphrase of the homepage nav: Microsoft 365, Azure, Copilot, Windows, Surface, Xbox). (observed)
- **Audience**: Consumers first (the Personal tab is selected at rest), with a Business tab and a 'Shop for your business' link for small businesses (observed). (observed)
- **Problem**: People want to find the right product or answer quickly (the hero offers an AI question field and suggestion pills). (observed)
- **Promise**: Find what you need faster with AI-powered suggestions (the hero line). (observed)
- **Differentiators**: One integrated family: Windows, Surface, Xbox, Microsoft 365 and Copilot sold and explained in one place.; AI framed through real-world impact stories rather than feature lists.
- **Alternatives**: Unnamed: microsoft.com names no competitors.

## Messaging

Boilerplate (published): Microsoft's mission is to empower every person and every organization on the planet to achieve more (quoted from the About page).

Taglines:
- Empower every person and every organization on the planet to achieve more (Microsoft's mission statement)
- Hi there, welcome to Microsoft (homepage H1)
- Unmistakably Microsoft (Fluent 2 design principle (internal design voice, not a marketing line))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Devices and offers | Surface, Xbox and Microsoft 365 sold directly, with plain price offers | Surface Pro, 12-inch: 'Awarded 2025 Esquire Best Tablet' (homepage claim). | observed |
| AI and Copilot | AI shown through real customer and community stories | HASTE, a Microsoft tool, helps disaster response teams assess damage faster (homepage story).; Biomimicry work around more than 20 datacenters across the US and Germany (homepage claim). | observed |
| Security and trust | Research on how attackers work and how to build resilience | Microsoft Digital Defense Report 2026 (homepage card). | observed |

They never claim:
- Offers carry their footnote markers (* and **) and legal detail; never state a price without its qualifier ('Save up to', 'on select').
- Third parties may state compatibility truthfully but must not imply affiliation or endorsement.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Hi there, welcome to Microsoft" | homepage | https://www.microsoft.com/en-us/ |
| "Find what you need faster with AI-powered suggestions" | homepage | https://www.microsoft.com/en-us/ |
| "What will you do with all this power?" | homepage | https://www.microsoft.com/en-us/ |
| "Surface Laptop Ultra" | homepage | https://www.microsoft.com/en-us/ |
| "Go further with Copilot" | homepage | https://www.microsoft.com/en-us/ |
| "Your perfect companion" | homepage | https://www.microsoft.com/en-us/ |
| "Save up to $100.00 on select Surface Pro, 12-inch (1st Edition)" | homepage | https://www.microsoft.com/en-us/ |
| "Get to know AI and Copilot" | homepage | https://www.microsoft.com/en-us/ |
| "When disaster strikes, HASTE can help" | homepage | https://www.microsoft.com/en-us/ |
| "When global trade gets messy, AI is here to help" | homepage | https://www.microsoft.com/en-us/ |
| "Designing datacenters using lessons from nature" | homepage | https://www.microsoft.com/en-us/ |
| "Microsoft Digital Defense Report 2026" | homepage | https://www.microsoft.com/en-us/ |
| "Powering every play" | homepage | https://www.microsoft.com/en-us/ |
| "Delivering Copilot for everyone" | blog | https://blogs.microsoft.com/blog/2024/02/07/delivering-copilot-for-everyone/ |

## Voice

Tone words: Plain, Friendly, Helpful.

Traits:
- Natural, but not foreign (published)
- Focused, but not cluttered (published)
- Inclusive, but not exclusive (published)
- Unmistakable, but not generic (published)
- Friendly, but not formal (published)
- Plain, but not hyped (published)

- Two voices, scoped. Fluent 2's content-design voice is for product UI: simple, get to the point, talk like a person, second person, present tense, active voice, sentence case.
- The microsoft.com homepage is a store-and-stories voice: a warm greeting H1 ('Hi there, welcome to Microsoft'), product names with plain offers ('Save up to $100.00 on select Surface Pro'), and story headlines that pair a situation with what AI does ('When disaster strikes, HASTE can help').
- A landing page follows the homepage voice: a short sentence-case headline, one or two plain sentences, and a 2-3 word verb-first button ('Shop now', 'Learn more', 'Read the story').
- Use 'you'; avoid 'I', 'we' and 'Microsoft' as the subject unless the sentence needs it (Fluent: use passive voice only to avoid saying 'we' or 'Microsoft').

Rules a copy check enforces:
- Sentence case headlines
- Keep it simple: plain language, short sentences and fragments
- Get to the point fast; prune every excess word
- Talk like a person: informal and conversational, one-on-one
- Second person (you, your); avoid first person unless writing as the reader
- Present tense and active voice
- No periods in headers, buttons, labels or bullet lists; avoid exclamation points
- Short, descriptive link text; never 'Click here'
- No directional words (above, below, left, right)
- Don't use all caps for attention
- Use Microsoft product names as adjectives before nouns ('Excel spreadsheets'), never as verbs or nouns
- No puns or slogans built from Microsoft names

Their words: Shop now, Learn more, Read the story, Read the article, Read the report, Join now, Find your next PC, Help me choose a PC, you, your.
Never: exclamation points (except true celebration), ALL CAPS for emphasis, 'Click here' links, Microsoft names used as verbs, nouns or puns, directional words such as 'above' or 'below'.

Tone by reader state, 0 (no personality) to 5 (full) (our reading): Product UI (Fluent content design) 0, Footer and legal 0, Homepage offers and stories 1, Homepage greeting and AI prompt 2, Campaigns (Copilot 'Watch me') 3. Two scoped voices. The levels are our reading, not a Microsoft scale (0 = plainest).

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Communication blue | #0078D4 | accent | Filled buttons on white cards, the chat badge, the start of the AI field underline (observed 2026-10-29). Microsoft's own blue for actions. |
| Ink navy | #0E1726 | ink | Every headline on microsoft.com and the label on white buttons. |
| Body navy | #17253D | ink_muted | Body copy and quick-link labels. |
| White | #FFFFFF | paper | Cards, the header and the card-banner band. |
| Ice | #F4FAFD | surface | The AI story band ground; text on dark cards. |
| Selected navy | #004275 | accent_secondary | The selected Personal pill. |
| Black | #000000 | night | The bottom of the promo-card gradient overlay. |
| Promo plum | #882A8B | extra | Announcement strip and 'New' tags. |
| Footer gray | #F2F2F2 | extra | Footer ground with #616161 text. |
| Logo red | #F25022 | logo | Symbol square, logo only (logo guidance PDF). |
| Logo green | #7FBA00 | logo | Symbol square, logo only. |
| Logo blue | #00A4EF | logo | Symbol square, logo only. |
| Logo yellow | #FFB900 | logo | Symbol square, logo only. |
| Logotype gray | #737373 | logo | 'Microsoft' logotype on light grounds. |
| Fluent brand 80 | #0F6CBD | extra | Fluent 2 web primary (brandWeb 80) for product UI; published in the Fluent token source. |
| Fluent neutral foreground | #242424 | extra | Fluent colorNeutralForeground1 (primary text in product UI). |

Proportion (our reading; Microsoft publishes no color percentages. This split is our reading of microsoft.com on 2026-10-29: warm-white and ice gradient grounds and white cards dominate, navy type, blue only on actions, a gray footer.): White and warm-white grounds 55%, Ice band 18%, Photography and dark cards 15%, Footer gray 6%, Navy type 3%, Action blue 2%, Promo plum 1%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Segoe UI Variable Display | Proprietary (Microsoft); ships with Windows, not licensed for third-party web embedding | Hanken Grotesk | "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif |
| body | Segoe UI Variable Text / Segoe UI | Proprietary (Microsoft) | Hanken Grotesk | "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif |
| mono | JetBrains Mono |  | JetBrains Mono | Consolas, 'Cascadia Mono', monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero greeting (h1) | --text-hero-greeting-h1-* | display | 62px | 40px | 1.16 | -1.55px | 500 |
| Section headline (h2) | --text-section-headline-h2-* | display | 48px | 32px | 1.17 | -1.2px | 500 |
| Card and banner headline | --text-card-and-banner-headline-* | display | 32px | 24px | 1.25 | -0.8px | 500 |
| Feature card title (h3) | --text-feature-card-title-h3-* | display | 20px | 18px | 1.4 | -0.3px | 600 |
| Body | --text-body-* | body | 16px | 16px | 1.5 | -0.48px | 400 |
| Italic prompt | --text-italic-prompt-* | body | 16px | 16px | 1.5 | -0.48px | 400 |
| Button label | --text-button-label-* | body | 15px | 15px | 1.47 | -0.3px | 600 |
| Suggestion pill | --text-suggestion-pill-* | body | 15px | 15px | 1.47 | 0px | 400 |
| Tag | --text-tag-* | body | 14px | 14px | 1.43 | -0.48px | 600 |
| Header link | --text-header-link-* | body | 13px | 13px | 1.2 | 0px | 400 |
| Footer heading | --text-footer-heading-* | display | 15px | 15px | 1.33 | -0.375px | 600 |
| Footer link | --text-footer-link-* | body | 11px | 11px | 1.45 | -0.48px | 400 |
| Fluent Display (reference) | --text-fluent-display-reference-* | display | 68px | 68px | 1.35 | 0px | 600 |

## Layout

Measured on https://www.microsoft.com/en-us/: .

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 72px | 16px |
| Container max width | 1296px | full |
| Grid columns | 12 | 4 |
| Gutter | 24px | 12px |
| Card gap | 24px | 24px |
| Navigation height | 54px | 54px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| h1 | 40/48 two lines | 62/72 one line |
| section h2 | 32/40 | 48/56 |
| switch | Personal dropdown 114x50 | two-pill segmented switch |
| promo cards | 272x363, radius 16, 16/24 headline, Read more | 426x568, radius 24, 32/40 headline, chevron |
| quick links | 2x3 grid | one row of six |
| feature cards | stacked full width | three across |
| banner cards | photo on top, full-width button | text left, photo right |
| header | icons only, centered logo | logo + nine links + utilities |
| footer | one column, every link listed | six columns |

Breakpoints from Microsoft's CSS: px.

Homepage bands, top to bottom (observed):
1. Header (UHF)
   - Desktop: 54px; logo 108x23 at x 87; nine 13px #262626 links from x 219; All Microsoft, Search, Cart, Sign in + 36px avatar at right
   - Phone: 54px; hamburger, search, centered logo, cart, avatar
   - no border
   - not sticky
2. Announcement strip
   - Desktop: 42px; one centered 16/24 line + 'Shop deals' 14/20 600 underlined; close X at right
   - Phone: 84px; two lines + 'Shop deals' line
   - #F4FAFD text
   - dismissible
3. Hero: greeting, AI field, promo carousel
   - Desktop: y 96-1306: 62px centered H1, pill switch, italic line, 990px field, three pills, 426x568 staggered cards, arrows
   - Phone: 40px H1 two lines, dropdown switch, 326px field, wrapped pills, 272x363 cards, 32px arrows
   - gradient image covers this band and the next two
   - cards alternate y 614 / 646
   - overlay gradient transparent 20% to #000 85%
4. Quick links
   - Desktop: y 1386; six 32px icons over underlined 16/24 labels, centered row
   - Phone: 2x3 grid
   - #17253D labels
   - no card
5. Surface Pro banner card
   - Desktop: 1296x481 white card, radius 24, text left, 620x465 photo right
   - Phone: 358x561 stacked card
   - #0078D4 Shop now
   - shadow4
6. Get to know AI and Copilot
   - Desktop: 48px H2 centered; 3 x 421x517 cards, 16px gaps
   - Phone: 32px H2; stacked cards
   - 1px #E7E7E7 + shadow4, radius 24
   - photo 16:9 radius 16
7. Card-banner carousel
   - Desktop: 1288x479 card + 52px peek; arrows + pause
   - Phone: two 232px cards side by side
   - auto-advance, pause button
   - first card at rest
8. Follow Microsoft
   - Desktop: 16px heading, three 22px icons
   - Phone: same, centered
   - 64px icon pitch
9. Footer (UHF)
   - Desktop: six columns, 11px links, bottom legal row
   - Phone: one column, all links
   - #616161 text
   - © Microsoft 2026

## Page anatomy

How Microsoft's own landing pages are built, part by part (observed; https://www.microsoft.com/en-us/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: Plum promo strip under the header
- ground: #882A8B
- desktop: y 54-96 (42px). One centered line: 'Get extended free returns and price protection on gifts through Jan 31, 2027.' 16px/24px 400 #F4FAFD, -0.48px tracking, then 'Shop deals' 14px/20px 600 #F4FAFD underlined, 8px after the period. Close X (16px icon in a 32x32 button, #E7E7E7) at x 1392, y 60
- phone: y 54-138 (84px): the sentence centered on two lines (16/24), 'Shop deals' on a third line, 14/20 600 underlined; close X at x 350, y 62
- content note: the copy is a seasonal offer; keep the structure, write the page's own offer

**Navigation**
- summary: Shared Microsoft header (UHF): white 54px bar, logo at left, nine 13px text links, utility actions at right
- ground: #FFFFFF, no border or shadow at rest
- height: 54px at both widths
- border: none
- logo: variant full-color Microsoft logo (four squares, #737373 logotype), PNG 216x46 shown at 108x23; px 108x23 at x 87, y 16 (link padding 15px; header padding 0 72px); phone 108x23 centered at x 141, y 15; position top left; asset the supplied image for slot nav.logo
- links: count 9; labels Microsoft 365,Azure,Copilot,Windows,Surface,XBOX,Deals,Small Business,Support; size 13px, line-height normal (link boxes 54px tall); weight 400; color #262626; padding 0 ~10px; boxes 54px tall; alignment left, right after the logo: x 219, 319, 373, 436, 510, 573, 626, 679, 783 (box widths 95, 49, 58, 69, 58, 49, 47, 99, 62)
- actions: right side, all 13px #262626: 'All Microsoft' with a 12px chevron-down (box x 1007, 102 wide); 'Search' label with a 16px magnifier icon after it (x 1119); 'Cart' with a cart icon (x 1205); 'Sign in' text (x 1285) followed by a 36x36 circle avatar outline (1px #262626) holding the initials 'ME' 14px (x 1332, y 9). No filled button in the header
- sticky: no, it scrolls away
- phone: 54px: hamburger icon (28x54 box at x 15), magnifier (x 53), logo centered (x 141), cart icon (x 295), 36px 'ME' avatar circle (x 335). No text links

**Hero**
- summary: Centered greeting, Personal/Business switch, italic AI prompt line, a wide 'Ask a question' field with a gradient underline and three suggestion pills, then a staggered carousel of dark promo cards with arrows
- ground: #FFF9F5 under a full-bleed soft gradient image (the supplied image for slot hero.ground, 1915x2150, object-fit cover over y 96-2107 at 1440 and y 138-2236 on phones): pale gray-violet at the top fading through warm white to ice blue (about #F4FAFD) at the bottom, so the quick links and the Surface Pro banner sit on the same image
- desktop: band starts y 96 with 48px top padding. H1 at y 144 (72px tall, centered in a 1296px column x 72-1368). Pill switch y 264-322: white pill container 232x58 (radius 29px, 8px inner padding) centered at x 604, holding 'Personal' (selected: #004275 fill, white 15/24 600, 106x42, radius 200px, padding 8px 24px, x 612 y 272) and 'Business' (transparent, #2A446F label, x 722). Italic line y 372. Question field x 225-1215 (990x54) at y 430. Suggestion pills y 512, 32px tall, centered, 8px gaps (x 471, 646, 799). Carousel cards top at y 614 (raised) and 646 (lowered); arrows at y 1258
- phone: H1 40/48 500 -1px, two lines centered at y 170 (x 16-374). The pill switch becomes a dropdown: white 114x50 button 'Personal' with a chevron-down, radius 8px, Fluent shadow, centered at y 298. Italic line y 382 on two lines (285px). Field x 32 (326x66, radius 8px, padding 4px 16px 8px) at y 464. Pills wrap: 'Help me choose a PC' and 'Microsoft 365 tips' on row 1 (y 554), 'Sign in to my account' centered on row 2 (y 594); pill padding 2px 8px. Cards 272x363 radius 16px from x 16, 12px gaps, alternating y 708 / 676; second card shows its left 90px at the right edge. Arrows 32x32 at x 16 and 56, y 1107
- at rest: Personal tab selected. Promo carousel on its first position: cards 1-3 fully visible at x 72 / 522 / 972 and a 18px sliver of card 4 at x 1422. 'Previous' disabled (#C6CED8 ring and arrow), 'Next' active. Card bodies collapsed (desktop shows a 24px chevron-down right of each headline; phones show 'Read more' plus chevron). The Business tab, other slides and expanded card text are animation only. A Store Assistant 'Can we help you?' popover may appear on load; do not build it
- media: promo cards: 900x1200 product photos (3:4), object-fit fill, clipped by the card's 24px radius (16px on phones), with a ::after overlay linear-gradient(transparent 20%, #000000 85%) across the whole card
- type: H1 'Hi there, welcome to Microsoft' 62px/72px weight 500 tracking -1.55px #0E1726 centered (Segoe UI Variable Text). Italic prompt 'Find what you need faster with AI-powered suggestions' 16/24 400 italic #17253D, -0.48px. Card headlines 32/40 500 -0.8px #F4FAFD, max 2 lines with ellipsis, 338px wide (phones 16/24 500)
- cta: No hero button. The field's send arrow (20px #8D8D8D, at x 1178) is the action; card buttons are white 40px pills (radius 8px, 15/22 600 #0E1726, padding 8px 16px)
- proof: none in the hero
- field: white, 1px #E1DFDD border, radius 4px, Fluent shadow (0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14)), padding 12px 16px; placeholder 'Ask a question' 16px italic in a muted blue-gray (sampled #6F768B on the screenshot) at x 242; the field's bottom edge IS a 3px horizontal gradient #0078D4 to #6CD0C2 across the full width, flush with the bottom of the box (y 479-482, no white strip under it). Send arrow 20px: #8D8D8D on desktop, #0078D4 on phones
- pills:
  - Help me choose a PC
  - Microsoft 365 tips
  - Sign in to my account
- pill style: #E6EFFD fill, 1px #2A446F border, radius 16px, 15/22 400 #2A446F, padding 4px 12px, 32px tall
- card stack: Inside every promo card the content is bottom-anchored with 24px padding (16px on phones) and stacks, from the bottom up: the button (40px, its bottom 24px above the card bottom); 16px gap; an INVISIBLE description block that keeps its space at rest (the expanded body copy, 16/24, opacity 0; 72px = 3 lines on cards 1 and 3; about 28px on card 2, whose headline ends at y 1065); 12px gap; the headline (with the 24px chevron at the right of its last line); then any tag or product logo directly above the headline. So the headline sits about 100px above the button, not right on top of it. Measured on the screenshot at rest (1440): card 1 headline lines y 970-1050, button y 1150-1190; card 2 Windows logo image box y 929-1006 (measured; its PNG has transparent padding, so the visible wordmark ends about y 1000 and the box may overlap the headline's line box, which starts y 985 but whose glyphs start lower), headline y 985-1065, button y 1118-1158; card 3 tag y 961-991, headline y 1010-1050, button y 1150-1190
- cards:
  - {"n":1,"x":72,"y":646,"asset":"the supplied image for slot hero.card.1","headline":"Save up to $100.00 on select Surface Laptop, 13-inch (1st Edition)","shown_as":"two lines, the second truncated with an ellipsis: 'Save up to $100.00 on / select Surface Laptop,...'","button":"Shop now","extra":"headline lines y 970-1050, chevron right of line 2 at x 450; button y 1150"}
  - {"n":2,"x":522,"y":614,"asset":"the supplied image for slot hero.card.2","headline":"What will you do with all this power?","button":"Learn more","extra":"white Windows logo (four panes + 'Windows', the supplied image for slot hero.card.2.logo, shown 180x80) at y 929, x 546; headline two lines y 985-1065; button y 1118"}
  - {"n":3,"x":972,"y":646,"asset":"the supplied image for slot hero.card.3","headline":"Surface Laptop Ultra","button":"Shop now","extra":"'New' tag at y 961: #882A8B fill, white 14/22 600, radius 4px, padding 4px 16px, 59x30; headline one line y 1010-1050; button y 1150"}
  - {"n":4,"x":1422,"y":614,"asset":"the supplied image for slot hero.card.4","headline":"Go further with Copilot","button":"Shop Microsoft 365","extra":"only an 18px sliver shows at rest"}
  - {"n":5,"asset":"the supplied image for slot hero.card.5","headline":"XBOX Series X - 1TB Digital Edition","button":"Shop now","extra":"off screen at rest"}
  - {"n":6,"asset":"the supplied image for slot hero.card.6","headline":"XBOX Wireless Controller","button":"Shop now","extra":"off screen at rest"}
  - {"n":7,"asset":"the supplied image for slot hero.card.7","headline":"Your perfect companion","button":"Shop now","extra":"tag 'New Surface Mouse'; off screen at rest"}
  - {"n":8,"asset":"the supplied image for slot hero.card.8","headline":"XBOX Game Pass","button":"Join now","extra":"off screen at rest"}
- arrows: Previous and Next: 48x48 circles (32x32 on phones), transparent, 2px #2A446F border, radius 200px, 24px arrow icon in #2A446F; at x 72 and 128 (8px gap), y 1258, left aligned with the first card. Previous is disabled at rest (#C6CED8)

**Quick links**
- summary: One row of six icon-over-label shop links on the hero gradient
- ground: transparent over the hero gradient image
- desktop: row at y 1386, centered (first label x 253, last ends x 1187; measured item lefts 253, 391, 573, 700, 868, 1031, so ~48px between items). Each item: 32x32 outline icon (#004275) centered above the label; label 16/24 weight 600 #2A446F, underlined with a 2px line at 4.8px offset; label top y 1428, item 64px tall
- phone: 2-column grid, columns 155px wide at x 32 and 203; rows at y 1200, 1304, 1408 (104px pitch); labels centered; 'Shop for your business' wraps to two lines ('Shop for your' / 'business'), so cap phone labels at about 110px wide
- anatomy:
  - Labels in order: Shop Surface, Shop Microsoft 365, Shop XBOX, Find your next PC, Shop accessories, Shop for your business
  - Icons in order: tablet, app grid, game controller, laptop, accessories (keyboard + mouse), briefcase; supplied SVGs, 32px
  - No card or ground; 72px below the carousel arrows
- components: quick_link
- images: six SVG icons (the supplied quick-link icons (slots quicklinks.1-6))

**Surface Pro banner**
- summary: A wide white card: offer copy left, product photo right
- ground: white card on the hero gradient (band ground #FFF9F5 / image)
- desktop: card x 72-1368 (1296x481) at y 1530, 24px radius, Fluent shadow4, no border. Photo 620x465 at x 740, y 1538 (8px inset top/right/bottom), radius 16px, light gray studio ground in the image. Text column x 96-692: H2 two lines at y 1673; body at y 1769 (548px wide, 2 lines); 'Shop now' filled #0078D4 button at y 1947 (24px above the card bottom). Text block vertically: heading roughly centered, button pinned to the bottom
- phone: card x 16 (358x561) radius 16px at y 1612; photo on top 342x257 at x 24 (8px inset) radius 8px; H2 24/32 two lines at y 1900; body y 1976 (3 lines); full-width 326x40 'Shop now' at y 2116
- anatomy:
  - H2 'Save up to $100.00 on select Surface Pro, 12-inch (1st Edition)' 32/40 500 -0.8px #0E1726 (the price is inline, same style)
  - Body 'Awarded 2025 Esquire Best Tablet, this versatile laptop-to-tablet now features Snapdragon® X Plus (8 Core) processors.' 16/24 400 #17253D
  - Primary button: #0078D4, white 15/22 600, radius 8px, padding 8px 16px, 98x40
- components: card_banner, button_primary
- images: the supplied image for slot banner.surface_pro (4:3, 2880x2160)

**Get to know AI and Copilot**
- summary: Centered H2 over three equal story cards with photo, title, two-to-three-line summary and a blue button
- ground: #F4FAFD
- desktop: band y 2107-2872, padding 48px top, 96px bottom. H2 centered at y 2155 (56px tall). Cards at y 2259: 421x517 each at x 72 / 509 / 947 (16px gaps), white, radius 24px, 1px #E7E7E7, Fluent shadow4. Photo 403x227 (16:9) at 9px inset, radius 16px. Title y 2519 (24px under the photo, text x inset 25px, 371px wide); summary 16px under the title; button pinned 25px from the card bottom (y 2711)
- phone: band y 2236-3776, padding 32px top, 56px bottom. H2 32/40 two lines centered at y 2268. Cards stacked full width x 16 (358 wide, 437-449 tall, radius 16px), 8px gap; photo 340x191 at 9px inset, radius 8px; titles 18/24 600
- anatomy:
  - H2 'Get to know AI and Copilot' 48/56 500 -1.2px #0E1726
  - Card titles 20/28 600 -0.3px #0E1726: 'When disaster strikes, HASTE can help' / 'When global trade gets messy, AI is here to help' / 'Designing datacenters using lessons from nature'
  - Summaries 16/24 400 #17253D, -0.48px, 3 lines
  - Buttons #0078D4 filled, white 15/22 600, radius 8px, 40px: 'Read the story', 'Read the article', 'Learn more'
- components: feature_card, button_primary
- images: the supplied image for slot ai.card.1, feature-kinaxis.jpg, feature-datacenter.jpg (16:9 documentary photos)

**Card-banner carousel**
- summary: A carousel of wide banner cards (text left, 4:3 image right), the next card peeking at the right, arrows and a pause button below
- ground: #FFFFFF
- desktop: band y 2872-3545, padding 48px. Card 1 at x 76 (1288x479) y 2926, radius 24px, 1px #E7E7E7, shadow4; card 2 starts at x 1388 (24px gap) and shows its first 52px. Image 615x461 at x 740, y 2935 (9px inset), radius 16px. Text x 101: H2 y 3093, body y 3149 (591px, 2 lines), button y 3340. Controls at y 3449: Previous (disabled) x 72 and Next x 128, 48px circles; Pause at x 1336, y 3464: 32x32, 2px #2A446F border, radius 8px, two-bar pause icon
- phone: two cards side by side, 232x534 each at x 18 and 262 (radius 16px), image on top 214x160 radius 8px, H2 24/32 three lines, body 16/24, full-width 198x40 buttons at y 4291; arrows 32px at y ~4392, pause at x 350
- anatomy:
  - Card 1: H2 'Microsoft Digital Defense Report 2026', body 'This year's report examines how attackers exploit trusted systems in the era of AI, and explores ways to build greater cybersecurity resilience.', button 'Read the report'
  - Card 2: H2 'Powering every play', body about the NFL and Viper on Azure, button 'Read the story'
  - H2 32/40 500 -0.8px #0E1726; body 16/24 #17253D; buttons #0078D4
  - Auto-advances; at rest the first card is in place (animation only otherwise)
- components: card_banner, carousel_button, pause_button
- images: the supplied image for slot carousel.banner.1 (abstract blue glow and pixel grid), the supplied image for slot carousel.banner.2

**Follow Microsoft**
- summary: Centered small heading and three social icons
- ground: #FFFFFF
- desktop: heading 'Follow Microsoft' 16/24 600 -0.4px #0E1726 centered at y 3545; three white tiles 32x32 at y 3593, x 640 / 704 / 768 (64px pitch), each radius 8px, padding 4px with the 22px icon centered, shadow 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14); icons 22x22 (radius 4px): Facebook (blue circle f), X (black), LinkedIn (blue square)
- phone: heading y 4449, tiles y 4489 at x 123 / 179 / 235 (56px pitch on phones)
- anatomy:
  - ~50px space below the icons before the footer
- components: social_icons
- images: the supplied image for slot follow.facebook, social-x.png, social-linkedin.png

**Footer**
- summary: Shared Microsoft footer (UHF): light gray, six link columns, then a bottom row with locale, privacy choices and legal links
- ground: #F2F2F2
- anatomy:
  - Band y 3673-4088 at 1440 (415px), padding 0 72px, no top border
  - Six columns at x 72, 300, 516, 720, 948, 1164 (about 216px pitch); heading 15/20 600 #616161, -0.375px, with padding-top 36px, so the heading text sits at y 3709-3729 (36px below the band top) and the first link is 12px below it; links 11px/16px 400 #616161, -0.48px, first at y 3741, 32px pitch, no underline
  - What's new: Surface Laptop Ultra, Surface Pro, Surface Laptop, Surface RTX Spark Dev Box, Explore Copilot, Explore Microsoft products, Windows 11 apps
  - Microsoft Store: Account profile, Download Center, Microsoft Store support, Returns, Order tracking, Certified Refurbished, Why buy from Microsoft Store, Flexible Payments
  - Education: Microsoft in education, Devices for education, Microsoft Teams for Education, Microsoft 365 Education, How to buy for your school, Educator training and development, Deals for students and parents, AI for education
  - Business: Microsoft AI, Microsoft Security, Dynamics 365, Microsoft 365, Microsoft Power Platform, Microsoft Teams, Microsoft Copilot, Small Business
  - Developer & IT: Azure, Microsoft Developer, Microsoft Learn, Support for AI marketplace apps, Microsoft Tech Community, Microsoft Marketplace, Software companies, Visual Studio
  - Company: Careers, About Microsoft, Company news, Privacy at Microsoft, Investors, Diversity and inclusion, Accessibility, Sustainability
  - Bottom row at y 4041, 11px #616161: left 'English (United States)' with a 16px globe icon (x 72), a 43x16 blue-and-white toggle icon + 'Your Privacy Choices' (x 214), 'Consumer Health Privacy' (x 378); right, in order: Sitemap, Contact Microsoft, Privacy, Terms of use, Trademarks, Safety & eco, Recycling, About our ads, '© Microsoft 2026' (ends x 1368), ~24px gaps
- phone: columns stack in one column at x 24 (342 wide), all links shown (no accordion), heading pitch ~332px; bottom row stacks: locale, privacy choices, consumer health privacy, then the legal links wrapping three per line, '© Microsoft 2026' last (y 6693). Footer y 4545-6740

**On dark grounds**
- secondary button: white filled button with #0E1726 label (the promo-card button)
- link: #F4FAFD underlined, 14/20 600 ('Shop deals' on plum)
- muted text: #E6F2FB
- hairline: none used
- logo variant: white Windows wordmark on dark cards; the Microsoft logo reverse version (white logotype) on dark per the logo guide

## Components

- **button primary** (observed): fill #0078D4, text #FFFFFF, radius 8, height 40, padding x 16, padding 8px 16px (8px 12px on phones), font size 15, line height 22, weight 600, anatomy flat blue rounded rectangle, label only (no icon), shadow tokens set to 0 at rest
  - hover (published): 
- **button on dark** (observed): fill #FFFFFF, text #0E1726, radius 8, height 40, padding x 16, padding 8px 16px, font size 15, weight 600, anatomy white button on dark promo cards ('Shop now', 'Learn more')
- **segmented switch** (observed): container white, radius 29px, 8px padding, 232x58, selected #004275 fill, white 15/24 600, 106x42, radius 200px, padding 8px 24px, unselected transparent, #2A446F label, phone becomes a 114x50 white dropdown with chevron, radius 8px, shadow4
- **ask field** (observed): fill #FFFFFF, border 1px #E1DFDD, radius 4, height 54, width 990, underline 3px linear-gradient(90deg, #0078D4, #6CD0C2), placeholder 'Ask a question' 16px italic #8D8D8D, icon 20px send arrow #8D8D8D at the right (44x44 hit area), shadow shadow4
- **suggestion pill** (observed): fill #E6EFFD, border 1px #2A446F, text #2A446F, radius 16, height 32, padding 4px 12px, font size 15, weight 400
- **promo card** (observed): size 426x568 (phone 272x363), radius 24, radius phone 16, stack bottom-up: button, 16px, invisible description block (72px), 12px, headline, tag/logo, media full-bleed photo, object-fit fill, overlay linear-gradient(transparent 20%, #000000 85%), padding 24px (phone 16px), headline 32/40 500 #F4FAFD, max 2 lines, toggle 24px chevron-down (#F7F7F7) at the right of the headline on desktop; 'Read more' 14/20 600 underlined + 16px chevron on phones, button button_on_dark, shadow shadow4
- **tag** (observed): fill #882A8B, text #FFFFFF, radius 4, height 30, padding 4px 16px (phone 4px 12px), font size 14, line height 22, weight 600
- **feature card** (observed): fill #FFFFFF, border 1px #E7E7E7, radius 24, shadow shadow4, image 16:9 at 9px inset, radius 16, text inset 25
- **card banner** (observed): fill #FFFFFF, border none (Surface Pro) or 1px #E7E7E7 (carousel), radius 24, image 4:3 right half, 8-9px inset, radius 16
- **carousel button** (observed): size 48x48 (phone 32x32), border 2px #2A446F, radius 200, icon 24px arrow #2A446F, disabled #C6CED8
- **pause button** (observed): size 32x32, border 2px #2A446F, radius 8, icon pause bars #2A446F
- **quick link** (observed): icon 32px outline, #004275, label 16/24 600 #2A446F, underline 2px at 4.8px offset, gap 8
- **social tile** (observed): fill #FFFFFF, radius 8, size 32x32, padding 4px, shadow 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14), icon 22px brand icon
- **chat badge** (observed): fill #0078D4, radius 18, size 182x80 desktop; ~72x72 icon-only on phones, text white 16/24 600, two lines, position fixed, bottom-right
- **avatar ring** (observed): size 36, border 1px #262626, radius 18, text initials 14px
- **fluent button reference** (published): also https://fluent2.microsoft.design/shapes,https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts. Fluent 2 web button: medium 32px, 4px radius (medium token), primary fill brandWeb 80 #0F6CBD. microsoft.com's marketing buttons are taller (40px), rounder (8px) and use #0078D4

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| fluent-in | cubic-bezier(0.1,0.9,0.2,1) |  | Enter: elements arriving decelerate (ease-out) | published |
| fluent-out | cubic-bezier(1,0,1,1) |  | Exit: elements leaving accelerate (ease-in) | published |
| curveDecelerateMid | cubic-bezier(0,0,0,1) |  | Ease-out: elements entering (start fast, slow down) | published |
| curveDecelerateMax | cubic-bezier(0.1,0.9,0.2,1) |  | Strong ease-out for larger enter moves | published |
| curveAccelerateMid | cubic-bezier(1,0,1,1) |  | Ease-in: elements exiting | published |
| curveEasyEase | cubic-bezier(0.33,0,0.67,1) |  | Ease-in-out: moves within the screen | published |
| curveEasyEaseMax | cubic-bezier(0.8,0,0.2,1) |  | Container transforms | published |
| curveLinear | cubic-bezier(0,0,1,1) |  | Only for constant-rate motion such as rotation | published |
| durations |  |  | Larger elements and longer distances get longer durations; aim for fast and smooth | published |
| top-level transition |  |  | Page-to-page: a quick fade, not slides | published |
| stagger |  |  | Stagger groups with short offsets; don't stagger very large sets | published |
| reduced motion |  |  | Provide a no-motion setting; keep motion on the element in focus | published |
| homepage carousels |  |  | The promo carousel moves by arrow buttons only; the card-banner carousel auto-advances with a Pause button. Static resting state: first slide, Previous disabled | observed |

## Icon tokens

Grid Fluent System Icons: regular theme for wayfinding and actions, filled theme for selected states and small moments, stroke single-weight outline (regular), solid (filled); one color only (published).
| Name | Size | Use |
|---|---|---|
| 12 | 12px | Information only, too small to interact |
| 16 | 16px | Small UI |
| 20 | 20px | Default web UI (the search send arrow, header icons) |
| 24 | 24px | Card chevrons and carousel arrows (observed) |
| 32 | 32px | Homepage quick-link icons (observed) |

## Signature moves

### The four-square symbol, gray logotype

Where: top-left of every page header (108x23 at 1440), favicon and the logo sign-off.
Do: Symbol of four squares in #F25022, #7FBA00, #00A4EF, #FFB900 plus the 'Microsoft' logotype in #737373 on light grounds (white on dark). Symbol and logotype always together; clear space equals the symbol height; minimum 16px tall or 72px wide on screen. Once per page, top left.
Don't: single-color logo in a full-color piece, shadows or gradients, boxes or circles around it, taglines attached, tile patterns made from the squares.
Example: "Microsoft".

### Staggered dark promo cards

Where: the homepage hero carousel under the AI search field.
Do: 426x568 cards (3:4) at 24px radius, 24px apart, alternate cards 32px higher (y 614 vs 646 at 1440). Full-bleed product photo under a black gradient (transparent at 20% to #000000 at 85%); a 32/40 weight 500 headline in #F4FAFD bottom-left with 24px padding and a white 40px 'Shop now' button. Three cards and an 18px sliver of the fourth show at rest. One carousel per page.
Don't: flat grid without the stagger, square corners, or text over the photo without the gradient.
Example: "Surface Laptop Ultra".

### Soft white cards with a Fluent shadow

Where: every content block below the hero.
Do: White cards, 24px radius (16px on phones), Fluent shadow4 (0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14)), and a 1px #E7E7E7 hairline on feature and banner cards. Images sit inside with an 8-9px inset and 16px radius. Every band.
Don't: hard 0px corners, heavy drop shadows, or thick borders.
Example: "Read the story".

### Greeting plus AI question field

Where: the top of the homepage hero.
Do: Centered 62px weight 500 greeting, a white Personal/Business pill switch, an italic one-line prompt, a 990px white question field with a 3px blue-to-teal (#0078D4 to #6CD0C2) underline, and three outlined suggestion pills (#E6EFFD fill, #2A446F text and border, 16px radius). Once, at the top.
Don't: all caps, exclamation points, or a left-aligned greeting.
Example: "Hi there, welcome to Microsoft".

## Messaging: rules

Microsoft leads with its mission ('empower every person and every organization on the planet to achieve more') and, on the homepage, with a greeting rather than a slogan. The homepage sells devices with plain offers and explains AI through real stories.

Why it works: A greeting and an AI question field make the homepage a helper first; stories make AI concrete without hype.

|  |  |
|---|---|
| Mission | Empower every person and every organization on the planet to achieve more |
| Homepage H1 | Hi there, welcome to Microsoft |
| Tagline under the logo | never (logo guide) |

- Lead with what people can do, not with Microsoft
- Pair each AI claim with a real story or customer
- Offers carry their qualifier ('Save up to', 'on select') and footnote marker
- Don't invent a slogan for the logo
- Don't lead with features or superlatives

Real examples, to look at on Microsoft's own pages (not for reuse):
- Story card photo: HASTE disaster response, homepage 'Get to know AI and Copilot': https://www.microsoft.com/en-us/

Sources: https://www.microsoft.com/en-us/about, https://www.microsoft.com/en-us/

## Voice: rules

Fluent's content design asks for plain, conversational, second-person writing in sentence case, present tense and active voice, with sparse punctuation and no exclamation points. The homepage is warmer ('Hi there') but just as plain.

Why it works: Plain sentence-case text is easier to read and to localize (Fluent says so for capitalization).

|  |  |
|---|---|
| Case | sentence (web, Windows, Android); title case on iOS and macOS |
| Person | second person |
| Exclamation points | celebration only |

- Keep it simple; get to the point fast; talk like a person
- Second person; present tense; active voice
- No periods in headers, buttons or labels; no exclamation points
- Descriptive link text, never 'Click here'
- Don't all caps
- Don't directional words such as 'above' or 'below'
- Don't Microsoft names as verbs or puns

Do and don't:
- Do: "Find your next PC". Plain, verb first, second person implied.
- Don't: "Click here to Excel at productivity!". 'Click here', a product-name pun and an exclamation point.

Real examples, to look at on Microsoft's own pages (not for reuse):
- Fluent content design: write in the present tense: https://fluent2.microsoft.design/content-design
- Fluent content design: use the active voice: https://fluent2.microsoft.design/content-design

Sources: https://fluent2.microsoft.design/content-design, https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general

## Logo: rules

The Microsoft logo is a four-square symbol (red, green, blue, yellow) plus the 'Microsoft' logotype set in Segoe; they always appear together. Use the positive version (gray logotype) on light grounds, the reverse (white logotype) on dark. White or black grounds are preferred.

Why it works: The 2012 logo was built to move across every screen and to show a range of products in one symbol (launch post).

|  |  |
|---|---|
| Squares | #F25022, #7FBA00, #00A4EF, #FFB900 |
| Logotype | #737373 (positive), white (reverse) |
| Clear space | 1x symbol height |
| Minimum on screen | 16px tall / 72px wide |
| Third-party use | license required in most cases |

- Symbol and logotype together
- Clear space equal to the symbol height on all sides
- Minimum 16px tall or 72px wide on screen (0.22in / 1in in print)
- Positive on light grounds, reverse on dark; white ground preferred at minimum size
- Don't make it a single color, or use a one-color white or black logo in full-color work
- Don't place it on busy grounds, photos or low-contrast grounds
- Don't stretch, skew, add shadows or gradients
- Don't alter or rearrange the symbol, add taglines, contain it in a shape, co-brand it, or tile the squares

Do and don't:
- Do: "Microsoft". Positive logo on white, gray logotype, full-color squares.
- Don't: "Microsoft". A one-color white logo in full-color work, on a blue box.

Real examples, to look at on Microsoft's own pages (not for reuse):
- The positive and reverse logo: https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf
- Minimum size and clear space: https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf
- Common errors, part 1: https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf
- Common errors, part 2: https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf

Sources: https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf, https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general, https://blogs.microsoft.com/blog/2012/08/23/microsoft-unveils-a-new-look/

## Color: rules

Fluent defines three palettes: neutral (black, white, grays for surfaces and text), shared (for avatars, badges, calendars and status) and brand (product colors). Brand color is for prominence and anchoring, not large surfaces. microsoft.com runs on white cards, warm-white and ice gradient grounds, navy type and one action blue (#0078D4).

Why it works: Lighter neutrals focus attention; keeping blue for actions makes the next step obvious.

|  |  |
|---|---|
| Action blue (site) | #0078D4 |
| Fluent brandWeb 80 | #0F6CBD |
| Headline ink | #0E1726 |
| Neutral foreground 1 | #242424 (grey 14) |
| Background 2 | #FAFAFA (grey 98) |

- Neutrals ground the interface; lighter surfaces mark the area of focus
- Brand color for actions and selected states, never large surfaces
- Semantic colors only for status, never decoration
- Controls darken from rest to hover to pressed; focus adds a thicker stroke
- Text contrast 4.5:1 (3:1 for large text); never color alone
- Don't flood a band with brand blue
- Don't use red, yellow or green as decoration
- Don't use the logo's four colors as a UI palette

Not published: percentages or ratios of color use; a marketing palette separate from Fluent's UI tokens.

Do and don't:
- Do: "Read the story". One blue filled button per card on white.
- Don't: "Read the story". Fluent: avoid brand color on large surfaces.

Real examples, to look at on Microsoft's own pages (not for reuse):
- Fluent neutral palette: https://fluent2.microsoft.design/color
- Fluent shared palette: https://fluent2.microsoft.design/color
- Fluent color overview: https://fluent2.microsoft.design/color

Sources: https://fluent2.microsoft.design/color, https://fluent2.microsoft.design/color-tokens, https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts, https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts, https://www.microsoft.com/en-us/

## Typography: rules

Segoe is Microsoft's signature typeface ('friendly and legible'); Fluent's web ramp runs from Caption 2 (10/14) to Display (68/92 Semibold). microsoft.com uses Segoe UI Variable Display and Text at weight 500 for big headlines with negative tracking, 600 for card titles and buttons, 400 for body.

Why it works: One humanist superfamily, tuned per size, stays readable across every platform and keeps Microsoft recognizable.

|  |  |
|---|---|
| Display | 68/92 Semibold |
| Large Title | 40/52 Semibold |
| Title 1 | 32/40 Semibold |
| Subtitle 1 | 20/26 Semibold |
| Body 1 | 14/20 Regular |
| Caption 1 | 12/16 Regular |
| Homepage h1 | 62/72 weight 500, -1.55px |
| Stand-in | Hanken Grotesk (calibrated) |

- Sentence case; avoid all caps
- Left-align text by default; center only short copy that supports something else
- Baseline alignment for vertical rhythm
- Contrast 4.5:1, 3:1 above 18.5px bold or 24px regular
- On other platforms, fall back to the native system font
- Don't all-caps headlines
- Don't right-aligned long text in left-to-right languages
- Don't a second display face

Do and don't:
- Do: "Get to know AI and Copilot". Segoe at 500, sentence case, tight tracking.
- Don't: "GET TO KNOW AI AND COPILOT". All caps: Fluent says avoid it.

Real examples, to look at on Microsoft's own pages (not for reuse):
- Segoe, Microsoft's signature typeface: https://fluent2.microsoft.design/typography
- Do: sentence case: https://fluent2.microsoft.design/typography
- Don't: all caps: https://fluent2.microsoft.design/typography

Sources: https://fluent2.microsoft.design/typography, https://www.microsoft.com/en-us/

## Iconography: rules

Three collections: Fluent system icons (MIT-licensed, regular and filled themes), product launch icons (Microsoft apps) and file type icons. System icons are literal metaphors named for the object. microsoft.com uses 32px navy outline icons for quick links and 20-24px icons in controls.

Why it works: Literal, single-color outline icons stay recognizable and leave color to meaning.

|  |  |
|---|---|
| Themes | regular, filled |
| Library | github.com/microsoft/fluentui-system-icons (MIT) |
| Quick-link icon | 32px (observed) |
| Carousel arrow | 24px (observed) |

- Regular theme for wayfinding and actions; filled for selected states
- One solid color only
- 12px icons inform, they don't take interaction
- Modifiers filled, bottom right, only when needed
- Scale product icons by factors of four from 48px
- Don't recolor product launch icons
- Don't use a product icon in place of the Microsoft logo
- Don't stack complex modifiers

Real examples, to look at on Microsoft's own pages (not for reuse):
- Fluent system icons: https://fluent2.microsoft.design/iconography
- Product launch icons: https://fluent2.microsoft.design/iconography
- Homepage quick-link icon: Shop Surface: https://www.microsoft.com/en-us/

Sources: https://fluent2.microsoft.design/iconography, https://www.microsoft.com/en-us/

## Illustration: rules

Fluent's public site names illustration as a signature experience but publishes no illustration guide. On microsoft.com, illustration appears as product art: the Windows 11 Bloom on device screens and abstract generated art for reports (the Digital Defense Report's blue glow and pixel grid).

Why it works: Product-born art (Bloom) carries the brand into marketing without a separate drawing style.

- Use Microsoft's own product art (Bloom) or abstract light and color fields
- Keep art inside rounded image frames
- Don't invent a cartoon or line-illustration style
- Don't build patterns from the logo squares

Not published: an illustration style guide on the public Fluent site.

Real examples, to look at on Microsoft's own pages (not for reuse):
- Abstract art for the Microsoft Digital Defense Report 2026 card: https://www.microsoft.com/en-us/
- Surface Laptop showing the Windows Bloom: https://www.microsoft.com/en-us/

Sources: https://fluent2.microsoft.design/design-principles, https://www.microsoft.com/en-us/

## Photography: rules

Two kinds on the homepage: studio product photography (Surface, Xbox, accessories) on soft gray or dark grounds, and documentary photos of real people and places for AI stories (disaster response, supply chain, datacenter landscapes). Always in rounded frames.

Why it works: Clean product shots sell; real people make AI concrete.

- Product shots: single device, soft light, plain ground, angled view
- Stories: real people at work outdoors or on location, natural light
- Crop to the frame's ratio: 3:4 promo, 16:9 story, 4:3 banner
- Don't use Microsoft photography in third-party work without permission (trademark guidelines)

Not published: a public photography guide.

Real examples, to look at on Microsoft's own pages (not for reuse):
- Studio product photo: Surface Pro 12-inch: https://www.microsoft.com/en-us/
- Documentary photo: datacenter landscape restoration: https://www.microsoft.com/en-us/
- Customer story portrait: Kinaxis: https://www.microsoft.com/en-us/

Sources: https://www.microsoft.com/en-us/, https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/permissions

## Motion: rules

Fluent motion is functional, natural, consistent and appealing. Durations run 50-500ms; easing uses decelerate curves to enter, accelerate to exit, and easy-ease within the screen. Top-level page changes fade. Provide a no-motion setting.

Why it works: Physical, quick motion explains change without making people wait.

|  |  |
|---|---|
| Decelerate mid | cubic-bezier(0,0,0,1) |
| Accelerate mid | cubic-bezier(1,0,1,1) |
| Easy ease | cubic-bezier(0.33,0,0.67,1) |
| Normal | 200ms |
| Slow | 300ms |

- Bigger elements and longer distances get longer durations
- Stagger groups with short offsets
- Keep motion on the element in focus
- Respect reduced motion
- Don't slide whole pages
- Don't flash or make sudden moves
- Don't animate many unrelated areas at once

Real examples, to look at on Microsoft's own pages (not for reuse):
- Fluent motion overview: https://fluent2.microsoft.design/motion

Sources: https://fluent2.microsoft.design/motion, https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts, https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts

## Interface and layout: rules

Fluent spaces on a 4px base unit with a 12-column grid and named breakpoints. Corner radii: 4px default, 2px under 32px, 8px and 12px for large components. Elevation pairs a key and an ambient shadow. microsoft.com goes softer: 24px-radius white cards on gradient and ice grounds, 72px page margins, 1296px content width.

Why it works: Space, not lines, groups content; soft cards make a store feel calm.

|  |  |
|---|---|
| Base unit | 4px |
| Grid | 12 columns |
| Radius tokens | 2, 4, 8, 12, 50% |
| Homepage card radius | 24px |
| Page margin | 72px at 1440, 16px at 390 |

- Space in 4px steps; more space around what matters
- 12-column grid; halves, thirds, quarters
- Round corners except at screen edges and inside split controls
- Shadow2-8 for cards; shadow64 for dialogs
- Don't divide with lines where space would do
- Don't round corners at the screen edge
- Don't use the neutral shadow ramp on colored surfaces

Do and don't:
- Do: "Soft white card, 24px corners". White cards with shadow4 on the ice band.
- Don't: "Hard black panel". Dark, square, heavy blocks outside the promo carousel.

Real examples, to look at on Microsoft's own pages (not for reuse):
- Fluent spacing and proximity: https://fluent2.microsoft.design/layout
- Fluent corner radius: https://fluent2.microsoft.design/shapes
- Key and ambient shadows: https://fluent2.microsoft.design/elevation

Sources: https://fluent2.microsoft.design/layout, https://fluent2.microsoft.design/shapes, https://fluent2.microsoft.design/elevation, https://www.microsoft.com/en-us/

## Rules: rules

The hard rules come from the trademark guidelines and the logo guidance: Microsoft's logos, icons and designs can't be used without a license; names are used as adjectives, never altered or punned; nothing may imply endorsement.

Why it works: The brand is a trust mark; misuse dilutes it.

|  |  |
|---|---|
| Contact | trademarks@microsoft.com (published) |
| Footnote | '... are trademarks of the Microsoft group of companies.' |

- Never imply affiliation, sponsorship or endorsement
- Use Microsoft names less prominently than your own brand
- Add the trademark footnote when using Microsoft marks
- Logos, product icons and photos require permission
- Don't put Microsoft names in your product, domain or social handle
- Don't use the logo on merchandise or packaging
- Don't build taglines or puns from Microsoft names

Real examples, to look at on Microsoft's own pages (not for reuse):
- Logo usage requirements page: https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf

Sources: https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general, https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf

## Campaigns

### A new look: the 2012 Microsoft logo (2012)

Microsoft's first logo change in 25 years, introduced by Jeff Hansen (GM, Brand Strategy) on the Official Microsoft Blog: a symbol of colored squares for the product range and a Segoe logotype, designed for screens and motion, launched alongside Windows 8.

How the system shows: The four squares and gray Segoe logotype still head every page today; the logo guide still forbids altering or tiling the squares.
Why it works: One simple symbol scales from a favicon to a TV sign-off and reads across every product.
Channels: identity, microsoft.com, retail stores, TV sign-off. Source: https://blogs.microsoft.com/blog/2012/08/23/microsoft-unveils-a-new-look/

### Copilot 'Watch me' Super Bowl spot (2024)

Microsoft's first Super Bowl ad in four years, timed with a refreshed Copilot on web and mobile; it showed people's 'watch me' moments of doing what they couldn't before (Yusuf Mehdi, Official Microsoft Blog, Feb 7, 2024).

How the system shows: Plain, second-person, people-first framing: the same 'you can do more' idea as the mission.
Why it works: It sells AI through people's ambitions rather than features.
Channels: TV (Super Bowl LVIII), web, mobile apps. Source: https://blogs.microsoft.com/blog/2024/02/07/delivering-copilot-for-everyone/

### Microsoft Digital Defense Report 2026 (2026)

Annual security report promoted in the homepage card-banner carousel: how attackers exploit trusted systems in the era of AI.

How the system shows: A 4:3 abstract art panel (blue glow and pixel grid) in a 16px-radius frame inside a white 24px card, with a blue 'Read the report' button.
Why it works: Abstract light-and-color art signals security research without stock imagery.
Channels: microsoft.com homepage, report. Source: https://www.microsoft.com/en-us/

## Applications

| Format | What | Source |
|---|---|---|
| website | microsoft.com homepage: greeting and AI field, staggered dark promo cards, soft white cards on gradient and ice grounds, #0078D4 buttons, gray UHF footer (observed 2026-10-29). | https://www.microsoft.com/en-us/ |
| product UI | Fluent 2 components across Windows, web, iOS and Android: 4px radius, Segoe, neutral surfaces, brand blue for primary actions. | https://fluent2.microsoft.design/ |
| legal and partner | Trademark and logo guidance for third parties: logo only with a license, names as adjectives, no implied endorsement. | https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general |
| TV | 2024 Super Bowl Copilot spot. | https://blogs.microsoft.com/blog/2024/02/07/delivering-copilot-for-everyone/ |

## By format

How our engine applies Microsoft's system to each format. This is our recipe built from Fluent, the logo guidance and microsoft.com, not something Microsoft publishes. Level = how expressive (0 plainest). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | White 54px header with the logo top left, centered 62px weight-500 Segoe greeting or headline, warm-white-to-ice gradient ground, white 24px-radius cards with shadow4, #0078D4 40px buttons with 8px radius, 16/24 navy body, #F2F2F2 footer | a staggered dark promo carousel or an AI question field in the hero; which story and banner bands follow |
| Deck | 1 | White slides, Segoe stand-in in sentence case, logo positive on white, blue only on the ask | one product photo or abstract art panel per slide in a rounded frame |
| Proposal page | 1 | Homepage voice, white cards on ice, one blue next-step button | a banner card with a 4:3 image |
| Email | 0 | White ground, navy text, one #0078D4 button, plain second-person copy | a 16:9 hero photo |
| Social post | 2 | One product or story photo, short sentence-case line, no logo alteration | dark gradient overlay like the promo cards |
| Error message | 0 | Plain language, what happened and what to do, no exclamation point | none |

## Checks before anything ships

- **Logo hidden**: Cover the logo. Segoe-like type in sentence case, soft white cards, navy text and one blue should still read as Microsoft.
- **Contrast check**: Every text pairing meets 4.5:1 (3:1 for large text), and color never carries meaning alone.
- **Trademark check**: No Microsoft name used as a verb, noun or pun, and nothing implies endorsement.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Microsoft's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Segoe UI is proprietary: the book uses Hanken Grotesk, calibrated to within about 1.5% of Segoe's width
- Color proportions: not published
- A marketing color palette separate from Fluent's UI tokens: not published (the #0078D4 action blue and navies are observed on microsoft.com)
- Illustration and photography guides: not published on the public Fluent site
- Fluent hex values aren't printed on the site's color pages; they come from Fluent's open-source token files on GitHub
- The Fluent Figma kits and the Microsoft brand portal (brand.microsoft.com) need a sign-in: not used
- Logo clear space beyond 'the height of the symbol', and print color specs (CMYK, Pantone): not published in the public PDF
- Hover and pressed colors for the homepage buttons: not measured; Fluent publishes the rule (darker on interaction) but not the marketing values
- The pill-switch container size, the promo-card text positions at rest, the placeholder color and the phone chat launcher were read from screenshots, not computed styles

Logos and reference images belong to Microsoft. Look at them on Microsoft's own pages; don't reuse them.