Microsoft Teams DESIGN.md

1. Visual Theme & Atmosphere

Microsoft Teams' iOS app is an organizational nervous system rendered as an app. Its job is to collapse chat, meetings, files, and teams into a single dependable surface that an enterprise can live inside all day. The aesthetic is calm, structured, and Fluent — Microsoft's design language: soft surfaces, generous rounding, restrained color, and a strong sense of hierarchy. It ships with a true dual identity: a light appearance built on a near-white canvas (#F5F5F5) with white cards (#FFFFFF), and a dark appearance on a deep gray canvas (#1F1F1F) with charcoal cards (#2D2C2C). Neither is an afterthought — Teams is used in both, and the system is designed so every component reads correctly in each.

The accent is Teams Purple — #6264A7 in light, lightened to #5B5FC7 in dark for contrast. It marks the primary action (Join, Send, the active tab), the active selection, and the brand chrome. It is used with Fluent restraint: purple is a structural signal, not decoration. Presence is the one place Teams allows a small, deliberate burst of semantic color — the availability dot (green available, red busy/DND, yellow away, gray offline) is the most chromatically loaded element in the app because it carries real information that people scan for constantly.

Typography is Segoe UI — Microsoft's humanist sans — used at 400 / 600 / 700 across a 12–28pt range, closely approximated by Inter where Segoe is unavailable. The hierarchy is built for scanning long lists of people, channels, and messages: names and channel titles at 16pt semibold, message body at 15pt regular, timestamps and metadata at 12–13pt regular gray. The most structured typographic moment is the Teams → Channels tree, where team names, channel names, and the active-channel highlight form a clear three-level hierarchy.

Key Characteristics:

• Full dual identity — light (#F5F5F5 / #FFFFFF) and dark (#1F1F1F / #2D2C2C), both first-class
• Teams Purple (#6264A7 light / #5B5FC7 dark) — primary action, active tab, brand chrome
• Presence dots — green / red / yellow / gray — the one place Teams uses loaded semantic color
• Teams → Channels tree — an expandable two-level list, the app's signature navigation surface
• Message cards with reactions and a reply/thread count — the unit of collaboration
• Meeting join bar — a prominent purple bar at the top of a channel/calendar when a meeting is live
• Bottom tab bar (Activity / Chat / Teams / Calendar / Calls) — Fluent, rounded, restrained
• Fluent rounding & soft surfaces — 8–12pt radii, subtle elevation, calm motion

2. Color Palette & Roles

Primary

• Teams Purple (Light) (#6264A7): Primary CTA, active tab, send button, brand chrome — light appearance.
• Teams Purple (Dark) (#5B5FC7): The same role, lightened for contrast on the dark canvas.
• Purple Pressed (#4F52B2): Active/pressed state for purple buttons in both appearances.
• Purple Tint (rgba(98,100,167,0.12)): Selected-row / active-channel wash.

Canvas & Surface (Light)

• Light Canvas (#F5F5F5): App background in light appearance.
• Light Surface 1 (#FFFFFF): Cards, message bubbles, list rows, sheets.
• Light Surface 2 (#F0F0F0): Pressed rows, grouped section backgrounds, input fill.
• Light Divider (#E1E1E1): Hairline dividers between rows.
• Light Text Primary (#252423): Names, titles, message body.
• Light Text Secondary (#616161): Timestamps, metadata, secondary labels.
• Light Text Tertiary (#8A8886): Disabled, placeholder, low-emphasis labels.

Canvas & Surface (Dark)

• Dark Canvas (#1F1F1F): App background in dark appearance.
• Dark Surface 1 (#2D2C2C): Cards, message bubbles, list rows, sheets.
• Dark Surface 2 (#3D3C3C): Pressed rows, popovers, input fill.
• Dark Divider (#3D3C3C): Hairline dividers between rows.
• Dark Text Primary (#FFFFFF): Names, titles, message body.
• Dark Text Secondary (#ADADAD): Timestamps, metadata, secondary labels.
• Dark Text Tertiary (#7A7A7A): Disabled, placeholder, low-emphasis labels.

Presence (the loaded semantic color)

• Available (#6BB700): Green dot — user is available.
• Busy / In a Call (#C4314B): Red dot — busy, in a meeting, or on a call.
• Do Not Disturb (#C4314B): Red dot with a white bar — notifications suppressed.
• Away / Be Right Back (#FFAA44): Yellow dot.
• Offline / Unknown (#8A8886): Hollow gray ring.

Semantic

• Mention Accent (#6264A7): @mention highlight pill and "you were mentioned" markers.
• Urgent Red (#C4314B): Urgent message banner, missed-call indicator.
• Success Green (#6BB700): Success toast, "sent" confirmation.
• Warning Amber (#FFAA44): Connection warnings, away states.
• Unread Dot (#6264A7): Filled purple dot on a chat/channel with unread messages.

3. Typography Rules

Font Family

• Primary: Segoe UI (Microsoft) — used at 400 / 600 / 700
• Fallback Stack: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif
• Numerals: Tabular figures on call duration and timestamps where alignment matters

Hierarchy

Principles

• Weights concentrated at 400 / 600 / 700: Regular for body, semibold for names/titles, bold for headers — no light, no black
• Names are semibold, messages are regular: The eye finds the author first, then reads
• Three-level tree typography: Team (16pt bold) → Channel (16pt semibold) → preview (13pt regular gray)
• Tabular numerics on durations/timestamps where columns align (call logs, meeting times)
• Minimal tracking: Slight negative on titles; body and metadata sit at 0pt

4. Component Stylings

Buttons

Primary Button ("Join" / "Send" / "Meet now")

• Background: #6264A7 (light) / #5B5FC7 (dark)
• Text: #FFFFFF, Segoe UI 16pt weight 600
• Padding: 12pt vertical, 24pt horizontal
• Corner radius: 8pt
• Height: 44pt
• Pressed: background #4F52B2, scale 0.98, light haptic
• Disabled: background surface-2, text tertiary

Secondary / Outline Button ("Chat" / "Decline")

• Background: transparent
• Text: #6264A7 (light) / #5B5FC7 (dark), Segoe UI 15pt weight 600
• Border: 1pt solid current accent
• Padding: 10pt vertical, 20pt horizontal
• Corner radius: 8pt
• Pressed: background rgba(98,100,167,0.12)

Icon Button (toolbar — search, new chat, filter)

• Size: 22pt glyph, 44pt hit target
• Default: secondary text color
• Active/pressed: accent purple, surface-2 rounded background, 8pt radius

Send Button (chat composer)

• Circular, 32pt, #6264A7 / #5B5FC7 when text present; tertiary gray when empty
• White paper-plane glyph 16pt; subtle scale 0.92 on press

Cards & Containers

Message Card (the unit of collaboration)

• Layout: 32pt avatar (with presence dot) → author name (15pt w600) + timestamp (13pt) → body (15pt w400) → reactions row → reply/thread count
• Background: #FFFFFF (light) / #2D2C2C (dark), corner radius 8pt
• Padding: 12pt; consecutive messages from the same author collapse the avatar
• Hover/long-press: reveals a reaction picker + quick actions toolbar
• @mention pill: inline, rgba(98,100,167,0.12) background, accent text, 4pt radius
• Reply count: "💬 3 replies · Last reply 2h ago" in 13pt secondary, tappable to open the thread

Teams → Channels Tree Row (the signature element)

• Team header row: 56pt — 32pt rounded team avatar + team name (16pt w700) + expand chevron
• Channel row: 44pt, indented 44pt — # glyph + channel name (16pt w600) + optional unread purple dot
• Active channel: background rgba(98,100,167,0.12), name in primary text, a 3pt accent left bar
• Unread channel: name in bold + a trailing 8pt #6264A7 dot
• Expand/collapse: chevron rotates 90°, children animate height over 200ms

Chat List Row

• Height: 72pt
• Layout: 48pt avatar + presence dot → name (16pt w600) + last message preview (13pt secondary, 1-line) → trailing timestamp (12pt) + unread purple dot
• Background: surface-1; pressed surface-2
• Unread: name and preview in primary weight, trailing filled purple dot

Meeting Join Bar

• Position: pinned at the top of a channel or calendar day when a meeting is live/upcoming
• Background: #6264A7 / #5B5FC7, full width, 56pt tall, corner radius 12pt with 12pt side margins
• Contents: a video glyph + "Meeting in progress" / meeting title (white 15pt w600) + a white "Join" pill
• Pressed: darken to #4F52B2; the Join pill is white with purple text

Calendar Event Card

• Background: surface-1 with a 4pt accent left stripe (purple for Teams meetings)
• Time (13pt secondary) + title (16pt w600) + attendees row (overlapping 24pt avatars)
• A "Join" pill appears in the join window

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: surface-1 with a top hairline divider; subtle Fluent elevation
• Tabs: Activity · Chat · Teams · Calendar · Calls
• Icon size: 24pt; label 10pt w600
• Active: icon + label accent purple; a small filled-icon variant
• Inactive: secondary text color
• Activity tab shows a red badge with a count for new activity

Top Bar

• Height: 44pt + safe area
• Leading: profile avatar (28pt, with own presence dot) ; Center: screen title (20pt w700) ; Trailing: new-item + search/more (22pt)
• Background matches appearance; subtle blur on scroll in light

Teams Tree Navigation

• The Teams tab is a full-screen scrollable tree (teams → channels)
• Tapping a channel pushes the channel conversation; the active channel is highlighted in the tree on iPad's two-pane layout

Input Fields

Search Bar

• Background: surface-2
• Height: 40pt, corner radius 8pt
• Leading magnifyingglass 16pt secondary
• Placeholder: "Search", 15pt w400 tertiary
• Focus: 1pt accent border, caret accent purple

Chat Composer

• A rounded container, surface-2 / 1pt divider border, 8pt radius, min 44pt height
• Leading: format / attach / emoji icons (22pt secondary)
• Placeholder: "Type a message", 15pt w400 tertiary
• Trailing: circular send button (accent when text present)
• Focus: border accent purple

Inline Reply Field (in a thread)

• Indented under the parent message, slightly smaller (40pt min), "Reply" placeholder

Distinctive Components

Teams → Channels Tree

• The defining navigation surface — an expandable two-level list
• Level 1: a team (rounded avatar + bold name + chevron); Level 2: its channels (# + name)
• The active channel carries a 3pt purple left bar + tint wash; unread channels bold with a purple dot
• Expand/collapse animates child rows' height; state persists across sessions

Presence Dot

• An 10pt status dot anchored to the bottom-right of every avatar
• Available green #6BB700, busy/DND red #C4314B (DND adds a white bar), away yellow #FFAA44, offline a hollow gray ring
• It is the most information-dense pixel in the app — people scan it constantly; it is intentionally the loudest color

Message Reactions

• A row of emoji chips below a message: 👍 ❤️ 😂 😮 😢 👏
• Each chip: emoji + count (12pt w600) in a pill; the viewer's own reaction gets an accent-tinted background
• Long-press a message opens the reaction picker with a spring-scale entrance

Reply / Thread Count

• Under a message: "💬 3 replies · Last reply 2h ago" in 13pt secondary
• Tapping opens the threaded view; the parent message pins to the top

Meeting Join Bar

• A purple bar that appears contextually when a meeting is live; the most prominent CTA on the screen when present
• Pulses subtly (opacity 1.0 ↔ 0.85 on a 2s loop) to draw the eye without being noisy

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 44, 56
• Standard margin: 16pt horizontal; message padding 12pt
• Tree indentation: 44pt per level

Grid & Container

• Content width: full device width, 16pt horizontal margins
• Chat / Teams / Calendar lists: single column
• iPad: two-pane — Teams tree (or chat list) on the left, conversation on the right
• Message bubbles: full-width cards (Teams uses cards, not chat bubbles, for channel posts)

Whitespace Philosophy

• Calm and structured: Generous 12pt message padding and 8pt radii make a dense workday feel orderly, not cramped
• Hierarchy over density: The Teams tree uses indentation and weight, not tight rows, so the structure is always legible
• The join bar earns its space: When a meeting is live, the purple bar is allowed to be prominent — it is the moment that matters

Border Radius Scale

• Sharp (0pt): Dividers
• Standard (8pt): Buttons, message cards, inputs, search
• Comfortable (12pt): Meeting join bar, sheets, modals
• Pill (500pt): Reaction chips, filter chips, the Join pill in the bar
• Circle (50%): Avatars, send button, presence dot

6. Depth & Elevation

Shadow Philosophy: Fluent uses soft, low-contrast shadows in light mode to lift cards a hair off the #F5F5F5 canvas — never hard or dramatic. In dark mode, shadows are mostly replaced by a surface-color step (#1F1F1F → #2D2C2C → #3D3C3C) plus a 1pt divider, because shadows don't register on a dark canvas. The one element allowed a colored shadow is the meeting join bar — a soft purple glow that signals "this is the thing to tap right now."

Motion

• Primary button tap: scale 0.98 → 1.0 spring (response 0.25, damping 0.85) + .impactOccurred(.light)
• Tree expand/collapse: chevron rotates 0°→90° while child rows animate height over 200ms ease-in-out
• Reaction picker: scale 0.9 → 1.0 + opacity spring (response 0.3, damping 0.8) on long-press
• Message send: composer clears, the new message slides up + fades in over 200ms
• Presence change: the dot cross-fades color over 250ms — never an abrupt switch
• Join bar appear: slide down + fade over 250ms; subtle 2s opacity pulse while live
• Tab switch: cross-fade content 150ms; the active icon swaps to its filled variant

7. Do's and Don'ts

Do

• Support both light (#F5F5F5 / #FFFFFF) and dark (#1F1F1F / #2D2C2C) as first-class
• Use Teams Purple (#6264A7 light / #5B5FC7 dark) for primary action, active tab, and brand chrome
• Make presence dots the one place you use loaded semantic color — people scan them constantly
• Render the Teams → Channels tree with clear three-level typography and a purple active-channel bar
• Use message cards (not chat bubbles) for channel posts, with reactions + reply count
• Show the purple meeting join bar prominently when a meeting is live; let it pulse subtly
• Keep Fluent rounding (8–12pt) and soft, low-contrast elevation
• Bold unread chats/channels and add a purple unread dot
• Use Segoe UI 400/600/700 — semibold for names, regular for messages

Don't

• Don't treat dark mode as secondary — Teams is used heavily in both appearances
• Don't introduce a second brand accent — purple is the structural color
• Don't dilute presence colors or use those greens/reds/yellows for non-presence chrome
• Don't flatten the Teams tree into a single list — the two-level hierarchy is the navigation
• Don't use hard, dramatic shadows — Fluent elevation is soft and low-contrast
• Don't hide the meeting join bar when a meeting is live — it is the priority CTA
• Don't use light font weights — Segoe UI here is 400/600/700 only
• Don't use chat bubbles for channel posts — Teams uses full-width message cards
• Don't animate the presence dot abruptly — cross-fade the color

8. Responsive Behavior

Device Sizes

Dynamic Type

• Names, message body, channel titles: scale with Dynamic Type
• Presence dot: fixed 10pt (status, not text)
• Timestamps / call duration: fixed tabular 12pt (layout-critical)
• Tab labels: fixed 10pt; hide on very narrow widths rather than scale

Orientation

• Chat / Teams / Activity: portrait-primary
• Calendar: portrait and landscape
• In-meeting (Calls): rotates to landscape for the video grid
• iPad: landscape unlocks the persistent two-pane layout

Touch Targets

• Primary buttons & Join pill: 44pt height
• Tree rows: 44–56pt, full-row tappable
• Chat rows: full 72pt height
• Reaction chips: 32pt min hit area
• Tab bar icons: 24pt glyph, 44pt effective hit

Safe Area Handling

• Top: top bar respects Dynamic Island / notch
• Bottom: composer and tab bar respect the home indicator; the join bar sits below the top safe area
• Sides: 16pt content insets; the join bar uses 12pt side margins

9. Agent Prompt Guide

Quick Color Reference

• Light canvas / surface: #F5F5F5 / #FFFFFF
• Dark canvas / surface: #1F1F1F / #2D2C2C
• Light text primary / secondary: #252423 / #616161
• Dark text primary / secondary: #FFFFFF / #ADADAD
• Teams Purple (light / dark): #6264A7 / #5B5FC7
• Purple pressed: #4F52B2
• Presence available: #6BB700
• Presence busy / DND: #C4314B
• Presence away: #FFAA44
• Presence offline: #8A8886

Example Component Prompts

• "Create a SwiftUI Teams → Channels tree: a 56pt team header row with a 32pt rounded team avatar, team name 'Design Guild' in Segoe UI 16pt weight 700, and a rotating expand chevron. Below it, 44pt channel rows indented 44pt: a '#' glyph + channel name 'general' in 16pt weight 600. The active channel has a rgba(98,100,167,0.12) background, a 3pt #6264A7 left bar, and primary-color text; unread channels are bold with a trailing 8pt #6264A7 dot. Expanding rotates the chevron 90° and animates child height over 200ms."
• "Build the Teams message card: a #FFFFFF (light) / #2D2C2C (dark) card, 8pt corner radius, 12pt padding. Top row: 32pt avatar with a 10pt presence dot bottom-right, author 'Priya Anand' in Segoe UI 15pt weight 600, timestamp '10:42 AM' in 13pt secondary. Body 'Pushed the build, can someone review?' in 15pt weight 400. Below: a reactions row of emoji+count pills, then '💬 3 replies · Last reply 2h ago' in 13pt secondary."
• "Design the Teams meeting join bar: a full-width bar with 12pt side margins, 56pt tall, 12pt corner radius, background #6264A7 (light) / #5B5FC7 (dark), soft purple shadow rgba(98,100,167,0.35) 0 4px 16px. A video glyph + 'Weekly Sync · in progress' in white Segoe UI 15pt weight 600, and a trailing white 'Join' pill with purple text. It pulses opacity 1.0 ↔ 0.85 on a 2s loop while the meeting is live."
• "Create the Teams presence dot: a 10pt circle anchored bottom-right of a 32pt avatar. Available = #6BB700 solid, Busy/DND = #C4314B (DND adds a white horizontal bar), Away = #FFAA44 solid, Offline = a hollow #8A8886 ring. Changing state cross-fades the color over 250ms."
• "Build the Teams primary button: background #6264A7 (light) / #5B5FC7 (dark), text 'Join' in Segoe UI 16pt weight 600 #FFFFFF, 12pt vertical / 24pt horizontal padding, 8pt corner radius, 44pt tall. Pressed: background #4F52B2, scale 0.98, light haptic."

Iteration Guide

1. Teams is dual-identity — design light (#F5F5F5/#FFFFFF) and dark (#1F1F1F/#2D2C2C) together, both first-class
2. Teams Purple is the structural accent — #6264A7 light, #5B5FC7 dark; primary action, active tab, brand chrome
3. Presence dots are the only loaded semantic color — green/red/yellow/gray — never reuse those hues for chrome
4. The Teams → Channels tree is the signature navigation — two levels, purple active-channel bar, expand/collapse
5. Channel posts are message cards (not bubbles) with reactions and a reply/thread count
6. The purple meeting join bar is the priority CTA when a meeting is live — prominent, softly pulsing
7. Fluent rounding (8–12pt) and soft, low-contrast elevation; surface steps replace shadows in dark mode
8. Typography is Segoe UI 400/600/700 — semibold names, regular messages, bold headers