Skype DESIGN.md

1. Visual Theme & Atmosphere

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 (#00AFF0 bright / #0078D4 deep) 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

2. Color Palette & Roles

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 #00AFF0 buttons use #00343F deep-cyan-ink for AA.
• Text Secondary (#6E6E78 light / #A4A4AE dark): Timestamps, list preview, contact subtitle.
• Text Tertiary (#9A9AA4 light / #6F6F79 dark): 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 (#9A9AA4 ring): 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 (#0078D4 light / #4FBDF0 dark): Inline links inside bubbles.
• Selection Highlight (#00AFF0 @ 18%): Text selection within a bubble.

Presence Color Matrix

3. Typography Rules

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; or Open 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

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 #00AFF0 button, text uses deep-cyan ink #00343F for WCAG AA.
• Tracking near-zero: Segoe/Inter are comfortable at default tracking; only tiny captions get a small positive value.

4. Component Stylings

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 #00343F 16pt
• 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: #EBEBEF light / #2A2A30 dark
• 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 #0078D4 above 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 tertiaryLabel below 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: #F4F4F6 light / #2A2A30 dark, 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 divider bottom
• Leading: back chevron (chevron.left 17pt #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 #E8364F pill)
• 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 = #00AFF0 filled 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 / #2A2A30 fill, 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 magnifyingglass 15pt tertiaryLabel, placeholder "Search Skype"

Distinctive Components

Video Call Grid + Control Bar — gradient participant tiles, self-view, per-tile mic, big circular controls; Skype's beating heart.

Inline Call Card — call history in the chat as rounded cards; the chat is also a call log.

Presence Dots — green/yellow/red/gray on every avatar; people-status is everywhere in Skype.

Reactions Strip — long-press a bubble → heart-led emoji row (❤️ 👍 😂 😮 😢 😡); docks as a chip.

Contacts Directory — searchable people list with "Active now"; the people-first surface.

Call Screen (incoming) — full gradient/blurred-avatar background, large avatar, ringing label, accept (green) / decline (red) circular controls.

Meet Now — instant-meeting CTA that creates a shareable call link without adding contacts.

Screen Share Tile — a participant tile flagged "Sharing" with a distinct border treatment.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 14, 16, 20, 24, 32, 44
• Same-sender bubble gap: 5pt
• Sender-change gap: 8pt
• Thread horizontal inset: 14pt, bubble max width ~80%
• Bubble internal padding: 9pt vertical / 14pt horizontal

Grid & Container

• iPhone: full-width thread, 14pt gutters; bubble max ~80%
• Video grid: adaptive — 1 / 2 / 3-4 / 5+ participants tile layouts; self-view pinned
• iPad: split — chat/contacts list (~340pt) + conversation/call; content max ~700pt centered
• Headers, call cards, banners: full-width, safe-area aware

Whitespace Philosophy

• Friendly density: 5pt within a run, 8pt on sender change — conversational, slightly airier than dense IM
• Blue is the only saturated surface: chrome is neutral so the bright blue and call FABs pop
• Call-first whitespace: header call icons, call cards, and the Calls/Contacts tabs always have room — calling is never buried
• Video grid breathes: tiles have consistent 8pt gutters and rounded corners for a calm, organized call

Border Radius Scale

• Square (0pt): full-bleed video (rare; tiles are rounded)
• Tail (4pt): the pinched bubble corner on the sender's edge
• Subtle (8pt): search bar, list thumbnails
• Standard (14pt): bubbles, call cards, video tiles, reply-quote container
• Comfortable (18pt): input field, sheets, larger cards
• Pill (22pt / 500pt): primary/call buttons, badges
• Circle (50%): avatars, send button, call-control buttons, presence dots

6. Depth & Elevation

Skype is mostly flat with soft neutral shadows on floating surfaces and gradient fills on avatars/video tiles.

Shadow Philosophy: Skype uses soft neutral shadows on floating surfaces (reactions, menus, FAB) so they clearly hover, while content (bubbles, call cards) stays flat. Avatars and video tiles use cloud-blue gradients as the "depth" expression instead of shadows. On dark mode shadows fade, so floating surfaces gain a faint 1pt divider border. The incoming-call screen uses a blurred/gradient backdrop for focus.

Motion

• Bubble send: outgoing bubble slides up + scales 0.88 → 1.0 from the input field, spring(response: 0.32, damping: 0.8) + light haptic
• Reactions strip: long-press (~450ms) → strip scales 0.7 → 1.0 spring; selecting docks the chip with a pop + soft haptic
• Call card insert: fades + slides in (0.25s) when a call ends and the card is appended
• Video tile join/leave: tile scales 0.9 → 1.0 fade-in on join; fade-out + grid reflow (0.3s) on leave
• Call connect: ringing screen crossfades to the grid (0.3s); control bar rises with spring
• Mute/video toggle: button fill crossfades 0.15s + the affected tile's mic glyph updates instantly
• Tab switch: instant; active-icon fill + color crossfade 0.15s
• Presence change: dot color crossfades 0.2s
• Typing: "Lena is typing…" text in the header subtitle
• Haptics: light impact on send, soft on reaction dock, success on call connect, warning on call end

7. Do's and Don'ts

Do

• 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
• Use a gradient-tiled video grid with self-view, per-tile mic, and a big circular control bar
• Use green #2DC26B for accept/online, red #E8364F for end-call/destructive/unread badges
• Use deep-cyan ink #00343F for text on the bright #00AFF0 button (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 #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
• 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #16161A (neutral near-black)
• Brand blue (bright): #00AFF0 (buttons/FABs/tabs)
• Brand blue (deep): #0078D4 (outgoing bubble, text-safe)
• Incoming bubble: #EBEBEF light / #2A2A30 dark
• Bubble text (outgoing): #FFFFFF
• Text on bright #00AFF0 button: #00343F
• Text primary: #1B1B1F light / #F2F2F4 dark
• Text secondary: #6E6E78 light / #A4A4AE dark
• Accept / online: #2DC26B
• End-call / unread badge: #E8364F
• Away presence: #FFC400
• Link: #0078D4 / #4FBDF0

Example Component Prompts

• "Build a Skype outgoing bubble in SwiftUI: background #0078D4 (deep, text-safe Skype Blue), text #FFFFFF Segoe-substitute (Inter) 15pt regular, padding 9pt vertical / 14pt horizontal, corner radius 14pt with .bottomTrailing at 4pt (tail) when last in a same-sender run. Right-aligned, max width 80%. Footer: timestamp 10pt + delivery state, right-aligned. Incoming variant: background #EBEBEF (light) / #2A2A30 (dark), text label, tail on .bottomLeading."

• "Create a Skype inline call card: a rounded surface interleaved in the chat. Background #F4F4F6 (light) / #2A2A30 (dark), 14pt corner radius, 10/14pt padding. Leading 30pt circular icon with a green phone glyph #2DC26B on an 18%-green fill (answered) or red #E8364F (missed). Title 'Group video call' Inter 13pt w700; subtitle '12 min · 3 participants' 11pt secondaryLabel. Optional trailing 'Call back' pill."

• "Render the Skype video call grid: an adaptive grid of participant tiles, each 14pt corner radius with a cloud-blue gradient fallback (#34C3FF → #0078D4) or live video. Name label bottom-left (11pt w600 white on a scrim). Per-tile mic indicator top-right: 18pt circle, rgba(0,0,0,0.45) bg, white mic glyph. A smaller bordered (#34343C) self-view tile pinned in the corner. Bottom control bar: a row of 56pt circular buttons — mute, video, share, more, and a red #E8364F end-call — on a translucent dark scrim."

• "Build the Skype primary button: pill, 22pt corner radius, background bright Skype Blue #00AFF0, label in deep-cyan ink #00343F (WCAG AA on bright blue) Inter 16pt w700, padding 13/26pt; pressed #0091CC + scale 0.98. Accept-call variant: background green #2DC26B, white icon+label. End-call: background red #E8364F, white phone-down glyph, 56pt circle in the call control bar."

• "Create the Skype chat header (call-first): 56pt + safe area, hairline divider. Leading chevron.left 17pt #00AFF0. Center-left: 36pt circular avatar with a presence dot (green #2DC26B active) + name Inter 15pt w700 stacked over status 'Active now' 11pt #2DC26B. Trailing: phone icon + video icon 22pt #00AFF0. Tap the header → contact profile (Chat / Audio / Video)."

• "Render the Skype bottom tab bar: 50pt + safe area, background #FFFFFF/#1F1F24, hairline top divider. Tabs: Chats, Calls, Contacts, Notifications. Icon 22pt; active = bright #00AFF0 filled glyph + label; inactive = #9A9AA4/#6F6F79. Labels Inter 11pt w600 always shown; red #E8364F unread badge on Chats/Notifications. No tint pill — just icon fill + color change."

Iteration Guide

1. Skype Blue is the brand — bright #00AFF0 on buttons/FABs/tabs, deep text-safe #0078D4 on the outgoing bubble
2. Dark canvas is a neutral near-black #16161A — NOT color-cast; neutral keeps the cloud blue vivid
3. Incoming bubbles are neutral gray #EBEBEF / #2A2A30; only the outgoing bubble is brand blue
4. Skype is call-first: phone + video in every chat header, dedicated Calls + Contacts tabs, the video grid
5. The chat is also a call log — interleave inline call cards (glyph + duration + participants) with messages
6. Presence dots (green active, yellow away, red DND, gray offline) appear on every avatar — people-status everywhere
7. The video grid (gradient tiles, self-view, per-tile mic, big circular control bar) is Skype's beating heart
8. Use deep-cyan ink #00343F on the bright #00AFF0 button; white text on the deep #0078D4 bubble
9. Green #2DC26B = accept/online; red #E8364F = end-call/destructive/unread; yellow #FFC400 = away
10. Typography is a clean humanist sans (Segoe UI → Inter/Open Sans) with heavy 700/800 titles & buttons; bubbles flat ~14pt with a ~4pt tail