Fluent UI

# Fluent UI — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Microsoft. "Fluent UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Fluent UI
**Owner:** Microsoft
**Official documentation:** https://fluent2.microsoft.design/
**Visual character:** Office-grade neutrals under a single communicating blue — dense, layered surfaces tuned for productivity software at enormous scale.

---

## Summary

Microsoft's cross-platform design language, finally consolidated.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Brand Background | `#0f6cbd` | `--color-brand-background` | Microsoft brand action |
| Neutral Background 1 | `#ffffff` | `--color-neutral-background-1` | Default surface (light) |
| Neutral Foreground 1 | `#242424` | `--color-neutral-foreground-1` | Default text |
| Neutral Foreground 2 | `#424242` | `--color-neutral-foreground-2` | Secondary text |
| Neutral Stroke 1 | `#d1d1d1` | `--color-neutral-stroke-1` | Borders and dividers |
| Neutral Background 3 | `#f5f5f5` | `--color-neutral-background-3` | Subtle layered surface |
| Status Danger | `#c50f1f` | `--color-status-danger` | Errors and destructive actions |
| Status Success | `#107c10` | `--color-status-success` | Success states |
| Status Warning | `#f7630c` | `--color-status-warning` | Warnings |

## Typography

- **Display:** Segoe UI Variable — weights 400, 600, 700 — `'Segoe UI Variable Display', 'Segoe UI', sans-serif`
- **Body:** Segoe UI Variable — weights 400, 600 — `'Segoe UI Variable Text', 'Segoe UI', sans-serif`
- **Mono:** Cascadia Code — weights 400 — `'Cascadia Code', Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display | `68px` | `92px` |
| title-1 | `32px` | `40px` |
| title-3 | `20px` | `28px` |
| subtitle-2 | `16px` | `22px` |
| body-1 | `14px` | `20px` |
| caption-1 | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `20px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `2px` |
| medium | `4px` |
| large | `6px` |
| x-large | `8px` |
| circular | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| shadow-2 | `0 1px 2px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12)` |
| shadow-8 | `0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12)` |
| shadow-16 | `0 8px 16px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| duration-fast | `150ms` |
| duration-normal | `200ms` |
| curve-easy-ease | `cubic-bezier(0.33, 0, 0.67, 1)` |

## Quick start (CSS)

```css
/* Fluent UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://fluent2.microsoft.design/ */

:root {
  /* Color */
  --color-brand-background: #0f6cbd; /* Microsoft brand action */
  --color-neutral-background-1: #ffffff; /* Default surface (light) */
  --color-neutral-foreground-1: #242424; /* Default text */
  --color-neutral-foreground-2: #424242; /* Secondary text */
  --color-neutral-stroke-1: #d1d1d1; /* Borders and dividers */
  --color-neutral-background-3: #f5f5f5; /* Subtle layered surface */
  --color-status-danger: #c50f1f; /* Errors and destructive actions */
  --color-status-success: #107c10; /* Success states */
  --color-status-warning: #f7630c; /* Warnings */

  /* Typography */
  --font-display: 'Segoe UI Variable Display', 'Segoe UI', sans-serif;
  --font-body: 'Segoe UI Variable Text', 'Segoe UI', sans-serif;
  --font-mono: 'Cascadia Code', Consolas, monospace;

  /* Type scale */
  --text-display: 68px /* line-height 92px */;
  --text-title-1: 32px /* line-height 40px */;
  --text-title-3: 20px /* line-height 28px */;
  --text-subtitle-2: 16px /* line-height 22px */;
  --text-body-1: 14px /* line-height 20px */;
  --text-caption-1: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Radius */
  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-large: 6px;
  --radius-x-large: 8px;
  --radius-circular: 9999px;

  /* Elevation */
  --shadow-shadow-2: 0 1px 2px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12);
  --shadow-shadow-8: 0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12);
  --shadow-shadow-16: 0 8px 16px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12);

  /* Motion */
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 200ms;
  --motion-curve-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
}
```

## Origin

Microsoft has had several design languages over the years (Metro, Fluent v1, Office Fabric). Fluent 2 (2023+) is the consolidation: one design language, design tokens, and a coordinated set of platform implementations covering Web, Windows, iOS, Android, and macOS.

## Governance

Microsoft design org owns the canonical Fluent 2 spec. Web implementation ships as `@fluentui/react-components` (v9, the Fluent 2 line). Earlier `@fluentui/react` (v8) is maintained but the design language has shifted; mixing is messy.

## Known for

- Cross-platform discipline — the same design tokens and patterns flow into Office, Teams, Windows, and Microsoft 365.
- Token system with a clear primitive → alias → component layering.
- Strong density modes for productivity surfaces (Teams, Outlook, Word).

## Underrated

- The Make-It-Fluent Figma kit is genuinely good — Microsoft tooling underrated by the React community.
- Fluent's motion language (Fluent Motion) ships durations and curves as tokens, not as ad-hoc CSS.

## Watch out for

- Two Fluent React libraries exist (v8 and v9). Adopting v9 in a codebase that still has v8 is a long migration.
- Many Fluent surfaces in Microsoft products diverge from the public spec; the public docs lag what Office actually ships.

## Components worth studying

- **DataGrid** — Compact, Office-grade data grid with row virtualization and keyboard navigation.
- **Persona** — Avatar + presence + identity primitive used across Microsoft 365.
- **Dialog** — Surface model that accommodates Office's preference for inline + modal patterns.

## When to choose Fluent UI

Pick Fluent if you're building inside the Microsoft ecosystem (Office add-ins, Teams apps, Power Platform, Windows). For everything else, Fluent is more useful as a reference for cross-platform token discipline than as an off-the-shelf component library.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Fluent UI by Microsoft — Microsoft's cross-platform design language, finally consolidated. Character: Office-grade neutrals under a single communicating blue — dense, layered surfaces tuned for productivity software at enormous scale. Use a primary colour near #0f6cbd, the typeface "Segoe UI Variable" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Lean into what it's known for: Cross-platform discipline — the same design tokens and patterns flow into Office, Teams, Windows, and Microsoft 365. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Fluent 2 docs](https://fluent2.microsoft.design/)
- [Fluent UI on GitHub](https://github.com/microsoft/fluentui)
- [@fluentui/react-components](https://react.fluentui.dev/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/fluent-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._