# microsoft.ai — Design System

## 1. Visual Theme & Atmosphere

Microsoft AI's site embodies **corporate kinetics**: a warm-white canvas with a single bold red primary, rendered at cinematic viewport widths up to 1728px. The aesthetic is deliberately restrained — almost editorial — using fluid viewport-unit scaling (`--unit-fx`, `--unit-fy`) to create motion that feels purpose-built rather than decorative. The 11px vertical rhythm unit (`--unit-vr`) telegraphs a grid-literate engineering culture behind the design. Red is not playful here; it is authoritative.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Brand / Accent | `red` (#ff0000) | Primary CTAs, hover states, brand marks |
| Warm White Background | `rgb(255, 248, 243)` | Page canvas |
| Pure White Surface | `#ffffff` | Cards, modals, elevated panels |
| Black | `#000000` | Body text, borders |

The palette is intentionally minimal: one accent, two neutrals, and white. Absence of mid-grays keeps the site feeling airy and premium.

## 3. Typography Rules

- **Primary typeface**: Custom/proprietary sans-serif; fallback chain suggests a brand-licensed typeface
- **Vertical rhythm**: `--vertical-rhythm: 11px` — all spacing derives from this unit
- **Scale**: Fluid via `--unit-vw` and `--unit-vhfix` — type sizes scale proportionally with viewport
- **No decorative transforms**: All text is set naturally; uppercase labels absent from tokens

| Level | Approach |
|-------|----------|
| Hero | Viewport-unit scaled, large display weight |
| Body | Derived from 11px rhythm unit |
| Caption | Small multiples of `--unit-vr` |

## 4. Component Stylings

- **Buttons**: Red fill with white text — single accent color makes every CTA immediately legible
- **Navigation**: Transparent/sticky; inherits warm-white page background
- **Cards**: White (#ffffff) elevated from the warm-white page via luminance contrast rather than shadows
- **Easing**: `--alias-easeOut: cubic-bezier(0.43, 0.195, 0.02, 1)` — fast-in, slow-out; decisive and intentional

## 5. Layout Principles

- **Max canvas**: `--max-width: 1728px` — designed for large displays; content breathes at wide viewports
- **Reference width**: 1728px with fluid `--unit-fx` scaling for sub-pixel precision
- **Breakpoints**: 340 → 600 → 768 → 1024 → 1728px
- **Whitespace**: Generous; rhythm-unit spacing prevents cramping even at high content density

## 6. Depth & Elevation

- Surface elevation achieved through color temperature contrast (warm page background vs. pure-white cards)
- Soft warm shadow: `rgba(93, 82, 75, 0.3) 0px 4px 80px 0px` — wide-spread, barely-there lift
- No aggressive drop shadows; depth is implied, not stated

## 7. Do's and Don'ts

**Do:**
- Use red exclusively for calls-to-action and brand anchors
- Respect the 11px vertical rhythm in all spacing decisions
- Let layouts breathe at 1728px — do not compress to 1280px max
- Use the custom easing curve for interactive transitions

**Don't:**
- Introduce secondary accent colors that compete with red
- Use cold-gray backgrounds — the warmth of `rgb(255, 248, 243)` is intentional
- Break the fluid type scaling with fixed pixel values at wide screens

## 8. Responsive Behavior

- Fluid scaling via CSS `calc()` and viewport units — not purely breakpoint-driven
- Five breakpoints: 340, 600, 768, 1024, 1728
- Mobile: single-column, rhythm preserved
- Desktop: full viewport-width hero sections up to 1728px

## 9. Agent Prompt Guide

> "Design in the style of Microsoft AI: warm off-white background (`rgb(255, 248, 243)`), pure red single accent, large-canvas layout up to 1728px wide, 11px vertical rhythm, fluid viewport-unit scaling, decisive cubic-bezier easing. Minimal palette — no competing accent colors."

**Quick reference:**
- Background: `rgb(255, 248, 243)`
- Accent: `#ff0000`
- Surface (card): `#ffffff`
- Easing: `cubic-bezier(0.43, 0.195, 0.02, 1)`

*Generated by Sparkbites — extracted from live CSS analysis*