---
title: "Microsoft design system"
variant: extended
source: https://www.microsoft.com/en-us
captured_at: 2026-10-12
theme: light
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/microsoft-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Microsoft · Design System

> Product clarity across a bright, cinematic canvas

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.microsoft.com/en-us · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Microsoft’s homepage pairs cinematic product campaigns with practical shopping pathways and editorial stories. Bright commerce sections alternate with dark, immersive product imagery, while consistent typography and restrained borders keep the experience cohesive.

## North star

Let product imagery set the mood, while a clean white interface and restrained blue actions keep every path to discovery clear.

## Overview

The page begins with a slim white navigation bar, then uses a full-width, dark cinematic hero to make the Surface launch feel immersive. Product imagery carries much of the visual contrast; the measured black and near-black tones in the screenshot largely belong to campaign photography, while the reusable interface palette stays anchored in white, pale surfaces, and dark text. A second pale product split and another dark feature section create a clear light-dark-light rhythm. Segoe UI Variable Display gives headlines a clean, contemporary silhouette, with tight tracking and moderate weights; Segoe UI Variable Text handles readable descriptions and strong, compact action labels. Shopping cards, category links, product banners, and editorial cards appear as distinct modules with generous breathing room. Rounded cards and subtle shadows support browsing, while thin gray borders and simple blue calls to action provide functional cues without competing with the product imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, navigation, cards, and open areas around product content. |
| Action Blue | `#0078d4` | `--color-action-blue` | accent | Primary shopping and action buttons, including the Xbox product call to action. |
| Quiet Gray | `#616161` | `--color-quiet-gray` | neutral | Muted navigation, headings, and footer text. |
| Slate Blue | `#2a446f` | `--color-slate-blue` | accent | Secondary blue accent for button or text details; use sparingly. |
| Deep Slate | `#17253d` | `--color-deep-slate` | semantic | Muted body copy in product cards and supporting interface text. |
| Warm Porcelain | `#fff9f5` | `--color-warm-porcelain` | surface | Soft warm section background behind selected content. |
| Campaign Black | `#000000` | `--color-campaign-black` | semantic | Dark campaign areas, contrast text, and inverse controls; prominent in hero imagery. |
| Hairline Gray | `#e7e7e7` | `--color-hairline-gray` | neutral | Fine card and control borders that separate elements without heavy framing. |
| Cloud Tint | `#f4fafd` | `--color-cloud-tint` | surface | Cool pale background for shopping and AI content sections. |
| Ink Navy | `#0e1726` | `--color-ink-navy` | semantic | Primary heading and link text on light backgrounds. |
| Midnight Teal | `#06161f` | `--color-midnight-teal` | surface | First stop in the measured dark section gradient; use for cinematic feature bands. |
| Deep Teal | `#091f2c` | `--color-deep-teal` | surface | Middle stop in the measured dark section gradient. |
| Night Blue | `#003259` | `--color-night-blue` | accent | Gradient endpoint and deep blue accent in dark feature treatment. |
| Ice Blue | `#e6f2fb` | `--color-ice-blue` | semantic | Pale blue text accent appearing in content; not a defining canvas color. |
| Link Blue | `#0067b8` | `--color-link-blue` | accent | Text-link blue used for restrained inline navigation. |
| Soft Gray | `#f2f2f2` | `--color-soft-gray` | surface | Neutral interface surface, including portions of the footer and secondary controls. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fff9f5` (Warm Porcelain) · `--color-surface-2` → `#000000` (Campaign Black) · `--color-surface-3` → `#f4fafd` (Cloud Tint) · `--color-surface-4` → `#f2f2f2` (Soft Gray) · `--color-text` → `#0e1726` (Ink Navy) · `--color-text-muted` → `#616161` (Quiet Gray) · `--color-text-subtle` → `#17253d` (Deep Slate) · `--color-border` → `#e7e7e7` (Hairline Gray) · `--color-accent` → `#0078d4` (Action Blue) · `--color-accent-2` → `#003259` (Night Blue) · `--color-accent-3` → `#2a446f` (Slate Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e1726` | `#ffffff` | 17.96:1 | AAA |
| `#0e1726` | `#fff9f5` | 17.21:1 | AAA |
| `#0e1726` | `#000000` | 1.17:1 | fail |
| `#0e1726` | `#f4fafd` | 17.05:1 | AAA |
| `#616161` | `#ffffff` | 6.19:1 | AA |
| `#616161` | `#fff9f5` | 5.93:1 | AA |
| `#616161` | `#000000` | 3.39:1 | AA-large |
| `#616161` | `#f4fafd` | 5.88:1 | AA |
| `#17253d` | `#ffffff` | 15.35:1 | AAA |
| `#17253d` | `#fff9f5` | 14.7:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(6, 22, 31) 0px, rgb(9, 31, 44) 49.99%, rgb(0, 50, 89) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Segoe UI Variable Text | `--font-body` | system | 400, 600, 500 | Body copy, navigation, buttons, and links. | Inter |
| Segoe UI | `--font-segoe-ui` | system | 400 | Small navigation labels and captions. | Arial |
| Segoe UI Variable Display | `--font-display` | system | 500, 600 | Display headlines and section headings. | Inter |

