Microsoft Fluent 2· Design Systemfluent2.microsoft.design

Windows 11 · Microsoft 365 · Teams · Copilot

Material depth, not flat design.

Fluent 2 is Microsoft's open-source design system for Windows 11, Office, Teams, and Copilot. It ships with Figma kits, web components, and tokens across iOS, Android, Windows, and the web.

Color Palette42 tokens

background#f5f5f5

surface#fafafa

surface-alt#ffffff

surface-subtle#f0f0f0

background-dark#202020

surface-dark#292929

surface-alt-dark#2f2f2f

surface-subtle-dark#1a1a1a

ink#242424

text-secondary#424242

text-muted#616161

text-disabled#707070

ink-inverted#ffffff

primary#0078d4

primary-hover#115ea3

primary-pressed#0f548c

primary-stroke#0f6cbd

on-primary#ffffff

red#d13438

red-dark#c50f1f

orange#f7630c

marigold#eaa300

yellow#fde300

green#107c10

green-light#13a10e

teal#02767a

lavender#7160e8

grape#881798

magenta#6b0043

berry#c239b3

success#107c10

success-bg#dff6dd

warning#f7630c

error#d13438

info#0078d4

border#d1d1d1

border-subtle#e0e0e0

border-faint#f0f0f0

border-dark#757575

acrylic-light#fafafa

acrylic-dark#2f2f2f

shadow-soft#e0e0e0

Buttons

TypographyGoogle Font

Interbrand uses Segoe UI Variable

title-xl

Let innovation flow.

52px · 600 · -1.6px

title

Design tokens for every surface

40px · 600 · -1.6px

subtitle

Fluent 2 is Microsoft's open-source design system for Windows 11, Office, Teams, and Copilot. It ships with Figma kits, web components, and tokens across iOS, Android, Windows, and the web.

28px · 400 · 0px

heading

MICROSOFT CORPORATION · REDMOND · GLOBAL

24px · 600 · 0px

large

Fluent 2 is Microsoft's open-source design system for Windows 11, Office, Teams, and Copilot. It ships with Figma kits, web components, and tokens across iOS, Android, Windows, and the web.

20px · 600 · 0px

IconsFluent

Set: Fluent · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Design tokens for every surface

Fluent 2 is Microsoft's open-source design system for Windows 11, Office, Teams, and Copilot. It ships with Figma kits,…

Design System

none

micro

default

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Design tokens for every surface

Fluent 2 is Microsoft's open-source design system for Windows 11, Office, Teams, and Copilot. It ships with Figma kits, web components, and tokens across iOS, Android, Wi…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesign SystemMicrosoft Fluent 2

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Microsoft Fluent 2.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Microsoft Fluent 2 tokens
export const theme = {
  primary: "#0078d4",
  radius: "8px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Fluent 2 gives us one token system across Windows, Office, Teams, and the web — with a Figma kit the whole team ships from.

Microsoft Fluent 2 · Design System