SharePoint Design System Deep-Dive

1. Brand Overview

SharePoint’s visual language is corporate, functional, and unapologetically Microsoft. This isn’t a design system aimed at delight in the whimsical sense — it’s built for clarity, scale, and integration with the wider Microsoft 365 ecosystem. The vibe is “serious collaboration tool for global enterprises.” When you land on the SharePoint site, the feel is consistent with other Microsoft product pages: clean typography, a restrained but confident palette, and components that follow a predictable rhythm.

There’s a strong emphasis on structural clarity. Spacing is precise (8px base grid), typography is hierarchical but not flamboyant, and colors are chosen for accessibility and brand alignment rather than trendiness. This is a system designed to work across hundreds of touchpoints, from marketing pages to in-app UI, without breaking consistency.

The primary blue (#0067b8) is the brand anchor. It instantly communicates “Microsoft” and “product family” because it’s closely related to other Microsoft blues (like Teams’ #5d5bd4 and Azure’s brighter tones). SharePoint’s version is slightly deeper and more stable — it reads as professional, trustworthy, and calm.

The design philosophy here:

• Scalability — everything is tokenized; no ad-hoc values.
• Consistency over novelty — you won’t find playful micro-interactions or unexpected UI shapes.
• Accessibility baked in — colors have strong contrast; text sizes are legible; hover/focus states are clear.

It’s for IT pros, project managers, and enterprise users who need to navigate complex information quickly. And it’s for developers who will extend SharePoint with custom solutions — the system makes sure those extensions look “native.”

2. Color System

2.1 Primary Colors

The primary brand color is rgb(0, 103, 184) / #0067b8. This is the core interactive color — used for links, buttons, and active states. It’s a deep azure with enough saturation to stand out against both light and dark backgrounds, but not so bright that it strains the eyes.

Psychologically, this blue signals trust, dependability, and professionalism. Compared to competitors like Google Workspace (which leans into multi-color branding) or Slack (purple-heavy), SharePoint’s blue is conservative and functional. It’s also consistent with the Microsoft 365 family, reinforcing product cohesion.

Secondary semantic color is rgba(0, 0, 0, 0) — essentially “transparent,” indicating that secondary elements often inherit background context rather than having their own fill.

2.2 Complete Palette

Here’s the full palette extracted, including semantic roles and usage notes:

(Note: The palette is extensive — SharePoint inherits Microsoft’s token library with hundreds of named colors. They range from functional states like --root-color-success-500: #0e8728 to thematic accents like --root-color-lilac-600: #c290c4.)

There’s a strong reliance on neutrals for backgrounds and text, with saturated colors reserved for functional roles (CTAs, status indicators, error/success). This keeps the interface from feeling cluttered.

2.3 Color Relationships

Contrast ratios are solid. #0067b8 on white passes WCAG AA and AAA for normal text. Dark grays (#262626, #051118) on white are well above the minimum contrast.

In dark mode contexts (SharePoint doesn’t have a full dark mode marketing site, but in-app themes do), the primary blue still pops against deep backgrounds like #091f2c.

2.4 Usage Guide

Works well:

• #0067b8 with #ffffff — clean, high contrast CTAs.
• Dark text (#262626) on pale backgrounds (#e6f2fb) — subtle sectioning.
• Status colors (#0e8728 success, #ad2636 error) used sparingly.

Avoid:

• Pairing saturated colors together without neutral buffer — e.g., #0067b8 next to #5d5bd4 can feel like competing brands.
• Using transparent backgrounds without proper contrast — text can lose legibility.

3. Typography

3.1 Font Families

SharePoint uses Segoe UI Variable Text and Segoe UI Variable Display with a robust fallback stack:

Segoe UI Variable Text, Segoe UI, segoeui, Helvetica Neue, helvetica, arial

No Google or Adobe fonts — this is Microsoft’s custom variable font family, designed for clarity and flexibility across weights and sizes.

3.2 Type Scale

Here’s the type scale snapshot:

(Full table in data — many heading-1 contexts are actually reused for other heading levels.)

3.3 Hierarchy

Hierarchy is clear but not overly steep. The jump from 100px hero headings to 62px section titles is dramatic, making hero areas stand out. Below 48px, sizes compress quickly, keeping body and UI text readable without wasting space.

Weights shift between 400, 500, and 600 depending on emphasis. Links usually sit at 400 unless they’re primary actions (600). Buttons lean on 600 for clarity.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px. You see multiples everywhere: 8px, 16px, 24px, 32px, 48px, 72px, 96px. Odd values like 3px or 13.5px exist, likely for pixel-fitting icons or aligning with font metrics.

4.2 Layout

Breakpoints are numerous — clearly tuned for many device widths:

320, 360, 540, 768, 1024, 1280, 1440, 1778px etc.

This isn’t a simple “mobile/tablet/desktop” — the system adapts to specific device classes (Surface tablets, large monitors).

5. Visual Elements

Border Radius

Values range from sharp (0px) to fully rounded (200px, 50%):

• 4px — common for divs, spans, images.
• 8px — buttons, CTAs.
• 16px — larger image corners.
• 24px — cards, modals.
• 200px — pill buttons, tab elements.
• 50% — avatars, circular images.

They use consistent rounding per component type — no mixing.

Shadows

Mostly subtle, e.g.:

rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.14) 0px 2px 4px

Used for elevation on cards. No heavy drop shadows — depth is functional, not decorative.

Borders

Borders are thin (1px) and light (#e6f2fb on cards). Buttons sometimes have 2px solid borders for emphasis.

6. Components

6.1 Buttons

They have multiple variants:

Variant 1 — Text Button

• Default: transparent bg, #262626 text, no border radius.
• Hover: white text, #4e596b bg.
• Active: #0067b8 bg, black text.
• Focus: dashed outline, dotted border.

Variant 2 — Dark Solid Button

• Default: #091f2c bg, white text, 8px radius.
• Hover: #4e596b bg, white text, 1px solid border.
• Active: transparent bg, dark text.
• Focus: dashed outline, light gray bg.

Variant 3 — Pill Button

• Default: #06161f bg, white text, 200px radius.
• Hover: #4e596b bg, white text.
• Active: #0067b8 bg, black text.
• Focus: dashed outline, dotted border.

Variant 4 — Pill Outline

• Default: rgba black fill, #051118 text, 200px radius.

6.2 Links

Multiple styles:

1. Primary: #0067b8, underline; hover removes underline, darkens text.
2. Secondary: #262626, no underline; hover darkens.
3. White text links: underline, hover removes underline.

Underline behavior is deliberate — underlines signal “clickable” only on certain contexts.

6.3 Forms

No explicit inputs in extracted data — likely inherited from Microsoft 365 shared styles.

6.4 Cards

Cards use:

• #ffffff bg.
• 1px #e6f2fb border.
• 8px–24px radius depending on size.
• Subtle shadow for lift.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-blue: #0067b8;
  --color-black: #000000;
  --color-deep-navy: #051118;
  --color-dark-gray: #262626;
  --color-white: #ffffff;
  --color-slate-blue: #2a446f;
  --color-medium-gray: #616161;
  --color-pale-blue: #e6f2fb;
  --color-dark-teal: #091f2c;

  /* Typography */
  --font-family-text: "Segoe UI Variable Text", "Segoe UI", "segoeui", "Helvetica Neue", "helvetica", "arial";
  --font-family-display: "Segoe UI Variable Display", "Segoe UI", "segoeui", "Helvetica Neue", "helvetica", "arial";
  --font-size-h1: 6.25rem;
  --font-size-body: 1rem;
  --font-size-caption: 0.88rem;
  --line-height-tight: 1.06;
  --line-height-normal: 1.5;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-72: 72px;
  --space-96: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 200px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.14) 0px 2px 4px;
}

8. AI Coding Assistant Prompt

# SharePoint Design System Specification

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

## Brand Context
SharePoint’s design is corporate, structured, and aligned with the Microsoft 365 ecosystem. It values clarity, scalability, and accessibility. Colors are functional, typography is clear, spacing follows an 8px grid.

## Color Palette
- Primary Blue: #0067b8 — Links, primary buttons, CTAs
- Black: #000000 — Text, icons
- Deep Navy: #051118 — Navigation accents
- Dark Gray: #262626 — Secondary text, nav links
- White: #ffffff — Background, text on dark
- Slate Blue: #2a446f — Section accents
- Medium Gray: #616161 — Footer links
- Pale Blue: #e6f2fb — Borders, badges
- Dark Teal: #091f2c — Dark button backgrounds

## Typography
Fonts:
- Headings: "Segoe UI Variable Display", fallback stack
- Body: "Segoe UI Variable Text", fallback stack

Sizes:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| Hero | 100px | 400 | 1.06 | Hero titles |
| H1 | 62px | 500 | 1.16 | Section titles |
| H2 | 48px | 500 | 1.17 | Sub-headings |
| Body | 16px | 400 | 1.50 | Paragraph text |
| Button | 16px | 600 | 1.50 | Button labels |
| Caption | 14px | 400 | 1.43 | Small labels |

## Spacing & Grid
Base: 8px. Scale: 1, 2, 3, 4, 8, 12, 16, 24, 32, 48, 72, 96.
Use multiples for all spacing — no random values.

## Border Radius
- none: 0px — tabs, some text buttons
- sm: 4px — small containers
- md: 8px — buttons
- lg: 16px — images
- xl: 24px — cards, modals
- pill: 200px — pill buttons
- round: 50% — avatars

## Shadows & Depth
- Card shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.14) 0px 2px 4px.

## Component Specifications

### Primary Button
Default:
```css
background-color: #0067b8;
color: #ffffff;
padding: 8px 16px;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 16px;

Hover: darker background #4e596b, same text. Focus: outline dashed 1px currentcolor. Active: background-color: #0067b8, color: #000000.

Secondary Button

Default:

background-color: transparent;
color: #262626;
padding: 16px;
border: 1px solid transparent;
border-radius: 0px;

Navigation Links

Primary: #0067b8, underline; hover removes underline, darkens text.

Cards

Background: #ffffff; border: 1px solid #e6f2fb; radius: 8px–24px; shadow: var(--shadow-card).

Layout & Responsive Rules

Breakpoints: 320px, 360px, 540px, 768px, 1024px, 1280px, 1440px, 1778px. Page padding: multiples of 8px.

Interaction Rules

• Transitions: 150ms ease for state changes
• Focus indicators: dashed 1px outline
• Hover states always change background or underline

DO List

• Use only palette colors
• Maintain 8px spacing grid
• Use Segoe UI Variable fonts
• Keep corner rounding consistent per component type
• Ensure WCAG AA contrast minimums

DON'T List

• No custom colors outside tokens
• Don’t mix sharp and rounded corners in same component
• Avoid heavy shadows
• Don’t remove hover/focus states

Code Examples

Primary Button:

.btn-primary {
  background: #0067b8;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #4e596b; }
.btn-primary:focus { outline: dashed 1px currentcolor; }

Card:

.card {
  background: #ffffff;
  border: 1px solid #e6f2fb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

Link:

.link-primary {
  color: #0067b8;
  text-decoration: underline;
}
.link-primary:hover {
  color: rgba(0,0,0,0.8);
  text-decoration: none;
}

---

## 9. Summary

**TL;DR** — SharePoint’s design system is structured, tokenized, and accessibility-minded. Colors are functional, typography is clear, spacing is precise. It’s a corporate system that prizes consistency over flair.

**Brand Keywords**:
- enterprise-consistent
- microsoft-familiar
- accessibility-first
- structure-driven