Fluent 2 Design System

Build with Fluent UI React

Microsoft's open-source design system for building coherent, accessible, high-quality web experiences. Every color, type style, and spacing value on this page comes from Fluent design tokens.

Fluent 2 guidelines

Color tokens

colorBrandBackground

colorBrandBackgroundHover

colorBrandBackground2

colorNeutralBackground1

colorNeutralBackground3

colorPaletteGreenBackground3

colorPaletteRedBackground3

colorPaletteYellowBackground3

Type ramp

Title1The quick brown fox

Title3The quick brown fox

Subtitle2The quick brown fox

Body1The quick brown fox jumps over the lazy dog

Caption1The quick brown fox jumps over the lazy dog

Components in context

Configure your workspace

Project name

Region

Enable usage analytics

Automatic deployments

Updated 5 minutes ago

12,840Active sessions this quarter

Capacity used

72% of plan limit

Ada LovelaceUpdated the design tokens

Grace HopperReviewed 4 pull requests

Alan TuringCommented on Navigation spec

All checks passed.The latest build is ready to ship.

Buttons and inputs

Volume