--- 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 | Role | Value | Where | |------|-------|-------| | Main button and active tab | `#000000`, text `#ffffff` | sign in, tabs [Measured] | | Text | `#242424`, `#616161`, `#605e5c` | body steps [Measured] | | Section headings | `#121d2f` | feature headings [Measured] | | Surfaces | `#ffffff`, `#f6f8f0` | page, band [Measured] | | Borders | black at 13 percent, `#e3e3e3` | cards [Measured] | | Plans page | `#fffdfb`, `#f4fafd`, ink `#0e1726`, `#17253d`, link `#0067b8` | a separate Microsoft site style [Measured] | | Dark | page `#1f1f1f`, band `#242424`, text white at 87 and 63 percent, `#dedede`, borders `#858585` | button inverts to white on `#242424` text [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Sign-in title | 72 on 75.6 | 40 on 44 | Segoe Serif Display 400 [Measured] | | Section | 40 on 48 | 28 on 36 | Segoe Sans 400 [Measured] | | Plans title | 62 on 72 | not measured | Segoe UI Variable Display 500 [Measured] | | Body | 16 | same | Segoe 400 [Measured] | | Button | 15 on 22 | same | Segoe 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.