Microsoft

# Microsoft Design System (Fluent)

## Visual Theme & Atmosphere
Professional, enterprise-ready, accessible. Microsoft Fluent Design balances clean surfaces with depth through acrylic materials and reveal effects. The signature blue (#0078D4) conveys trust and professionalism. Every decision prioritizes accessibility and cross-platform consistency.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #0078D4 | Brand, links, CTAs |
| Background | #FFFFFF | Main canvas |
| Surface | #FAF9F8 | Cards, panels |
| Text | #323130 | Primary text |
| Muted | #605E5C | Secondary text |
| Border | #EDEBE9 | Dividers |

## Typography Rules
- **Font**: Segoe UI, system-ui
- **Base Size**: 16px
- **H1**: 2.5rem / weight 700
- **H2**: 2rem / weight 600
- **H3**: 1.5rem / weight 600
- **Body**: 1rem / weight 400 / line-height 1.5

## Component Stylings
- **Buttons**: 4px radius, primary blue or neutral, 32px height
- **Cards**: 4px radius, subtle border, hover elevation
- **Inputs**: 4px radius, bottom border or filled, blue focus
- **Navigation**: Left rail or top bar, consistent across products

## Layout Principles
- 4px base grid
- Max content width: 1200px
- Consistent 16px/24px spacing
- Left-aligned, structured layouts