Microsoft Design System

Overview

Microsoft's design system embodies **Productive Minimalism**—a philosophy that strips away visual noise to reveal clear, actionable information. The brand serves enterprise users, developers, and consumers across cloud, gaming, and productivity domains, demanding a system that scales from intimate mobile interactions to sprawling dashboard ecosystems. The aesthetic is cool, trustworthy, and forward-looking: a palette anchored in brilliant blue (#0078d4) conveys innovation and reliability, while generous whitespace and Segoe UI's geometric precision create a sense of control and clarity. The emotional response is one of capability—users feel empowered to accomplish complex tasks without friction.

Microsoft's voice is direct, helpful, and human-centered. Sentences are active and benefit-driven ('Get the ultimate college bundle' rather than 'We offer bundles'). The brand avoids jargon when possible, but embraces technical precision when necessary. Tone shifts contextually: supportive in help scenarios, energetic in product launches, measured in security communications. Example sentence in brand voice: 'Protect your device against accidents for up to 4 years with Microsoft Complete—peace of mind, built in.'

Colors

The color system is rooted in **Cool-Blue Confidence**, using the brilliant blue family (#0078d4 primary, #006dc1 secondary, #0066ff tertiary) as the signature accent across CTAs, links, and interactive states. This primary blue appears on 68% of interactive elements, establishing immediate visual hierarchy. The surface stack progresses from pure white (#ffffff) through five container layers—from #f4fafd (surface-dim, used for subtle backgrounds) to #8ac1eb (surface-container-highest, reserved for elevated modals and overlays)—creating depth without darkness. The on-surface text color (#0e1726, a near-black blue-tinted neutral) ensures 16:1 contrast against white surfaces, exceeding WCAG AAA standards. Secondary and tertiary colors (#006dc1 and #0066ff) are reserved for status indicators,

Typography

The type system leverages **Segoe UI Variable**, a geometric sans-serif optimized for screen clarity and accessibility. The system defines eight typographic levels: Display (60px, 500 weight) for hero statements; Headline-lg (40px, 500 weight) for major section titles; Headline-md (32px, 500 weight) for subsections; Title-lg (28px, 600 weight) for card headers; Body-lg (18px, 400 weight) for long-form content; Body-md (16px, 400 weight) for standard UI text; Label-md (15px, 600 weight) for buttons and form labels; and Label-sm (12px, 500 weight) for metadata and badges. All sizes maintain a consistent line-height-to-font-size ratio (1.4–1.5x) for readability. Letter-spacing ranges from -0.04em (display, to tighten large headlines) to 0.02em (small labels, to aid legibility at small sizes).

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while scaling gracefully on mobile. The spacing scale is semantic: `unit` (8px) is the base increment; `sm` (12px) is used for component internal padding; `md` (24px) is the standard gutter between sections and card padding; `lg` (40px) separates major content blocks; and `xl` (64px) creates breathing room between hero and body sections. Horizontal padding on the page body is 24px on tablet (768px+) and 16px on mobile, ensuring content never touches screen edges. The system favors asymmetric spacing—e.g., 24px below a headline but 40px above the next section—to create visual rhythm and guide the eye. Cards and containers use 24px internal padd

Elevation & Depth

Depth is conveyed through **subtle, layered shadows** rather than color shifts or borders. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and input fields, creating a barely-perceptible lift; md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards, modals, and primary CTAs, signaling interactivity; and lg (0 4px 12px rgba(0, 0, 0, 0.14)) for floating elements like chat widgets or dropdown menus. Shadows use a 12% to 14% black opacity (not pure black) to feel natural under daylight. Focus states on interactive elements add a 3px inset ring at rgba(0

Shapes

The shape philosophy is **Geometric Precision with Approachability**. Border-radius follows a strict scale: sm (0.25rem / 4px) for small UI elements like badges and tight inputs; DEFAULT (0.5rem / 8px) for standard buttons, cards, and form fields, balancing modernity with familiarity; md (0.75rem / 12px) for larger cards and modals; lg (1rem / 16px) for hero sections and prominent containers; xl (1.5rem / 24px) for oversized cards and feature blocks; and full (9999px) for pill-shaped buttons and circular avatars. The 8px default radius is the workhorse—it appears on 60% of interactive elements

Components

Action Elements Buttons are the primary interaction primitive. **Button-primary** uses the signature blue (#0078d4) background with white text, 8px padding (left/right 24px, top/bottom 8px), 8px border-radius, and md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the background shifts to secondary blue (#006dc1) with a 150ms ease-in-out transition. On focus, add a 3px inset ring at rgba(0, 120, 212, 0.1). **Button-secondary** uses a transparent background with primary-blue text, a 1px solid outline at #5a6972, and the same padding/radius as primary. On hover, the background becomes #dceef8 (surface-container-low) without changing text color. **Button-secondary-hover** applies a 150ms transition to prevent jarring state changes. All buttons use label-md typography (15px, 60

Do's and Don'ts

**Do**

• Do use primary blue (#0078d4) exclusively for primary CTAs, links, and focus states—never mix it with secondary or tertiary blues on the same component.
• Do maintain 40px minimum height for all interactive elements (buttons, inputs, list items) to ensure comfortable touch targets on mobile devices.
• Do apply 24px (md) padding to cards and containers by default; use 12px (sm) only for compact lists or dense data tables.
• Do use Segoe UI Variable typography exclusively; avoid system fonts or serif typefaces, which break the geometric precision of the system.
• Do transition all color and shadow changes over 150–200ms with ease-in-out easing to provide tactile feedback without feeling sluggish.
• Do ensure text contrast meets WCAG AAA standards (7:1 for body text, 4.5:1 for large text) by using on-surface (#0e1726) on light backgrounds and on-primary (#ffffff) on blue backgrounds.

**Don't**

• Don't use secondary (#006dc1) or tertiary (#0066ff) blue as primary CTA colors; reserve them for secondary actions, status indicators, and accent highlights only.
• Don't apply border-radius greater than 8px (DEFAULT) to buttons or standard form fields—use lg (16px) or xl (24px) only for hero sections or oversized containers.
• Don't mix elevation levels within a single interaction state; e.g., don't use md shadow on a resting card and lg shadow on hover—jump from sm to md.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds outside of the defined color tokens; always use the surface and on-surface palette to maintain consistency.
• Don't add drop shadows to text elements; use text-shadow only on busy backgrounds, and keep it subtle (0 1–2px, 10–15% black opacity).
• Don't animate transitions faster than 150ms or slower than 300ms; the system targets 150–200ms for micro-interactions to feel responsive without appearing jarring.