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
21tokens
10type steps
5radius steps
10pxspacing base
Copilot, in one page
Microsoft Copilot's iOS app is a warm, approachable assistant wrapped in Microsoft's Fluent design language. The canvas is clean white (#FFFFFF) in light mode and a deep neutral (#202020) in dark mode, but the defining material is Fluent acrylic: frosted, lightly tinted, blurred surfaces that sit *over* content (the prompt bar, sheets, the suggestion tray) so the UI feels physical and layered rather than flat. Where Gemini is a bare document, Copilot is a soft, tactile workspace — answers arrive in gently rounded cards, surfaces have depth, and the whole thing reads friendly and consumer-warm, not enterprise-cold.
The accent system pairs the Copilot flourish gradient — a warm sweep from coral (#FF6F61) to gold (#FFB900) — with Microsoft's Fluent Blue (#0078D4) as the interactive primary. The flourish gradient is precious: it fills the swirl/flourish logomark, the streaming shimmer, and the focused prompt-bar accent — the brand's "thinking happening" signal. Fluent Blue owns the functional primary (active send, links, selected toggles, the tone selector's active state). Everything else is ink, gray, or an acrylic-tinted surface (#F3F3F3 light / #2D2D2D dark). The warm flourish + cool blue duality is intentional: warmth for personality, blue for action.
Typography is Segoe UI (Microsoft's product typeface), rendered here with Inter as the closest free substitute, at weights 400 / 600 / 700. The hierarchy is friendly and reading-optimized: 12–28pt, with weights at 400 (body/answers), 600 (titles/labels/chips), and 700 (strong emphasis). There are no oversized headlines — the answer text *is* the content, set at 16pt with comfortable 1.5 line-height inside soft cards. The most expressive type moment is the streaming answer card, where text generates with a warm flourish shimmer and the card subtly settles into place with an acrylic blur-fade.
Key Characteristics:
- Warm Fluent workspace — white (
#FFFFFF) light / neutral (#202020) dark, layered not flat - Fluent acrylic surfaces — frosted, tinted, blurred prompt bar / sheets / suggestion tray
- Copilot flourish gradient (
#FF6F61 → #FFB900) — the swirl mark, streaming shimmer, focus accent - Fluent Blue (
#0078D4) as the functional primary — active send, links, selected toggles - Conversational answer cards — soft rounded cards on the canvas (not bare text)
- Tone / style toggle — segmented control (Creative / Balanced / Precise) shaping responses
- Prompt-suggestion chips — acrylic pills below the greeting and after answers
- Voice button — prominent mic with a flourish pulse while listening
- Top bar + sidebar nav (no bottom tabs) — recent chats + Copilot pages in a drawer
- Segoe UI typeface (Inter fallback), weights 400/600/700, full light + dark parity
Do's and don'ts
Do
- Build surfaces as Fluent acrylic — frosted, tinted, blurred sheets that float over the conversation
- Render answers in soft rounded cards (16pt radius, acrylic tint, whisper shadow) — not bare text
- Reserve the flourish gradient (
#FF6F61 → #FFB900) for the flourish mark, streaming edge, and focus emphasis - Use solid Fluent Blue (
#0078D4) for the functional primary — active send, links, selected tone/toggles - Keep the Creative / Balanced / Precise tone selector visible — it is a Copilot signature
- Stream answers token-by-token with a warm flourish shimmer at the leading edge
- Do an acrylic blur-in (opacity + blur ramp, 220ms) when a surface or new card appears
- Keep answer body at 16pt with 1.5 line-height inside cards
- Provide full light + dark parity; keep the flourish stops identical across themes
- Use Segoe UI (Inter fallback) at weights 400/600/700, Cascadia Code for code
Don't
- Don't render answers as bare unboxed text — Copilot uses soft acrylic cards
- Don't tint body text with the flourish gradient — text is always solid ink; the gradient is structural
- Don't use the flourish gradient as a button fill or a flat panel background
- Don't make surfaces flat/opaque where acrylic is expected — the frosted layering is the brand
- Don't add a bottom tab bar — the sidebar is the sole primary navigation
- Don't full-pill the primary action button — Fluent primaries use a softer 8pt rounded rect (the tone selector is the pill)
- Don't use thin font weights — the ramp is 400/600/700
- Don't skip the streaming shimmer / thinking indicator — generation must feel alive
- Don't diverge the flourish stops between light and dark — keep
#FF6F61 → #FFB900exact
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 Copilot design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Fluent Blue: #0078d4
- Blue Pressed: #005a9e
- Blue Tint: #deecf9
- Flourish Coral: #ff6f61
- Flourish Gold: #ffb900
- Canvas White: #ffffff
- Surface Acrylic: #f3f3f3
- Surface Raised: #ffffff
- Divider: #e0e0e0
- Text Primary: #242424
Type:
- families: Segoe UI, Segoe UI Variable, Inter, Fallback Stack
- scale: 11, 13, 14, 15, 16, 17, 18, 20, 22
- weights: 400, 600, 700
Shape:
- radius: 8, 12, 16, 18, 24
- elevation: Surface Raised (`#FFFFFF` + soft shadow + 1pt hairline): Menus, dialogs.
Spacing: 10, 12, 16
Rules:
- Build surfaces as Fluent acrylic — frosted, tinted, blurred sheets that float over the conversation
- Render answers in soft rounded cards (16pt radius, acrylic tint, whisper shadow) — not bare text
- Reserve the flourish gradient (`#FF6F61 → #FFB900`) for the flourish mark, streaming edge, and focus emphasis
- Use solid Fluent Blue (`#0078D4`) for the functional primary — active send, links, selected tone/toggles
- Keep the Creative / Balanced / Precise tone selector visible — it is a Copilot signature
- Stream answers token-by-token with a warm flourish shimmer at the leading edge
Avoid:
- Don't render answers as bare unboxed text — Copilot uses soft acrylic cards
- Don't tint body text with the flourish gradient — text is always solid ink; the gradient is structural
- Don't use the flourish gradient as a button fill or a flat panel background
- Don't make surfaces flat/opaque where acrylic is expected — the frosted layering is the brand
- Don't add a bottom tab bar — the sidebar is the sole primary navigation
- Don't full-pill the primary action button — Fluent primaries use a softer 8pt rounded rect (the tone selector is the pill)
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Copilot Flourish Gradient: Linear sweep
#FF6F61(0%) →#FFB900(100%). Used for the flourish mark, streaming shimmer, and the focused prompt accent — never a flat fill behind body text. - Fluent Blue (
#0078D4): Interactive primary — active send button, links, selected tone, toggles. - Blue Pressed (
#005A9E): Pressed state for the blue send / primary actions. - Blue Tint (
#DEECF9): Selected-chip wash, focused-field subtle ring (light). - Flourish Coral (
#FF6F61): Gradient start; used solo for warm secondary accents (rare). - Flourish Gold (
#FFB900): Gradient end; used solo for warm highlights / "new" dots.
Canvas & Surfaces (Light)
- Canvas White (
#FFFFFF): Primary canvas behind the conversation. - Surface Acrylic (
#F3F3F3): Answer cards, prompt-bar fill, suggestion chips, sidebar (rendered with a frosted blur over content). - Surface Raised (
#FFFFFF+ soft shadow + 1pt hairline): Menus, dialogs. - Divider (
#E0E0E0): Hairlines, card borders, sidebar separators. - Text Primary (
#242424): Answer text, titles, primary UI text (warm near-black). - Text Secondary (
#616161): Timestamps, helper text, placeholders, captions. - Text Tertiary (
#919191): Disabled labels, very low-emphasis meta.
Canvas & Surfaces (Dark)
- Dark Canvas (
#202020): Primary dark canvas behind the conversation. - Dark Surface Acrylic (
#2D2D2D): Answer cards, prompt bar, chips, sidebar (frosted dark blur). - Dark Divider (
#3A3A3A): Hairlines, card borders, separators. - Dark Text Primary (
#FFFFFF): Answer text and titles on dark. - Dark Text Secondary (
#A6A6A6): Helper text and captions on dark. - Dark Blue (
#4DA3E0): Fluent Blue lightened for AA contrast on the dark canvas.
Semantic
- Success Green (
#107C10light /#6CCB5Fdark): "Copied", confirmation toast. - Warning Amber (
#F7630C): Rate-limit / content notice banner. - Error Red (
#C50F1Flight /#FF99A4dark): Generation failed, network error.
Type scaleRead the full spec
Font Family
- Primary:
Segoe UI/Segoe UI Variable(Microsoft product typeface) - Substitute / Fallback:
Inter— closest free humanist-grotesque match - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Code blocks:
Cascadia Code/'SF Mono', Menlo, monospacefor fenced code in answers
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Greeting (Hero) | Segoe UI | 28pt | 700 | 1.2 | -0.2pt | "Hi, I'm Copilot" empty-state greeting |
| Screen Title | Segoe UI | 22pt | 700 | 1.25 | -0.1pt | Sidebar header, settings title |
| Section Header | Segoe UI | 18pt | 600 | 1.3 | 0pt | "Recent", "Copilot Pages" in the sidebar |
| Answer Heading | Segoe UI | 20pt | 600 | 1.3 | 0pt | Markdown H2 inside a response card |
| Answer Subheading | Segoe UI | 17pt | 600 | 1.35 | 0pt | Markdown H3 inside a response card |
| Answer Body | Segoe UI | 16pt | 400 | 1.5 | 0pt | The model's prose — the core content |
| User Turn | Segoe UI | 16pt | 400 | 1.45 | 0pt | Text inside the user card/bubble |
| List Item (answer) | Segoe UI | 16pt | 400 | 1.5 | 0pt | Bulleted/numbered list lines in a response |
| Prompt Input | Segoe UI | 16pt | 400 | 1.4 | 0pt | Text typed into the prompt bar |
| Suggestion Chip | Segoe UI | 14pt | 600 | 1.3 | 0pt | Prompt-suggestion pill label |
| Tone Label | Segoe UI | 13pt | 600 | 1.0 | 0.1pt | "Creative / Balanced / Precise" segment |
| Metadata | Segoe UI | 13pt | 400 | 1.3 | 0pt | Timestamps, model label, sidebar subtitle |
| Code | Cascadia Code | 14pt | 400 | 1.5 | 0pt | Fenced code blocks inside answers |
| Label (UPPER) | Segoe UI | 11pt | 600 | 1.2 | 0.6pt | "TODAY" / "LAST 7 DAYS" sidebar labels |
| Button | Segoe UI | 15pt | 600 | 1.0 | 0pt | Text buttons, dialog actions |
Principles
- Weights at 400 / 600 / 700: Regular for all reading text, semibold for titles/labels/chips, bold for the greeting and strong in-answer emphasis — no thin
- Reading-optimized body: answer text is 16pt at 1.5 line-height so long responses read comfortably inside cards
- The flourish gradient never tints body text: text is always solid ink; the gradient lives in the flourish mark, the streaming edge, and the focus accent
- Negative tracking only on the greeting/titles: -0.2pt at 28pt; body sits at 0pt
- Dynamic Type respected: greeting, answers, body scale; the prompt-bar height and sidebar labels are layout-pinned
Components and layoutRead the full spec
Buttons
Send Button (prompt bar)
- Shape: Circle, 36pt diameter, trailing edge of the prompt bar
- Empty state: glyph
arrow.up18pt,#616161, transparent background - Active state (text present): background solid
#0078D4, glyph#FFFFFF - Pressed: scale 0.92, background
#005A9E, soft haptic - Generating: morphs to a
stop.fillsquare in#0078D4to interrupt the stream
Voice Button
- Shape: Circle, 44pt; sits beside the prompt bar or as a prominent empty-state CTA
- Idle: acrylic surface fill, mic glyph 20pt
#616161 - Listening: a flourish-gradient pulse ring radiates; mic glyph turns
#0078D4 - Pressed: scale 0.94, haptic
Suggestion Chip
- Background: acrylic
#F3F3F3(light) /#2D2D2D(dark), 1pt#E0E0E0/#3A3A3Aborder - Text:
#242424/#FFFFFF, 14pt w600 - Padding: 10pt vertical, 16pt horizontal, corner radius 18pt
- Pressed: surface darkens ~6%, scale 0.98
- Optional leading 12pt flourish glyph on AI-action chips
Icon Action (Mic, Add, Copy, Regenerate, Like/Dislike, Share, More)
- Size: 22pt glyph, 44pt hit area
- Default:
#616161(light) /#A6A6A6(dark) - Active/primary:
#0078D4/#4DA3E0 - Like/Dislike feedback: thumbs glyphs; selected thumb fills
#0078D4
Text Button (dialog "Cancel" / "Done")
- Font: Segoe UI, 15pt, weight 600
- Color:
#0078D4/#4DA3E0 - No background, no underline, 44pt hit area
Pill Button (primary dialog action)
- Background:
#0078D4 - Text:
#FFFFFF, 15pt w600 - Padding: 10pt vertical, 24pt horizontal, corner radius 8pt (Fluent uses softer-rect, not full-pill, for primaries)
- Pressed:
#005A9E, scale 0.98
Cards & Containers
Answer Card (The Signature)
- Background: acrylic
#F3F3F3(light) /#2D2D2D(dark) — frosted blur over the canvas - Corner radius: 16pt, soft shadow
rgba(36,36,36,0.06) 0 2px 10px, optional 1pt hairline - Padding: 16pt; leading a 22pt flourish glyph marking the start of the response
- Full conversation-column width; 16pt body at 1.5 line-height
- Footer action row after the stream: Copy, Like, Dislike, Regenerate, Share, ⋯
- Streaming: a warm flourish shimmer sweeps the leading edge; the card does an acrylic blur-fade as it first appears
User Turn
- Background:
#0078D4at full (or a soft#DEECF9light /#2D2D2Ddark "neutral" variant per setting) - Text: white on blue /
#242424on neutral, 16pt w400 - Corner radius: 16pt (4pt on the bottom-trailing corner), trailing-aligned, max ~80% width
- Padding: 12pt vertical, 16pt horizontal
Tone Selector
- A 3-segment pill control: "Creative" / "Balanced" / "Precise"
- Track: acrylic surface; selected segment fills
#0078D4with white label, others#616161 - Sits above/below the prompt bar; changing it visibly re-themes the next answer's accent intensity
- Corner radius 500pt, 13pt w600 labels, 36pt tall
Code Block (inside an answer card)
- Background: a deeper acrylic
#EDEDED(light) /#1B1B1B(dark), corner radius 12pt - Header bar: language label (13pt
#616161) + a "Copy" text button - Body: Cascadia Code 14pt, 1.5 line-height, 16pt padding, horizontal scroll
- 1pt
#E0E0E0/#3A3A3Aborder
Sidebar Conversation Row
- Height: 48pt
- Leading: an 18pt chat glyph; title (16pt w400, 1-line truncating)
- Pressed: acrylic
#F3F3F3/#2D2D2Dhighlight, corner radius 8pt - Active conversation: persistent acrylic highlight + a 3pt leading
#0078D4accent bar
Sheet / Menu
- Background: acrylic over a scrim, corner radius 16pt top corners, 16pt grabber
- Rows: 52pt, 1pt
#E0E0E0/#3A3A3Adividers, leading 22pt glyph + label
Navigation
Top Bar
- Height: 44pt + safe area
- Leading: sidebar toggle (24pt
#616161) - Center: "Copilot" wordmark or model/persona selector with a small chevron, 17pt w600
- Trailing: new-chat icon (22pt) + account avatar (28pt circular)
- Background: acrylic, subtle hairline on scroll
Sidebar (Drawer)
- Width: ~80% of screen, slides from the leading edge over a
rgba(0,0,0,0.4)scrim - Top: a "New chat" button (acrylic or
#0078D4) + search field - Body: recents grouped under uppercase labels ("TODAY", "LAST 7 DAYS"), then "Copilot Pages"
- Bottom: settings + account row
- No bottom tab bar — the sidebar is the sole primary navigation
Input Fields
Prompt Bar (The Composer, acrylic)
- Background: acrylic
#F3F3F3(light) /#2D2D2D(dark) — frosted blur over the conversation - Corner radius: 24pt, min height 52pt, full-width with 16pt side margins
- Leading: "+" add-content icon (22pt
#616161) opening image/file/camera - Center: text field, placeholder "Message Copilot", 16pt w400
#616161 - Trailing: voice mic (22pt) and the send button (see Buttons)
- Focused: a 1.5pt accent stroke (Fluent Blue, or a flourish-gradient variant on emphasis)
- Multiline: grows up to ~5 lines, then scrolls internally
Search Field (sidebar)
- Background: acrylic with a 1pt
#E0E0E0/#3A3A3Aborder - Height: 44pt, corner radius 8pt
- Leading
magnifyingglass18pt#616161, placeholder "Search chats"
Distinctive Components
Flourish Mark
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Cards tight to 16pt margins; chips scroll sooner |
| iPhone 13/14/15 | 390pt | Standard single-column card conversation |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the acrylic top bar |
| iPhone 15/16 Pro Max | 430pt | Wider reading column, larger empty-state flourish |
| iPad | 768pt+ | Persistent sidebar (not overlay) + a centered ~720pt card column |
Dynamic Type
- Greeting, answer body/headings, user turn, chips: full scale
- Prompt-bar height: grows with text size but base height is layout-pinned
- Sidebar day labels and tone labels: fixed sizes
- Code blocks: scale but preserve monospace alignment
Orientation
- Conversation: portrait-primary; landscape supported (column re-centers, max readable width)
- iPad: all orientations, persistent sidebar + centered card column
- Image/attachment viewer: rotates to fit media
Touch Targets
- Send button: 36pt visual, 44pt hit area
- Voice button: 44pt
- Mic / add / card actions: 22pt glyph, 44pt hit area
- Suggestion chips: full chip tappable, ≥ 40pt tall
- Tone segments: each ≥ 44pt wide, 36pt tall
- Sidebar rows: 48pt height, full-row tappable
Safe Area Handling
- Top: acrylic top bar respects safe area + Dynamic Island
- Bottom: acrylic prompt bar floats above the home indicator with 12pt clearance; KB-aware
- Sidebar: full-height overlay respecting safe area, scrim covers the rest
- Conversation: respects safe area; the prompt bar never overlaps the last card (auto-scroll)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-copilot {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #242424;
--heading-color: #242424;
--link-color: #0078d4;
--link-hover-color: #005ba1;
--border-color: #d8d8d8;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(36,36,36,0.06);
--card-hover-shadow: 0 6px 18px rgba(36,36,36,0.12);
--header-bg: #242424;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #717171;
--button-bg: #0078d4;
--button-text-color: #000000;
--button-hover-bg: #005ba1;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f2f2f2;
--button-secondary-text-color: #242424;
--button-secondary-hover-bg: #e5e5e5;
--button-secondary-border: 1px solid #d8d8d8;
--prompt-bg: #f4f4f4;
--prompt-text-color: #242424;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 82.3%
- clubhouse 81.2%
- happn 80.6%
- coffee meets bagel 79.9%
- grok 79.5%
Where this came from
- Source document
ios/design-md/misc/copilot/DESIGN.md· 23.9 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.