Office.com Brand Design System Deep-Dive

1. Brand Overview

Microsoft’s Office.com is not just a landing page for Word, Excel, and PowerPoint—it’s the portal into their productivity ecosystem. The design language here is a blend of corporate clarity and consumer approachability. You can tell they want it to feel serious enough for enterprise IT managers, but friendly enough for students logging in to write an essay.

The vibe: clean, controlled, and consistent. Every choice feels like it went through a "will this look corporate enough?" filter. The typography is reliably Segoe UI—Microsoft’s house font—so everything feels part of the broader Microsoft brand. Colors are restrained: the primary blue (#464feb) is the hero, supported by a lot of grayscale values. There’s no wild accent color trying to grab attention; the palette is professional and functional.

This site is for anyone who uses Microsoft 365—business pros, educators, students, and casual users. The design reflects that breadth: it avoids niche visual styles and stays neutral. Buttons have clear states. Spacing is predictable. Borders are minimal. Shadows are soft and rare, used only for subtle depth on tab elements.

What stands out is how Office.com’s design system is essentially a subset of Microsoft’s larger Fluent Design principles, but flattened for the web. No acrylic blur backgrounds here. Just solid color fills, crisp text, and consistent padding. It’s a UI that says: “You’re here to work. We’ll stay out of your way.”

2. Color System

2.1 Primary Colors

The main brand color is rgb(70, 79, 235) → #464feb. It’s a saturated, medium-deep blue with a touch of purple—a corporate blue, but warmer than pure azure. This is the color of CTAs (“Try for free”, “See plans & pricing”), primary buttons, and certain icons.

This color works because it’s strong enough to hold white text, and distinct enough to be recognisable as “Microsoft 365 blue.” Compare this to Google Workspace’s multicolor icons—Microsoft sticks to one dominant hue for consistency.

2.2 Complete Palette

2.3 Color Relationships

Contrast:

• Primary Blue (#464feb) on white easily passes WCAG AA for normal text.
• White (#ffffff) on Primary Blue is also safe—high contrast.
• Dark Gray (#262626) on white is excellent for body text.

Accessibility: They’re playing it safe—no pastel text on pastel backgrounds. Even link blue (#0000ee) is the default browser link color, ensuring recognisability.

Dark mode: Not implemented here. Palette assumes a light background (#ffffff) with dark text.

2.4 Usage Guide

Works well:

• Primary Blue + White for buttons.
• Dark Gray text on light backgrounds for readability.
• Medium Gray for muted secondary text.

Avoid:

• Primary Blue on Deep Blue—too low contrast.
• Link Blue on Medium Gray background—fails accessibility.

3. Typography

3.1 Font Families

It’s all Segoe UI and its variants (SemiBold, Bold). This is Microsoft’s proprietary typeface. No Google Fonts. No Adobe Fonts. Just the system font for Windows, with fallbacks to Helvetica and Arial.

The stack:

• "Segoe UI", "Helvetica Neue", Helvetica, Arial in many contexts.
• "SegoeUI-SemiBold" and "SegoeUI-Bold" for emphasis.

3.2 Type Scale

3.3 Hierarchy

Headings scale down from 50px to 21px for subheads. Body/link sizes cluster around 13–16px. The weight shifts subtly to guide attention—headings mostly 400/700, buttons at 600. Line heights are generous for large text, tighter for UI labels.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Frequencies show heavy use of 8px, 12px, and 18px—these are the workhorses.

4.2 Layout

Breakpoints:

• Small: 480px, 539px, 540px, 639px, 640px
• Medium: 767px, 768px, 860px, 899px
• Large: 1023px, 1024px, 1083px, 1084px
• XL: 1399px, 1778px, 1920px

They’re using a very granular breakpoint set—likely inherited from Microsoft’s global CSS.

5. Visual Elements

Border Radius

Values are precise and purposeful:

• 0px — Square edges (default buttons)
• 2px — Small buttons ("Try for free")
• 4px — Rounded buttons (primary/secondary)
• 20px top corners — Tabs
• 40px — Pill-like tab footers
• 50% — Circular presentation images

Shadows

Two patterns:

• Soft tab shadow: rgb(250, 250, 250) 0px 8px 0px, rgba(0, 0, 0, 0.14) 0px 0px 8px
• Deeper card shadow: rgba(0, 0, 0, 0.14) 0px 8px 16px, rgba(0, 0, 0, 0.12) 0px 0px 2px

Borders

Mostly 1px solid lines, in low-contrast grays (rgba(0,0,0,0.05) or rgb(138,136,134)). Used for dividers, not decoration.

6. Components

6.1 Buttons

Primary CTA (.m365-hero__button--prim)

• Default: bg #464feb, text #ffffff, padding 0 12px, radius 4px, border 2px solid #464feb.
• Hover: text #000000, bg rgba(38,38,38,0.48), inset box-shadow.
• Focus: bg rgba(38,38,38,0.48), border 1px solid #ffffff.

Secondary CTA (.m365-hero__button--seco)

• Default: bg #ffffff, text #464feb, padding 0 12px, radius 4px, border 2px solid #464feb.
• Hover/focus match primary’s pattern.

Tab Button Active (.tab-button--active)

• Default: bg #fafafa, text #464feb, padding 31px 0, radius 20px top corners, shadow.
• Hover: bg #505050.

Tab Button Inactive

• Default: bg #ebefff, text #3e45c9, same padding/radius.

Footer Tab Button

• Default: bg #f5f5f5, text #242424, radius 40px.

6.2 Links

Six styles:

• Link Blue (#0000ee, underline) → changes to inherit on hover.
• Dark Gray (#262626, no underline).
• Black (#000000, no underline).
• White (#ffffff, bold).
• Primary Blue (#464feb, bold).
• Medium Gray (#616161, no underline).

6.3 Forms

No input fields styled in this extract—likely handled elsewhere.

6.4 Cards

Shadows suggest tab-like cards. Padding 31px for tabs.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #262626;
  --color-medium-gray: #616161;
  --color-primary-blue: #464feb;
  --color-deep-blue: #3e45c9;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;

  /* Typography */
  --font-segoe-ui: "Segoe UI", "Helvetica Neue", Helvetica, Arial;
  --font-segoe-ui-semibold: "SegoeUI-SemiBold", Helvetica, Arial;
  --font-segoe-ui-bold: "SegoeUI-Bold", Helvetica, Arial;
  --font-office-icons: "office365icons";

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-31: 31px;
  --space-36: 36px;
  --space-48: 48px;
  --space-72: 72px;
  --space-88: 88px;
  --space-104: 104px;
  --space-112: 112px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-tab-top: 20px 20px 0px 0px;
  --radius-lg: 40px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-tab: rgb(250, 250, 250) 0px 8px 0px, rgba(0, 0, 0, 0.14) 0px 0px 8px;
  --shadow-card: rgba(0, 0, 0, 0.14) 0px 8px 16px, rgba(0, 0, 0, 0.12) 0px 0px 2px;
}

8. AI Coding Assistant Prompt

# Office.com Design System Specification

You are an Office.com design expert. Build UIs matching their visual language exactly.

## Brand Context
Office.com’s design language is corporate, clean, and consistent. It uses Microsoft’s Segoe UI typeface and a restrained blue-gray palette. Spacing is based on an 8px grid, with minimal shadows and precise borders.

## Color Palette
- Black: #000000 — body text, icons
- Dark Gray: #262626 — nav links, headings
- Medium Gray: #616161 — footer text, secondary labels
- Primary Blue: #464feb — primary buttons, CTAs, key icons
- Deep Blue: #3e45c9 — secondary tab buttons
- White: #ffffff — backgrounds, text on blue
- Link Blue: #0000ee — inline hyperlinks

## Typography
Font families:
- "Segoe UI", "Helvetica Neue", Helvetica, Arial
- Variants: SegoeUI-SemiBold, SegoeUI-Bold, office365icons

Type sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 50px | 400 | 1.30 | Page title |
| H1 | 45px | 400 | — | Large header |
| H1 | 37px | 400 | 1.19 | Section header |
| H1 | 37px | 700 | 1.19 | Emphasised header |
| Body | 18px | 400 | 1.44 | Paragraphs |
| Body Bold | 18px | 600 | — | Emphasised UI text |
| Link | 16px | 400 | — | Inline links |
| Button | 16px | 600 | 2.13 | Primary/secondary buttons |
| Small Text | 13px | 400–600 | — | Labels, captions |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 4px, 6px, 8px, 12px, 16px, 18px, 20px, 31px, 36px, 48px, 72px, 88px, 104px, 112px.
Use multiples of 8px for layout gaps, padding, and margins.

## Border Radius
- none: 0px — square buttons
- sm: 2px — small buttons
- md: 4px — primary/secondary buttons
- tab-top: 20px 20px 0px 0px — tab buttons
- lg: 40px — pill-like footer buttons
- circle: 50% — circular images

## Shadows & Depth
- Tab: rgb(250, 250, 250) 0px 8px 0px, rgba(0,0,0,0.14) 0px 0px 8px
- Card: rgba(0,0,0,0.14) 0px 8px 16px, rgba(0,0,0,0.12) 0px 0px 2px

## Components

### Primary Button
Default:
```css
background: #464feb;
color: #ffffff;
padding: 0px 12px;
border-radius: 4px;
border: 2px solid #464feb;
font-weight: 600;
font-size: 16px;
```
Hover: background: rgba(38,38,38,0.48); color: #000000; box-shadow: inset 0 0 0 1px;
Focus: background: rgba(38,38,38,0.48); border: 1px solid #ffffff.

### Secondary Button
Default:
```css
background: #ffffff;
color: #464feb;
padding: 0px 12px;
border-radius: 4px;
border: 2px solid #464feb;
font-weight: 600;
font-size: 16px;
```
Hover/Focus match primary button.

### Tab Button Active
bg: #fafafa; color: #464feb; padding: 31px 0; radius: 20px 20px 0px 0px; shadow: var(--shadow-tab)

### Links
- Link Blue (#0000ee, underline) — hover: color inherit
- Nav links: #262626, no underline

## Layout & Responsive Rules
Breakpoints: 480px, 540px, 640px, 768px, 860px, 899px, 1024px, 1084px, 1399px, 1778px, 1920px.
Use max width per breakpoint. Adjust spacing proportionally.

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicators: border color change
- Disabled: opacity 0.5, cursor not-allowed

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Segoe UI for all text
- Keep button radius consistent (4px for CTAs)
- Respect breakpoints for layout shifts

## DON'T List
- Don’t use shadows outside defined values
- Don’t mix rounded and square corners arbitrarily
- Don’t invent new blues
- Don’t use non-Segoe fonts

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #464feb;
  color: #ffffff;
  padding: 0 12px;
  border-radius: 4px;
  border: 2px solid #464feb;
  font-size: 16px;
  font-weight: 600;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: rgba(38,38,38,0.48);
  color: #000000;
}
.btn-primary:focus {
  background: rgba(38,38,38,0.48);
  border: 1px solid #ffffff;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #ffffff;
  color: #464feb;
  padding: 0 12px;
  border-radius: 4px;
  border: 2px solid #464feb;
  font-size: 16px;
  font-weight: 600;
}
```

Tab Button:
```css
.tab-button-active {
  background: #fafafa;
  color: #464feb;
  padding: 31px 0;
  border-radius: 20px 20px 0px 0px;
  box-shadow: var(--shadow-tab);
}
```

9. Summary

TL;DR — Office.com’s design system is Microsoft’s corporate DNA applied to the web: Segoe UI typography, a disciplined blue-gray palette, and an 8px spacing grid. Buttons are clear, borders are subtle, shadows are rare. It’s functional, predictable, and built for productivity.

Brand Keywords

• corporate-clean
• grid-disciplined
• blue-forward
• shadow-minimal
• Segoe-centric