Cloud — Brand Design System Deep Dive

1. Brand Overview

Cloud’s Microsoft 365 portal (https://m365.cloud.microsoft/) is a highly functional, enterprise-oriented interface. The vibe is corporate, precise, and unapologetically utilitarian. This isn’t a consumer lifestyle site—it’s built for people who need to get work done, fast. The design language reflects that: stripped-down color usage, a reliance on system fonts (Segoe UI), and interaction patterns that prioritize clarity over ornamentation.

The first thing you notice: heavy use of black (#000000) and near-black (#262626), anchored with bright link blue (#0000ee). This isn’t playful—it’s authoritative. The palette feels like it’s saying “We’re serious about productivity.” There’s minimal decoration. Shadows are subtle and functional, used sparingly to separate layers.

Typography is consistent and rigid. Segoe UI everywhere, with weights toggling between 400 and 600 depending on hierarchy. Sizes are scaled predictably—no wild expressive jumps. This keeps the interface predictable for enterprise users who value stability.

Spacing follows an 8px grid. You can feel it in the rhythm of paddings and margins—buttons, cards, and section gaps all align neatly. The breakpoints are exhaustive, covering almost every common device width from 480px up through ultra-wide 1920px monitors. This tells you: they care about responsive precision across the entire spectrum.

Borders and radii are restrained—common radii are 8px and 24px, with circular (50%) used only for specific elements like carousel nav buttons or avatars. Depth is mild; shadows are low-opacity and used for hover elevation only.

This design system is built for scalability. It’s not trying to win design awards—it’s here to be consistent across hundreds of enterprise apps. The philosophy: minimal color, system font, strict grid, predictable components. It’s Microsoft’s “Cloud” identity distilled into an interface that’s calm, clear, and functional.

2. Color System

2.1 Primary Colors

Primary is pure black (#000000). That’s unusual—most brands pick a colored primary. Here, black is the anchor for text, UI chrome, and primary buttons. Psychologically, black conveys authority, stability, and seriousness. Compared to competitors (Google Workspace leans on blue, Slack on purple), Cloud’s choice is stark. It’s a confident statement: “We don’t need a brand color to stand out—our product is the brand.”

Secondary is transparent (rgba(0,0,0,0)), effectively meaning “no fill” for many default states.

There’s one standout accent: link blue (#0000ee). Classic web blue—no fancy custom shade. This is almost retro, but it works because it’s universally recognized as a clickable link.

2.2 Complete Palette

2.3 Color Relationships

Black text on white background—minimum contrast ratio 21:1. Link blue on white—contrast ratio ~8.59:1. Both exceed WCAG AAA for normal text. Even grey (#616161) on white is ~5.36:1, meeting AA for normal text.

Dark sections (deep navy, dark blue-grey) are used for hero areas, with white text to maintain high contrast. Transparent backgrounds are common in default button states, relying on text color for visibility.

Dark mode? Not explicit here, but the palette is already leaning dark-neutral. Switching to dark mode would be trivial—many elements are already dark with light text.

2.4 Usage Guide

• Do pair #000000 text with #ffffff background for clarity.
• Do use #0000ee exclusively for links—don’t dilute meaning by using it decoratively.
• Avoid mixing #464FEB unless it’s part of a brand-specific feature—it’s not a general accent.
• Avoid greys lighter than #616161 for text—they risk insufficient contrast on white.

3. Typography

3.1 Font Families

Segoe UI dominates, with fallbacks to system fonts:

• "Segoe UI", -apple-system, system-ui
• "SegoeUI", Helvetica Neue, Helvetica, Arial for some contexts
• "SegoeUI-SemiBold" for specific link styles

No Google Fonts or Adobe Fonts—this is a system-native stack for performance and consistency.

3.2 Type Scale

3.3 Hierarchy

Large headings (32px–62px) are used for hero and section titles. 16px is the workhorse size for body and link text. 13px–15px appears in buttons and captions—small, but readable given the high contrast.

Weights are mostly 400 (regular) for body, 600 (semi-bold) for headings and buttons. This creates a clear hierarchy without needing additional colors or decoration.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px.

Common values:

• 1px (35 occurrences) — borders, hairline dividers
• 8px (118 occurrences) — button radius, small gaps
• 12px (171 occurrences) — button padding, card content spacing
• 18px (112 occurrences) — medium gaps, section padding
• Larger: 24px, 32px, 48px, 64px, 80px — section spacing

4.2 Layout

Breakpoints cover: 480, 500, 539, 540, 639, 640, 767, 768, 860, 899, 1023, 1024, 1025, 1083, 1084, 1300, 1301, 1399, 1600, 1778, 1793, 1800, 1920px.

Conclusion: They’ve explicitly tuned layouts for very specific device widths, likely to match Microsoft’s own hardware and common enterprise setups.

5. Visual Elements

• Border Radius: 8px (common for buttons/cards), 24px (larger cards/images), 50% (avatars, round buttons). Minimal rounding—no exaggerated pills except where deliberate.
• Shadows:
  • rgba(0,0,0,0.1) 0px 0px 8px
  • rgba(0,0,0,0.08) 0px 4px 16px
  • Rare stronger: rgba(0,0,0,0.21) 0px 0px 12px
• Borders: Thin, 1px solid greys (#e1e1e1, #edebe9), used for separation.

6. Components

6.1 Buttons

Primary (newexp-btn newexp-btn-primary)

• Default: background:#000000, text #ffffff, padding 12px 24px, radius 8px, border 1px solid #000000, font 15px 600.
• Hover: Same background/text, shadow rgba(0,0,0,0.21) 0px 4px 16px, translateY(-1px).
• Active: Background #666666, text inherit, translateY(0).
• Focus: Outline dotted 2px black, background #f3f2f1, shadow same as hover.

Secondary

• Default: Transparent background, text #262626, padding 16px 30px 16px 16px, no radius, no border.
• Hover: Background #505050, boxShadow inset.
• Active: Background #666666.
• Focus: Background #f3f2f1, border dotted 2px black.

Round Carousel Nav

• Default: Background white, border 2px solid #e1e1e1, radius 50%, font-size 13.33px, opacity 0.4.
• Hover: Background #505050, shadow rgba(70,79,235,0.15) 0px 4px 12px.

6.2 Links

Five variants:

1. Blue underline (#0000ee) — classic web link.
2. Dark grey (#262626) — nav links, no underline.
3. Black (#000000) — underline only on default.
4. White (#ffffff) — header/footer links on dark backgrounds.
5. Grey (#616161) — subtle footer links.

6.3 Forms

No text inputs extracted—likely styled per OS defaults or hidden in app context.

6.4 Cards

Borders: 1px solid #e1e1e1, radius 8px or 24px depending on type, shadows mild rgba(0,0,0,0.1).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: rgba(0,0,0,0);
  --color-near-black: #262626;
  --color-mid-grey: #616161;
  --color-link-blue: #0000ee;
  --color-white: #ffffff;
  --color-deep-navy: #121d2f;
  --color-dark-blue-grey: #17253d;
  --color-brand-accent: #464FEB;

  /* Typography */
  --font-family-segoe-ui: "Segoe UI", -apple-system, system-ui;
  --font-family-segoeui: "SegoeUI", Helvetica Neue, Helvetica, Arial;
  --font-family-segoeui-semibold: "SegoeUI-SemiBold", Helvetica, Arial;
  --font-size-h1-xl: 62px;
  --font-size-h1-lg: 40px;
  --font-size-h1-md: 32px;
  --font-size-h1-sm: 24px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 16px;
  --font-size-caption-lg: 15px;
  --font-size-caption-md: 14px;
  --font-size-caption-sm: 13px;
  --font-size-caption-xs: 11px;
  --font-weight-regular: 400;
  --font-weight-semibold: 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-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.1) 0px 0px 8px 0px;
  --shadow-md: rgba(0,0,0,0.08) 0px 4px 16px 0px;
  --shadow-lg: rgba(0,0,0,0.21) 0px 0px 12px 0px;
}

8. AI Coding Assistant Prompt

# Cloud Design System Specification

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

## Brand Context
Cloud's Microsoft 365 portal is corporate, functional, and minimal. The design system uses minimal color, a system font (Segoe UI), strict 8px grid spacing, and predictable component states. It prioritizes clarity and accessibility over visual flair.

## Color Palette
- Primary Black: #000000 — Primary text, UI chrome, primary buttons
- Secondary Transparent: rgba(0,0,0,0) — Default backgrounds for secondary buttons
- Near-Black: #262626 — Navigation links, inactive states
- Mid Grey: #616161 — Footer links, captions
- Link Blue: #0000ee — Inline links, CTAs
- White: #ffffff — Text on dark backgrounds, card backgrounds
- Deep Navy: #121d2f — Hero section titles
- Dark Blue-Grey: #17253d — Hero subtitles
- Brand Accent: #464FEB — Feature highlights

## Typography
Font Families:
- "Segoe UI", -apple-system, system-ui
- "SegoeUI", Helvetica Neue, Helvetica, Arial
- "SegoeUI-SemiBold", Helvetica, Arial

Type Sizes:
| Level | Font | Size | Weight | Line Height | Use For |
| H1 XL | Segoe UI | 62px | 600 | 1.16 | Hero titles |
| H1 LG | Segoe UI | 40px | 600 | 1.20 | Section titles |
| H1 MD | Segoe UI | 32px | 600 | 1.25 | Subsection headings |
| H1 SM | Segoe UI | 24px | 600 | 2.00 | Smaller headings |
| Body LG | Segoe UI | 20px | 400 | 1.60 | Paragraphs |
| Body LG Bold | Segoe UI | 20px | 600 | 0.80 | Emphasis |
| Body MD | Segoe UI | 18px | 600 | - | Labels |
| Body SM | Segoe UI | 16px | 400 | 1.50 | Body text |
| Button LG | Segoe UI | 15px | 600 | 1.47 | Primary buttons |
| Caption | Segoe UI | 14px | 400 | 1.43 | Captions |
| Small Button | Segoe UI | 13px | 600 | - | Compact buttons |
| Small Text | Segoe UI | 11px | 400 | 1.45 | Micro labels |

## Spacing & Grid
Base unit: 8px
Scale: 1px, 2px, 3px, 4px, 6px, 7px, 8px, 10px, 12px, 15px, 16px, 18px, 20px, 24px, 32px, 36px, 48px, 60px, 64px, 80px
Map:
- Button padding: 12px vertical, 24px horizontal
- Card padding: 12px–24px
- Section gap: 48px–80px

## Border Radius
- sm: 3px — Rare small elements
- md: 4px — Inputs
- lg: 8px — Buttons, small cards
- xl: 24px — Large cards, images
- full: 50% — Round buttons, avatars

## Shadows & Depth
- sm: rgba(0,0,0,0.1) 0px 0px 8px
- md: rgba(0,0,0,0.08) 0px 4px 16px
- lg: rgba(0,0,0,0.21) 0px 0px 12px
Use shadows only for hover elevation.

## Component Specifications

### Primary Button
Default: background #000000, color #ffffff, padding 12px 24px, border-radius 8px, border 1px solid #000000, font 15px 600
Hover: shadow md, translateY(-1px)
Active: background #666666
Focus: outline dotted 2px #000000, background #f3f2f1

### Secondary Button
Default: transparent background, color #262626, padding 16px 30px 16px 16px, no radius
Hover: background #505050, inset border
Active: background #666666
Focus: background #f3f2f1, border dotted 2px black

### Navigation Links
Blue underline variant: #0000ee default, underline, hover color inherit
Dark grey variant: #262626, no underline

### Cards
Border 1px solid #e1e1e1, radius 8px or 24px, padding 12px–24px, shadow sm on hover

## Layout & Responsive Rules
Max content width: inferred from breakpoints up to 1920px
Page padding: multiples of 8px
Breakpoints: 480, 500, 539, 540, 639, 640, 767, 768, 860, 899, 1023, 1024, 1025, 1083, 1084, 1300, 1301, 1399, 1600, 1778, 1793, 1800, 1920px

## Interaction Rules
Transition: 150ms ease
Focus indicators: dotted 2px border, high contrast
Disabled states: opacity 0.4

## DO
- Use only palette colors
- Maintain 8px grid
- Use Segoe UI for all text
- Apply shadows only on hover
- Keep button padding consistent
- Respect breakpoints exactly

## DON'T
- Invent new colors
- Use shadows for static elements
- Mix rounded and sharp corners
- Change font family
- Break the grid spacing

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #000000;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid #000000;
  transition: all 150ms ease;
}
.btn-primary:hover {
  box-shadow: rgba(0,0,0,0.08) 0px 4px 16px;
  transform: translateY(-1px);
}
.btn-primary:focus {
  outline: 2px dotted #000000;
}
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 24px;
}
.card:hover {
  box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
}
```

Link:
```css
.link {
  color: #0000ee;
  text-decoration: underline;
}
.link:hover {
  color: inherit;
}
```

9. Summary

TL;DR — Cloud’s design system is minimal, functional, and enterprise-focused. Black is the primary color, Segoe UI the only font, and spacing sticks to an 8px rhythm. Components are predictable, accessible, and restrained.

Brand Keywords — corporate-minimal, grid-precise, color-disciplined, accessibility-driven, function-first