Microsoft

# 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`).