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
8type steps
2radius steps
10pxspacing base
Microsoft Teams, in one page
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 (
#6264A7light /#5B5FC7dark) — 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
Do's and don'ts
Do
- Support both light (
#F5F5F5/#FFFFFF) and dark (#1F1F1F/#2D2C2C) as first-class - Use Teams Purple (
#6264A7light /#5B5FC7dark) 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
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 Microsoft Teams design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Teams Purple (Light): #6264a7
- Teams Purple (Dark): #5b5fc7
- Purple Pressed: #4f52b2
- Light Canvas: #f5f5f5
- Light Surface 1: #ffffff
- Light Surface 2: #f0f0f0
- Light Divider: #e1e1e1
- Light Text Primary: #252423
- Light Text Secondary: #616161
- Light Text Tertiary: #8a8886
Type:
- families: Segoe UI, Fallback Stack, Numerals
- scale: 10, 11, 12, 13, 15, 16, 20, 28
- weights: 400, 600, 700
Shape:
- radius: 8, 12
Spacing: 10, 12
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title (Large) | Segoe UI | 28pt | 700 | 1.2 | -0.3pt | "Chat", "Teams" nav large title |
| Section Header | Segoe UI | 20pt | 700 | 1.25 | -0.2pt | "Recent", grouped headers |
| Team Name | Segoe UI | 16pt | 700 | 1.3 | -0.1pt | Team title in the Teams tree |
| List / Channel Title | Segoe UI | 16pt | 600 | 1.3 | 0pt | Chat name, channel name, contact |
| Message Author | Segoe UI | 15pt | 600 | 1.3 | 0pt | Sender name above a message |
| Body / Message | Segoe UI | 15pt | 400 | 1.45 | 0pt | Message text, descriptions |
| Button (Primary) | Segoe UI | 16pt | 600 | 1.0 | 0pt | "Join", "Send", "Meet now" |
| Button (Secondary) | Segoe UI | 15pt | 600 | 1.0 | 0pt | Outline / ghost buttons |
| Metadata | Segoe UI | 13pt | 400 | 1.35 | 0pt | Timestamp, "3 replies", presence text |
| Channel Sub | Segoe UI | 13pt | 400 | 1.35 | 0pt | Last-message preview under a channel |
| Reaction Count | Segoe UI | 12pt | 600 | 1.0 | 0pt | Count next to a reaction emoji |
| Tab Label | Segoe UI | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Tiny Label (UPPER) | Segoe UI | 11pt | 700 | 1.2 | 0.4pt | "URGENT", small caps labels |
| Timestamp / Duration | Segoe UI | 12pt | 400 | 1.0 | 0pt | "12:34" call duration, tabular |
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
Components and layoutRead the full spec
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/#5B5FC7when 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
#6264A7dot - 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
magnifyingglass16pt 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
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 64pt chat rows, channel preview may truncate sooner |
| iPhone 13/14/15 | 390pt | Standard 72pt chat rows, full tree |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the 44pt top bar |
| iPhone 15/16 Pro Max | 430pt | Larger avatars (52pt), more preview text |
| iPad | 768pt+ | Two-pane: Teams tree / chat list left, conversation right; join bar spans the conversation pane |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-microsoft-teams {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1f1f1f;
--heading-color: #1f1f1f;
--link-color: #477b00;
--link-hover-color: #2a4800;
--border-color: #d7d7d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(31,31,31,0.06);
--card-hover-shadow: 0 6px 18px rgba(31,31,31,0.12);
--header-bg: #1f1f1f;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6d6d6d;
--button-bg: #6bb700;
--button-text-color: #000000;
--button-hover-bg: #4d8400;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f2f2f2;
--button-secondary-text-color: #1f1f1f;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d7d7d7;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1f1f1f;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- clubhouse 83.1%
- trello 81.8%
- kashiyama 81.6%
- mastodon 80.9%
- midjourney 80.7%
Where this came from
- Source document
ios/design-md/productivity/microsoft-teams/DESIGN.md· 21.8 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.