A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
2radius steps
5pxspacing base
Skype, in one page
Skype is Microsoft's veteran video-and-voice-calling app, and its design DNA is unmistakably call-first. Long before it was a chat client it was *the* way to make free internet calls, and every screen still leads with that promise: the contacts list, the prominent call buttons in every conversation header, the dedicated Calls tab, and the full-screen video grid are the heart of the product. The visual identity is built on one signature color — Skype Blue, a bright cloud-cyan #00AFF0 (with a deeper, text-safe #0078D4 for filled surfaces). It's in the cloud logomark, the call FABs, the primary buttons, the tab selection, and the outgoing message bubble. The atmosphere is bright, friendly, and approachable: rounded shapes, soft gradients on avatars and video tiles, and a clean canvas.
The canvas is white (#FFFFFF) in light mode and a neutral near-black (#16161A) in dark mode — Skype's dark is a true neutral gray-black so the cloud blue stays vivid against it. Conversations are a vertical stack of rounded bubbles: outgoing in the deeper Skype Blue #0078D4 with white text and a small ~4pt tail on the bottom-right; incoming in a light gray #EBEBEF (light) / #2A2A30 (dark) with primary-color text and a tail on the bottom-left. Bubbles use a ~14pt radius. Below or beside each outgoing bubble sits a timestamp and a small delivery state ("Delivered" / "Seen"). The chat history is also a *call log*: every voice/video call appears as an inline call card — a rounded surface with a green phone glyph, "Group video call", duration, and participant count — interleaved with messages.
The other signature pillar is the video call grid. When a call is active, participants render as gradient-backed video tiles in an adaptive grid, with a small self-view, per-tile mic indicators, and a bottom control bar of large circular buttons: mute, video toggle, share, and a red end-call button (with a green accept button on incoming). Skype's call screen and contacts list are as central as its chat. Other distinctive components: presence dots (green = active, yellow = away, gray = offline) on every avatar, message reactions (a heart-led emoji strip on long-press that docks as a chip on the bubble), the contacts directory with search and "Active now", screen sharing, and the Meet Now / instant-meeting entry.
Typography is Microsoft's house style: Segoe UI (the Windows/Skype brand sans). On platforms without Segoe the closest free substitutes are Inter or Open Sans — clean, neutral, humanist. Hierarchy is product-UI: bold screen titles, semibold contact headlines, 15pt message body, small gray metadata. Color beyond blue is purposeful: green #2DC26B for accept-call and online presence, red #E8364F for end-call/destructive and unread badges, yellow #FFC400 for away presence. Skype Blue is the only saturated brand surface; everything else is neutral chrome.
Key Characteristics:
- Skype Blue (
#00AFF0bright /#0078D4deep) is the entire brand — call FABs, buttons, tabs, outgoing bubble - White canvas (
#FFFFFF) light / neutral near-black (#16161A) dark - Rounded ~14pt bubbles: outgoing deep blue
#0078D4, incoming gray (#EBEBEF/#2A2A30), ~4pt tail - Call-first chrome — phone + video icons in every chat header, dedicated Calls tab, Contacts tab
- Inline call cards — call history interleaved in the chat as rounded cards (glyph + duration + participants)
- Video call grid — gradient participant tiles, self-view, per-tile mic, big circular control bar
- Presence dots on every avatar — green active (
#2DC26B), yellow away (#FFC400), gray offline - Message reactions — heart-led emoji strip on long-press, docks as a chip on the bubble
- Contacts directory — searchable, "Active now", the people-centric heart of the app
- Accept (green
#2DC26B) / End (red#E8364F) call buttons; red unread badges - Segoe UI brand sans (Inter / Open Sans substitute), friendly and rounded
- Bottom tab bar: Chats / Calls / Contacts / Notifications with bright-blue active tint
Do's and don'ts
Do
- Make Skype Blue the brand — bright
#00AFF0on buttons/FABs/tabs, deep#0078D4on the outgoing bubble - Use white (
#FFFFFF) light canvas / neutral near-black (#16161A) dark — neutral so blue stays vivid - Render outgoing bubbles deep blue
#0078D4, incoming gray (#EBEBEF/#2A2A30), ~14pt radius with a ~4pt tail - Keep calling one tap away — phone + video in every chat header, dedicated Calls + Contacts tabs
- Interleave call history as inline call cards (glyph + duration + participants) in the chat
- Show presence dots on every avatar — green active
#2DC26B, yellow away#FFC400, gray offline - Use a gradient-tiled video grid with self-view, per-tile mic, and a big circular control bar
- Use green
#2DC26Bfor accept/online, red#E8364Ffor end-call/destructive/unread badges - Use deep-cyan ink
#00343Ffor text on the bright#00AFF0button (AA); white text on the deep-blue bubble - Use a clean humanist sans (Segoe UI → Inter/Open Sans), heavy 700/800 titles & buttons
Don't
- Don't tint the dark canvas — Skype's dark mode is a neutral near-black
#16161A, not color-cast - Don't tint incoming bubbles blue — they're neutral gray; only outgoing is brand blue
- Don't use the bright
#00AFF0for the outgoing bubble — use the text-safe deep#0078D4 - Don't put white text on the bright
#00AFF0button — use deep-cyan ink#00343Ffor contrast - Don't bury calling behind menus — it's call-first; header + Calls/Contacts tabs + call cards are mandatory
- Don't hide call history — every call appears as an inline card in the conversation
- Don't introduce a second brand accent — blue is it; green/yellow/red are presence/semantic only
- Don't use thin type for titles/buttons — Skype's friendliness comes from heavy 700/800 weights
- Don't use hard drop shadows on bubbles/call cards — they're flat; only floating menus elevate
- Don't drop presence dots — people-status is core to Skype's identity
- Don't animate aggressively — motion is soft spring, 0.15–0.32s
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Skype design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- The canvas is white: #ffffff
- Skype Blue: #00aff0
- Skype Blue Deep: #0078d4
- Skype Blue Pressed: #0091cc
- Skype Cyan: #34c3ff
- Canvas White: #ffffff
- Incoming Bubble: #ebebef
- Surface Gray: #f4f4f6
- Row Pressed: #e8e8ec
- Divider: #e2e2e6
Type:
- families: Segoe UI, Brand, Inter, Open Sans
- scale: 11, 13, 14, 15, 16, 17, 22, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 14, 22
Spacing: 5, 8, 9, 13
Rules:
- Make Skype Blue the brand — bright `#00AFF0` on buttons/FABs/tabs, deep `#0078D4` on the outgoing bubble
- Use white (`#FFFFFF`) light canvas / neutral near-black (`#16161A`) dark — neutral so blue stays vivid
- Render outgoing bubbles deep blue `#0078D4`, incoming gray (`#EBEBEF` / `#2A2A30`), ~14pt radius with a ~4pt tail
- Keep calling one tap away — phone + video in every chat header, dedicated Calls + Contacts tabs
- Interleave call history as inline call cards (glyph + duration + participants) in the chat
- Show presence dots on every avatar — green active `#2DC26B`, yellow away `#FFC400`, gray offline
Avoid:
- Don't tint the dark canvas — Skype's dark mode is a neutral near-black `#16161A`, not color-cast
- Don't tint incoming bubbles blue — they're neutral gray; only outgoing is brand blue
- Don't use the bright `#00AFF0` for the outgoing bubble — use the text-safe deep `#0078D4`
- Don't put white text on the bright `#00AFF0` button — use deep-cyan ink `#00343F` for contrast
- Don't bury calling behind menus — it's call-first; header + Calls/Contacts tabs + call cards are mandatory
- Don't hide call history — every call appears as an inline card in the conversation
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Skype Blue (
#00AFF0): The brand. Call FABs, primary buttons, tab selection, send button, links, icons. - Skype Blue Deep (
#0078D4): Outgoing bubble, filled surfaces needing white-text contrast, pressed accents. - Skype Blue Pressed (
#0091CC): Pressed state of bright-blue controls. - Skype Cyan (
#34C3FF): Lighter accent, gradient top stop, links on dark, outline text.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Thread background, primary light canvas. - Incoming Bubble (
#EBEBEF): Light gray incoming bubble. - Surface Gray (
#F4F4F6): Grouped list background, search field, call cards on light. - Row Pressed (
#E8E8EC): Pressed conversation/list rows. - Divider (
#E2E2E6): Hairline separators between list rows and header.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#16161A): Neutral near-black thread background. - Dark Surface 1 (
#1F1F24): Nav bar, input bar, tab bar, elevated surfaces. - Dark Surface 2 (
#2A2A30): Incoming bubble, call cards, control buttons, sheets. - Dark Divider (
#34343C): Hairline separators on dark.
Text
- Text Primary Light (
#1B1B1F): Incoming bubble text, primary labels. - Text on Blue (
#FFFFFF): Outgoing bubble text; on bright#00AFF0buttons use#00343Fdeep-cyan-ink for AA. - Text Secondary (
#6E6E78light /#A4A4AEdark): Timestamps, list preview, contact subtitle. - Text Tertiary (
#9A9AA4light /#6F6F79dark): Disabled, placeholder, "Delivered" micro-meta. - Text Primary Dark (
#F2F2F4): Incoming bubble text and labels on dark.
Presence
- Active / Online (
#2DC26B): Green presence dot, also accept-call. - Away (
#FFC400): Yellow presence dot. - Do Not Disturb (
#E8364F): Red presence dot (shares the destructive red). - Offline / Invisible (
#9A9AA4ring): Gray hollow ring.
Semantic
- Accept / Success Green (
#2DC26B): Accept-call button, success toast, online. - End / Error Red (
#E8364F): End-call button, delete, destructive, unread count badge. - Link (
#0078D4light /#4FBDF0dark): Inline links inside bubbles. - Selection Highlight (
#00AFF0@ 18%): Text selection within a bubble.
Presence Color Matrix
| State | Dot | Color |
|---|---|---|
| Active / Online | filled | #2DC26B |
| Away | filled | #FFC400 |
| Do Not Disturb | filled (minus glyph) | #E8364F |
| Offline | hollow ring | #9A9AA4 |
| In a call | filled (phone glyph) | #00AFF0 |
Type scaleRead the full spec
Font Family
- Brand:
Segoe UI— Microsoft's house humanist sans (proprietary; not redistributable cross-platform). - Recommended Free Substitute:
Inter(by Rasmus Andersson, SIL OFL) — closest neutral humanist; orOpen Sans(SIL OFL) for a slightly warmer match. - Fallback Stack:
-apple-system, 'Segoe UI', BlinkMacSystemFont, 'SF Pro Text', 'Inter', Roboto, Helvetica, Arial, sans-serif - Numerals: proportional by default; tabular in timestamps and call durations.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | Segoe UI | 32pt | 800 | 1.2 | -0.4pt | "Chats" / "Calls" screen title |
| Title 1 | Segoe UI | 26pt | 700 | 1.2 | -0.3pt | Call summary / sheet headers |
| Title 3 | Segoe UI | 22pt | 700 | 1.25 | -0.2pt | Group name, large contact name |
| Headline | Segoe UI | 17pt | 700 | 1.3 | -0.2pt | Contact name in chat header / list row title |
| Body / Bubble | Segoe UI | 15pt | 400 | 1.32 | 0pt | Message text |
| Body Emphasis | Segoe UI | 15pt | 600 | 1.32 | 0pt | Sender name in group bubbles, mentions |
| List Preview | Segoe UI | 14pt | 500 | 1.35 | 0pt | Last-message preview in chat list |
| Footnote | Segoe UI | 13pt | 600 | 1.35 | 0pt | Call card meta ("12 min · 3 participants") |
| Caption | Segoe UI | 11pt | 600 | 1.35 | 0.1pt | Timestamp separators, presence ("Active now") |
| Button | Segoe UI | 16pt | 700 | 1.0 | 0pt | Primary / call buttons |
| Tab Label | Segoe UI | 11pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Badge | Segoe UI | 11pt | 700 | 1.0 | 0pt | Unread count badges |
Principles
- Friendly and clean: Segoe/Inter at heavy 700/800 for titles & buttons feels confident and approachable.
- Body stays light: message body at 15pt regular keeps chat readable and dense.
- Dynamic Type supported: titles, headline, body, list previews scale; timestamps, tab labels, badges, presence text stay fixed.
- White text on the deep blue bubble: outgoing bubble text is
#FFFFFF; on the bright#00AFF0button, text uses deep-cyan ink#00343Ffor WCAG AA. - Tracking near-zero: Segoe/Inter are comfortable at default tracking; only tiny captions get a small positive value.
Components and layoutRead the full spec
Buttons
Primary Button
- Shape: Pill / rounded rectangle, 22pt corner radius
- Background:
#00AFF0 - Text:
#00343F(deep-cyan ink for AA on bright blue), Segoe UI 16pt weight 700 - Padding: 13pt vertical, 26pt horizontal
- Pressed:
#0091CC+ scale 0.98 - Disabled:
#00AFF0@ 35% opacity
Call Button (Call / Accept)
- Shape: pill 22pt radius (or 56pt circle in call control bar)
- Background:
#2DC26B(accept/call) — white icon+label - Used in the chat-header call action and incoming-call accept
End-Call Button
- Background:
#E8364F, white phone-down glyph, 56pt circle in the control bar / pill in sheets
Outline Button (secondary)
- Background: transparent
- Border: 1.5pt
#00AFF0 - Text:
#0078D4(light) /#34C3FF(dark), Segoe UI 15pt weight 700 - Corner radius: 22pt
- Pressed:
#00AFF0@ 10% fill
Text Button
- Background: transparent
- Text:
#0078D4/#34C3FF, Segoe UI 15pt weight 600 ("Share Screen", "Add People") - Pressed: opacity 0.5
Send Button (circular)
- 36pt circle, background
#00AFF0, paper-plane glyph#00343F16pt - Mic icon (voice message) when the field is empty
Message Bubble (the core atom)
Outgoing Bubble
- Background:
#0078D4(deep Skype Blue — text-safe) - Text:
#FFFFFF, Segoe UI 15pt w400 - Padding: 9pt vertical, 14pt horizontal
- Corner radius: 14pt, bottom-right corner at 4pt (tail) when last in a same-sender run
- Alignment: trailing, max width ~80% of thread
- Footer: timestamp 10pt + delivery state, right-aligned below
Incoming Bubble
- Background:
#EBEBEFlight /#2A2A30dark - Text:
#1B1B1F/#F2F2F4, Segoe UI 15pt w400 - Corner radius: 14pt, bottom-left corner at 4pt (tail)
- Alignment: leading; in groups, sender name in 15pt w600
#0078D4above the first bubble
Grouping
- Same sender consecutive: 5pt gap, only last bubble shows the tail
- Sender change: 8pt gap
- Day separator: centered 11pt caption,
secondaryLabel, 8pt vertical margin
States
- Sending: clock micro-glyph, bubble ~70% opacity until ack
- Failed: red exclamation, tap to resend
- With reaction: a small chip docked at the bottom-near corner (overlapping -12pt)
- Edited: "Edited" in 11pt
tertiaryLabelbelow the bubble - Reply quote: a thin blue left-bar + quoted snippet inside the bubble
Inline Call Card
- A rounded surface interleaved in the chat history for every voice/video call
- Background:
#F4F4F6light /#2A2A30dark, 14pt corner radius, 10/14pt padding - Leading: 30pt circular icon, tinted by outcome — green phone
#2DC26B@ 18% bg (answered), red#E8364F(missed/declined) - Title: "Group video call" / "Audio call" Segoe UI 13pt w700
- Subtitle: "12 min · 3 participants" / "Missed · Tap to call back" 11pt
secondaryLabel - Trailing (optional): a "Call back" pill button
Video Call Grid
- Active-call screen: adaptive grid of participant tiles
- Tile: gradient-backed (avatar fallback) or live video, 14pt corner radius
- Name label bottom-left (11pt w600 white on a subtle scrim)
- Per-tile mic indicator top-right: 18pt circle,
rgba(0,0,0,0.45)bg, white mic/mic-off glyph - Self-view: smaller pinned tile (e.g., 62pt wide), bordered
#34343C - Control bar (bottom): row of 52–56pt circular buttons — mute, video toggle, share, more, and a red end-call (green accept on incoming) — on a translucent dark scrim
Navigation
Chat Header (call-first)
- Height: 56pt + safe area, hairline
dividerbottom - Leading: back chevron (
chevron.left17pt#00AFF0) - Center-left: 36pt circular avatar with a presence dot + name (Segoe UI 15pt w700) stacked over presence/status ("Active now" 11pt
#2DC26B) - Trailing: phone icon + video icon (22pt
#00AFF0) — call-first - Tapping the header opens the contact/profile screen
Chat List (Chats tab)
- Large title "Chats" (32pt w800), search field, Meet Now / compose entry
- Row: 72pt — leading 52pt circular avatar with presence dot, title (17pt w700), preview (14pt
secondaryLabel, 1-line), trailing timestamp (13pt) + unread count badge (red#E8364Fpill) - Swipe: Delete (red), More
Contacts Tab
- Searchable directory, sectioned A–Z; "Active now" group at the top
- Row: avatar + presence + name + status text; tap → profile with Chat / Audio / Video call actions
Bottom Tab Bar
- Height: 50pt + safe area, background
#FFFFFF/#1F1F24, hairline top divider - Tabs (4): Chats, Calls, Contacts, Notifications
- Icon 22pt; active =
#00AFF0filled glyph + label; inactive =#9A9AA4/#6F6F79 - Labels: Segoe UI 11pt w600 always shown; unread badge on Chats/Notifications (red pill)
Input Fields
Compose Bar
- Background:
#FFFFFF/#1F1F24, hairline top divider, 8/16pt padding - Leading:
+22pt attachment (camera, gallery, file, location, contact, poll) - Center: pill field — 18pt radius,
#F4F4F6/#2A2A30fill, placeholder "Type a message"tertiaryLabel - Inner-trailing: emoji face glyph 22pt
- Trailing: 36pt circular send button
#00AFF0; mic when empty (voice message)
Search Bar
- Height: 36pt,
#F4F4F6/#2A2A30, 10pt radius - Leading
magnifyingglass15pttertiaryLabel, placeholder "Search Skype"
Distinctive Components
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Bubble max ~300pt; video grid caps at 4 tiles before paging |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above header / call top bar |
| iPhone 15/16 Pro Max | 430pt | Wider bubbles (~344pt), larger video tiles |
| iPad (portrait) | 768pt | Split: list (~340pt) + conversation/call; content max ~700pt centered |
| iPad (landscape) | 1024pt+ | Persistent list + call grid full-pane; gallery video layout |
Dynamic Type
- Titles, headline, body, list preview, call-card title: full scale
- Timestamps, tab labels, badges, presence text, per-tile mic/name labels: FIXED
- Video tiles: fixed grid metrics (do not scale with text)
Orientation
- Conversation supports rotation; bubbles reflow keeping the ~80% cap
- Video call rotates to landscape (gallery layout) with PiP support
- iPad keeps split view in both orientations; call grid uses the full pane
Touch Targets
- Send /
+/ emoji buttons: 22–36pt glyph, 44pt hit - Bubble: full bubble is the long-press (reactions) target
- Reaction glyphs: 28pt glyph, 44pt hit
- Header call icons: 44pt hit each
- Call-control buttons: 52–56pt (already ≥44pt)
- List/contact row, tab: full-row / full-cell tap
Safe Area Handling
- Top: header / call top bar respects safe area + Dynamic Island
- Bottom: input bar + tab bar + call control bar respect home indicator; thread scrolls above keyboard
- Keyboard: compose bar and emoji panel ride above the keyboard
- Sides: 14pt bubble gutters; video tiles use the full width with 8pt gutters
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-skype {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #16161a;
--heading-color: #16161a;
--link-color: #0078d4;
--link-hover-color: #005ba1;
--border-color: #d5d5d6;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(22,22,26,0.06);
--card-hover-shadow: 0 6px 18px rgba(22,22,26,0.12);
--header-bg: #16161a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #68686a;
--button-bg: #00aff0;
--button-text-color: #000000;
--button-hover-bg: #008abd;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #16161a;
--button-secondary-hover-bg: #e3e3e4;
--button-secondary-border: 1px solid #d5d5d6;
--prompt-bg: #f3f3f4;
--prompt-text-color: #16161a;
--base-font: var(--font-inter);
--heading-font: var(--font-open-sans);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- kik 79.9%
- plenty of fish 79.2%
- spotify 74.9%
- grubhub 73.0%
- tidal 72.1%
Where this came from
- Source document
ios/design-md/messaging/skype/DESIGN.md· 26.2 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.