Microsoft Fluent 2

---
name: microsoft-fluent-2
description: Apply the Microsoft Fluent 2 visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Microsoft Fluent 2, mentions Fluent UI, Fluent Design System, fluent 2, or describes Segoe UI Variable type, brand blue #0f6cbd, 4px default corner radius — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Microsoft Fluent 2 Design System

Microsoft's cross-platform design system powering Office, Teams, and Windows 11: Segoe UI type, the brand blue #0f6cbd (deepened from the legacy #0078d4), soft 4px-radius controls, layered neutral backgrounds, translucent acrylic and mica materials, and a compact 4px spacing ramp.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Microsoft Fluent 2.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Fluent UI, Fluent Design System, fluent 2, Microsoft Fluent), or describes its traits: Segoe UI Variable type; brand blue #0f6cbd; 4px default corner radius; acrylic/mica translucent materials; layered neutral backgrounds; command bars and panes.

## Design tokens

### Color palette

- neutralBackground1 — primary canvas: `#ffffff` (--color-bg)
- neutralBackground2 — secondary layer: `#fafafa` (--color-surface)
- neutralBackground3 — sunken/tertiary layer: `#f5f5f5` (--color-surface-tertiary)
- neutralForeground1 — primary text: `#242424` (--color-text)
- neutralForeground2 — secondary text: `#424242` (--color-text-muted)
- brand-80 — Fluent 2 brand blue (legacy Fluent 1: #0078d4): `#0f6cbd` (--color-accent)
- brand-70 — brand background hover: `#115ea3` (--color-accent-hover)
- neutralStroke1 — control and divider stroke: `#d1d1d1` (--color-border)
- statusDangerBackground3 — error/danger red: `#c50f1f` (--color-danger)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- neutralBackground1 in dark theme: `#292929` (--color-bg)
- neutralForeground1 in dark theme: `#ffffff` (--color-text)
- brand-100 — brand color adjusted for dark theme: `#479ef5` (--color-accent)

### Typography

- Display / headings: Source Sans 3 (fallback: Segoe UI, -apple-system, system-ui, sans-serif) (ideal: Segoe UI Variable Display, premium — use Source Sans 3 as the free substitute)
- Body: Source Sans 3 (fallback: Segoe UI, -apple-system, system-ui, sans-serif) (ideal: Segoe UI Variable Text, premium — use Source Sans 3 as the free substitute)
- Type scale: 1.2 ratio, base 14px — computed steps: 14px / 17px / 20px / 24px / 29px / 35px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.3, letter-spacing 0
- Body: line-height 1.43, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 6, 8, 12, 16, 20, 24, 32 — Compact productivity density on a 4px grid (spacing tokens XXS 2px through XXXL 32px); controls are 32px tall by default, with dense table and command-bar layouts throughout.
- Border radius: none 0px, sm 2px, md 4px, lg 6px, xl 8px, circular 10000px — borderRadiusMedium 4px is the default for buttons, inputs, and menus; 8px for cards and dialogs; circular for avatars and badges.
- Border treatment: 1px solid #d1d1d1 — 1px neutralStroke1 on controls; inputs add a darker bottom stroke that thickens and turns brand blue on focus.

### Shadows

- shadow2: `0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12)` — Resting cards and raised buttons
- shadow8: `0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12)` — Command bars, teaching callouts, tooltips
- shadow16: `0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12)` — Flyouts, context menus, popovers
- shadow64: `0 32px 64px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.2)` — Modal dialogs and panels

### Layout

- Max content width: 1600px
- App chrome pattern: top command bar / ribbon, optional left nav pane, content region
- Panes and flyouts slide from edges in acrylic material
- List-detail split views for productivity surfaces
- Content aligns to a 4px baseline grid

### Effects

- Acrylic: backdrop-filter blur with a tinted translucent fill for transient surfaces (flyouts, sidebars)
- Mica: opaque desktop-tinted material for app backgrounds on Windows
- Subtle state layering: hover fills lighten one neutral step, pressed darken one

### Motion

- Easing: cubic-bezier(0.33, 0, 0.67, 1); durations 100ms / 200ms / 300ms
- Directional slide+fade for flyouts and panes (enter decelerates, exit accelerates)
- Controls change state in 100ms or less
- Motion communicates spatial origin — menus grow from their invoking control

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #fafafa;
  --color-surface-tertiary: #f5f5f5;
  --color-text: #242424;
  --color-text-muted: #424242;
  --color-accent: #0f6cbd;
  --color-accent-hover: #115ea3;
  --color-border: #d1d1d1;
  --color-danger: #c50f1f;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-circular: 10000px;
  --shadow-shadow2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-shadow8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-shadow16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-shadow64: 0 32px 64px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.2);
  --border-default: 1px solid #d1d1d1;
  --font-display: "Source Sans 3", "Segoe UI", -apple-system, system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", -apple-system, system-ui, sans-serif;
  --text-base: 14px;
  --leading-heading: 1.3;
  --leading-body: 1.43;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 0, 0.67, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 48px command bar on neutralBackground2, icon buttons with 4px-radius hover fills; or a 280px left nav pane in acrylic with 36px rows and a brand-blue selection indicator bar
- **Hero:** Product marketing leads with Segoe-style semibold headline (40–60px), short sentence case, brand-blue primary button and neutral secondary side by side
- **Card:** White neutralBackground1 card, 8px radius, shadow2, 16px padding, 1px neutralStroke2 optional; hover lifts to shadow8
- **Button (primary):** Brand #0f6cbd fill, white text, 4px radius, 32px tall, 600 weight label; hover #115ea3, pressed darker brand-60
- **Button (secondary):** White fill, 1px #d1d1d1 stroke, #242424 text, 4px radius; hover neutralBackground1Hover #f5f5f5
- **Form fields:** 32px input, 4px radius, 1px neutralStroke1 with darker bottom edge; on focus the bottom border becomes a 2px brand-blue underline that animates outward from center

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The Windows 11 material stack: content sits on subtly layered neutral surfaces (neutralBackground1/2) with 4px-rounded controls, while flyouts and sidebars render in blurred acrylic — depth through translucency rather than heavy shadows. Spend boldness here; keep everything else quiet.

## Do

- Use the brand ramp for states (rest brand-80, hover brand-70) instead of tinting with opacity
- Reserve acrylic for transient surfaces and mica for base layers — materials signal hierarchy
- Keep controls at 32px height and sentence-case labels for the Office-familiar feel
- Animate the focus underline on inputs; it is a Fluent signature

## Don't

- Don't ship the legacy #0078d4 as the Fluent 2 brand color — the current token is #0f6cbd
- Don't stack heavy shadows; Fluent depth comes from materials plus the published shadow ramp
- Don't exceed 8px radii on controls — large pills read as consumer-mobile, not Fluent
- Don't use acrylic behind long-form reading content; blur belongs on chrome, not text backgrounds

## Accessibility notes

- Brand #0f6cbd on white passes AA (about 5.4:1) — an improvement over legacy #0078d4, which fell short for small text; use the current token
- Acrylic surfaces must guarantee 4.5:1 for text over the blurred fill — Fluent adds a luminosity tint layer for this; keep it
- Fluent requires visible 2px focus rectangles on all interactive controls, matching Windows keyboarding conventions

## Reference sites

- Fluent 2 Design System: https://fluent2.microsoft.design
- Fluent UI React components: https://react.fluentui.dev
- Fluent UI GitHub: https://github.com/microsoft/fluentui

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip microsoft-fluent-2.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/microsoft-fluent-2.json

Settings → Capabilities → Skills → Upload skill → microsoft-fluent-2.zip