{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#F4FAFD", "ink": "#0E1726", "ink_muted": "#17253D", "accent": "#0078D4", "on_accent": "#FFFFFF", "accent_secondary": "#004275", "night": "#000000", "on_night": "#F4FAFD", "extras": [ { "name": "Logo red", "hex": "#F25022", "role": "Top-left square of the Microsoft symbol. Logo only", "prov": "published", "source": "https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf" }, { "name": "Logo green", "hex": "#7FBA00", "role": "Top-right square of the symbol. Logo only", "prov": "published", "source": "https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf" }, { "name": "Logo blue", "hex": "#00A4EF", "role": "Bottom-left square of the symbol. Logo only", "prov": "published", "source": "https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf" }, { "name": "Logo yellow", "hex": "#FFB900", "role": "Bottom-right square of the symbol. Logo only", "prov": "published", "source": "https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf" }, { "name": "Logotype gray", "hex": "#737373", "role": "The 'Microsoft' logotype in the positive (light-ground) logo", "prov": "published", "source": "https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf" }, { "name": "Communication blue (site CTA)", "hex": "#0078D4", "role": "Primary filled button fill on microsoft.com (Read the story, Shop now on white cards); the Need help chat badge; start of the search-field underline gradient", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Link blue", "hex": "#0067B8", "role": "Text link color in the shared UHF chrome (skip link)", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Selected pill navy", "hex": "#004275", "role": "Selected segment of the Personal/Business pill switch", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Ink navy", "hex": "#0E1726", "role": "Headlines (h1, h2, h3) and the label on white buttons", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Body navy", "hex": "#17253D", "role": "Body copy, the italic AI line, quick-link labels", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Control navy", "hex": "#2A446F", "role": "Prompt-pill text and border, carousel arrow and pause button borders and icons, unselected pill label", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Prompt pill fill", "hex": "#E6EFFD", "role": "Fill of the three suggestion pills under the search field", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Hero warm white", "hex": "#FFF9F5", "role": "Ground color under the hero gradient image (y 96-2107 at 1440)", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Ice ground", "hex": "#F4FAFD", "role": "Ground of the 'Get to know AI and Copilot' band; also the text color on dark card overlays and the announcement", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Card footnote ice", "hex": "#E6F2FB", "role": "Small superscript and body text on dark promo cards", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Footer gray", "hex": "#F2F2F2", "role": "UHF footer ground", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Footer text", "hex": "#616161", "role": "Footer headings and links", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Header text", "hex": "#262626", "role": "Top nav links, utility labels and the avatar ring", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Promo plum", "hex": "#882A8B", "role": "Announcement strip ground and the 'New' tag on promo cards", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Card hairline", "hex": "#E7E7E7", "role": "1px border of feature and banner cards; the announcement close icon", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Field border", "hex": "#E1DFDD", "role": "1px border of the 'Ask a question' field", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Placeholder gray", "hex": "#8D8D8D", "role": "Desktop send-arrow icon in the AI field", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Placeholder blue-gray", "hex": "#6F768B", "role": "Italic 'Ask a question' placeholder (sampled from the screenshot; anti-aliased, so approximate)", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Underline teal", "hex": "#6CD0C2", "role": "End of the 3px blue-to-teal gradient under the search field", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Disabled arrow", "hex": "#C6CED8", "role": "Border and arrow of the disabled 'Previous' carousel button at rest", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Card overlay black", "hex": "#000000", "role": "Bottom stop of the promo-card overlay gradient (transparent at 20% to #000 at 85%)", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "Back-to-top fill", "hex": "#F7F7F7", "role": "Back-to-top button fill (shown only after scrolling)", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" }, { "name": "brandWeb 80 (Fluent primary)", "hex": "#0F6CBD", "role": "Fluent 2 web brand primary: colorBrandBackground, the primary button fill in Fluent UI", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts" }, { "name": "brandWeb 70", "hex": "#115EA3", "role": "Fluent hover for brand backgrounds", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts" }, { "name": "brandWeb 60", "hex": "#0F548C", "role": "Fluent pressed for brand backgrounds", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts" }, { "name": "brandWeb 100", "hex": "#479EF5", "role": "Fluent brand foreground in dark theme", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts" }, { "name": "brandWeb 160", "hex": "#EBF3FC", "role": "Fluent lightest brand tint (selected backgrounds)", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts" }, { "name": "grey 14", "hex": "#242424", "role": "Fluent colorNeutralForeground1 (primary text, light theme)", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts" }, { "name": "grey 26", "hex": "#424242", "role": "Fluent colorNeutralForeground2 (secondary text)", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts" }, { "name": "grey 82", "hex": "#D1D1D1", "role": "Fluent colorNeutralStroke1 (control borders)", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts" }, { "name": "grey 98", "hex": "#FAFAFA", "role": "Fluent colorNeutralBackground2", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts" }, { "name": "grey 96", "hex": "#F5F5F5", "role": "Fluent colorNeutralBackground3 and hover of Background1", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts" }, { "name": "grey 16", "hex": "#292929", "role": "Fluent colorNeutralBackground1 in dark theme", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts" } ] }, "typography": { "display": { "family": "Hanken Grotesk", "weight": 500, "tracking": -0.025, "line_height": 1.16, "fallback_stack": "\"Segoe UI Variable Text\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif", "google_fonts": "Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400", "real": "Segoe UI Variable Display (Microsoft proprietary system face)", "stand_in": true }, "body": { "family": "Hanken Grotesk", "weight": 400, "line_height": 1.5, "scale": 1, "fallback_stack": "\"Segoe UI Variable Text\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif", "google_fonts": "Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400", "real": "Segoe UI Variable Text / Segoe UI (Microsoft proprietary)", "stand_in": true }, "mono": { "family": "JetBrains Mono", "weight": 400, "fallback_stack": "Consolas, 'Cascadia Mono', monospace", "google_fonts": "JetBrains+Mono:wght@400", "real": "not used on the homepage; Fluent names no mono face (Cascadia Code and Consolas are Microsoft's own, inferred)", "stand_in": true }, "calibration": "Segoe UI (Segoe UI Variable Display and Text on microsoft.com) is proprietary and not licensable for the web; a builder loads Hanken Grotesk. Calibrated 2026-10-29 by rendering four real lines with the site's own Segoe UI Variable web fonts and 18 open candidates at the same size, weight and tracking. Width difference vs Segoe (h1 62/500/-1.55px, h2 48/500/-1.2px, h3 20/600/-0.3px, body 16/400/-0.48px): Hanken Grotesk -0.4%, +0.5%, +1.5%, +0.6% (mean 0.75%), ink -0.5% to -3.7%. Runners-up: Fira Sans (width 0.8% but 10-25% heavier ink), Figtree (1.3%), Nunito Sans (1.5%, 5-15% lighter), Open Sans (+6%), Inter (+7%), Noto Sans (+7%), Source Sans 3 (-7%). Selawik, Microsoft's own open Segoe fallback, is not on Google Fonts or fontsource. Keep Segoe's weights (500 headlines, 600 card titles and buttons, 400 body) and its negative tracking as measured. Line-count rule: Hanken runs up to 1.5% wider at small sizes, so where a measured line count isn't met (e.g. the phone Surface Pro H2 at 24px in 326px must set in 2 lines), tighten that element's tracking by up to 0.4px more rather than accept an extra line; keep compound words like 'AI-powered' unbroken (non-breaking hyphen U+2011). Ink: Hanken renders a touch lighter than Segoe at 20px 600 (-3.7%); keep font-synthesis off and use real 500/600 weights so headlines stay firm." }, "style": { "button_shape": "rounded", "motion": "Fluent 2: decelerate curves for entering, accelerate for exiting, 100-500ms by size and distance; top-level transitions fade" }, "voice": { "tone": [ "Plain", "Friendly", "Helpful" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "plain", "kind": "guidance", "text": "Keep it simple: plain language, short sentences and fragments", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "to-the-point", "kind": "guidance", "text": "Get to the point fast; prune every excess word", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "person", "kind": "guidance", "text": "Talk like a person: informal and conversational, one-on-one", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "second-person", "kind": "guidance", "text": "Second person (you, your); avoid first person unless writing as the reader", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "present-active", "kind": "guidance", "text": "Present tense and active voice", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "punctuation", "kind": "guidance", "text": "No periods in headers, buttons, labels or bullet lists; avoid exclamation points", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "link-text", "kind": "guidance", "text": "Short, descriptive link text; never 'Click here'", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "no-direction", "kind": "guidance", "text": "No directional words (above, below, left, right)", "prov": "published", "source": "https://fluent2.microsoft.design/content-design" }, { "id": "no-all-caps", "kind": "guidance", "text": "Don't use all caps for attention", "prov": "published", "source": "https://fluent2.microsoft.design/typography" }, { "id": "tm-adjective", "kind": "guidance", "text": "Use Microsoft product names as adjectives before nouns ('Excel spreadsheets'), never as verbs or nouns", "prov": "published", "source": "https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general" }, { "id": "tm-no-wordplay", "kind": "guidance", "text": "No puns or slogans built from Microsoft names", "prov": "published", "source": "https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general" } ], "approved": { "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" ] }, "banned": [ "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'" ] }, "spec": { "motion": [ { "name": "fluent-in", "token": "curveDecelerateMax", "easing": "cubic-bezier(0.1,0.9,0.2,1)", "use": "Enter: elements arriving decelerate (ease-out)", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "fluent-out", "token": "curveAccelerateMid", "easing": "cubic-bezier(1,0,1,1)", "use": "Exit: elements leaving accelerate (ease-in)", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "curveDecelerateMid", "easing": "cubic-bezier(0,0,0,1)", "use": "Ease-out: elements entering (start fast, slow down)", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "curveDecelerateMax", "easing": "cubic-bezier(0.1,0.9,0.2,1)", "use": "Strong ease-out for larger enter moves", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "curveAccelerateMid", "easing": "cubic-bezier(1,0,1,1)", "use": "Ease-in: elements exiting", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "curveEasyEase", "easing": "cubic-bezier(0.33,0,0.67,1)", "use": "Ease-in-out: moves within the screen", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "curveEasyEaseMax", "easing": "cubic-bezier(0.8,0,0.2,1)", "use": "Container transforms", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "curveLinear", "easing": "cubic-bezier(0,0,1,1)", "use": "Only for constant-rate motion such as rotation", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "durations", "values": "ultraFast 50ms, faster 100ms, fast 150ms, normal 200ms, gentle 250ms, slow 300ms, slower 400ms, ultraSlow 500ms", "use": "Larger elements and longer distances get longer durations; aim for fast and smooth", "prov": "published", "source": "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts", "also": [ "https://fluent2.microsoft.design/motion" ] }, { "name": "top-level transition", "use": "Page-to-page: a quick fade, not slides", "prov": "published", "source": "https://fluent2.microsoft.design/motion" }, { "name": "stagger", "use": "Stagger groups with short offsets; don't stagger very large sets", "prov": "published", "source": "https://fluent2.microsoft.design/motion" }, { "name": "reduced motion", "use": "Provide a no-motion setting; keep motion on the element in focus", "prov": "published", "source": "https://fluent2.microsoft.design/motion" }, { "name": "homepage carousels", "use": "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", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29" } ], "icons": { "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", "corner_radius": "rounded stroke caps and corners (Fluent shapes: avoid square stroke caps)", "sizes": [ { "name": "12", "px": 12, "use": "Information only, too small to interact" }, { "name": "16", "px": 16, "use": "Small UI" }, { "name": "20", "px": 20, "use": "Default web UI (the search send arrow, header icons)" }, { "name": "24", "px": 24, "use": "Card chevrons and carousel arrows (observed)" }, { "name": "32", "px": 32, "use": "Homepage quick-link icons (observed)" } ], "naming": "Named for the object, not the function ('Shield, not security')", "modifiers": "Filled, bottom-right, only when needed", "product_icons": "Product launch icons never replace the Microsoft logo and are never recolored", "license": "System icons are MIT-licensed open source (github.com/microsoft/fluentui-system-icons)", "prov": "published", "source": "https://fluent2.microsoft.design/iconography" }, "signature": [ { "id": "four-squares", "name": "The four-square symbol, gray logotype", "where": "top-left of every page header (108x23 at 1440), favicon and the logo sign-off", "spec": "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": "once per page, top left", "prov": "published", "source": "https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/microsoft/mscle/documents/legal/intellectualproperty/trademarks/Microsoft_logo_third_party_usage_guidance_.pdf", "example": { "ground": "paper", "text": "Microsoft", "ink": "ink_muted" }, "dont_example": { "ground": "accent", "text": "Microsoft", "ink": "on_accent" }, "dont": "single-color logo in a full-color piece, shadows or gradients, boxes or circles around it, taglines attached, tile patterns made from the squares" }, { "id": "staggered-promo-cards", "name": "Staggered dark promo cards", "where": "the homepage hero carousel under the AI search field", "spec": "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", "once": "one carousel per page", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "example": { "ground": "night", "text": "Surface Laptop Ultra", "ink": "on_night" }, "dont_example": { "ground": "paper", "text": "Surface Laptop Ultra", "ink": "accent" }, "dont": "flat grid without the stagger, square corners, or text over the photo without the gradient" }, { "id": "soft-rounded-cards", "name": "Soft white cards with a Fluent shadow", "where": "every content block below the hero", "spec": "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", "once": "every band", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "also": [ "https://fluent2.microsoft.design/elevation", "https://fluent2.microsoft.design/shapes" ], "example": { "ground": "surface", "text": "Read the story", "button": true }, "dont_example": { "ground": "surface", "text": "Read the story", "ink": "ink" }, "dont": "hard 0px corners, heavy drop shadows, or thick borders" }, { "id": "ai-search-hero", "name": "Greeting plus AI question field", "where": "the top of the homepage hero", "spec": "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": "once, at the top", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "example": { "ground": "paper", "text": "Hi there, welcome to Microsoft", "font": "display", "weight": 500 }, "dont_example": { "ground": "paper", "text": "WELCOME TO MICROSOFT!", "font": "display", "weight": 700 }, "dont": "all caps, exclamation points, or a left-aligned greeting" } ], "page": { "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29", "prov": "observed", "how": "Measured with Playwright at 1440x900 and 390x844 (computed styles, shadow DOM included), plus full-page screenshots, 2026-10-29", "voice_scope": "The page follows the homepage voice (greeting, plain offers, story headlines); Fluent's content rules apply to every label", "announcement": { "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" }, "nav": { "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)" }, "sections": [ { "name": "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))" }, { "name": "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)" }, { "name": "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)" }, { "name": "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" }, { "name": "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" }, "floating": "BUILD THIS: a fixed chat launcher is part of the resting page on both widths (it is not the Store Assistant popover, which you skip). Desktop: 'Need help? Let's chat' badge, 182x80, #0078D4 fill, 1px white inner border, radius 18px, position fixed 13px from the right and bottom of the viewport (x 1245, y 807 in a 900px viewport); at its left a 48px round photo of a smiling support agent (the supplied image for slot chat.avatar, 184x184, on a #0E1726 circle) with a 20px white chat-bubble badge on its top-right; two white lines 'Need help?' / 'Let's chat' 16/24 600 at x 1333. Phone: a ~72x72 #0078D4 rounded square (radius ~18px) with a white 32px chat-bubble icon, fixed about 14px from the right edge, top about y 756 in an 844px viewport (read from the screenshot, not computed)", "dark_ground": { "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" } }, "bands": [ { "label": "Header (UHF)", "ground": "#FFFFFF", "content": "nav", "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", "anatomy": [ "no border", "not sticky" ] }, { "label": "Announcement strip", "ground": "#882A8B", "content": "announcement", "desktop": "42px; one centered 16/24 line + 'Shop deals' 14/20 600 underlined; close X at right", "phone": "84px; two lines + 'Shop deals' line", "anatomy": [ "#F4FAFD text", "dismissible" ] }, { "label": "Hero: greeting, AI field, promo carousel", "ground": "#FFF9F5", "content": "hero", "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", "anatomy": [ "gradient image covers this band and the next two", "cards alternate y 614 / 646", "overlay gradient transparent 20% to #000 85%" ] }, { "label": "Quick links", "ground": "#FFF9F5", "content": "quick links", "desktop": "y 1386; six 32px icons over underlined 16/24 labels, centered row", "phone": "2x3 grid", "anatomy": [ "#17253D labels", "no card" ] }, { "label": "Surface Pro banner card", "ground": "#FFF9F5", "content": "banner card", "desktop": "1296x481 white card, radius 24, text left, 620x465 photo right", "phone": "358x561 stacked card", "anatomy": [ "#0078D4 Shop now", "shadow4" ] }, { "label": "Get to know AI and Copilot", "ground": "#F4FAFD", "content": "three feature cards", "desktop": "48px H2 centered; 3 x 421x517 cards, 16px gaps", "phone": "32px H2; stacked cards", "anatomy": [ "1px #E7E7E7 + shadow4, radius 24", "photo 16:9 radius 16" ] }, { "label": "Card-banner carousel", "ground": "#FFFFFF", "content": "banner carousel", "desktop": "1288x479 card + 52px peek; arrows + pause", "phone": "two 232px cards side by side", "anatomy": [ "auto-advance, pause button", "first card at rest" ] }, { "label": "Follow Microsoft", "ground": "#FFFFFF", "content": "social", "desktop": "16px heading, three 22px icons", "phone": "same, centered", "anatomy": [ "64px icon pitch" ] }, { "label": "Footer (UHF)", "ground": "#F2F2F2", "content": "footer", "desktop": "six columns, 11px links, bottom legal row", "phone": "one column, all links", "anatomy": [ "#616161 text", "© Microsoft 2026" ] } ], "layout": { "container_max": 1296, "card_gap": 24, "page_margin": { "desktop": 72, "phone": 16, "note": "content box x 72-1368 at 1440 (header padding 0 72px); feature and banner cards follow it; quick links and the hero text are centered within it. Phone cards x 16-374; card text inset 16px more (x 32)" }, "nav_height": 54, "announcement_height": { "desktop": 42, "phone": 84 }, "section_gap": { "desktop": 48, "phone": 32, "note": "bands carry 48px top padding (32 on phones); the AI band adds 96px bottom (56 on phones)" }, "hero_padding": { "top": 48, "bottom": 0 }, "columns": 12, "columns_phone": 4, "gutter": 24, "gutter_phone": 12, "promo_cards": { "width": 426, "height": 568, "gap": 24, "xs": [ 72, 522, 972, 1422 ], "ys": [ 646, 614, 646, 614 ], "phone": "272x363, gap 12, ys 708/676" }, "feature_cards": { "width": 421, "height": 517, "gap": 16, "xs": [ 72, 509, 947 ] }, "banner_card": { "width": 1296, "height": 481, "image": "620x465 right, 8px inset", "text_x": 96 }, "spacing_base": "4px (Fluent global spacing ramp: 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 52, 56)", "radius": { "cards": "24px desktop / 16px phone", "card_images": "16px desktop / 8px phone", "buttons": "8px", "pills": "16px (suggestion) / 200px (switch, arrows)", "field": "4px desktop / 8px phone", "fluent_tokens": "none 0, small 2, medium 4, large 6, xLarge 8, 2xLarge 12, 3xLarge 16, 4xLarge 24, circular" }, "shadow": "Fluent shadow4 on cards and the field: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14)", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29", "also": [ "https://fluent2.microsoft.design/layout", "https://fluent2.microsoft.design/shapes", "https://fluent2.microsoft.design/elevation" ] }, "type": [ { "role": "Hero greeting (h1)", "face": "display", "size": { "desktop": 62, "phone": 40 }, "line_height": 1.16, "tracking_px": -1.55, "weight": 500, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "62/72 at 1440, 40/48 -1px on phones; centered; #0E1726 (Segoe UI Variable Text)" }, { "role": "Section headline (h2)", "face": "display", "size": { "desktop": 48, "phone": 32 }, "line_height": 1.17, "tracking_px": -1.2, "weight": 500, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "48/56 'Get to know AI and Copilot'; phones 32/40 -0.8px; centered" }, { "role": "Card and banner headline", "face": "display", "size": { "desktop": 32, "phone": 24 }, "line_height": 1.25, "tracking_px": -0.8, "weight": 500, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "32/40 on promo cards (#F4FAFD), banner cards (#0E1726); phones 24/32 -0.6px on banners, 16/24 on promo cards" }, { "role": "Feature card title (h3)", "face": "display", "size": { "desktop": 20, "phone": 18 }, "line_height": 1.4, "tracking_px": -0.3, "weight": 600, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "20/28; phones 18/24 -0.27px" }, { "role": "Body", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": -0.48, "weight": 400, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "16/24 #17253D everywhere in the page body" }, { "role": "Italic prompt", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": -0.48, "weight": 400, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "italic, #17253D, centered under the switch" }, { "role": "Button label", "face": "body", "size": { "desktop": 15, "phone": 15 }, "line_height": 1.47, "tracking_px": -0.3, "weight": 600, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "15/22 on all filled buttons and the switch pills" }, { "role": "Suggestion pill", "face": "body", "size": { "desktop": 15, "phone": 15 }, "line_height": 1.47, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "15/22 #2A446F" }, { "role": "Tag", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.43, "tracking_px": -0.48, "weight": 600, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "'New' 14/20 white on #882A8B" }, { "role": "Header link", "face": "body", "size": { "desktop": 13, "phone": 13 }, "line_height": 1.2, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "13px Segoe UI #262626, line-height normal" }, { "role": "Footer heading", "face": "display", "size": { "desktop": 15, "phone": 15 }, "line_height": 1.33, "tracking_px": -0.375, "weight": 600, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "15/20 #616161" }, { "role": "Footer link", "face": "body", "size": { "desktop": 11, "phone": 11 }, "line_height": 1.45, "tracking_px": -0.48, "weight": 400, "prov": "observed", "source": "https://www.microsoft.com/en-us/", "note": "11/16 #616161" }, { "role": "Fluent Display (reference)", "face": "display", "size": { "desktop": 68, "phone": 68 }, "line_height": 1.35, "tracking_px": 0, "weight": 600, "prov": "published", "source": "https://fluent2.microsoft.design/typography", "note": "Fluent web ramp Display 68/92 Semibold; Large Title 40/52, Title 1 32/40, Title 2 28/36, Title 3 24/32, Subtitle 1 20/26, Body 1 14/20, Caption 1 12/16" } ], "components": { "button_primary": { "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", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "states": { "hover": { "note": "Fluent buttons get darker as people interact: rest, darker hover, darkest pressed; focus adds a thicker stroke, not a color change", "prov": "published", "source": "https://fluent2.microsoft.design/color" } } }, "button_on_dark": { "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')", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "segmented_switch": { "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", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "ask_field": { "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", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "suggestion_pill": { "fill": "#E6EFFD", "border": "1px #2A446F", "text": "#2A446F", "radius": 16, "height": 32, "padding": "4px 12px", "font_size": 15, "weight": 400, "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "promo_card": { "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", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "tag": { "fill": "#882A8B", "text": "#FFFFFF", "radius": 4, "height": 30, "padding": "4px 16px (phone 4px 12px)", "font_size": 14, "line_height": 22, "weight": 600, "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "feature_card": { "fill": "#FFFFFF", "border": "1px #E7E7E7", "radius": 24, "shadow": "shadow4", "image": "16:9 at 9px inset, radius 16", "text_inset": 25, "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "card_banner": { "fill": "#FFFFFF", "border": "none (Surface Pro) or 1px #E7E7E7 (carousel)", "radius": 24, "image": "4:3 right half, 8-9px inset, radius 16", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "carousel_button": { "size": "48x48 (phone 32x32)", "border": "2px #2A446F", "radius": 200, "icon": "24px arrow #2A446F", "disabled": "#C6CED8", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "pause_button": { "size": "32x32", "border": "2px #2A446F", "radius": 8, "icon": "pause bars #2A446F", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "quick_link": { "icon": "32px outline, #004275", "label": "16/24 600 #2A446F, underline 2px at 4.8px offset", "gap": 8, "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "social_tile": { "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", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "chat_badge": { "fill": "#0078D4", "radius": 18, "size": "182x80 desktop; ~72x72 icon-only on phones", "text": "white 16/24 600, two lines", "position": "fixed, bottom-right", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "avatar_ring": { "size": 36, "border": "1px #262626", "radius": 18, "text": "initials 14px", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, "fluent_button_reference": { "note": "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", "prov": "published", "source": "https://fluent2.microsoft.design/components/web/react/core/button/usage", "also": [ "https://fluent2.microsoft.design/shapes", "https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts" ] } }, "responsive": { "measured_at": [ 390, 1440 ], "source": "https://www.microsoft.com/en-us/", "date": "2026-10-29", "prov": "observed", "rows": [ { "what": "h1", "values": { "390": "40/48 two lines", "1440": "62/72 one line" } }, { "what": "section h2", "values": { "390": "32/40", "1440": "48/56" } }, { "what": "switch", "values": { "390": "Personal dropdown 114x50", "1440": "two-pill segmented switch" } }, { "what": "promo cards", "values": { "390": "272x363, radius 16, 16/24 headline, Read more", "1440": "426x568, radius 24, 32/40 headline, chevron" } }, { "what": "quick links", "values": { "390": "2x3 grid", "1440": "one row of six" } }, { "what": "feature cards", "values": { "390": "stacked full width", "1440": "three across" } }, { "what": "banner cards", "values": { "390": "photo on top, full-width button", "1440": "text left, photo right" } }, { "what": "header", "values": { "390": "icons only, centered logo", "1440": "logo + nine links + utilities" } }, { "what": "footer", "values": { "390": "one column, every link listed", "1440": "six columns" } } ] }, "breakpoints": { "fluent": "small 320-479, medium 480-639, large 640-1023, x-large 1024-1365, xx-large 1366-1919, xxx-large 1920+", "prov": "published", "source": "https://fluent2.microsoft.design/layout", "note": "Only 390 and 1440 were measured on microsoft.com" } }, "system": { "fixed": [ "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" ], "flex": "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.", "traits": [ { "is": "Natural", "not": "foreign", "text": "Adapts to the device; builds on what people already know (paraphrase).", "source": "https://fluent2.microsoft.design/design-principles", "prov": "published" }, { "is": "Focused", "not": "cluttered", "text": "Less visual noise keeps people calm and confident (paraphrase).", "source": "https://fluent2.microsoft.design/design-principles", "prov": "published" }, { "is": "Inclusive", "not": "exclusive", "text": "Designed with a range of abilities and perspectives (paraphrase).", "source": "https://fluent2.microsoft.design/design-principles", "prov": "published" }, { "is": "Unmistakable", "not": "generic", "text": "'A little personality goes a long way.'", "source": "https://fluent2.microsoft.design/design-principles", "prov": "published" }, { "is": "Friendly", "not": "formal", "text": "Talk like a person, one-on-one (paraphrase).", "source": "https://fluent2.microsoft.design/content-design", "prov": "published" }, { "is": "Plain", "not": "hyped", "text": "Get to the point fast; prune every excess word (paraphrase).", "source": "https://fluent2.microsoft.design/content-design", "prov": "published" } ] }, "proportion": { "note": "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.", "source": "https://www.microsoft.com/en-us/", "prov": "inferred", "parts": [ { "name": "White and warm-white grounds", "hex": "#FFFFFF", "n": 55 }, { "name": "Ice band", "hex": "#F4FAFD", "n": 18 }, { "name": "Photography and dark cards", "hex": "#000000", "n": 15 }, { "name": "Footer gray", "hex": "#F2F2F2", "n": 6 }, { "name": "Navy type", "hex": "#0E1726", "n": 3 }, { "name": "Action blue", "hex": "#0078D4", "n": 2 }, { "name": "Promo plum", "hex": "#882A8B", "n": 1 } ] }, "tone_by_state": { "note": "Two scoped voices. The levels are our reading, not a Microsoft scale (0 = plainest).", "source": "https://www.microsoft.com/en-us/", "prov": "inferred", "states": [ { "state": "Product UI (Fluent content design)", "level": 0 }, { "state": "Footer and legal", "level": 0 }, { "state": "Homepage offers and stories", "level": 1 }, { "state": "Homepage greeting and AI prompt", "level": 2 }, { "state": "Campaigns (Copilot 'Watch me')", "level": 3 } ] }, "formats": [ { "format": "Landing page", "level": 1, "must": "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", "flex": "a staggered dark promo carousel or an AI question field in the hero; which story and banner bands follow" }, { "format": "Deck", "level": 1, "must": "White slides, Segoe stand-in in sentence case, logo positive on white, blue only on the ask", "flex": "one product photo or abstract art panel per slide in a rounded frame" }, { "format": "Proposal page", "level": 1, "must": "Homepage voice, white cards on ice, one blue next-step button", "flex": "a banner card with a 4:3 image" }, { "format": "Email", "level": 0, "must": "White ground, navy text, one #0078D4 button, plain second-person copy", "flex": "a 16:9 hero photo" }, { "format": "Social post", "level": 2, "must": "One product or story photo, short sentence-case line, no logo alteration", "flex": "dark gradient overlay like the promo cards" }, { "format": "Error message", "level": 0, "must": "Plain language, what happened and what to do, no exclamation point", "flex": "none" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the logo. Segoe-like type in sentence case, soft white cards, navy text and one blue should still read as Microsoft." }, { "name": "Contrast check", "text": "Every text pairing meets 4.5:1 (3:1 for large text), and color never carries meaning alone." }, { "name": "Trademark check", "text": "No Microsoft name used as a verb, noun or pun, and nothing implies endorsement." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Read the story", "button": true }, "do_caption": "One blue filled button per card on white.", "dont": { "ground": "accent", "text": "Read the story", "ink": "on_accent" }, "dont_caption": "Fluent: avoid brand color on large surfaces." }, { "chapter": "type", "do": { "ground": "paper", "text": "Get to know AI and Copilot", "font": "display", "weight": 500 }, "do_caption": "Segoe at 500, sentence case, tight tracking.", "dont": { "ground": "paper", "text": "GET TO KNOW AI AND COPILOT", "font": "display", "weight": 700 }, "dont_caption": "All caps: Fluent says avoid it." }, { "chapter": "voice", "do": { "ground": "paper", "text": "Find your next PC" }, "do_caption": "Plain, verb first, second person implied.", "dont": { "ground": "paper", "text": "Click here to Excel at productivity!" }, "dont_caption": "'Click here', a product-name pun and an exclamation point." }, { "chapter": "logo", "do": { "ground": "paper", "text": "Microsoft", "ink": "ink_muted" }, "do_caption": "Positive logo on white, gray logotype, full-color squares.", "dont": { "ground": "accent", "text": "Microsoft", "ink": "on_accent" }, "dont_caption": "A one-color white logo in full-color work, on a blue box." }, { "chapter": "layout", "do": { "ground": "surface", "text": "Soft white card, 24px corners" }, "do_caption": "White cards with shadow4 on the ice band.", "dont": { "ground": "night", "text": "Hard black panel", "ink": "on_night" }, "dont_caption": "Dark, square, heavy blocks outside the promo carousel." } ], "make_it_yours": { "note": "Everything above transfers. These are Microsoft's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "label": "Mission", "text": "Empower every person and every organization on the planet to achieve more.", "prov": "published", "source": "https://www.microsoft.com/en-us/about" }, "story": { "text": "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.", "prov": "published", "source": "https://blogs.microsoft.com/blog/2012/08/23/microsoft-unveils-a-new-look/", "also": [ "https://fluent2.microsoft.design/" ], "paraphrase": true }, "values": [ { "name": "Natural on every platform", "means": "Adapt to the device and build on what people already know; reuse native patterns most of the time (paraphrase).", "prov": "published", "source": "https://fluent2.microsoft.design/design-principles" }, { "name": "Built for focus", "means": "Keep people in flow; less visual clutter keeps them calm and confident (paraphrase).", "prov": "published", "source": "https://fluent2.microsoft.design/design-principles" }, { "name": "One for all, all for one", "means": "Include a range of abilities and perspectives early; everyone should feel they belong (paraphrase).", "prov": "published", "source": "https://fluent2.microsoft.design/design-principles" }, { "name": "Unmistakably Microsoft", "means": "Signature experiences in color, sound, illustration and icons make products feel like one Microsoft (paraphrase).", "prov": "published", "source": "https://fluent2.microsoft.design/design-principles" } ] }, "positioning": { "statement": { "text": "One Microsoft across every device: products, AI and stories presented in one calm, familiar system (our reading of the Fluent principles and the homepage).", "prov": "inferred", "source": "https://fluent2.microsoft.design/design-principles", "why": "Fluent's 'Unmistakably Microsoft' and 'Natural on every platform' principles, applied on microsoft.com." }, "category": { "text": "Software, cloud, devices and AI for people and organizations (paraphrase of the homepage nav: Microsoft 365, Azure, Copilot, Windows, Surface, Xbox).", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "source_note": "2026-10-29" }, "audience": { "text": "Consumers first (the Personal tab is selected at rest), with a Business tab and a 'Shop for your business' link for small businesses (observed).", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "source_note": "2026-10-29" }, "problem": { "text": "People want to find the right product or answer quickly (the hero offers an AI question field and suggestion pills).", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "source_note": "2026-10-29" }, "promise": { "text": "Find what you need faster with AI-powered suggestions (the hero line).", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "source_note": "2026-10-29" }, "differentiators": [ { "text": "One integrated family: Windows, Surface, Xbox, Microsoft 365 and Copilot sold and explained in one place.", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, { "text": "AI framed through real-world impact stories rather than feature lists.", "prov": "observed", "source": "https://www.microsoft.com/en-us/" } ], "alternatives": [ { "text": "Unnamed: microsoft.com names no competitors.", "prov": "inferred", "source": "https://www.microsoft.com/en-us/", "why": "No comparison content on the homepage." } ] }, "messaging": { "taglines": [ { "text": "Empower every person and every organization on the planet to achieve more", "prov": "published", "source": "https://www.microsoft.com/en-us/about", "where": "Microsoft's mission statement" }, { "text": "Hi there, welcome to Microsoft", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "source_note": "2026-10-29", "where": "homepage H1" }, { "text": "Unmistakably Microsoft", "prov": "published", "source": "https://fluent2.microsoft.design/design-principles", "where": "Fluent 2 design principle (internal design voice, not a marketing line)" } ], "attributes": [ "natural on every platform", "built for focus", "one for all, all for one", "unmistakably Microsoft", "friendly", "legible" ], "key_messages": [ { "text": "Get to know AI and Copilot", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "source_note": "2026-10-29" }, { "text": "Find what you need faster with AI-powered suggestions", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "source_note": "2026-10-29" } ], "boilerplate": { "text": "Microsoft's mission is to empower every person and every organization on the planet to achieve more (quoted from the About page).", "prov": "published", "source": "https://www.microsoft.com/en-us/about", "paraphrase": false }, "pillars": [ { "name": "Devices and offers", "claim": "Surface, Xbox and Microsoft 365 sold directly, with plain price offers", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "proof": [ "p-esquire" ], "why": "The hero carousel and the Surface Pro banner lead the homepage." }, { "name": "AI and Copilot", "claim": "AI shown through real customer and community stories", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "proof": [ "p-haste", "p-datacenters" ], "why": "The only titled section band: 'Get to know AI and Copilot'." }, { "name": "Security and trust", "claim": "Research on how attackers work and how to build resilience", "prov": "observed", "source": "https://www.microsoft.com/en-us/", "proof": [ "p-mddr" ], "why": "The Digital Defense Report leads the card-banner carousel." } ], "proof_points": [ { "id": "p-esquire", "kind": "award", "text": "Surface Pro, 12-inch: 'Awarded 2025 Esquire Best Tablet' (homepage claim).", "source": "https://www.microsoft.com/en-us/" }, { "id": "p-datacenters", "kind": "metric", "text": "Biomimicry work around more than 20 datacenters across the US and Germany (homepage claim).", "source": "https://www.microsoft.com/en-us/" }, { "id": "p-haste", "kind": "story", "text": "HASTE, a Microsoft tool, helps disaster response teams assess damage faster (homepage story).", "source": "https://www.microsoft.com/en-us/" }, { "id": "p-mddr", "kind": "report", "text": "Microsoft Digital Defense Report 2026 (homepage card).", "source": "https://www.microsoft.com/en-us/" } ], "claim_boundaries": [ { "text": "Offers carry their footnote markers (* and **) and legal detail; never state a price without its qualifier ('Save up to', 'on select').", "prov": "observed", "source": "https://www.microsoft.com/en-us/" }, { "text": "Third parties may state compatibility truthfully but must not imply affiliation or endorsement.", "prov": "published", "source": "https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general" } ] } } } }