AI Assistants / iOS / Android / Web

Microsoft Copilot

Copilot steps away from the classic blue of Microsoft software toward soft surfaces, serif headlines and generously rounded black controls.

Download
  • #000000
  • #242424
  • #F6F8F0
  • #616161
  • #121D2F
  • #1F1F1F

Color

Every color token in the file, grouped by role.

Brand

  • primary#000000
  • on primary#FFFFFF
  • ink secondary#616161

Surfaces

  • canvas#FFFFFF
  • surface#F6F8F0
  • dark canvas#1F1F1F
  • dark surface#242424

Text

  • ink#242424
  • heading#121D2F
  • dark ink#DEDEDE

Lines

  • border#E3E3E3
  • dark border#858585

Typography

Each style is set with the file's own family, size, weight and spacing.

  • SegoeSerifDisplaySegoeSerifDisplay is private and not available in open fonts. Shown in Newsreader, the closest open match.
  • SegoeSansSegoeSans is private and not available in open fonts. Shown in Nunito Sans, the closest open match.
  • display72px / 400 / 75.6px

    Microsoft Copilot

  • headline40px / 400 / 48px

    Microsoft Copilot

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button15px / 600 / 22px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 44px
  • radius 88px
  • radius 1616px
  • radius 2424px
  • pill200px

Spacing

The spacing scale, drawn to size.

  • space 88px
  • space 1212px
  • space 2424px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • tab pill
    tab-pill
  • feature card
    feature-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 82 lines
version: alpha
name: Microsoft-Copilot-design-analysis
description: "An AI assistant from Microsoft: white and pale sage surfaces, near-black #242424 text, black buttons at 16 radius, pill tabs, large Segoe Serif headlines over Segoe Sans, on a family that publishes Fluent 2 Copilot kits for web, iOS and Android."
status: Draft
appVersion: "measured in a browser from copilot.microsoft.com and microsoft.com, and read from the public Fluent 2 documentation, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#000000"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  surface: "#f6f8f0"
  ink: "#242424"
  heading: "#121d2f"
  ink-secondary: "#616161"
  border: "#e3e3e3"
  dark-canvas: "#1f1f1f"
  dark-surface: "#242424"
  dark-ink: "#dedede"
  dark-border: "#858585"

typography:
  # Font note: "SegoeSans" is a private font and is not available in open fonts. Closest open alternative: "Nunito Sans".
  # Font note: "SegoeSerifDisplay" is a private font and is not available in open fonts. Closest open alternative: "Newsreader".
  display:
    fontFamily: "SegoeSerifDisplay, Georgia, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 75.6px
    letterSpacing: -0.5px
  headline:
    fontFamily: "SegoeSans, 'Segoe UI', sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -1.2px
  body:
    fontFamily: "SegoeSans, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "SegoeSans, 'Segoe UI', sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: -0.3px

rounded:
  radius-4: 4px
  radius-8: 8px
  radius-16: 16px
  radius-24: 24px
  pill: 200px

spacing:
  space-8: 8px
  space-12: 12px
  space-24: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-16}"
    height: 50px
    padding: 12px 24px
  tab-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 42px
    padding: 8px 24px
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-24}"

Overview

Microsoft Copilot is an AI assistant on the web and in iOS and Android apps. Logged out, the public page is a sign-in page with feature sections, so this file covers those and the plans page. Microsoft publishes the Fluent 2 design system, with Copilot UI kits for AI components across web, iOS and Android, but its values are in design files and not in the public pages read here. [Measured]

What defines the look:

  1. A serif sign-in headline. Segoe Serif Display at 72 and 40 on mobile. [Measured]
  2. Black, not Microsoft blue. The main button and active tab are #000000. [Measured]
  3. Rounded but not pill for the main action. 16 radius at 50 high. [Measured]
  4. Pill tabs. Work, Life and School are 42 high at 200 radius. [Measured]
  5. Soft surfaces. White and pale #f6f8f0, with 24 radius cards. [Measured]

