AI Assistants / iOS / Android / Web

MiniMax

MiniMax keeps its interface monochrome and lets a large dark hero carry the page, with translucent white controls that sit on it like glass.

Download
  • #171717
  • #FFFFFF
  • #F5F5F5
  • #666666
  • #181E25
  • #000000

Color

Every color token in the file, grouped by role.

Brand

  • primary#171717
  • on primary#FFFFFF
  • ink secondary#666666

Surfaces

  • canvas#FFFFFF
  • surface#F5F5F5
  • surface news#F4F4F4

Text

  • ink#171717
  • ink news#181E25
  • ink faint#86909C

Lines

  • border#EAEAEA

More

  • black#000000

Typography

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

  • OutfitOpen font, shown as published.
  • DM SansOpen font, shown as published.
  • display108px / 500 / 108px

    MiniMax

  • headline36px / 500 / 54px

    MiniMax

  • title24px / 600 / 28.8px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 88px
  • radius 1010px
  • radius 1212px
  • radius 1616px
  • radius 2020px
  • radius 2424px
  • full100px

Spacing

The spacing scale, drawn to size.

  • space 66px
  • space 1010px
  • space 1616px
  • space 2424px

Components

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

  • button primary
    button-primary
  • button light
    button-light
  • model artwork
    model-artwork
  • news card
    news-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 91 lines
version: alpha
name: MiniMax-design-analysis
description: "An AI agent and model maker: white pages with near-black #171717 sections, a large dark hero, translucent white glass controls, Outfit headlines over DM Sans and full pill navigation."
status: Draft
appVersion: "measured in a browser from minimax.io, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#171717"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  surface: "#f5f5f5"
  surface-news: "#f4f4f4"
  ink: "#171717"
  ink-news: "#181e25"
  ink-secondary: "#666666"
  ink-faint: "#86909c"
  border: "#eaeaea"
  black: "#000000"

typography:
  display:
    fontFamily: "Outfit, Helvetica Neue, Arial, sans-serif"
    fontSize: 108px
    fontWeight: 500
    lineHeight: 108px
    letterSpacing: -4.32px
  headline:
    fontFamily: "Outfit, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 54px
  title:
    fontFamily: "Outfit, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 28.8px
    letterSpacing: -0.4px
  body:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px

rounded:
  radius-8: 8px
  radius-10: 10px
  radius-12: 12px
  radius-16: 16px
  radius-20: 20px
  radius-24: 24px
  full: 100px

spacing:
  space-6: 6px
  space-10: 10px
  space-16: 16px
  space-24: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 36px
    padding: 0 12px
  button-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 36px
    padding: 0 12px
  model-artwork:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-16}"
  news-card:
    backgroundColor: "{colors.surface-news}"
    textColor: "{colors.ink-news}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-12}"

Overview

MiniMax makes AI models and an AI agent, with apps on iOS and Android. Its public site is monochrome and led by a large dark hero. Controls on the hero are translucent white rather than solid. [Measured]

What defines the look:

  1. Glass controls. White at 9, 15 and 24 percent with a 32 percent border sit over the hero. [Measured]
  2. A big tight title. Outfit at 108 with tracking of -4.32 on desktop and 60 on mobile. [Measured]
  3. Pills for navigation. Nav items and login use a 100 radius. [Measured]
  4. Monochrome chrome. #171717, white and #f5f5f5 carry the interface. [Measured]
  5. Two open faces. Outfit for headlines and DM Sans for reading. [Measured]

Source for this file: the minimax.io home and news pages, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass. The agent itself sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Near-black#171717sections, button, headings [Measured]
Pure black#000000hero areas [Measured]
Surfaces#ffffff, #f5f5f5, #f4f4f4page, cards, news [Measured]
Text#18181b, #181e25, #666666, #86909cbody, news, secondary, faint [Measured]
On darkwhite at 95, 80 and 70 percenthero text [Measured]
Glass fillwhite at 9, 15, 24 and 30 percenthero controls [Measured]
Border#eaeaea, white at 32 percentnews cards, glass [Measured]

Typography

RoleDesktopMobileFace and weight
Hero108 on 10860 on 60Outfit 500, tracking -4.32 and -2.4 [Measured]
Page title36 on 54not measuredOutfit 500 [Measured]
Section24 on 28.8sameOutfit 600 [Measured]
Nav16 on 20not shownOutfit 400 [Measured]
Body16 on 24sameDM Sans 400 [Measured]
Button14 on 20sameDM Sans 500 [Measured]

Libre Baskerville also loads. Its role was not separated. [Measured]

Shape and spacing

Pills at 100 for navigation, 60 for the task prompt, cards 10 to 24. Glass buttons use 12. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark pass changed nothing. Dark areas are sections of the light theme. [Measured]

Platform: iOS

How the MiniMax app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. 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.

Not measured. [Inferred]

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 monochrome chrome and pill controls with the web. [Inferred]

Platform: Android

How the MiniMax app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. 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.

Not measured. [Inferred]

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 monochrome chrome and pill controls with the web. [Inferred]

Platform: Web

The home and news pages, 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 top bar of Outfit pills 32 high that turn white on the dark hero and #171717 on light pages. At the mobile width only Log in stays. [Measured]

Main action

Expected on Web: Page-level button.

A 58 high glass prompt at 60 radius, 500 wide, with a 1px white 32 percent border. Log in is a 36 high pill, white on the hero and #171717 on light pages. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured beyond the cookie prompt, which is excluded. [Inferred]

Controls

Expected on Web: Native or custom.

Glass buttons are 44 to 48 high at 12 radius in white at 15 percent. Load More is an outlined 48 high button at 24 radius. [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.

Nav items are 32 high and buttons 36 to 58. [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 agent needs an account. 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 site switches its navigation color with the surface below it. [Measured]

Cross-platform consistency

Consistent across platforms: monochrome chrome and pill controls. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use translucent white controls over the dark hero.
  • Keep the interface monochrome.
  • Set the hero large and tracked tight.
  • Use pills for navigation.

Don't

  • Don't add a brand hue to the chrome.
  • Don't use glass controls on light pages.
  • Don't use a fully opaque white for hero text. It sits at 95 percent.

Known Gaps

  • The agent product was not measured, so this file describes the public site.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Store listings differ by platform. The App Store listing found is MiniMax Code, and the Google Play listing is MiniMax - Your AI Agent. Which product a mobile screen shows was not checked.
  • No tokens are published. Spacing is limited to measured padding.
  • Icons, motion, dialogs and the role of Libre Baskerville were not measured.
  • Fonts here are open, so no alternative is needed.
  • Account deletion and store sign-in rules were not verified.