Microsoft Brand Design System Deep-Dive

1. Brand Overview

Microsoft’s Singapore site feels exactly like you’d expect from a company that’s been setting corporate UI standards for decades: clean, direct, functional.
There’s no experimental typography or playful color shifts. This is design for scale — a system that works across Windows, Office, Azure, Xbox, and every possible consumer and enterprise touchpoint.

The vibe: corporate-modern with a tech optimism edge. It’s not minimalism in the Apple sense — there is visual density — but it’s controlled. You see clear grid discipline, consistent typography hierarchy, and a palette that’s been locked down for years.

They lean heavily on Segoe UI, which is their long-standing system font. It’s practical: wide language support, legible at small sizes, and instantly associated with Windows. This choice anchors the brand identity across all platforms.

The primary blue (#0067b8) is the hero. If you’ve used any Microsoft product in the last decade, you’ve clicked this color. It’s the CTA, the link, the highlight. Secondary is white, which keeps components crisp against mostly light backgrounds.

There’s an 8px spacing scale — no surprise here. The rhythm is predictable, which makes the layout feel consistent even when the content changes. Breakpoints are numerous, meaning they’re catering to an insane range of devices, from tiny embedded screens to ultra-wide desktops.

Overall, this system is built for longevity and consistency. No trendy gradients, no sudden visual gimmicks. They’re optimizing for recognizability and familiarity. You could drop these components into any Microsoft product and they’d feel right at home.

2. Color System

2.1 Primary Colors

The main brand color is rgb(0, 103, 184) → #0067b8.
This is a medium-deep blue — bright enough for attention but still professional. Blue’s psychology here is textbook: trust, reliability, technology, stability. That’s exactly what Microsoft wants you to feel before you buy Azure services or Office 365.

Compared to competitors:

• Google leans multi-color in its logo but uses blues lighter than Microsoft’s.
• Apple keeps blue as a secondary accent, not a primary brand anchor.
• IBM uses a darker, more corporate blue (#0033A0), which feels heavier.

Microsoft’s blue hits a balance: not too playful, not too cold.

Secondary color is pure white (#ffffff) — acting as the main background and text color for buttons on blue backgrounds.

2.2 Complete Palette

2.3 Color Relationships

The black (#000000) on white background is perfect for WCAG AAA contrast — 21:1 ratio.
Primary blue (#0067b8) on white has a ratio of about 4.5:1 — just hitting WCAG AA for normal text, more than fine for large text and buttons.

Dark mode? Not here. This palette is tuned for light surfaces. Blue is the constant anchor, but they don’t invert for dark themes on this site.

2.4 Usage Guide

Works well:

• Blue (#0067b8) text links on white backgrounds — clear, accessible.
• White text on blue buttons — high contrast.
• Black text on card white — clean and readable.

Avoid:

• Blue text on black background — too low contrast.
• Yellow (#ffb900) text on white — fails contrast. Use yellow only for small accents or badges.

3. Typography

3.1 Font Families

Primary: "Segoe UI", SegoeUI, Helvetica Neue, Helvetica, Arial
No Google Fonts, no Adobe Fonts. This is entirely system-safe for Windows and web. No variable fonts.

3.2 Type Scale

3.3 Hierarchy

Large headings (37px, 29px) are sparse — reserved for hero titles.
16px and 15px sizes dominate for UI — everything readable on desktop and mobile without scaling quirks.
Weights shift between 400 and 600 for emphasis — no extreme bolds. This keeps the aesthetic consistent and avoids visual noise.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. You see 4px increments occasionally, but 8px is the heartbeat.

4.2 Layout

Breakpoints are everywhere — over 30 distinct pixel values from 78px up to 1779px. This is hyper-responsive design. No single max-width; instead, it adapts continuously.

Bootstrap and Vuetify are in play — so grid layouts are predictable: container > row > col.

5. Visual Elements

Border Radius

Corners are mostly sharp — 2px is barely rounded.

Shadows

Two shadows:

1. rgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) 0px 1px 2px 0px — subtle, layered.
2. rgb(204, 204, 204) 1px 1px 5px 3px — rare, less subtle.

This is not flat design, but shadows are minimal.

Borders

Mostly 1px solids in grays, occasionally inset/outset for inputs or iframe outlines. Many elements use rgba(0, 0, 0, 0.1) for dividers.

6. Components

6.1 Buttons

Logo Button (c-button-logo all-ms-nav)

• Default: transparent background, #262626 text, padding 16px 24px 16px 15px, border-radius 0px.
• Hover: text #f2f2f2, black background.
• Active: blue background (#0067b8), black text.
• Focus: dashed outline, black background, white box-shadow.

Primary Button (btn btn-primary)

• Default: blue background (#0067b8), white text, padding 10px 12px, radius 2px, border 2px solid transparent.
• Hover: white background, black text, shadow, slight translate.
• Active: transparent background, black text, 2px solid border.
• Focus: white background, black text, shadow, 2px white border.

Secondary Faint (btn bg-body btn-faint-secondary)

• Default: white background, black text, padding 10px 12px, radius 2px.
• Hover/Focus: same translate/shadow pattern as primary.

6.2 Links

Variants:

• Blue underlined links — hover removes underline, changes to near-black.
• Dark text links (#262626) — no underline, hover darkens.
• Gray footer links — hover underlines.

6.3 Forms

No text input styles extracted — likely default Bootstrap/Vuetify with Microsoft overrides.

6.4 Cards

Card backgrounds are white, text black, icon accents in #0078d4. Padding aligns to 12px/16px scale. Shadows are minimal.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0067b8;
  --color-secondary: #ffffff;
  --color-black: #000000;
  --color-dark-gray: #616161;
  --color-deep-charcoal: #262626;
  --color-card-icon-blue: #0078d4;
  --color-link-hover-blue: #004a7f;
  --color-yellow-badge: #ffb900;
  --color-card-bg: #ffffff;
  --color-card-text: #000000;

  /* Typography */
  --font-family-base: "Segoe UI", SegoeUI, Helvetica Neue, Helvetica, Arial;
  --font-size-h1-xl: 2.31rem;
  --font-size-h1-lg: 1.81rem;
  --font-size-h1-md: 1.13rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.94rem;
  --font-size-xs: 0.81rem;
  --font-size-xxs: 0.69rem;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.85;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-36: 36px;
  --space-48: 48px;
  --space-64: 64px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 10px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-default: rgba(0, 0, 0, 0.13) 0px 3px 7px 0px, rgba(0, 0, 0, 0.11) 0px 1px 2px 0px;
  --shadow-alt: rgb(204, 204, 204) 1px 1px 5px 3px;
}

8. AI Coding Assistant Prompt

# Microsoft Design System Specification

You are a Microsoft design expert. Build UIs matching their visual language exactly.

## Brand Context
Microsoft’s web design is corporate-modern, functional, and built for scale. It uses a locked-down palette, predictable grids, and the Segoe UI typeface for consistency across products. Blue is the action color; white and black handle most content surfaces and text.

## Color Palette
- Primary Blue: #0067b8 — Primary buttons, CTAs, link text
- Secondary White: #ffffff — Backgrounds, text on blue
- Black: #000000 — Primary text
- Dark Gray: #616161 — Secondary text
- Deep Charcoal: #262626 — Logo, navigation links
- Card Icon Blue: #0078d4 — Card icons
- Link Hover Blue: #004a7f — Hovered links
- Yellow Badge: #ffb900 — Badges, alerts
- Card Background: #ffffff — Component surfaces
- Card Text: #000000 — Text inside cards

## Typography
Font: "Segoe UI", SegoeUI, Helvetica Neue, Helvetica, Arial

| Element   | Size      | Weight | Line Height | Use |
|-----------|-----------|--------|-------------|-----|
| H1 XL     | 2.31rem   | 600    | 1.20        | Hero titles |
| H1 LG     | 1.81rem   | 600    | 1.20        | Section titles |
| H1 MD     | 1.13rem   | 500    | 1.33        | Small headings |
| Body      | 1rem      | 400    | 1.50        | Paragraph text |
| Body Bold | 1rem      | 600    | 1.50        | Emphasis |
| Small     | 0.94rem   | 400    | 1.50        | UI labels |
| Caption   | 0.81rem   | 400    | 1.85        | Metadata |
| XSmall    | 0.69rem   | 400    | 1.45        | Fine print |

## Spacing & Grid
Base: 8px grid. Scale includes: 1, 2, 3, 4, 6, 7, 8, 10, 11, 12, 13, 15, 16, 18, 20, 24, 30, 36, 48, 64px.

## Border Radius
- sm: 2px — Buttons, small elements
- md: 10px — Rare decorative spans
- full: 50% — Circular avatars/icons

## Shadows & Depth
- Default: rgba(0,0,0,0.13) 0px 3px 7px, rgba(0,0,0,0.11) 0px 1px 2px
- Alt: rgb(204,204,204) 1px 1px 5px 3px

## Component Specifications

### Primary Button
Default: bg #0067b8, text #ffffff, padding 10px 12px, radius 2px, border 2px solid transparent  
Hover: bg #ffffff, text rgba(0,0,0,0.9), border 1px solid #cccccc, shadow rgb(119,119,119) 2px 2px 2px, transform translate(0.25rem, 0px)  
Active: bg initial, text rgba(0,0,0,0.8), border 2px solid, no shadow  
Focus: bg #ffffff, text rgba(0,0,0,0.9), border 2px solid #ffffff, shadow rgb(119,119,119) 2px 2px 2px

### Secondary Button
Same as primary but default bg #ffffff, text #000000.

### Navigation Link
Default: color #262626, no underline  
Hover: color rgba(0,0,0,0.8), no underline

### Input Fields
Border: 1px solid rgba(0,0,0,0.7), radius 2px, bg #ffffff  
Focus: outline rgba(0,0,0,0.6) solid 1px

### Card
bg #ffffff, text #000000, padding 12px, optional icon color #0078d4, shadow default

## Layout & Responsive Rules
Bootstrap grid with container/row/col. Multiple breakpoints: 78px – 1779px. Use 8px grid for internal spacing.

## Interaction Rules
- Transitions ~150ms ease for hover/focus
- Focus indicators: outlined, dashed or solid depending on element
- Hover states often invert bg/text colors or add subtle shadow

## DO
- Use only palette colors
- Keep spacing multiples of 8px
- Use Segoe UI exclusively
- Maintain sharp corners except where radius tokens apply
- Respect outline styles for accessibility

## DON'T
- Invent new colors
- Use heavy shadows
- Mix large rounded corners with sharp UI
- Change hover behavior patterns

## Code Examples

```css
.btn-primary {
  background-color: #0067b8;
  color: #ffffff;
  padding: 10px 12px;
  border-radius: 2px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background-color: #ffffff;
  color: rgba(0,0,0,0.9);
  border: 1px solid #cccccc;
  box-shadow: rgb(119,119,119) 2px 2px 2px;
  transform: translate(0.25rem, 0px);
}
.btn-primary:focus {
  border: 2px solid #ffffff;
  box-shadow: rgb(119,119,119) 2px 2px 2px;
}
```

```css
.card {
  background-color: #ffffff;
  color: #000000;
  padding: 12px;
  border-radius: 2px;
  box-shadow: rgba(0,0,0,0.13) 0px 3px 7px, rgba(0,0,0,0.11) 0px 1px 2px;
}
```

```css
.input {
  border: 1px solid rgba(0,0,0,0.7);
  border-radius: 2px;
  padding: 8px;
  font-size: 1rem;
  background-color: #ffffff;
}
.input:focus {
  outline: rgba(0,0,0,0.6) solid 1px;
}
```

9. Summary

TL;DR: Microsoft’s design system is built for consistency across products — predictable grids, locked palette, Segoe UI everywhere. Blue (#0067b8) is the action color, white is the canvas, black is the content. Components are simple, with minimal radius and subtle shadows.

Brand Keywords:

• corporate-modern
• tech-optimist
• grid-disciplined
• color-consistent
• accessible-practical