微软首页将沉浸式产品宣传、便捷购物入口与编辑式内容结合起来。明亮的购物区块与深色产品视觉交替呈现，并以统一的字体和克制的边框保持整体连贯。
North star · Let product imagery set the mood, while a clean white interface and restrained blue actions keep every path to discovery clear.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
Action Blue
#0078d4
Primary shopping and action buttons, including the Xbox product call to action.
Slate Blue
#2a446f
Secondary blue accent for button or text details; use sparingly.
Night Blue
#003259
Gradient endpoint and deep blue accent in dark feature treatment.
Link Blue
#0067b8
Text-link blue used for restrained inline navigation.
表层色
Gallery White
#ffffff
Main canvas, navigation, cards, and open areas around product content.
Warm Porcelain
#fff9f5
Soft warm section background behind selected content.
Cloud Tint
#f4fafd
Cool pale background for shopping and AI content sections.
Midnight Teal
#06161f
First stop in the measured dark section gradient; use for cinematic feature bands.
Deep Teal
#091f2c
Middle stop in the measured dark section gradient.
Soft Gray
#f2f2f2
Neutral interface surface, including portions of the footer and secondary controls.
中性色
Quiet Gray
#616161
Muted navigation, headings, and footer text.
Hairline Gray
#e7e7e7
Fine card and control borders that separate elements without heavy framing.
功能色
Deep Slate
#17253d
Muted body copy in product cards and supporting interface text.
Campaign Black
#000000
Dark campaign areas, contrast text, and inverse controls; prominent in hero imagery.
Ink Navy
#0e1726
Primary heading and link text on light backgrounds.
Ice Blue
#e6f2fb
Pale blue text accent appearing in content; not a defining canvas color.
文字 背景 对比度 WCAG #0e1726 Ink Navy#ffffff Gallery White17.96:1 AAA #0e1726 Ink Navy#fff9f5 Warm Porcelain17.21:1 AAA #0e1726 Ink Navy#000000 Campaign Black1.17:1 不达标 #0e1726 Ink Navy#f4fafd Cloud Tint17.05:1 AAA #616161 Quiet Gray#ffffff Gallery White6.19:1 AA #616161 Quiet Gray#fff9f5 Warm Porcelain5.93:1 AA
字体 字号阶梯：Augmented Fourth（比例约 1.403，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Segoe UI Variable Text 系统字体 · 字重 400 / 600 / 500 · 占比 52%
免费替代：Inter
Body copy, navigation, buttons, and links.
Aa 设计
Segoe UI 系统字体 · 字重 400 · 占比 33%
免费替代：Arial
Small navigation labels and captions.
Aa 设计
Segoe UI Variable Display 系统字体 · 字重 500 / 600 · 占比 15%
免费替代：Inter
Display headlines and section headings.
角色 示例 字号 字重 行高 字距 特大标题 Large campaign headline treatment, led by the Surface launch.
Microsoft
62px 500 1.16 -0.025em 一级标题 Primary hero and major page-section headings.
Microsoft
48px 500 1.17 -0.025em 二级标题 Secondary feature and section titles.
Microsoft
32px 500 1.25 -0.025em 三级标题 Product-card titles and editorial story headings.
The quick brown fox 敏捷的狐狸
20px 600 1.4 -0.015em 正文 Product descriptions, supporting copy, and article summaries.
The quick brown fox 敏捷的狐狸
16px 400 1.5 -0.03em 辅助文字 Compact labels and tertiary supporting information.
The quick brown fox 敏捷的狐狸
11px 400 1.45 -0.044em 按钮 Shopping, preorder, and discovery actions.
The quick brown fox 敏捷的狐狸
15px 600 1.47 -0.02em 导航 Header navigation and utility labels.
The quick brown fox 敏捷的狐狸
11px 400 1.45 -0.044em 链接 Text-based calls to action and story links.
The quick brown fox 敏捷的狐狸
15px 600 1.47 -0.02em
间距与布局 基准单位 8px · 密度：适中
48px 版块间距
16px 元素间距
— 卡片内边距
1296px 内容最大宽度
1px
2px
4px
6px
8px
11px
12px
15px
16px
24px
32px
36px
48px
96px
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.
圆角与层次 hairline · button, link
sm · card, other, section
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 6 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 | ` | `--color-gallery-white` | surface | Main canvas, navigation, cards, and open areas around product content. |
| Action Blue | ` | `--color-action-blue` | accent | Primary shopping and action buttons, including the Xbox product call to action. |
| Quiet Gray | ` | `--color-quiet-gray` | neutral | Muted navigation, headings, and footer text. |
| Slate Blue | ` | `--color-slate-blue` | accent | Secondary blue accent for button or text details; use sparingly. |
| Deep Slate | ` | `--color-deep-slate` | semantic | Muted body copy in product cards and supporting interface text. |
| Warm Porcelain | ` | `--color-warm-porcelain` | surface | Soft warm section background behind selected content. |
| Campaign Black | ` | `--color-campaign-black` | semantic | Dark campaign areas, contrast text, and inverse controls; prominent in hero imagery. |
| Hairline Gray | ` | `--color-hairline-gray` | neutral | Fine card and control borders that separate elements without heavy framing. |
| Cloud Tint | ` | `--color-cloud-tint` | surface | Cool pale background for shopping and AI content sections. |
| Ink Navy | ` | `--color-ink-navy` | semantic | Primary heading and link text on light backgrounds. |
| Midnight Teal | ` | `--color-midnight-teal` | surface | First stop in the measured dark section gradient; use for cinematic feature bands. |
| Deep Teal | ` | `--color-deep-teal` | surface | Middle stop in the measured dark section gradient. |
| Night Blue | ` | `--color-night-blue` | accent | Gradient endpoint and deep blue accent in dark feature treatment. |
| Ice Blue | ` | `--color-ice-blue` | semantic | Pale blue text accent appearing in content; not a defining canvas color. |
| Link Blue | ` | `--color-link-blue` | accent | Text-link blue used for restrained inline navigation. |
| Soft Gray | ` | `--color-soft-gray` | surface | Neutral interface surface, including portions of the footer and secondary controls. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Warm Porcelain) · `--color-surface-2` → ` (Campaign Black) · `--color-surface-3` → ` (Cloud Tint) · `--color-surface-4` → ` (Soft Gray) · `--color-text` → ` (Ink Navy) · `--color-text-muted` → ` (Quiet Gray) · `--color-text-subtle` → ` (Deep Slate) · `--color-border` → ` (Hairline Gray) · `--color-accent` → ` (Action Blue) · `--color-accent-2` → ` (Night Blue) · `--color-accent-3` → ` (Slate Blue) · `--color-on-accent` → ` (Gallery White)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 17.96:1 | AAA |
| ` | ` | 17.21:1 | AAA |
| ` | ` | 1.17:1 | fail |
| ` | ` | 17.05:1 | AAA |
| ` | ` | 6.19:1 | AA |
| ` | ` | 5.93:1 | AA |
| ` | ` | 3.39:1 | AA-large |
| ` | ` | 5.88:1 | AA |
| ` | ` | 15.35:1 | AAA |
| ` | ` | 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 ## 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 ## 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 ## 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 (## 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
