# Fluent 2

## Principles
Natural on every device, built for focus, one for all (inclusive), unmistakably Microsoft.

## Layout
- 4px base unit. Spacing tokens: 2, 4, 6, 8, 10, 12, 16, 20, 24, 32.
- Responsive breakpoints (web): small 320–479, medium 480–639, large 640–1023, x-large 1024–1365, xx-large 1366–1919, xxx-large 1920+.
- Minimum target 24x24px for pointer, 40x40px or larger for touch-first surfaces.

## Typography (Segoe UI Variable on Windows, Segoe UI on web)
| Style | Size/Line |
|---|---|
| Caption 2 | 10/14 |
| Caption 1 | 12/16 |
| Body 1 | 14/20 (default) |
| Subtitle 2 | 16/22 |
| Subtitle 1 | 20/28 |
| Title 3 | 24/32 |
| Title 2 | 28/36 |
| Title 1 | 32/40 |
| Large title | 40/52 |
| Display | 68/92 |
Weights: Regular 400 and Semibold 600. Use sentence case everywhere.

## Color
- Use alias tokens (`colorNeutralForeground1`, `colorNeutralBackground1`, `colorBrandBackground`, `colorNeutralStroke1`), never global palette values directly in components.
- Neutral palette carries most of the UI. Brand color is for primary actions, selection, and focus emphasis only.
- Ship light, dark, and high-contrast themes. High contrast must use system colors.

## Shape and depth
- Corner radius tokens: None 0, Small 2, Medium 4 (default for controls), Large 8 (cards, flyouts), X-Large 12 (dialogs), Circular.
- Shadows: shadow2 (cards at rest), shadow4 (hover/raised), shadow8 (flyouts, menus), shadow16 (callouts), shadow28 (panels), shadow64 (dialogs).
- Windows materials: Mica for the app background/title bar, Acrylic for transient surfaces (menus, flyouts). Don't use Acrylic for large static areas.

## Components
- Button appearances: primary (one per surface), default (secondary), outline, subtle, transparent.
- Use Dialog for blocking decisions, Drawer for supplementary panels, Popover for lightweight contextual content, MessageBar for persistent page-level status, Toast for transient confirmation.
- Use the Fluent System Icons set: Regular style by default, Filled for the selected state.

## Motion
Purposeful and quick: ultra-fast 50ms, faster 100ms, fast 150ms, normal 200ms, gentle 250ms, slow 300ms. Use decelerate easing for entering and accelerate for exiting. Respect reduced motion.

## Output
In React, use `@fluentui/react-components` with `FluentProvider` and `tokens.*` in `makeStyles`. For reviews, map each issue to the token or component that fixes it.