Microsoft

Microsoft is a productivity platform before it is a brand. Five decades of Windows, Office, and now Microsoft 365 have run through nearly every desk on earth, which means the company's visual system has had to optimize for an unusual constraint — it has to host email and spreadsheets and slide decks and code editors and chat clients simultaneously, without favoring any of them, across light and dark and high-contrast and forty-plus locales. Fluent 2, the current iteration of that system, is the answer to that constraint: chrome calm enough to disappear behind whatever document, table, or thread the user actually came to read.

Microsoft 365 Edition Dark Mode Edition

Microsoft 365 Edition

The productivity-platform daylight register: white card on Fluent's documented light-gray page, canonical Microsoft Blue as the single interactive signal, semibold-everywhere chrome holding the office.com / Microsoft 365 reading. Fluent 2's identity is restraint at scale — the design system has to host email and spreadsheets and slide decks at the same time without favoring any of them. The atmosphere reads that discipline through the documented Fluent radii ladder (2-12px), the documented motion baseline (200ms with curveEasyEase), and a humanist sans (Open Sans, sharing Steve Matteson's hand with Segoe UI). A study in how a brand spanning four decades of productivity software earns continuity through tokens, not gestures.

Install at runtime

Run this snippet in any browser console where Void Energy is loaded (or paste it into your app's bootstrap). The atmosphere registers with the engine and renders immediately as a temporary preview — it persists in the visitor's preferences only if they Apply it site-wide.

Physics: flat

Mode: light

Live preview

A believable product moment rendered against the active atmosphere. Hover, focus, and toggle the controls — typography weight, button tracking, corner radii, and motion timing all carry the brand's identity.

Workspace settings

Welcome back

Configure how you collaborate, then jump back into the channels you were active in.

Workspace name

Invite teammate

Search by name or email — Combobox with descriptions.

Notifications

Atmosphere updates

Mentions and replies

Weekly digest

Recent channels

Typography

Headings, body, and signal text rendered against the active atmosphere.

Typefaces

The active heading and body families — brand override first, atmosphere default second.

Heading · --font-heading

Open Sans

Body · --font-body

Open Sans

Heading scale

Six levels, each picking up the brand's weight, tracking, and transform tokens.

h1 — Microsoft

h2 — Microsoft 365 Edition

h3 — Subsection

h4 — Section header

h5 — Subheading

h6 — Minor subheading

Body & secondary text

Standard reading copy and supporting metadata.

Paragraph — body typography, dim color. Standard readable text for descriptions and content.

Small — small typography, mute color. Used for captions and metadata.

Caption — caption level utility class.

Brand overrides

Beyond the typeface, brand profiles can tune weight, tracking, and text-transform per role. Display covers h1/h2, Heading covers h3/h4, Body covers paragraphs and small text, Button covers all .btn-* labels. Anything not declared inherits from the atmosphere's defaults.

Supported overrides & this brand's values

A brand profile can override 4 weights, 4 trackings, and 3 transforms (Body has no transform — prose never gets uppercased).

Display weight (h1, h2) · --weight-display 600
Display tracking (h1, h2) · --tracking-display …
Display transform (h1, h2) · --text-transform-display …
Heading weight (h3, h4) · --weight-heading 600
Heading tracking (h3, h4) · --tracking-heading …
Heading transform (h3, h4) · --text-transform-heading …
Body weight (p, small) · --weight-body …
Body tracking (p, small) · --tracking-body …
Button weight (.btn-*) · --weight-button 600
Button tracking (.btn-*) · --tracking-button …
Button transform (.btn-*) · --text-transform-button …

Palette & shape

The color palette, corner geometry, and motion curves under the active atmosphere. Atmospheres change the values; the architecture never moves.

Energy — Brand axis

The two colors that change most per atmosphere. Primary drives CTAs, focus rings, and headings. Secondary tints hovers, press feedback, toggle thumbs, and the selected channel in the live preview above.

energy-primary

energy-secondary

Surfaces

Background layers from the depth model. Canvas is the floor — sunk and spotlight are its recess and ambient variants. Surface is where floating elements live. Every tile carries --border-color at var(--physics-border-width), so the border tier is visible on each outline.

bg-canvas

bg-sunk

bg-spotlight

bg-surface

Signal — Text hierarchy

Three emphasis levels for information hierarchy.

Main Dim Mute

Color extensions

Two additional palettes layered on top of the five-layer system. Neither is a brand-axis variable, so they don't change much per atmosphere.

Semantic — success, error, premium, and system carry the same meaning on every brand. Most brands inherit the defaults; the rare override applies when a brand's primary hue would clash (e.g. a green primary forces a different success green).

Success

Positive outcome

Error

Destructive, failure

Premium

Attention, cost

System

Informational

Data palette — 8 categorical slots derived from primary

Hue-rotated 45° per step from --energy-primary in OKLCH. Cool atmospheres yield cool-leaning palettes; warm yield warm-leaning. Use for chart series, chips, tags, kanban columns, avatar fallbacks, and calendar categories — anywhere unrelated-by-severity data needs distinct identity. Not for severity (data-3 means "third slot," not "success"). Auto-contrast handles text color on any bg-data-* tile.

data-1

data-2

data-3

data-4

data-5

data-6

data-7

data-8

Radii — corner geometry

All five radius levels, rendered with the active atmosphere's tokens. Brand-overridden values are emphasized.

--radius-sm 2px

--radius-md 4px

--radius-lg 8px

--radius-xl 12px

--radius-full …

Motion

Brand profiles can also override the system's speeds and easing curves. The square below uses --speed-slow and --ease-spring-snappy — both carried by the brand axis when set, otherwise inherited from the active physics preset. Hover the demo to play.

Supported overrides & this brand's values

A brand profile can override 3 speed levels and 4 easing curves. Anything not declared inherits from the active physics preset (glass / flat / retro). Cascade delays (--delay-cascade, --delay-sequence) are physics-only and not part of the brand axis.

Fast · --speed-fast 150ms
Base · --speed-base 200ms
Slow · --speed-slow 300ms
Flow · --ease-flow …
Spring (gentle) · --ease-spring-gentle cubic-bezier(0.33, 0, 0.67, 1)
Spring (snappy) · --ease-spring-snappy cubic-bezier(0.1, 0.9, 0.2, 1)
Spring (bounce) · --ease-spring-bounce …