Source for this file: the copilot.microsoft.com public page and the Microsoft Copilot plans page, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass, plus the public Fluent 2 pages on design kits and on iOS and Android libraries. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Main button and active tab#000000, text #ffffffsign in, tabs [Measured]
Text#242424, #616161, #605e5cbody steps [Measured]
Section headings#121d2ffeature headings [Measured]
Surfaces#ffffff, #f6f8f0page, band [Measured]
Bordersblack at 13 percent, #e3e3e3cards [Measured]
Plans page#fffdfb, #f4fafd, ink #0e1726, #17253d, link #0067b8a separate Microsoft site style [Measured]
Darkpage #1f1f1f, band #242424, text white at 87 and 63 percent, #dedede, borders #858585button inverts to white on #242424 text [Measured]

Typography

RoleDesktopMobileFace and weight
Sign-in title72 on 75.640 on 44Segoe Serif Display 400 [Measured]
Section40 on 4828 on 36Segoe Sans 400 [Measured]
Plans title62 on 72not measuredSegoe UI Variable Display 500 [Measured]
Body16sameSegoe 400 [Measured]
Button15 on 22sameSegoe Sans 600 [Measured]

Shape and spacing

Buttons 16, tabs 200, cards 24, small parts 4 and 8. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark, following the system setting. The button inverts to white in dark. [Measured]

Platform: iOS

Items marked from the published design system come from the public Fluent 2 pages. These pages name components and give no sizes. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Fluent on iOS is a subset of components meant to sit with native Apple components, including button, segmented control, text field, tooltip and heads-up display. All are marked Preview. Fluent's Copilot kits add AI components across iOS. Whether the app uses each one is not known. [Observed from the published design system]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share soft surfaces, Segoe type and rounded black or inverted controls with the web. [Inferred]

Platform: Android

Items marked from the published design system come from the public Fluent 2 pages. These pages name components and give no sizes. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Fluent on Android is a subset meant to fit with native Material components, and Fluent's Copilot kits add AI components across Android. Whether the app uses each one is not known. [Observed from the published design system]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share soft surfaces, Segoe type and rounded black or inverted controls with the web. [Inferred]

Platform: Web

The public sign-in page and the plans page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A shared Microsoft top bar 54 high in Segoe UI 13px, with Copilot at 18 semibold. [Measured]

Main action

Expected on Web: Page-level button.

Sign in is a #000000 fill with white 15px semibold text, 50 high at 16 radius. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Pill tabs 42 high at 200 radius, black when active and transparent otherwise. Feature cards are 24 radius with a black 13 percent border. [Measured]

Text sizing

Expected on Web: Browser zoom.

Fixed pixels that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 42 to 50 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The public page leads with sign-in. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The Copilot page does not use the standard Microsoft link blue for its main action. The plans page does keep it for links. [Measured]

Cross-platform consistency

Consistent across platforms: soft surfaces, Segoe type and rounded black or inverted controls. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use black for main actions and invert in dark.
  • Set the top headline in the serif.
  • Use pills for tabs and 16 radius for buttons.
  • Keep surfaces pale and soft.

Don't

  • Don't use the classic Microsoft blue for the main button.
  • Don't square off cards. They sit at 24.
  • Don't mix pill and 16 radius shapes on one control type.

Known Gaps

  • The signed-in chat was not measured. The public page is a sign-in page.
  • Fluent 2's public pages read here state no numeric values for iOS or Android, and the Fluent iOS and Android components are marked as in progress, so only the controls topic cites the system. Everything else on mobile is inferred.
  • Fluent token values were not used, because the public page's black buttons differ from Fluent's brand blue. Which Fluent values the chat uses was not seen.
  • Icons, motion and dialogs were not measured.
  • SegoeSans is private. Nunito Sans is within 1 percent at 40px. Outfit matched width but its forms are more geometric. SegoeSerifDisplay could not be sampled by the comparison tool, so Newsreader is a judgement call from the screenshots and was not compared.
  • Account deletion and store sign-in rules were not verified.