- **Segoe UI Variable Text:** Mostly regular body text with semibold actions; compact tracking keeps controls crisp.
- **Segoe UI:** Used for compact utility text; understated weight and small, readable treatment.
- **Segoe UI Variable Display:** Medium or semibold weights, tight negative tracking, sentence case or product-name uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.403, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 500 | 1.16 | -0.025em | — | Segoe UI Variable Display | Large campaign headline treatment, led by the Surface launch. |
| h1 | 48px | 500 | 1.17 | -0.025em | — | Segoe UI Variable Display | Primary hero and major page-section headings. |
| h2 | 32px | 500 | 1.25 | -0.025em | — | Segoe UI Variable Display | Secondary feature and section titles. |
| h3 | 20px | 600 | 1.4 | -0.015em | — | Segoe UI Variable Display | Product-card titles and editorial story headings. |
| body | 16px | 400 | 1.5 | -0.03em | — | Segoe UI Variable Text | Product descriptions, supporting copy, and article summaries. |
| caption | 11px | 400 | 1.45 | -0.044em | — | Segoe UI | Compact labels and tertiary supporting information. |
| button | 15px | 600 | 1.47 | -0.02em | — | Segoe UI Variable Text | Shopping, preorder, and discovery actions. |
| nav | 11px | 400 | 1.45 | -0.044em | — | Segoe UI | Header navigation and utility labels. |
| link | 15px | 600 | 1.47 | -0.02em | — | Segoe UI Variable Text | Text-based calls to action and story links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 11, 12, 15, 16, 24, 32, 36, 48, 96 px.
- Section rhythm 48px · element gap 16px · card padding — · max content width 1296px.

A wide, centered desktop composition sits within a measured page maximum of 1296px, while campaign media can run full bleed. The opening hero centers its message over product imagery; later product features alternate between split layouts and image-led sections. A comfortable rhythm separates the major bands, with denser card grids and shopping links grouped into clear modules. Alignment shifts by purpose: centered campaign headlines, left-aligned product details, and aligned columns for editorial content.

## Shape & elevation

