Microsoft
MIT
Clean, professional design system with Segoe UI typography and subtle greys—built for enterprise SaaS and corporate web platforms
Colour (28)
color.alertbgvar(--microsoft-surface-subtle)
color.linkcolorvar(--microsoft-accent)
color.alertcolorvar(--microsoft-text-primary)
color.btndefaultbgvar(--microsoft-surface-muted)
color.btnprimarybgvar(--microsoft-accent)
color.primitiveblackrgb(0, 0, 0)
color.primitivewhitergb(255, 255, 255)
color.brandprimaryctargb(0, 103, 184)
color.btndefaultcolorvar(--microsoft-text-primary)
color.btnprimarycolorvar(--microsoft-text-on-accent)
color.microsoftaccentrgb(0, 103, 184)
color.microsoftsurfacergb(255, 255, 255)
color.primitiveblue600rgb(0, 103, 184)
color.primitivebluealtrgb(58, 160, 250)
color.primitivegrey100rgb(235, 235, 235)
color.primitivegrey200rgb(242, 242, 242)
color.primitivegrey800rgb(38, 38, 38)
color.btnprimaryhoverbgvar(--microsoft-accent)
color.primitivebluedarkrgb(36, 58, 94)
color.primitivebluelightrgb(80, 230, 255)
color.microsoftbordernone0px none
color.microsofttextprimaryrgb(0, 0, 0)
color.microsoftbordersubtle1px solid rgb(200,200,200)
color.microsoftsurfacemutedrgb(235, 235, 235)
color.microsofttextonaccentrgb(255, 255, 255)
color.microsoftborderdefault1px solid rgb(38,38,38)
color.microsoftsurfacesubtlergb(242, 242, 242)
color.microsofttextsecondaryrgb(38, 38, 38)
Spacing (22)
spacing.defaultplaybuttonspacing$carousel-control-min-size * 2.5
spacing.spacexs5px
spacing.microsoftspacexs5px
spacing.spacesm12px
spacing.microsoftspacesm12px
spacing.progressindicatorspacing14.25rem
spacing.spacemd16px
spacing.microsoftspacemd16px
spacing.spacelg24px
spacing.microsoftspacelg24px
spacing.spacexl48px
spacing.microsoftspacexl48px
spacing.microsoftspace2xl64px
spacing.space2xl64.8px
spacing.space3xl72px
spacing.microsoftspace3xl72px
spacing.bpxs576px
spacing.bpsm768px
spacing.bpmd992px
spacing.bplg1084px
spacing.bpxl1400px
spacing.containermax1400px
Radius (4)
radiussm2px
microsoftradiussm2px
radiusmd50%
microsoftradiusmd50%
Shadow (6)
effect.shadowsmrgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) 0px 1px 2px 0px
effect.microsoftshadowsmrgba(0,0,0,0.13) 0px 3px 7px 0px, rgba(0,0,0,0.11) 0px 1px 2px 0px
effect.microsoftshadownonenone
effect.microsoftshadowhoverrgba(0,0,0,0.13) 0px 2px 4px 0px, rgba(0,0,0,0.11) 0px 0px 1px 0px
effect.btnprimaryhovershadowrgba(0,0,0,0.13) 0px 2px 4px 0px, rgba(0,0,0,0.11) 0px 0px 1px 0px
effect.microsoftdisabledopacity0.3
# layout.md — Microsoft.com Design System
---
## 0. Quick Reference
> Standalone — copy-paste into `CLAUDE.md` or `.cursorrules`
**Stack:** HTML/CSS + Bootstrap + Tailwind utility classes. Token source: reconstructed-from-computed (2 native CSS vars found; all `--microsoft-*` tokens are synthesised). Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
/* ── Core Tokens ── */
--microsoft-accent: rgb(0, 103, 184); /* Primary CTA, links, focus rings */
--microsoft-text-primary: rgb(0, 0, 0); /* Body, headings */
--microsoft-text-secondary: rgb(38, 38, 38); /* Nav items, dropdowns */
--microsoft-surface: rgb(255, 255, 255); /* Page background */
--microsoft-surface-subtle: rgb(242, 242, 242); /* Alert/banner backgrounds */
--microsoft-surface-muted: rgb(235, 235, 235); /* Default button background */
--microsoft-font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
--microsoft-font-size-xs: 11px;
--microsoft-font-size-sm: 13px;
--microsoft-font-size-md: 14px;
--microsoft-font-size-lg: 15px;
--microsoft-font-size-xl: 16px;
--microsoft-font-size-2xl: 29px;
--microsoft-font-size-3xl: 37px;
--microsoft-font-weight-regular: 400;
--microsoft-font-weight-medium: 600;
--microsoft-space-xs: 5px;
--microsoft-space-sm: 12px;
--microsoft-space-md: 16px;
--microsoft-space-lg: 24px;
--microsoft-space-xl: 48px;
--microsoft-space-2xl: 64px; /* rounded from 64.8px */
--microsoft-space-3xl: 72px;
--microsoft-radius-sm: 2px; /* Buttons, inputs, cards */
--microsoft-radius-md: 50%; /* Avatar / circular elements only */
--microsoft-shadow-sm: rgba(0,0,0,0.13) 0px 3px 7px 0px, rgba(0,0,0,0.11) 0px 1px 2px 0px;
--microsoft-duration-fast: 0.2s;
--microsoft-ease-default: ease;
```
```tsx
// Primary CTA Button — production-ready
export const PrimaryButton = ({ children, disabled, onClick }) => (
<button
onClick={onClick}
disabled={disabled}
className="btn btn-primary"
style={{
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-lg)',
fontWeight: 'var(--microsoft-font-weight-regular)',
backgroundColor: 'var(--microsoft-accent)',
color: 'var(--microsoft-surface)',
borderRadius: 'var(--microsoft-radius-sm)',
padding: '12px 24px',
border: 'none',
transition: `all var(--microsoft-duration-fast) var(--microsoft-ease-default)`,
opacity: disabled ? 0.3 : 1,
cursor: disabled ? 'default' : 'pointer',
}}
>
{children}
</button>
);
```
**NEVER rules:**
- NEVER use `Inter`, `Roboto`, or `Arial` as the primary font — always `"Segoe UI", SegoeUI` first
- NEVER use border-radius > `2px` on buttons, cards, or inputs (only `50%` for avatar circles)
- NEVER use spacing values not in the `--microsoft-space-*` scale
- NEVER hardcode `rgb(0,103,184)` — always `var(--microsoft-accent)`
- NEVER apply hover/focus states without the `linear-gradient(rgba(0,0,0,0.1),…)` overlay pattern
- NEVER set `opacity` on disabled elements to anything other than `0.3`
- NEVER use `outline: none` on focused elements — Microsoft uses `0.1875rem dotted currentcolor`
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Mood
Microsoft.com expresses **corporate clarity with functional restraint**. The aesthetic is clean, high-contrast, and content-forward — information density is prioritised over decorative flourishes. The visual language is derived from Microsoft's Fluent Design System: generous whitespace, flat surfaces, and minimal ornamentation.
### What this design IS:
- **Flat and structural.** Surfaces are white or near-white (`#f2f2f2`). Depth is expressed through shadow, not colour gradients.
- **Typographically driven.** Segoe UI at multiple weights carries all hierarchy — no display typefaces, no decorative serifs.
- **Action-oriented.** The Microsoft blue (`rgb(0,103,184)`) is used exclusively for actionable elements: CTAs, links, and interactive states. It does not appear as a decorative colour.
- **Accessible by default.** Focus rings are always visible (`0.1875rem dotted currentcolor`). Disabled states use `opacity: 0.3` without hiding affordance.
### What this design explicitly REJECTS:
- **Rounded buttons.** Buttons are sharp-cornered (`border-radius: 2px`), not pill-shaped. This is a deliberate Fluent UI signal.
- **Warm colour palettes.** No amber, orange, or warm neutrals in the base system.
- **Decorative imagery as layout.** Cards and sections use whitespace, not background images, to create visual separation.
- **Heavy shadows.** Only one shadow token exists (`--microsoft-shadow-sm`) — it is used sparingly on hover states.
- **Gradient backgrounds.** Section backgrounds are flat. Hover overlays use `linear-gradient(rgba(0,0,0,0.1),…)` — this is a functional overlay, not decorative.
---
## 2. Colour System
### Tier 1 — Primitive Values
```css
/* Primitives — raw colour values, not used directly in components */
--primitive-blue-600: rgb(0, 103, 184); /* Microsoft brand blue */
--primitive-blue-alt: rgb(58, 160, 250); /* Light-theme alt primary (from hover CSS) */
--primitive-blue-dark: rgb(36, 58, 94); /* Dark variant blue (from hover CSS) */
--primitive-blue-light: rgb(80, 230, 255); /* Light variant blue (from hover CSS) */
--primitive-black: rgb(0, 0, 0);
--primitive-grey-100: rgb(235, 235, 235); /* Lightest surface / default button bg */
--primitive-grey-200: rgb(242, 242, 242); /* Alert / banner surface */
--primitive-grey-800: rgb(38, 38, 38); /* Secondary text, nav items */
--primitive-white: rgb(255, 255, 255);
```
### Tier 2 — Semantic Aliases
```css
/* Semantic — apply these in all component and layout code */
/* Backgrounds */
--microsoft-surface: rgb(255, 255, 255); /* Page and card backgrounds */
--microsoft-surface-subtle: rgb(242, 242, 242); /* Alert banners, subdued panels */
--microsoft-surface-muted: rgb(235, 235, 235); /* Default button fill */
/* Text */
--microsoft-text-primary: rgb(0, 0, 0); /* All headings, body copy */
--microsoft-text-secondary: rgb(38, 38, 38); /* Nav labels, dropdown text, subdued copy */
--microsoft-text-on-accent: rgb(255, 255, 255); /* Text on --microsoft-accent backgrounds */
/* Action / Interactive */
--microsoft-accent: rgb(0, 103, 184); /* Primary CTAs, links, focus ring colour */
--microsoft-accent-hover-overlay: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); /* Hover darkener on filled btns */
--microsoft-accent-outline-hover: linear-gradient(rgba(0,103,184,0.15), rgba(0,103,184,0.15)); /* Outline btn hover fill */
/* Focus */
--microsoft-focus-outline: 0.1875rem dotted currentcolor; /* All focusable elements */
--microsoft-focus-offset: -0.375rem; /* .btn:focus outline-offset */
/* State */
--microsoft-disabled-opacity: 0.3; /* All disabled interactive elements */
```
### Tier 3 — Component Tokens
```css
/* Component-specific — reference semantic tokens above */
/* Primary Button */
--btn-primary-bg: var(--microsoft-accent);
--btn-primary-color: var(--microsoft-text-on-accent);
--btn-primary-hover-bg: var(--microsoft-accent);
--btn-primary-hover-overlay: var(--microsoft-accent-hover-overlay);
--btn-primary-hover-shadow: rgba(0,0,0,0.13) 0px 2px 4px 0px, rgba(0,0,0,0.11) 0px 0px 1px 0px;
/* Default/Secondary Button */
--btn-default-bg: var(--microsoft-surface-muted);
--btn-default-color: var(--microsoft-text-primary);
/* Link */
--link-color: var(--microsoft-accent);
--link-decoration: underline;
/* Alert / Banner */
--alert-bg: var(--microsoft-surface-subtle);
--alert-color: var(--microsoft-text-primary);
```
### Colour Usage Table
| Token | Value | Usage |
|---|---|---|
| `--microsoft-accent` | `rgb(0,103,184)` | CTAs, links, active states, focus rings |
| `--microsoft-surface` | `rgb(255,255,255)` | Page bg, card bg, modal bg |
| `--microsoft-surface-subtle` | `rgb(242,242,242)` | Alert/cookie banners, subdued sections |
| `--microsoft-surface-muted` | `rgb(235,235,235)` | Default/secondary button backgrounds |
| `--microsoft-text-primary` | `rgb(0,0,0)` | Headings H1–H3, body, card text |
| `--microsoft-text-secondary` | `rgb(38,38,38)` | Nav labels, dropdowns, footer text |
---
## 3. Typography System
**Primary font: `"Segoe UI", SegoeUI` — NEVER substitute Inter, Roboto, or Arial as primary.**
### Font Stack
```css
--microsoft-font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Body context (slightly reduced stack): */
--microsoft-font-family-body: "Segoe UI", SegoeUI, Arial, sans-serif;
/* Icon font — do not use for text: */
--microsoft-font-family-icons: "MWF-FLUENT-ICONS";
```
### Weight Scale
```css
--microsoft-font-weight-thin: 100; /* SegoeUI light variant */
--microsoft-font-weight-semilight: 200; /* SegoeUI semilight */
--microsoft-font-weight-regular: 400; /* Body, links, nav, default buttons */
--microsoft-font-weight-medium: 600; /* Headings H1–H3, semibold labels, CTA buttons in cls_btn */
--microsoft-font-weight-bold: 700; /* SegoeUI bold — use sparingly */
```
### Composite Typography Tokens
| Role | font-family | font-size | font-weight | line-height | letter-spacing |
|---|---|---|---|---|---|
| **Heading 1** | `--microsoft-font-family` | `37px` | `600` | `44.4px` | `normal` |
| **Heading 2 (display)** | `--microsoft-font-family` | `37px` | `600` | `44.4px` | `normal` |
| **Heading 2 (section)** | `--microsoft-font-family` | `15px` | `400` | `20px` | `normal` |
| **Heading 3** | `--microsoft-font-family` | `29px` | `600` | `34.8px` | `normal` |
| **Body / Link** | `--microsoft-font-family` | `16px` | `400` | `24px` | `normal` |
| **Body Small** | `--microsoft-font-family-body` | `13px` | `400` | `19.5px` | `normal` |
| **Nav Item** | `--microsoft-font-family` | `16px` | `400` | `24px` | `normal` |
| **Dropdown / Label** | `--microsoft-font-family` | `13px` | `400` | `19.5px` | `normal` |
| **Caption / Footer** | `--microsoft-font-family` | `11px` | `400` | `normal` | `normal` |
| **Button (primary CTA)** | `--microsoft-font-family` | `15px` | `400` | `20px` | `normal` |
| **Button (cls_btn link-style)** | `--microsoft-font-family` | `16px` | `600` | `16px` | `normal` |
| **Avatar / Badge** | `--microsoft-font-family` | `14px` | `400` | `normal` | `normal` |
```css
/* CSS composite definitions */
.type-h1 {
font-family: var(--microsoft-font-family);
font-size: var(--microsoft-font-size-3xl); /* 37px */
font-weight: var(--microsoft-font-weight-medium); /* 600 */
line-height: 44.4px;
letter-spacing: normal;
margin-bottom: var(--microsoft-space-md); /* 16px — from computed h1 margin */
}
.type-h2-display {
font-family: var(--microsoft-font-family);
font-size: var(--microsoft-font-size-3xl); /* 37px */
font-weight: var(--microsoft-font-weight-medium);
line-height: 44.4px;
letter-spacing: normal;
margin-bottom: var(--microsoft-space-md);
}
.type-h3 {
font-family: var(--microsoft-font-family);
font-size: var(--microsoft-font-size-2xl); /* 29px */
font-weight: var(--microsoft-font-weight-medium);
line-height: 34.8px;
letter-spacing: normal;
margin-bottom: var(--microsoft-space-md);
}
.type-body {
font-family: var(--microsoft-font-family);
font-size: var(--microsoft-font-size-xl); /* 16px */
font-weight: var(--microsoft-font-weight-regular);
line-height: var(--microsoft-line-height-loose); /* 24px */
letter-spacing: normal;
}
.type-body-small {
font-family: var(--microsoft-font-family-body);
font-size: var(--microsoft-font-size-sm); /* 13px */
font-weight: var(--microsoft-font-weight-regular);
line-height: var(--microsoft-line-height-normal); /* 19.5px */
letter-spacing: normal;
}
.type-caption {
font-family: var(--microsoft-font-family);
font-size: var(--microsoft-font-size-xs); /* 11px */
font-weight: var(--microsoft-font-weight-regular);
line-height: normal;
letter-spacing: normal;
}
```
### Pairing Rules
- H1 + H2 at 37px are **visually identical** — distinguish by context (page-level vs section-level), not size
- Section subheadings use 15px/400 (not 37px) — always confirm heading role from DOM, not appearance
- NEVER mix Segoe UI weights within a single line of text — use weight to distinguish hierarchy between elements, not within them
---
## 4. Spacing & Layout
### Base Unit & Scale
```css
/* Base: 4px grid. Note: 5px and 64.8px are off-grid; use 4px and 64px respectively. */
/* reconstructed: high confidence from computed style clustering */
--microsoft-space-xs: 5px; /* Off-grid legacy value — use for internal icon/label gaps only */
--microsoft-space-sm: 12px; /* Tight padding, chip/tag inner spacing */
--microsoft-space-md: 16px; /* Standard paragraph/heading margins, form element spacing */
--microsoft-space-lg: 24px; /* Card internal padding (compact), section sub-gaps */
--microsoft-space-xl: 48px; /* Card internal padding (full: cls_card uses 48px all sides) */
--microsoft-space-2xl: 64px; /* Section vertical rhythm (rounded from 64.8px) */
--microsoft-space-3xl: 72px; /* Large section vertical spacing */
```
### Grid System & Breakpoints
```css
/* Extracted breakpoints — Microsoft uses a dense responsive scale */
/* Canonical Bootstrap-derived breakpoints (primary): */
--bp-xs: 576px; /* Small phones */
--bp-sm: 768px; /* Tablets */
--bp-md: 992px; /* Small desktop */
--bp-lg: 1084px; /* Wide desktop (Microsoft-specific, between Bootstrap md/lg) */
--bp-xl: 1400px; /* Full-width desktop */
/* Additional Microsoft-specific breakpoints (inferred from media query extraction): */
/* 260px, 340px, 425px, 540px, 640px, 700px, 830px, 859px, 860px, 1083px */
/* These appear to handle component-level responsive adjustments, not major layout shifts */
/* Container widths (inferred from bootstrap + 1400px max): */
--container-max: 1400px;
--container-pad: var(--microsoft-space-md); /* 16px side padding */
```
### Layout Principles
```css
/* Navigation row */
.nav-row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--microsoft-space-xs); /* 5px between nav items */
padding: 0;
}
/* Card row (horizontal flex, default) */
.card-row {
display: flex;
flex-direction: row;
padding: 0; /* Cards rely on inner cls_card padding: 48px */
}
/* Content card (vertical, full-padding) */
.content-card {
display: flex;
flex-direction: column;
padding: var(--microsoft-space-xl); /* 48px */
}
/* Alert / Banner strip */
.alert-strip {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: normal;
background-color: var(--microsoft-surface-subtle);
}
/* Dropdown row */
.dropdown-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--microsoft-space-xs); /* 5px */
padding: 1px 8px;
}
```
---
## 5. Page Structure & Layout Patterns
> Derived from LAYOUT DIGEST. No screenshots available. Sections marked **(inferred)** are not visually confirmed.
### 5.1 Section Map
| Order | Section | Layout Type | Approx. Height | Key Elements |
|---|---|---|---|---|
| 1 | **Global Navigation / Header** | `flex row`, full-width, sticky | ~50px | Logo, nav items (flex gap:5px), search, cart, sign-in, avatar |
| 2 | **Alert / Promo Banner** (inferred) | `flex row`, `justify-content: space-between` | ~48px | Short promo text, close button; bg: `rgb(242,242,242)` |
| 3 | **Hero / Feature Section** (inferred) | Full-width, likely flex or grid | ~400–600px | H1 (37px/600), body copy (16px), primary CTA button (`rgb(0,103,184)`) |
| 4 | **Product Card Grid** | `flex row`, wrapping | ~400px | 69 card instances; cards use `padding: 48px`, `flex-direction: column` |
| 5 | **Secondary Feature Section** (inferred) | Full-width, alternating layout | ~300px | H2 (37px), H3 (29px), supporting copy, secondary CTA |
| 6 | **Footer — Link Groups** (inferred) | Multi-column grid | ~200px | H2 section labels (15px), link lists (16px), social follow block |
| 7 | **Footer — Legal / Cookie** (inferred) | `flex row`, full-width | ~48px | Caption text (11px), privacy controls; bg: `rgb(242,242,242)` |
### 5.2 Layout Patterns
**Navigation (extracted):**
- `display: flex`, `flex-direction: row`, `align-items: center`, `gap: 5px`
- Full-width container, `padding: 0` on the nav element itself
- Items use `font-size: 16px`, `color: rgb(38,38,38)`, `line-height: 24px`
**Card Grid (extracted + inferred):**
- Outer container: `display: flex`, `flex-direction: row` — 69 card instances suggest 3–4 columns at desktop widths
- Individual cards (`cls_card`): `display: flex`, `flex-direction: column`, `padding: 48px` all sides
- Cards are `border-radius: 0px` — no rounding. Background is transparent (inherits section bg)
- At `--bp-sm` (768px) cards likely collapse to 1–2 columns (inferred from Bootstrap grid breakpoints)
**Alert Banner (extracted):**
- `display: flex`, `flex-direction: row`, `justify-content: space-between`
- `background-color: rgb(242,242,242)` — matches `--microsoft-surface-subtle`
- Used for cookie consent, promotional alerts, and notification strips
**Button layout:**
- Buttons are `display: inline-block` — they do NOT stretch to fill containers
- Primary CTAs: `padding: 5px` default (from `button_primary` computed), but production CTAs likely use `12px 24px` based on visual CTA prominence
- Button gap from nav context: `gap: 5px` between icon and label in dropdown/nav items
### 5.3 Visual Hierarchy
- **Dominant heading:** H1 at 37px/600 — page-level announcement. Only one per page.
- **Section headings:** H2 at 37px (display sections) OR 15px (footer section labels) — same semantic tag, radically different visual weight.
- **CTA colour anchor:** All primary CTAs use `rgb(0,103,184)` — confirmed on 26 button instances. This is the **only** accent colour in the system.
- **Hover depth signal:** Hover states on filled buttons add `box-shadow` + `linear-gradient(rgba(0,0,0,0.1),…)` overlay — the surface does NOT change colour, only depth increases.
- **Whitespace rhythm:** Sections separated by `48px`–`72px` vertical spacing. Card interiors use `48px` padding — generous internal breathing room.
- **Links are always underlined** and always `rgb(0,103,184)` — no exceptions for nav items within body content.
### 5.4 Content Patterns
**Repeating card pattern (product grid):**
```
[Product Image]
[H2 or H3 — product name, 29px or 37px, weight 600]
[Body copy — 16px, weight 400, line-height 24px]
[CTA Button — "Jetzt kaufen", accent blue, border-radius 2px]
```
**Navigation item pattern:**
```
[Icon (MWF-FLUENT-ICONS)] [Label text, 16px, rgb(38,38,38)] [gap: 5px between]
```
**Alert/banner pattern:**
```
[Left: promo/notice text] ←→ space-between ←→ [Right: action or dismiss button]
Background: rgb(242,242,242), full width
```
**Footer section pattern (inferred):**
```
[H2 section label — 15px, weight 400]
[Link list — 16px, rgb(0,103,184), underline, line-height 24px]
```
---
## 6. Component Patterns
### 6.1 Primary CTA Button (`.btn-primary` / `.btn-brand`)
**Anatomy:** `<button>` → text label (optional: leading icon)
**Token Mappings:**
| State | background | color | box-shadow | background-image | opacity | cursor |
|---|---|---|---|---|---|---|
| default | `var(--microsoft-accent)` | `#fff` | none | none | 1 | pointer |
| hover | `var(--microsoft-accent)` | `#fff` | `rgba(0,0,0,0.13) 0px 2px 4px 0px, rgba(0,0,0,0.11) 0px 0px 1px 0px` | `linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1))` | 1 | pointer |
| focus | `var(--microsoft-accent)` | `#fff` | — | — | 1 | pointer |
| active | `var(--microsoft-accent)` | `#fff` | deeper shadow | overlay | 1 | pointer |
| disabled | `var(--microsoft-accent)` | `#fff` | none | none | `0.3` | default |
```tsx
// Primary CTA Button — production ready, all states
import React from 'react';
interface PrimaryButtonProps {
children: React.ReactNode;
disabled?: boolean;
loading?: boolean;
onClick?: () => void;
type?: 'button' | 'submit' | 'reset';
}
export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
children,
disabled = false,
loading = false,
onClick,
type = 'button',
}) => {
const isDisabled = disabled || loading;
return (
<button
type={type}
disabled={isDisabled}
onClick={onClick}
className="btn btn-primary"
style={{
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-lg)', /* 15px */
fontWeight: 'var(--microsoft-font-weight-regular)', /* 400 */
lineHeight: '20px',
letterSpacing: 'normal',
color: 'var(--microsoft-surface)', /* #fff */
backgroundColor: 'var(--microsoft-accent)', /* rgb(0,103,184) */
borderRadius: 'var(--microsoft-radius-sm)', /* 2px */
border: 'none',
padding: '12px 24px',
display: 'inline-block',
textAlign: 'center',
textDecoration: 'none',
cursor: isDisabled ? 'default' : 'pointer',
opacity: isDisabled ? 0.3 : 1,
boxShadow: 'none',
transition: `all var(--microsoft-duration-fast) var(--microsoft-ease-default)`,
/* Hover handled via CSS class — inline styles cannot target :hover */
}}
>
{loading ? (
<span aria-label="Loading" role="status">
<span aria-hidden="true">…</span>
</span>
) : (
children
)}
</button>
);
};
/* Required companion CSS for hover/focus states */
/*
.btn-primary:not(:disabled):hover {
box-shadow: rgba(0,0,0,0.13) 0px 2px 4px 0px, rgba(0,0,0,0.11) 0px 0px 1px 0px;
background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
}
.btn-primary:focus {
outline: var(--microsoft-focus-outline);
outline-offset: var(--microsoft-focus-offset);
}
.btn-primary:disabled {
box-shadow: none;
background-image: none;
opacity: 0.3;
cursor: default;
}
*/
```
---
### 6.2 Card (`.cls_card`)
**Anatomy:** `<div>` → [image area] + [content: heading + body + CTA]
| State | display | flex-direction | padding | box-shadow |
|---|---|---|---|---|
| default | flex | column | 48px | none |
| hover (inferred) | flex | column | 48px | `var(--microsoft-shadow-sm)` |
```tsx
interface CardProps {
heading: string;
body: string;
ctaLabel: string;
onCta?: () => void;
imageUrl?: string;
imageAlt?: string;
}
export const ProductCard: React.FC<CardProps> = ({
heading, body, ctaLabel, onCta, imageUrl, imageAlt
}) => (
<div
className="cls_card"
style={{
display: 'flex',
flexDirection: 'column',
padding: 'var(--microsoft-space-xl)', /* 48px */
backgroundColor: 'var(--microsoft-surface)',
borderRadius: 'var(--microsoft-radius-sm)', /* 2px */
fontFamily: 'var(--microsoft-font-family)',
color: 'var(--microsoft-text-primary)',
}}
>
{imageUrl && (
<img
src={imageUrl}
alt={imageAlt ?? ''}
style={{ width: '100%', display: 'block', marginBottom: 'var(--microsoft-space-lg)' }}
/>
)}
<h2 style={{
fontSize: 'var(--microsoft-font-size-2xl)', /* 29px */
fontWeight: 'var(--microsoft-font-weight-medium)', /* 600 */
lineHeight: '34.8px',
margin: `0 0 var(--microsoft-space-md)`, /* 16px bottom */
}}>
{heading}
</h2>
<p style={{
fontSize: 'var(--microsoft-font-size-xl)', /* 16px */
fontWeight: 'var(--microsoft-font-weight-regular)',
lineHeight: 'var(--microsoft-line-height-loose)', /* 24px */
margin: `0 0 var(--microsoft-space-lg)`, /* 24px bottom */
}}>
{body}
</p>
<button
onClick={onCta}
style={{
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-lg)', /* 15px */
fontWeight: 'var(--microsoft-font-weight-regular)',
color: 'var(--microsoft-surface)',
backgroundColor: 'var(--microsoft-accent)',
borderRadius: 'var(--microsoft-radius-sm)',
border: 'none',
padding: '12px 24px',
cursor: 'pointer',
alignSelf: 'flex-start',
}}
>
{ctaLabel}
</button>
</div>
);
```
---
### 6.3 Navigation Item (`.role_navigation`)
**Anatomy:** `<nav>` → `display: flex, row, align: center, gap: 5px` → `[icon] [label]`
| State | color | text-decoration | outline |
|---|---|---|---|
| default | `rgb(38,38,38)` | none | none |
| hover (inferred) | `var(--microsoft-accent)` | underline | none |
| focus | `rgb(38,38,38)` | none | `0.1875rem dotted currentcolor` |
| active | `var(--microsoft-accent)` | none | none |
```tsx
interface NavItemProps {
label: string;
href: string;
icon?: React.ReactNode;
}
export const NavItem: React.FC<NavItemProps> = ({ label, href, icon }) => (
<a
href={href}
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 'var(--microsoft-space-xs)', /* 5px */
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-xl)', /* 16px */
fontWeight: 'var(--microsoft-font-weight-regular)',
lineHeight: 'var(--microsoft-line-height-loose)', /* 24px */
color: 'var(--microsoft-text-secondary)', /* rgb(38,38,38) */
textDecoration: 'none',
}}
>
{icon && <span aria-hidden="true">{icon}</span>}
{label}
</a>
);
```
---
### 6.4 Link (inline / `cls_btn` style)
**Anatomy:** `<a>` — two visual variants: plain inline link and button-style link (`cls_btn`)
| Variant | color | font-weight | text-decoration | display |
|---|---|---|---|---|
| Inline link | `rgb(0,103,184)` | 400 | underline | block |
| `cls_btn` (button-link) | `rgb(0,103,184)` | 600 | underline | flex, center |
```tsx
/* Inline link */
<a href={href} style={{
color: 'var(--microsoft-accent)',
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-xl)', /* 16px */
fontWeight: 'var(--microsoft-font-weight-regular)', /* 400 */
lineHeight: 'var(--microsoft-line-height-loose)',
textDecoration: 'underline',
}}>
{children}
</a>
/* cls_btn — button-style link with icon */
<a href={href} className="cls_btn" style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: '7px',
color: 'var(--microsoft-accent)',
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-xl)', /* 16px */
fontWeight: 'var(--microsoft-font-weight-medium)', /* 600 */
lineHeight: '16px',
textDecoration: 'underline',
backgroundColor: 'var(--microsoft-surface)',
}}>
{children}
</a>
```
---
### 6.5 Dropdown / Select (`.dropdown`)
**Anatomy:** trigger element → `flex row, center/center, gap:5px, padding: 1px 8px`
| State | color | background | outline |
|---|---|---|---|
| default | `rgb(38,38,38)` | transparent | none |
| focus | `rgb(38,38,38)` | transparent | `0.1875rem dotted currentcolor` |
| disabled | `rgb(38,38,38)` | transparent | none, opacity 0.3 |
```tsx
export const Dropdown: React.FC<{ label: string; disabled?: boolean }> = ({ label, disabled }) => (
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: 'var(--microsoft-space-xs)', /* 5px */
padding: '1px 8px',
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-sm)', /* 13px */
fontWeight: 'var(--microsoft-font-weight-regular)',
lineHeight: 'var(--microsoft-line-height-normal)', /* 19.5px */
color: 'var(--microsoft-text-secondary)',
opacity: disabled ? 0.3 : 1,
cursor: disabled ? 'default' : 'pointer',
}}
>
{label}
<span aria-hidden="true">▾</span>
</div>
);
```
---
### 6.6 Alert / Banner
**Anatomy:** `flex row, space-between` → `[message text]` + `[action/dismiss]`
```tsx
export const AlertBanner: React.FC<{ message: string; onDismiss?: () => void }> = ({ message, onDismiss }) => (
<div role="alert" style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'var(--microsoft-surface-subtle)', /* rgb(242,242,242) */
color: 'var(--microsoft-text-primary)',
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-xl)', /* 16px */
fontWeight: 'var(--microsoft-font-weight-regular)',
lineHeight: 'var(--microsoft-line-height-loose)',
padding: `0 var(--microsoft-space-md)`, /* 0 16px */
width: '100%',
}}>
<span>{message}</span>
{onDismiss && (
<button
onClick={onDismiss}
aria-label="Dismiss"
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
color: 'var(--microsoft-accent)',
fontWeight: 'var(--microsoft-font-weight-medium)',
}}
>
✕
</button>
)}
</div>
);
```
---
### 6.7 Input Field
**Anatomy:** `<input>` element — minimal computed style data; use Fluent UI conventions anchored to extracted tokens.
| State | border | outline | background |
|---|---|---|---|
| default | `1px solid rgb(38,38,38)` | none | `var(--microsoft-surface)` |
| focus | `1px solid var(--microsoft-accent)` | `0.1875rem dotted currentcolor` | `var(--microsoft-surface)` |
| error (inferred) | `1px solid rgb(196,49,75)` | none | `var(--microsoft-surface)` |
| disabled | `1px solid rgb(200,200,200)` | none | `var(--microsoft-surface-subtle)` |
```tsx
export const TextInput: React.FC<{
label: string; value: string; onChange: (v: string) => void;
error?: string; disabled?: boolean;
}> = ({ label, value, onChange, error, disabled }) => (
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--microsoft-space-xs)' }}>
<label style={{
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-sm)',
fontWeight: 'var(--microsoft-font-weight-regular)',
color: 'var(--microsoft-text-primary)',
}}>
{label}
</label>
<input
value={value}
onChange={e => onChange(e.target.value)}
disabled={disabled}
style={{
fontFamily: 'var(--microsoft-font-family)',
fontSize: 'var(--microsoft-font-size-xl)',
fontWeight: 'var(--microsoft-font-weight-regular)',
color: disabled ? 'var(--microsoft-text-secondary)' : 'var(--microsoft-text-primary)',
backgroundColor: disabled ? 'var(--microsoft-surface-subtle)' : 'var(--microsoft-surface)',
border: `1px solid ${error ? 'rgb(196,49,75)' : 'rgb(38,38,38)'}`,
borderRadius: 'var(--microsoft-radius-sm)',
padding: '8px var(--microsoft-space-sm)',
opacity: disabled ? 0.3 : 1,
}}
/>
{error && (
<span style={{ color: 'rgb(196,49,75)', fontSize: 'var(--microsoft-font-size-sm)' }}>
{error}
</span>
)}
</div>
);
```
---
## 7. Elevation & Depth
```css
/* Shadow tokens */
--microsoft-shadow-none: none;
--microsoft-shadow-sm: rgba(0,0,0,0.13) 0px 3px 7px 0px,
rgba(0,0,0,0.11) 0px 1px 2px 0px;
/* extracted: high confidence — from computed styles */
/* Hover shadow (lighter, directional — from interactive state CSS) */
--microsoft-shadow-hover: rgba(0,0,0,0.13) 0px 2px 4px 0px,
rgba(0,0,0,0.11) 0px 0px 1px 0px;
/* extracted: high confidence — from .btn-primary:hover rules */
/* Z-index scale (inferred from Bootstrap + Microsoft MWF patterns) */
--z-below: -1; /* button-hide animation target */
--z-base: 0;
--z-dropdown: 10;
--z-sticky: 100; /* Navigation header */
--z-modal: 200;
--z-toast: 300;
--z-tooltip: 400;
/* Border tokens */
--microsoft-border-default: 1px solid rgb(38,38,38); /* Forms, inputs */
--microsoft-border-subtle: 1px solid rgb(200,200,200); /* Disabled/subdued */
--microsoft-border-none: 0px none; /* Cards, buttons (borderless by default) */
```
### Layering Principles
- **Default surfaces have no shadow.** Cards (`cls_card`) start with `box-shadow: none`.
- **Elevation is earned on interaction.** Shadow appears on `:hover` — it signals clickability.
- **Two-layer shadows only.** All shadows use exactly two shadow layers (large ambient + small direct). NEVER use single-layer or three-layer shadows.
- **No box-shadow on disabled states.** Disabled buttons explicitly remove `box-shadow`.
---
## 8. Motion
```css
/* Timing tokens */
--microsoft-duration-fast: 0.2s; /* Buttons, dropdowns, hover transitions */
/* reconstructed: moderate confidence — only 1 element sampled */
--microsoft-ease-default: ease; /* All standard transitions */
/* extracted: high confidence — 248 elements use this easing */
/* Shorthand for component transitions */
--microsoft-transition-default: all var(--microsoft-duration-fast) var(--microsoft-ease-default);
```
### Keyframe Animations
```css
/* Ripple — button press feedback (extracted from CSS) */
@keyframes microsoft-ripple {
0% { border: 1px solid #fff; opacity: 0; border-radius: 50%; top: -1px; left: -1px; }
50% { opacity: 1; }
100% { border: 1em solid #fff; opacity: 0; border-radius: 50%; top: -1em; left: -1em; }
}
/* Fade in — content reveal (extracted) */
@keyframes microsoft-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Fade out — content hide (extracted) */
@keyframes microsoft-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* Button hide — z-index shift after dismiss (extracted) */
@keyframes microsoft-button-hide {
0% { z-index: 0; }
100% { z-index: -1; }
}
```
### Motion Rules
- **Animate `all` with `0.2s ease`** on interactive elements (buttons, links, nav items)
- **Do NOT animate layout properties** (width, height, padding) — only visual properties (opacity, box-shadow, background-image)
- **Ripple is for button press feedback only** — not for page transitions
- **Fade in/out** is used for modal/panel entry — duration matches `--microsoft-duration-fast`
- **Respect `prefers-reduced-motion`:** Wrap all animations in `@media (prefers-reduced-motion: no-preference)` — do not animate for users who opt out
---
## 9. Anti-Patterns & Constraints
1. **Using Inter, Roboto, or system-ui as the font family → Why it fails:** AI models default to Inter or system-ui when no explicit font is provided. Microsoft's brand identity is built on Segoe UI — using a different font will produce visually incorrect output that fails brand guidelines. → **What to do instead:** Always specify `font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif` via `var(--microsoft-font-family)`. Never let the browser default take over.
2. **Hardcoding `#0067b8` or `rgb(0,103,184)` instead of `var(--microsoft-accent)` → Why it fails:** Hardcoded hex values create drift when the brand colour is updated. AI agents generating inline styles will frequently hardcode the sampled colour. → **What to do instead:** Reference `var(--microsoft-accent)` in every context — CSS classes, inline styles, Tailwind `[var(--microsoft-accent)]` syntax.
3. **Applying `border-radius: 8px` or any pill shape to buttons → Why it fails:** AI agents trained on general web patterns default to `8px` or `9999px` radius for buttons. Microsoft's design explicitly uses `2px` (near-square). Using a larger radius breaks the Fluent Design aesthetic and looks like a generic Bootstrap button. → **What to do instead:** Always use `var(--microsoft-radius-sm)` (2px) for buttons, inputs, and cards. Reserve `var(--microsoft-radius-md)` (50%) only for avatar/profile circles.
4. **Using `outline: none` on focused elements → Why it fails:** Microsoft's accessibility-first approach requires visible focus rings. Removing outlines to "clean up" the design breaks WCAG 2.1 AA compliance and violates the site's own CSS rules which explicitly style `0.1875rem dotted currentcolor`. → **What to do instead:** Never suppress focus outlines. Use `outline: var(--microsoft-focus-outline)` and `outline-offset: var(--microsoft-focus-offset)` on all interactive elements.
5. **Setting disabled opacity to anything other than 0.3 → Why it fails:** The design system uses `opacity: 0.3` precisely — it is specified in the extracted CSS as `.btn.disabled, .btn:disabled { opacity: 0.3 }`. AI agents commonly use `0.5` or `0.6` as a "more readable" disabled state. → **What to do instead:** Disabled states always use `opacity: var(--microsoft-disabled-opacity)` — do not adjust.
6. **Using arbitrary spacing values outside the `--microsoft-space-*` scale → Why it fails:** The extraction found off-grid values (5px, 64.8px) which are legacy exceptions, not the rule. AI agents will invent values like `10px`, `20px`, `30px` that break the visual rhythm. → **What to do instead:** Only use tokens from `--microsoft-space-xs` through `--microsoft-space-3xl`. If a value falls between tokens, round to the nearest token.
7. **Constructing hover states with colour changes instead of overlay gradients → Why it fails:** The Microsoft button hover pattern overlays a `linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1))` on top of the existing background — it does NOT change the background colour. AI agents commonly generate `:hover { background-color: #005a9e }` (a darker blue). This produces a visually different result that contradicts the extracted CSS. → **What to do instead:** On hover, add `background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1))` and `box-shadow: var(--microsoft-shadow-hover)` — leave `background-color` unchanged.
8. **Using dynamic Tailwind class construction for state → Why it fails:** Classes like `` `hover:bg-[${hoverColor}]` `` are not included in Tailwind's generated CSS and will silently fail in production builds. → **What to do instead:** Use static CSS classes (`.btn-primary:hover` in a stylesheet) or `style` prop for computed values. Prefer the extracted CSS class names (`btn-primary`, `btn-brand`, `btn-outline-primary`) which already have correct hover rules defined.
9. **Applying shadows to default (non-hover) card states → Why it fails:** AI agents frequently add `box-shadow` to cards as a default affordance. The extracted `cls_card` has `box-shadow: none` by default — shadow is a hover-only signal in this system. Adding shadow by default creates visual noise and contradicts the flat Fluent aesthetic. → **What to do instead:** Cards start with `box-shadow: none`. Add `var(--microsoft-shadow-sm)` only on `:hover` or focused states.
10. **Mixing `font-weight: 700` (bold) with the heading hierarchy → Why it fails:** Microsoft headings use `font-weight: 600` (semibold/medium), not 700 (bold). AI agents default to `font-weight: bold` or `700` for `<h1>`–`<h3>`. Using 700 produces heavier-than-designed headings that look inconsistent with Segoe UI's semibold optical weight. → **What to do instead:** All headings use `var(--microsoft-font-weight-medium)` (600). Weight 700 is available in the font but is not used in the primary heading system.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (28) */
--brand-primary-cta: rgb(0, 103, 184); /* Primary CTA background, dominant on 26 buttons — e.g. "Jetzt kaufen" /* mined from computed styles */ */
--microsoft-accent: rgb(0, 103, 184);
--microsoft-text-primary: rgb(0, 0, 0);
--microsoft-text-secondary: rgb(38, 38, 38);
--microsoft-surface: rgb(255, 255, 255);
--microsoft-surface-subtle: rgb(242, 242, 242);
--microsoft-surface-muted: rgb(235, 235, 235);
--primitive-blue-600: rgb(0, 103, 184);
--primitive-blue-alt: rgb(58, 160, 250);
--primitive-blue-dark: rgb(36, 58, 94);
--primitive-blue-light: rgb(80, 230, 255);
--primitive-black: rgb(0, 0, 0);
--primitive-grey-100: rgb(235, 235, 235);
--primitive-grey-200: rgb(242, 242, 242);
--primitive-grey-800: rgb(38, 38, 38);
--primitive-white: rgb(255, 255, 255);
--microsoft-text-on-accent: rgb(255, 255, 255);
--btn-primary-bg: var(--microsoft-accent);
--btn-primary-color: var(--microsoft-text-on-accent);
--btn-primary-hover-bg: var(--microsoft-accent);
--btn-default-bg: var(--microsoft-surface-muted);
--btn-default-color: var(--microsoft-text-primary);
--link-color: var(--microsoft-accent);
--alert-bg: var(--microsoft-surface-subtle);
--alert-color: var(--microsoft-text-primary);
--microsoft-border-default: 1px solid rgb(38,38,38);
--microsoft-border-subtle: 1px solid rgb(200,200,200);
--microsoft-border-none: 0px none;
/* Typography (28) */
--font-size-xs: 11px; /* 15 elements — e.g. span "Ihre Datenschutzopti", li "Surface Pro", li "Surface Laptop" /* mined from computed styles */ */
--font-size-sm: 13px; /* 17 elements — e.g. p "Wir verwenden option", span "Suchen", span "Warenkorb" /* mined from computed styles */ */
--font-size-md: 14px; /* 2 elements — e.g. span "ME", button "ME" /* mined from computed styles */ */
--font-size-lg: 15px; /* 9 elements — e.g. h2 "Neuigkeiten", h2 "Microsoft Store", h2 "Bildungswesen" /* mined from computed styles */ */
--font-size-xl: 16px; /* 39 elements — e.g. h2 "Microsoft folgen", span "Nach oben", a "Jetzt kaufen" /* mined from computed styles */ */
--font-size-2xl: 29px; /* 9 elements — e.g. h2 "Surface Pro", h2 "Surface Laptop", h2 "Xbox Controller" /* mined from computed styles */ */
--font-size-3xl: 37px; /* 3 elements — e.g. h1 "Microsoft Store Ange", h2 "Zubehör, das Sie lie", h2 "Für Unternehmen" /* mined from computed styles */ */
--font-weight-regular: 400; /* 62 elements — e.g. h2 "Microsoft folgen", p "Wir verwenden option", span "Suchen" /* mined from computed styles */ */
--font-weight-medium: 600; /* 32 elements — e.g. h1 "Microsoft Store Ange", h2 "Surface Pro", h2 "Surface Laptop" /* mined from computed styles */ */
--line-height-normal: 19.5px; /* 14 elements — e.g. span "Suchen", span "Warenkorb", span "Anmelden" /* mined from computed styles */ */
--line-height-loose: 24px; /* 34 elements — e.g. a "Surface-Geräte kaufe", a "Xbox-Spiele und Kons", a "Finden Sie Ihren näc" /* mined from computed styles */ */
--microsoft-font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
--microsoft-font-size-xs: 11px;
--microsoft-font-size-sm: 13px;
--microsoft-font-size-md: 14px;
--microsoft-font-size-lg: 15px;
--microsoft-font-size-xl: 16px;
--microsoft-font-size-2xl: 29px;
--microsoft-font-size-3xl: 37px;
--microsoft-font-weight-regular: 400;
--microsoft-font-weight-medium: 600;
--microsoft-font-family-body: "Segoe UI", SegoeUI, Arial, sans-serif;
--microsoft-font-family-icons: "MWF-FLUENT-ICONS";
--microsoft-font-weight-thin: 100;
--microsoft-font-weight-semilight: 200;
--microsoft-font-weight-bold: 700;
--microsoft-line-height-normal: 19.5px;
--microsoft-line-height-loose: 24px;
/* Spacing (22) */
--progress-indicator-spacing: 14.25rem;
--default-play-button-spacing: $carousel-control-min-size * 2.5;
--space-xs: 5px; /* 3 elements — e.g. nav .uhf-contextual-nav, nav .uhf-contextual-nav, nav .uhf-contextual-nav /* mined from computed styles */ */
--space-sm: 12px; /* 42 elements — e.g. section .col-12, section .col-12, div .fixed-back-to-top /* mined from computed styles */ */
--space-md: 16px; /* 6 elements — e.g. div .card-footer, div .card-footer, div .card-footer /* mined from computed styles */ */
--space-lg: 24px; /* 42 elements — e.g. div .card-body, div .card-body, div .card-body /* mined from computed styles */ */
--space-xl: 48px; /* 8 elements — e.g. div .card, div .card, div .card /* mined from computed styles */ */
--space-2xl: 64.8px; /* 4 elements — e.g. div .container, div .container, div .container /* mined from computed styles */ */
--space-3xl: 72px; /* 20 elements — e.g. header .uhf-header, header .uhf-header, footer .uhf-footer /* mined from computed styles */ */
--microsoft-space-xs: 5px;
--microsoft-space-sm: 12px;
--microsoft-space-md: 16px;
--microsoft-space-lg: 24px;
--microsoft-space-xl: 48px;
--microsoft-space-2xl: 64px;
--microsoft-space-3xl: 72px;
--bp-xs: 576px;
--bp-sm: 768px;
--bp-md: 992px;
--bp-lg: 1084px;
--bp-xl: 1400px;
--container-max: 1400px;
/* Radius (4) */
--radius-sm: 2px; /* 14 elements — e.g. a . "Jetzt kaufen", a . "Microsoft 365 kaufen", a . "Jetzt kaufen" /* mined from computed styles */ */
--radius-md: 50%; /* 1 element — e.g. button "ME" /* mined from computed styles */ */
--microsoft-radius-sm: 2px;
--microsoft-radius-md: 50%;
/* Effects (6) */
--shadow-sm: rgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) 0px 1px 2px 0px; /* 1 element — e.g. div .card /* mined from computed styles */ */
--microsoft-shadow-sm: rgba(0,0,0,0.13) 0px 3px 7px 0px, rgba(0,0,0,0.11) 0px 1px 2px 0px;
--microsoft-disabled-opacity: 0.3;
--btn-primary-hover-shadow: rgba(0,0,0,0.13) 0px 2px 4px 0px, rgba(0,0,0,0.11) 0px 0px 1px 0px;
--microsoft-shadow-none: none;
--microsoft-shadow-hover: rgba(0,0,0,0.13) 0px 2px 4px 0px, rgba(0,0,0,0.11) 0px 0px 1px 0px;
/* Motion (7) */
----motion-button-hide: @keyframes button-hide {
0% { z-index: 0; }
100% { z-index: -1; }
}; /* @keyframes button-hide */
----motion-ripple: @keyframes ripple {
0% { border: 1px solid rgb(255, 255, 255); opacity: 0; bo… <0.3KB elided>; /* @keyframes ripple */
----motion-fade-in: @keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in */
----motion-fade-out: @keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fade-out */
----motion-orbit: @keyframes orbit {
0% { transform: rotate(225deg); opacity: 1; animation-timi… <0.5KB elided>; /* @keyframes orbit */
--duration-fast: 0.2s; /* 1 element — e.g. button /* mined from computed styles */ */
--ease-default: ease; /* 248 elements — e.g. button, button, button /* mined from computed styles */ */
```
## Appendix B: Token Source Metadata
**Token Source:** `reconstructed-from-computed`
**Confidence Level:** Low-to-moderate overall (only 2 native CSS custom properties found: `--progress-indicator-spacing: 14.25rem` and `--default-play-button-spacing`). All `--microsoft-*` tokens are synthesised from computed styles sampled on key elements.
**Native CSS Variables Preserved:**
- `--progress-indicator-spacing: 14.25rem` — used internally by the carousel/progress component
- `--default-play-button-spacing` — computed from `$carousel-control-min-size * 2.5` (Sass variable, not directly extractable)
**Clustering Method:**
- **Colours:** Grouped by hue family. One dominant accent family (`rgb(0,103,184)` and variants). Neutrals clustered by lightness: `rgb(255,255,255)` → page surface, `rgb(242,242,242)` → subtle, `rgb(235,235,235)` → muted/button, `rgb(38,38,38)` → secondary text, `rgb(0,0,0)` → primary text.
- **Spacing:** Values extracted from computed padding/margin/gap: `5px, 12px, 16px, 24px, 48px, 64.8px, 72px`. Mapped to `xs→3xl` scale. Note: `5px` (off-grid) and `64.8px` (off-grid) are preserved as extracted but flagged as anomalous. The `64.8px` is rounded to `64px` for the token value.
- **Typography:** Clustered by frequency of occurrence across sampled elements. Seven distinct sizes identified (11, 13, 14, 15, 16, 29, 37px). Two weights dominate: 400 (body) and 600 (headings).
- **Border radius:** Census of 15 total radius values across all elements: 14 instances of `2px` (primary UI), 1 instance of `50%` (avatar button "ME"). Confirms near-square button/card shape as brand standard.
- **Shadows:** One token extracted from button hover CSS rules. No default elevation shadows on card or container elements.
- **Motion:** `0.2s ease` confirmed on 248 elements — extremely high confidence for this value.
**Libraries Detected:** Bootstrap (button class names `btn-primary`, `btn-brand`, `btn-outline-*`, `btn-dark`, `btn-secondary`, `btn-light`, `disabled` class pattern); Tailwind (utility class presence). The coexistence of Bootstrap class-based styling with Tailwind utilities means component state styling lives primarily in Bootstrap CSS rules, not inline styles.
**Note on Authoritative Source:** These tokens are reverse-engineered from computed browser styles and extracted CSS rules. They represent the current live state of microsoft.com at extraction time. For authoritative design intent, refer to the [Microsoft Fluent UI Design System](https://fluent2.microsoft.design/) and the Fluent UI React component library (`@fluentui/react`).More from the gallery
Browse all kits →You may also like

Vercel
MITClean, minimal developer-focused design system built on Geist typography with light surfaces, precise spacing, and fast interactions for modern web applications
00
lightminimaldeveloper-toolsaas

Sentry
MITDark, minimal design system for developer tools with a sophisticated purple palette and refined typography, tailored for error monitoring and performance platforms
00
darkminimaldeveloper-toolsaas

OpenAI
MITClean, minimal design system for AI-native products built on Next.js and Tailwind, featuring a light monochromatic palette with precise token-based spacing and typography
02
lightminimalsaasdeveloper-tool