Microsoft

---
version: alpha
name: Microsoft-design-analysis
description: Microsoft's Fluent design language is a clean, neutral productivity system anchored on the signature Fluent blue and a set of calm grays. It uses Segoe UI as its type backbone, 2px-radius squares with subtle depth, and a hierarchy carried by whitespace and weight. Surfaces use soft elevation and translucent acrylic layers, giving a sense of light, material, and motion.

colors:
  primary: "#0078d4"
  primary_dark: "#106ebe"
  primary_darker: "#004578"
  primary_light: "#c7e0f4"
  accent: "#2b88d8"
  canvas: "#ffffff"
  surface: "#faf9f8"
  surface_neutral: "#f3f2f1"
  surface_subtle: "#edebe9"
  fg_default: "#323130"
  fg_strong: "#201f1e"
  fg_muted: "#605e5c"
  border_default: "#8a8886"
  border_subtle: "#edebe9"

typography:
  display-xxl:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Segoe UI", -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Microsoft (Fluent UI)

## 1. Visual Theme & Atmosphere

Fluent is built on the idea of "light, depth, and motion" — surfaces feel layered and responsive rather than flat. The base canvas is a warm near-white `#faf9f8` with the signature Fluent blue `#0078d4` carrying every primary action. The overall tone is calm, neutral, and productivity-first: gray dominates, blue punctuates, and nothing shouts.

## 2. Color System

- **Fluent blue** `#0078d4` — primary buttons, links, selection states.
- A stepped blue ramp from `#004578` (pressed) through `#106ebe` to `#c7e0f4` (subtle fill).
- Neutral surfaces run `#ffffff` → `#faf9f8` → `#f3f2f1` → `#edebe9`, with text at `#323130` and muted `#605e5c`.
- Borders are intentionally soft (`#edebe9`) so elevation and color do most of the separation work.

## 3. Typography

Segoe UI throughout, with a broad size ramp from 68px display down to 12px captions. Weights stay within Regular/SemiBold — the system prefers size and spacing contrast over bold. Line heights are loose (1.5+) for readability in dense productivity UIs.

## 4. Components & Shape

Buttons and inputs use a restrained 2px radius with a subtle 1px border and an inner shadow that reads as a bevel. Focus rings are a clear 2px Fluent-blue outline. Cards float on low elevation shadows. The signature acrylic material (translucent, blurred surfaces) appears in menus and navigation panes.

## 5. Layout & Spacing

A 4px base grid (Microsoft's traditional unit) with 8/12/16/24/32/48 spacing tokens. Density is moderate-to-high, tuned for information work: toolbars, property panes, and command bars pack tightly without feeling cramped.

## 6. Motion

Fluent motion is smooth and direction-aware — panels slide from their origin, hover lifts surfaces by a few pixels, and pressed states depress. Durations are 150-300ms with gentle easing.