- Radius: button `8px` · card `24px` · media `16px` · link `8px` · xs `4px` · sm `8px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `hairline` (button, link): `rgba(0, 0, 0, 0.12) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px`
- Shadow `sm` (card, other, section): `rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px`

Keep most interface surfaces flat, using thin #e7e7e7 borders to define cards and subtle measured shadows to lift product and story cards. Rounded card corners soften the commerce modules, while the hero achieves depth through image lighting and layered media rather than interface shadow. Avoid heavy outlines or stacked floating panels.

## Imagery

Use large, polished product photography and cinematic campaign media as the focal point. The hero frames a Surface laptop against a nearly black scene, while later sections show a compact device and close-up technology imagery in clean split layouts. Product and editorial cards use contained imagery with deliberate crops. Dark tones in screenshots are primarily photographic campaign content, not a cue to make the entire interface dark.

## Components

### Global navigation

A compact white horizontal header with Microsoft branding, product categories, utility links, search, cart, sign-in, and a circular profile control.

### Campaign hero

Full-width dark product media with centered preorder label, uppercase launch headline, concise copy, and paired contrasting actions.

### Product split feature

A pale, full-width product section placing left-aligned title, descriptive copy, and action opposite a large device image.

### Dark feature banner

A cinematic technology image paired with a concise text block and a simple outline-style action.

### Product card carousel

Rounded, softly elevated product cards with image-led tops, brief title, small category label, and a compact preorder action.

### Category shortcuts

A horizontal row of simple line icons and underlined links for Surface, Microsoft 365, Xbox, PC discovery, accessories, and business.

### Editorial cards

Three-column story cards with image, heading, short summary, and blue action links on a pale background.

### Footer link directory

Multi-column groups of compact links on a light-gray band, followed by locale, privacy, and legal links.

### Measured component styles

- **Primary button** (“Shop XBOX Series S”): background #0078d4 · text #ffffff · radius 8px · padding 8px 16px · 600 15px Segoe UI Variable Text · shadow rgba(0, 0, 0, 0.12) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px
- **Secondary button** (“Help me choose a PC”): background #efefef · text #000000 · border 2px outset #000000 · radius 0px · padding 1px 6px · 400 16px Segoe UI Variable Text
- **Link** (“Pre-order now”): transparent background · text #0e1726 · radius 8px · padding 8px 16px · 600 15px Segoe UI Variable Text · shadow rgba(0, 0, 0, 0.12) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px
- **Input**: background #ffffff · text #000000 · border 2px inset #767676 · radius 0px · padding 1px 2px · 400 16px Segoe UI Variable Text
- **Card** (“Think big, travel light Our lightest Sur”): background #ffffff · text #17253d · radius 24px · padding 0px · 400 16px Segoe UI Variable Text · shadow rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px
- **Navigation item** (“Microsoft 365 Azure Copilot Windows Surf”): transparent background · text #262626 · radius 0px · padding 0px · 400 16px Segoe UI Variable Text

## Do

- Keep the main page canvas white and section backgrounds softly varied.
- Use dark campaign media selectively for launch and feature storytelling.
- Set headlines in Segoe UI Variable Display with restrained, tight tracking.
- Use #0078d4 for high-priority shopping actions.
- Build browsing content from clear, rounded product and editorial cards.
- Maintain a calm, generous rhythm between major sections.

## Don't

- Do not turn the entire interface into a dark theme.
- Do not treat colors sampled from product imagery as core brand UI colors.
- Do not use bright blue as a large decorative background.
- Do not crowd the hero with extra navigation or decorative badges.
- Do not add heavy shadows or thick borders to every card.
- Do not make all content centered; align product and editorial details to their modules.

## Agent prompt

Build a new Microsoft-style page using a bright, spacious interface and product-led storytelling. Use Gallery White (#ffffff) as the main canvas, Cloud Tint (#f4fafd) or Warm Porcelain (#fff9f5) for soft section bands, and Ink Navy (#0e1726) for primary headings. Reserve Campaign Black (#000000) and the Midnight Teal (#06161f) to Night Blue (#003259) gradient for cinematic media sections, not the whole UI. Use Action Blue (#0078d4) for key calls to action and Hairline Gray (#e7e7e7) for subtle dividers. Set display headings in Segoe UI Variable Display, body and controls in Segoe UI Variable Text. Alternate full-bleed imagery with clean split features, rounded shopping cards, and concise editorial grids. Keep navigation compact, spacing comfortable, and shadows subtle.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark campaign image with centered headline, copy, and paired actions. | Preorder entry point, Two audience-specific actions | Cinematic dark media, Centered white typography, Contrasting CTA pair |
| 2 | product-showcase | Full-width pale split section with copy on the left and product image on the right. | Product discovery, Preorder action | Pale background, Left-aligned details, Large isolated product image |
| 3 | feature-split | Dark image-led split with technology media opposite a text block. | Benefit explanation, Learn-more link | Dark cinematic band, Technology close-up, Compact text and action |
| 4 | content-feed | Centered section heading followed by a three-column image and story-card grid. | Browse stories, Open related reports or articles | Pale cool surface, Rounded cards, Image-led editorial modules |
| 5 | feature-grid | Two-column editorial features with broad image-and-copy modules. | Explore featured stories, Follow contextual calls to action | Mixed image and text panels, Open white space, Simple blue actions |
| 6 | footer | Light-gray footer with several link columns and a compact legal row. | Browse site destinations, Access legal and locale settings | Multi-column link directory, Small muted text, Low-contrast footer surface |

## Source CSS custom properties (selected)

```css
--ds-spacing-1: .125rem;
--ds-spacing-3xs: .125rem;
--ds-spacing-2: .25rem;
--ds-spacing-2xs: .25rem;
--ds-spacing-3: .5rem;
--ds-spacing-xs: .5rem;
--ds-spacing-4: .75rem;
--ds-spacing-s: .75rem;
--ds-spacing-5: 1rem;
--ds-spacing-m: 1rem;
--ds-spacing-6: 1.5rem;
--ds-spacing-l: 1.5rem;
--ds-spacing-7: 2rem;
--ds-spacing-xl: 2rem;
--ds-spacing-8: 3rem;
--ds-spacing-2xl: 3rem;
--ds-spacing-9: 4.5rem;
--ds-spacing-3xl: 4.5rem;
--ds-spacing-10: 6rem;
--ds-spacing-4xl: 6rem;
--ds-blur-glass-background: rgba(255,255,255,0.05);
--ds-border-width-xs: .0625rem;
--ds-border-width-s: .125rem;
--ds-border-width-m: .25rem;
--ds-border-width-l: .5rem;
--ds-elevation-color-1: rgba(0,0,0,0.12);
--ds-elevation-color-2: rgba(0,0,0,0.14);
--ds-elevation-level-1: 0 0 .125rem rgba(0,0,0,0.12),0 .063rem .125rem rgba(0,0,0,0.14);
--ds-elevation-level-2: 0 0 .125rem rgba(0,0,0,0.12),0 .125rem .25rem rgba(0,0,0,0.14);
--ds-elevation-level-3: 0 0 .125rem rgba(0,0,0,0.12),0 .25rem .5rem rgba(0,0,0,0.14);
--ds-elevation-level-4: 0 0 .125rem rgba(0,0,0,0.12),0 .5rem 1rem rgba(0,0,0,0.14);
--ds-elevation-level-5: 0 0 .5rem rgba(0,0,0,0.12),0 .875rem 1.75rem rgba(0,0,0,0.14);
--ds-elevation-level-6: 0 0 .5rem rgba(0,0,0,0.12),0 2rem 4rem rgba(0,0,0,0.14);
--ds-font-family-segoe-variable-display: "Segoe UI Variable Display","Segoe UI",segoeui,"Helvetica Neue",helvetica,arial,sans-serif;
--ds-font-family-segoe-variable-text: "Segoe UI Variable Text","Segoe UI",segoeui,"Helvetica Neue",helvetica,arial,sans-serif;
--ds-font-family-segoe-variable-small: "Segoe UI Variable Small","Segoe UI",segoeui,"Helvetica Neue",helvetica,arial,sans-serif;
--ds-body-font-weight: 400;
--ds-body-font-size: 1rem;
--ds-body-letter-spacing: -0.03em;
--ds-heading-3xl-font-weight: 400;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/microsoft-com