Skype Brand Design System Deep Dive

Reverse-engineered from: https://teams.live.com/free
Extracted at: 2025-12-13

1. Brand Overview

Skype’s current web presence at teams.live.com/free is a strange hybrid — it’s clearly carrying Microsoft Teams DNA but still tied to the Skype legacy. The vibe is corporate-friendly, but it’s trying hard to be approachable. The visual language is clean, flat, and restrained. No gradients, no loud color splashes beyond the core accents. The palette is deliberately muted so the primary accent pops.

This is a brand aimed at remote communication, so clarity is priority. You can see that in the typography — Segoe UI everywhere — and in the way they treat buttons: big pill shapes, minimal outlines, and safe color contrast. They’re leaning on the Microsoft design system’s “calm” tone: lots of white (#ffffff) and light greys (#f0f0f0, #d1d1d1) as surfaces, with a single deep blue-violet (#5b5fc7) as the hero color.

There’s almost no decorative fluff. Shadows are rare — only two subtle instances in the data — which tells me they prefer flat surfaces and minimal depth cues. Borders are thin (1px, solid, light greys) and used to separate rather than decorate.

Breakpoints are standard for responsive corporate apps: 700px, 1024px, 1050px, 2000px. They even have a weird 9px breakpoint in the data — probably a quirk for a tiny icon or inline element scaling.

Overall, the design philosophy is:

• Minimal ornamentation — function over flourish.
• Pill-shaped CTAs — friendly but still professional.
• Consistent typography — one family, multiple weights, tight hierarchy.
• Subtle color cues — let the content breathe, avoid visual fatigue.

This is for users who need to trust the interface — business calls, remote meetings, group chats. It’s not trying to “wow” like a consumer app; it’s trying to stay out of the way.

2. Color System

2.1 Primary Colors

The main brand accent is rgb(91, 95, 199) → #5b5fc7. This sits between blue and violet — softer than Teams’ pure corporate blue, but with enough saturation to stand out. It signals “action” without screaming urgency. It’s used for primary buttons, active states, and sometimes as text color in secondary buttons.

Psychologically, this hue feels trustworthy but slightly creative — it’s not the cold #005fcc blue you’d expect from a strict corporate tool. Compared to Zoom’s bright blue or Slack’s multicolor branding, Skype’s choice here is subdued and unified.

Primary background surfaces are pure white #ffffff and light grey #f0f0f0. These keep the interface neutral and make the accent pop.

2.2 Complete Palette

2.3 Color Relationships

The primary accent (#5b5fc7) against white (#ffffff) is high contrast — passes WCAG AAA for normal text. Against black (#000000), the accent is less about readability and more about emphasis.

Grey tones are spaced well: #f0f0f0 → #d1d1d1 → #cbcbcb → #c7c7c7. This gives them flexibility for subtle states without jumping in luminance too drastically.

Dark mode is not evident from the data — all backgrounds are light.

2.4 Usage Guide

• Primary CTA: #5b5fc7 background, white text.
• Secondary CTA: white background, #5b5fc7 text, #d1d1d1 border.
• Surface separators: 1px solid #f0f0f0 or #d1d1d1.
• Disabled states: Use #c7c7c7 for text/border + reduce opacity.
• Hover states: Keep within accent family (#5357ba, #005fcc) — avoid introducing unrelated colors.

Avoid pairing accent blue-violet with strong reds or greens — it breaks the calm tone.

3. Typography

3.1 Font Families

Everything runs on Segoe UI. Fallbacks: -apple-system, system-ui, Helvetica, Arial. This is classic Microsoft — Segoe UI is the default UI font across Windows and Office products. No Google Fonts, no Adobe Fonts, no variable fonts detected.

3.2 Type Scale

3.3 Hierarchy

They’re not using a huge jump between heading and body sizes — max is 32px for big titles, down to 14px for captions. Weight variations do most of the work for hierarchy: 600 for emphasis, 400 for normal, 300 for very light headings.

This keeps the interface from looking chaotic, but it also means visual hierarchy relies heavily on spacing and color rather than wild type scaling.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px grid. The extracted values:

• 2px — Tight inline padding, button vertical padding.
• 4px, 5px, 6px, 7px — Micro-adjustments for icon alignment or compact UI.
• 16px — Common component padding.
• 24px — Section spacing or medium gaps.
• 32px — Large component padding; most common large unit.
• 48px — Big section gap.
• 64px — Hero section or modal padding.

Frequency shows 32px as the workhorse — 23 uses. 2px also appears a lot (12 uses) for tight controls.

4.2 Layout

Breakpoints:

• 9px — Possibly for micro-layout adjustments (odd).
• 700px — Mobile → tablet threshold.
• 1024px — Standard desktop min.
• 1050px — Slight tweak from 1024px for a specific layout.
• 2000px — Ultra-wide screens.

5. Visual Elements

Border Radius:

• 4px — Inputs.
• 8px — Modals.
• 16px — Divs (cards, containers).
• 999px — Pill buttons.
• 50% — Circular elements (play video, close buttons, avatars).

Shadows:

• rgba(0, 0, 0, 0.25) 0px 0px 16px 0px — subtle drop shadow, generic depth.
• rgba(211, 205, 255, 0.4) 1px 1px 24px 0px — soft colored shadow, rare.

Borders:

• 1px solid #f0f0f0 — Dividers.
• 1px solid #d1d1d1 — Button/input outlines.
• 2px solid #d1d1d1 — Rare thick border on button.
• 1px solid #dddddd — Modal outline.

6. Components

6.1 Buttons

Primary Button
Default:

• Background: #5b5fc7
• Text: #ffffff
• Padding: 2px 12px
• Border radius: 999px (pill)
• Border: 1px solid transparent
• Font: Segoe UI, 14px, weight 600
  Hover: Background stays #5b5fc7 (safe choice — no change except possible subtle effect)

Secondary Button
Default:

• Background: #ffffff
• Text: #5b5fc7
• Padding: 2px 12px
• Border radius: 999px
• Border: 1px solid #d1d1d1
• Font: Segoe UI, 14px, weight 600
  Hover: Background switches to #5b5fc7 (surprising — flips to primary color)

No active/focus specs in data — probably native browser focus outline replaced with color-coded outlines.

6.2 Links

Link variant 1:

• Default: #242424, no underline, weight 600
• Hover: underline

Link variant 2:

• Default: #000000, no underline, weight 600
• Hover: underline

6.3 Forms

No text inputs detected in data — but input border radius = 4px, border color #d1d1d1.

6.4 Cards

Cards likely use 16px radius, white background, light grey borders. Shadows are rare — maybe used for modals.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-light: #f0f0f0;
  --color-grey-medium: #d1d1d1;
  --color-primary: #5b5fc7;
  --color-primary-hover: #5357ba;
  --color-link-blue: #005fcc;
  --color-grey-neutral-a: #c7c7c7;
  --color-grey-very-light: #f9f9f9;
  --color-grey-neutral-b: #cbcbcb;

  /* Typography */
  --font-family-base: "Segoe UI", -apple-system, system-ui, Helvetica, Arial;
  --font-size-h1: 32px;
  --font-size-h1-alt: 24px;
  --font-size-h1-small: 20px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --line-height-tight: 1.25;
  --line-height-normal: 1.40;
  --line-height-loose: 1.75;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Borders */
  --border-light: 1px solid #f0f0f0;
  --border-medium: 1px solid #d1d1d1;
  --border-thick: 2px solid #d1d1d1;
  --border-modal: 1px solid #dddddd;

  /* Shadows */
  --shadow-default: rgba(0, 0, 0, 0.25) 0px 0px 16px 0px;
  --shadow-colored: rgba(211, 205, 255, 0.4) 1px 1px 24px 0px;
}

8. AI Coding Assistant Prompt

# Skype Design System Specification

System Prompt:
You are a Skype design expert. Build UIs matching their visual language exactly.

Brand Context:
Skype's current web design is minimal, flat, and clean. It uses a restrained color palette with a single blue-violet accent for actions. Typography is consistent with Segoe UI, and components rely heavily on pill shapes and subtle borders instead of heavy shadows.

Color Palette:
- Pure Black: #000000 — Body text, icons
- White: #ffffff — Page background, text on dark
- Light Grey: #f0f0f0 — Secondary surfaces, dividers
- Medium Grey: #d1d1d1 — Borders, input outlines
- Primary Accent: #5b5fc7 — Primary buttons, key actions
- Primary Hover: #5357ba — Hover/focus states for accent elements
- Link Blue: #005fcc — Focus outlines, link hover
- Neutral Grey A: #c7c7c7 — Disabled states, muted borders
- Very Light Grey: #f9f9f9 — Hover backgrounds
- Neutral Grey B: #cbcbcb — Dividers, muted borders

Typography:
Font family: "Segoe UI", -apple-system, system-ui, Helvetica, Arial

| Element        | Size   | Weight | Line Height | Use Case |
|----------------|--------|--------|-------------|----------|
| Heading-1      | 32px   | 600    | 1.25        | Page titles |
| Heading-1 alt  | 24px   | 300    | n/a         | Light section titles |
| Heading-1 alt  | 20px   | 600    | 1.40        | Subheadings |
| Heading-1 alt  | 20px   | 350    | 1.40        | Subheadings light |
| Link           | 16px   | 600    | 1.40        | Navigation links |
| Button         | 14px   | 600    | 1.40        | CTAs |
| Caption        | 14px   | 400    | 1.40        | Secondary text |

Spacing & Grid:
Base: 8px grid. Scale: 2px, 4px, 5px, 6px, 7px, 16px, 24px, 32px, 48px, 64px.
Use 2px–7px for tight controls, 16px for component padding, 32px for section spacing.

Border Radius:
- sm: 4px — Inputs
- md: 8px — Modals
- lg: 16px — Cards, containers
- pill: 999px — Buttons
- circle: 50% — Avatars, circular icons

Shadows & Depth:
- shadow-default: rgba(0,0,0,0.25) 0px 0px 16px 0px
- shadow-colored: rgba(211,205,255,0.4) 1px 1px 24px 0px

Component Specifications:

Primary Button:
```css
.btn-primary {
  background-color: #5b5fc7;
  color: #ffffff;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Segoe UI", -apple-system, system-ui, Helvetica, Arial;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 150ms ease;
}
.btn-primary:hover {
  background-color: #5b5fc7;
}
```

Secondary Button:
```css
.btn-secondary {
  background-color: #ffffff;
  color: #5b5fc7;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid #d1d1d1;
  font-family: "Segoe UI", -apple-system, system-ui, Helvetica, Arial;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 150ms ease;
}
.btn-secondary:hover {
  background-color: #5b5fc7;
  color: #ffffff;
}
```

Navigation Links:
```css
.link {
  color: #242424;
  text-decoration: none;
  font-weight: 600;
}
.link:hover {
  text-decoration: underline;
}
```

Layout & Responsive Rules:
- Breakpoints: 700px, 1024px, 1050px, 2000px
- Max content width: 1024px for desktop
- Page padding: 16px mobile / 32px desktop
- Grid gap: multiples of 8px

Interaction Rules:
- Transition timing: 150ms ease for state changes
- Focus indicators: use Link Blue #005fcc or accent outline

DO List:
- Use ONLY colors from the palette
- Maintain 8px grid
- Use Segoe UI for all text
- Keep buttons pill-shaped
- Use thin borders for separation
- Keep hover states within accent family

DON'T List:
- Don't use unapproved colors
- Don't mix sharp and rounded corners
- Don't add heavy shadows
- Don't overload with multiple accent colors
- Don't break spacing scale

Code Examples:

Primary Button:
```css
<button class="btn-primary">Start Meeting</button>
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #f0f0f0;
}
```

Form Input:
```css
.input {
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  border-color: #005fcc;
  outline: none;
}
```

9. Summary

TL;DR — Skype’s web design here is Microsoft’s minimal, flat approach with a single blue-violet accent, Segoe UI everywhere, and pill buttons. It’s built on an 8px grid, uses light greys for surfaces, and avoids heavy shadows.

Brand Keywords:

• corporate-minimal
• calm-interface
• pill-shaped-cta
• microsoft-consistency
• flat-design