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

# Microsoft AI · Design System

> Humanist intelligence in a warm editorial frame

**Theme:** light · **Industry:** ai · **Source:** https://microsoft.ai/ · **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 AI pairs a restrained, bookish editorial system with a painterly, peach-toned hero. Warm ivory space, literary serif headlines, and compact monospace navigation make the models and ideas feel considered rather than technical.

## North star

Use warm, spacious editorial typography as the interface; reserve saturated color for expressive artwork.

## Overview

The page builds its identity around a warm ivory canvas (#fef9ed) and dark, muted brown text (#5d524b), with near-white and pale cream surfaces creating subtle shifts between content areas. A peach surface appears as a supporting section color, while the opening viewport is defined by a much more vivid peach-and-terracotta painted image; treat those saturated colors as hero artwork, not as the general interface palette. Bradford LL supplies large, high-contrast serif headlines and product names, balanced by Red Hat Mono for navigation, labels, metadata, and buttons. The composition favors narrow, centered editorial content and generous vertical breathing room. Model news appears as image-led cards, followed by a quiet, structured model list. Rounded pill actions are small punctuation in an otherwise largely flat, borderless interface. Keep text tones warm and avoid introducing unmeasured colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Umber | `#5d524b` | `--color-soft-umber` | brand | Primary text, navigation, headlines, links, and the dark All models action. |
| Warm Ivory | `#fef9ed` | `--color-warm-ivory` | surface | Dominant page canvas and the quiet background spanning most sections. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Secondary light surface and the inset navigation bar in the hero. |
| Oat Cream | `#f7f1e3` | `--color-oat-cream` | surface | Soft card and navigation surfaces, separating content without strong borders. |
| Peach Tint | `#fbd3be` | `--color-peach-tint` | accent | A limited warm section surface; distinct from the more saturated peach hero artwork. |

### Semantic aliases

`--color-canvas` → `#fef9ed` (Warm Ivory) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#f7f1e3` (Oat Cream) · `--color-surface-3` → `#fbd3be` (Peach Tint) · `--color-text` → `#5d524b` (Soft Umber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#5d524b` | `#fef9ed` | 7.21:1 | AAA |
| `#5d524b` | `#ffffff` | 7.57:1 | AAA |
| `#5d524b` | `#f7f1e3` | 6.72:1 | AA |
| `#5d524b` | `#fbd3be` | 5.47:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Bradford LL | `--font-display` | webfont | 450, 400 | Editorial display and heading type, used for hero messaging, section titles, and model names. | Cormorant Garamond |
| Red Hat Mono | `--font-mono` | webfont | 500, 400 | Navigation, buttons, captions, metadata, and compact supporting text. | Red Hat Mono |

- **Bradford LL:** Use refined, lightly weighted serif forms; measured headings use negative tracking and natural sentence case.
- **Red Hat Mono:** Keep labels small, tightly tracked, and sentence case; use medium weight for clear utility text.

### Type scale — Golden Ratio (ratio ≈ 1.561, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 125px | 450 | 1 | -0.04em | — | Bradford LL | Large hero-scale serif statement. |
| h1 | 57px | 400 | 1 | -0.004em | — | Bradford LL | Primary page or feature headline. |
| h2 | 48px | 450 | 1.2 | -0.03em | — | Bradford LL | Major section heading and prominent editorial statement. |
| h3 | 42.5px | 450 | 1.12 | -0.02em | — | Bradford LL | Secondary feature and content-card heading. |
| h4 | 37.5px | 450 | 1 | -0.02em | — | Bradford LL | Smaller model and subsection heading. |
| body | 13.5px | 500 | 1 | -0.016em | — | Red Hat Mono | Compact monospace body and interface copy. |
| caption | 11.5px | 500 | 1.6 | -0.018em | — | Red Hat Mono | Reading time, model labels, and small metadata. |
| button | 14px | 500 | 1 | -0.015em | — | Red Hat Mono | Monospace text on pill-shaped actions. |
| nav | 13.5px | 500 | 1 | -0.016em | — | Red Hat Mono | Compact monospace navigation links. |
| link | 48px | 450 | 1.2 | -0.03em | — | Bradford LL | Large serif editorial links and model titles. |
| code | 11.5px | 500 | 1.6 | -0.018em | — | Red Hat Mono | Small monospace technical or metadata text. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 8, 9, 10, 12, 13, 14, 15, 17, 22, 25, 30, 33, 43, 117 px.
- Section rhythm 120px · element gap 12px · card padding 13px · max content width 683px.

A long, vertically paced page keeps the canvas mostly uninterrupted and uses centered editorial blocks among left-aligned news and model content. The measured content max width is 683px; preserve narrow reading widths inside broad page margins. News cards form a three-column band, while the model area uses two columns and repeated rows. Large section gaps create a spacious, low-density rhythm. Center the hero statement and values content; align card copy and model details to the start.

## Shape & elevation

- Radius: button `9999px` · card `4px` · nav `2px` · link `2px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · pill `9999px`
- Shadow `lg` (other): `rgba(93, 82, 75, 0.3) 0px 4px 40px 0px`
- Motion: standard transition `0.6s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The interface is largely flat, with no prominent borders or divider rules. Separate areas through canvas and cream-surface contrast, generous whitespace, and occasional inset cards. The measured shadow is a soft, diffuse umber cast; reserve it for subtle emphasis rather than applying elevation broadly. Pill buttons are the main rounded UI element.

## Imagery

The hero is dominated by full-bleed painterly peach and terracotta strokes, with centered light serif text over the image. Below it, news cards use cropped, colorful editorial imagery, including a blue field with oversized punctuation and abstract model visuals. Small model illustrations sit beside product names. Use imagery as expressive content, not as a source for interface colors; keep crops deliberate and layouts calm.

## Components

### Inset navigation

A light, softly rounded horizontal bar over the hero, with a compact brand mark, centered monospace links, and a right-aligned editorial destination.

### Hero statement

Full-bleed painterly artwork supports a centered, oversized Bradford LL serif headline and a short supporting line.

### Featured news card

Large image-led card with an inset light caption panel, serif story title, and small monospace category and reading-time metadata.

### News card rail

Three-column band of model and research stories, using image-and-copy cards with subdued cream surfaces and small metadata.

### Model list

A spacious two-column presentation of model rows, combining small illustrative marks, serif model names, compact descriptions, and pill-shaped Learn more actions.

### Pill actions

Monospace button labels on rounded pills; use pale cream for secondary actions and Soft Umber (#5d524b) with a light label for the primary action.

### Values list

A centered serif section heading introduces a vertically arranged list of values, surrounded by ample Warm Ivory (#fef9ed) space.

### Measured component styles

- **Primary button** (“Learn more”): background #f7ecd9 · text #5d524b · radius 28.4444px · padding 14.2px 42.7px · 500 14.2222px Red Hat Mono
- **Secondary button** (“MAI-Code-1.1-Flash”): background #fbf0dc · text #5d524b · radius 0px · padding 5px 15px 5px 5px · 450 0px Bradford LL
- **Link** (“MAI-Code-1.1-Flash”): transparent background · text #5d524b · radius 0px · padding 0px · 450 48px Bradford LL
- **Card** (“MAI-Transcribe-2 is the fastest, most ac”): background #f7f1e3 · text #5d524b · radius 4.16667px · padding 25px 0px · 450 21.3333px Bradford LL
- **Navigation item** (“Models Latest models Discover the latest”): transparent background · text #5d524b · radius 0px · padding 0px · 450 0px Bradford LL

## Do

- Keep Warm Ivory (#fef9ed) as the dominant canvas.
- Use Soft Umber (#5d524b) for interface text and links.
- Pair expressive Bradford-style serifs with compact monospace utility text.
- Give headlines and section transitions generous breathing room.
- Use hero artwork for vivid peach and terracotta color.
- Keep cards quiet, image-led, and lightly surfaced.

## Don't

- Do not spread saturated hero-art colors across the interface.
- Do not add strong borders or heavy card shadows.
- Do not replace the editorial serif with a generic geometric sans.
- Do not make navigation or metadata oversized.
- Do not pack the page into dense dashboards or tight grids.
- Do not invent additional palette colors.

## Agent prompt

Build a new page in Microsoft AI’s warm editorial style. Use Warm Ivory (#fef9ed) as the main canvas and Soft Umber (#5d524b) for text, links, and primary actions. Set display headlines and model names in a Bradford LL-like literary serif, with Red Hat Mono-style monospace for navigation, metadata, captions, and buttons. Use Paper White (#ffffff) and Oat Cream (#f7f1e3) as restrained surface changes; Peach Tint (#fbd3be) is a limited accent, not a substitute for the vivid painted hero artwork. Compose a centered, image-led opening, narrow readable content blocks, quiet story cards, and spacious model rows. Favor flat surfaces, soft pill actions, and generous vertical whitespace. Keep the layout calm and editorial; avoid decorative borders, dense panels, and invented colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed artwork with a centered serif message and an inset horizontal navigation bar. | Primary brand introduction, Top-level navigation | Painterly peach hero image, Light inset nav, Centered serif headline |
| 2 | content-feed | Single centered feature card within the warm canvas. | Featured story link, Reading-time metadata | Large editorial image, Inset caption panel, Serif story title |
| 3 | feature-grid | Three-column editorial card band with image and copy. | Browse model news, Story links | Image-led cards, Cream card surfaces, Small reading-time labels |
| 4 | other | Centered section heading with generous surrounding whitespace. | Introduce model directory | Centered serif heading, Open canvas |
| 5 | product-showcase | Spacious two-column arrangement of repeated model rows. | Explore models, Learn-more links | Small model illustrations, Serif model names, Rounded pill actions |
| 6 | other | Centered statement and supporting copy in a narrow reading column. | Communicate mission | Centered serif statement, Minimal supporting text |
| 7 | other | Centered section heading with values arranged in a six-column structure. | Present organizational values | Serif value labels, Simple icon marks, Wide whitespace |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--alias-easeOut: cubic-bezier(.43, .195, .02, 1);
--alias-easeIn: cubic-bezier(.98, 0, .57, 0);
--alias-easeOutQuint: cubic-bezier(.23, 1, .32, 1);
--alias-easeOut2: cubic-bezier(.9, .1, .15, 1.05);
--alias-easeOut3: cubic-bezier(.63, .195, .01, 1);
--alias-easeOutSlow: cubic-bezier(.43, .195, .02, 1);
--alias-easeOutSnap: cubic-bezier(.835, .085, .005, 1);
--alias-easeOutUnspun: cubic-bezier(.745, .065, .17, 1);
--alias-easeOutCubic: cubic-bezier(.215, .61, .355, 1);
--text-color: #5d524b;
--background-color: #fef9ed;
--font-sans: "Red Hat Mono", Arial, sans-serif;
```

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