Fluent Design
Search...
StyleKit
Microsoft Fluent Design System

流利设计

Fluent Design.

Cross-device consistency through Light, Depth, Motion, Material, and Scale. Acrylic surfaces, Reveal highlight borders, and purposeful Fluent motion curves — at your fingertips.

Acrylic Material
bg-white/70 backdrop-blur-xl — Acrylic material

Notifications

3 unread alerts

Build Status

All systems operational

Component Library

Core building blocks of the Fluent Design System. Every component uses Reveal highlight borders, Fluent motion, and proper focus indicators.

Primary — Accent fill

Secondary — Outline with Reveal

Subtle — Ghost & Danger

Color Palette

A five-token semantic system built around Microsoft blue. Each color carries specific meaning — from trust and primary action to success and danger.

#0078d4

Microsoft Blue

Primary actions, links, focus

#106ebe

Deep Blue

Hover states, secondary actions

#ffb900

Gold Accent

Highlights, notifications

#e81123

Alert Red

Errors, destructive actions

#00cc6a

Success Green

Confirmations, positive states

Neutral Ramp — Fluent Gray Scale

Gray 190
Gray 180
Gray 160
Gray 150
Gray 130
Gray 120
Gray 90
Gray 60
Gray 50
Gray 30
Gray 20
Gray 10
Gray 5
White

Typography Scale

Segoe UI and its system font fallbacks form the foundation of all Fluent text. Carefully tuned weights and sizes for clarity at every context.

Font Stack

'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif
Display

Fluent Design

text-5xlfont-lightHero titles, large display text
Title Large

Title Large

text-3xlfont-semiboldSection headings, page titles
Title

Title Text Here

text-xlfont-semiboldCard headers, dialog titles
Body Large

Body Large: reads clearly at all sizes.

text-basefont-normalPrimary body content
Body

Body: the default text size for most UI elements.

text-smfont-normalDefault UI text
Caption

Caption text — labels, metadata, helper descriptions.

text-xsfont-normalLabels and metadata

Fluent Principles

Five pillars underpin every design decision in the Fluent Design System. Select a principle to explore its role in depth.

Light

Light illuminates surfaces and creates a sense of hierarchy. Acrylic materials use light to reveal depth and dimension across layers.

Reveal highlight borders glow when the cursor approaches — simulating a light source moving across the interface.

Material & Motion

Acrylic connects surfaces to their environment through translucency and blur. Motion uses precise easing curves to guide attention without distraction.

Depth Layer Comparison

Background content

Acrylic 70%

bg-white/70 backdrop-blur-xl

Acrylic 40%

bg-white/40 backdrop-blur-md

Reveal Highlight — Hover these cards

Primary Reveal

Border glows on hover — simulates a light source

Subtle Reveal

Softer reveal for secondary surfaces

Accent Reveal

Gold accent — highlights and notifications

Fluent Motion Tokens

Fast In/Out

cubic-bezier(0.16,1,0.3,1)
200msMicro-interactions, reveals

Gentle

cubic-bezier(0.33,0,0.67,1)
300msContent transitions

Snappy

cubic-bezier(0,0,0,1)
150msToggles, checkboxes

Slow Out

cubic-bezier(0.1,0.9,0.2,1)
500msPage entrances, reveals

Design Guidelines

Rules distilled from Microsoft's Fluent Design specification. Applied consistently, they create professional, trustworthy experiences across every platform.

Do

  • +Use bg-white/70 backdrop-blur-xl for all acrylic surfaces
  • +Apply hover:border-white/60 Reveal highlight on interactive cards
  • +Use bg-[#0078d4] for all primary action buttons
  • +Maintain rounded-lg (8px) on cards, panels, and buttons consistently
  • +Add shadow-lg with low opacity to communicate depth hierarchy
  • +Apply focus:ring-2 focus:ring-[#0078d4] focus:ring-offset-2 on all focusable elements
  • +Use transition-all duration-200 ease-out for all Fluent motion
  • +Show Reveal highlight border on hover via group + group-hover classes
  • +Maintain WCAG AA contrast — 4.5:1 for text, 3:1 for UI elements

Don't

  • -No harsh flat design — every surface needs depth or material cues
  • -No dark-only showcase — Fluent supports both, default to light
  • -No playful animations — Fluent motion is purposeful and functional
  • -No rounded-full on rectangular panels — only for icon buttons and avatars
  • -No heavy drop shadows with colored tints — keep shadows neutral gray
  • -No removing focus rings — keyboard users rely on visible focus indicators
  • -No duration-500+ for micro-interactions — keep transitions under 300ms
  • -No neon or highly saturated custom colors outside the Fluent palette
  • -No layout-shifting animations — motion should not displace static content

Core Token Reference

Border Radius

sm — controlsrounded (4px)
md — cardsrounded-lg (8px)
lg — dialogsrounded-xl (12px)
full — avatarrounded-full

Shadow Scale

Restingshadow-sm
Raisedshadow-md
Floatingshadow-lg
Dialogshadow-xl

Spacing

Component gapgap-4 (16px)
Section gapgap-8 (32px)
Card paddingp-6 (24px)
Input paddingpx-3 py-2
Fluent Design

Part of StyleKit — a curated collection of design system showcases. Inspired by Microsoft's Fluent Design System.

DocumentationAll StylesHome

Fluent Design System — Light · Depth · Motion · Material · Scale

Light·Depth·Motion·Material·Scale