Minimax

version alpha

name MiniMax

description MiniMax presents itself as a premium AI infrastructure brand through a striking duality — bold black-pill CTAs and stark white canvas for marketing, paired with vibrant gradient product cards (orange-red, magenta-pink, purple, blue) that turn each model release into a distinctive visual identity. The system uses DM Sans across all surfaces, employs an oversized 80px hero display, anchors major actions in deep near-black pills, and layers content density via a 3-column documentation grid with sidebar nav, prose body, and TOC. Coverage spans the marketing homepage, model showcase pages, developer documentation, and platform pricing surfaces.

colors primary: "#0a0a0a" on-primary: "#ffffff" primary-soft: "#181e25" brand-coral: "#ff5530" brand-magenta: "#ea5ec1" brand-blue: "#1456f0" brand-blue-mid: "#3b82f6" brand-blue-deep: "#1d4ed8" brand-blue-700: "#17437d" brand-cyan: "#3daeff" brand-blue-200: "#bfdbfe" brand-purple: "#a855f7" canvas: "#ffffff" surface: "#f7f8fa" surface-soft: "#f2f3f5" hairline: "#e5e7eb" hairline-soft: "#eaecf0" ink: "#0a0a0a" ink-strong: "#000000" charcoal: "#222222" slate: "#45515e" steel: "#5f5f5f" stone: "#8e8e93" muted: "#a8aab2" success-bg: "#e8ffea" success-text: "#1ba673" on-dark: "#ffffff" footer-bg: "#0a0a0a"

typography hero-display: fontFamily: DM Sans fontSize: 80px fontWeight: 600 lineHeight: 1.10 letterSpacing: -2px display-lg: fontFamily: DM Sans fontSize: 56px fontWeight: 600 lineHeight: 1.10 letterSpacing: -1.5px heading-lg: fontFamily: DM Sans fontSize: 40px fontWeight: 600 lineHeight: 1.20 letterSpacing: -1px heading-md: fontFamily: DM Sans fontSize: 32px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.5px heading-sm: fontFamily: DM Sans fontSize: 24px fontWeight: 600 lineHeight: 1.30 card-title: fontFamily: DM Sans fontSize: 20px fontWeight: 600 lineHeight: 1.40 subtitle: fontFamily: DM Sans fontSize: 18px fontWeight: 500 lineHeight: 1.50 body-md: fontFamily: DM Sans fontSize: 16px fontWeight: 400 lineHeight: 1.50 body-md-bold: fontFamily: DM Sans fontSize: 16px fontWeight: 700 lineHeight: 1.50 body-sm: fontFamily: DM Sans fontSize: 14px fontWeight: 400 lineHeight: 1.50 body-sm-medium: fontFamily: DM Sans fontSize: 14px fontWeight: 500 lineHeight: 1.50 caption: fontFamily: DM Sans fontSize: 13px fontWeight: 400 lineHeight: 1.70 caption-bold: fontFamily: DM Sans fontSize: 13px fontWeight: 600 lineHeight: 1.50 micro: fontFamily: DM Sans fontSize: 12px fontWeight: 400 lineHeight: 1.50 button-md: fontFamily: DM Sans fontSize: 14px fontWeight: 600 lineHeight: 1.40

rounded xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 20px xxxl: 24px hero: 32px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 20px xl: 24px xxl: 32px xxxl: 40px section-sm: 48px section: 64px section-lg: 80px hero: 96px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "11px 24px" button-primary-pressed: backgroundColor: "{colors.charcoal}" textColor: "{colors.on-primary}" button-primary-disabled: backgroundColor: "{colors.hairline}" textColor: "{colors.muted}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "11px 24px" border: "1px solid {colors.ink}" button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "11px 24px" border: "1px solid {colors.hairline}" button-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" padding: "8px 0" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px border: "1px solid {colors.hairline}" product-card-coral: backgroundColor: "{colors.brand-coral}" textColor: "{colors.on-dark}" rounded: "{rounded.hero}" padding: "{spacing.xxl}" product-card-magenta: backgroundColor: "{colors.brand-magenta}" textColor: "{colors.on-dark}" rounded: "{rounded.hero}" padding: "{spacing.xxl}" product-card-blue: backgroundColor: "{colors.brand-blue}" textColor: "{colors.on-dark}" rounded: "{rounded.hero}" padding: "{spacing.xxl}" product-card-purple: backgroundColor: "{colors.brand-purple}" textColor: "{colors.on-dark}" rounded: "{rounded.hero}" padding: "{spacing.xxl}" product-card-photo: backgroundColor: "{colors.primary}" textColor: "{colors.on-dark}" rounded: "{rounded.hero}" padding: "{spacing.xxl}" card-base: backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" card-feature: backgroundColor: "{colors.surface}" rounded: "{rounded.xl}" padding: "{spacing.xxl}" card-recommendation: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.lg}" border: "1px solid {colors.hairline}" promo-cta-card: backgroundColor: "{colors.brand-coral}" textColor: "{colors.on-dark}" rounded: "{rounded.hero}" padding: "{spacing.section}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" border: "1px solid {colors.hairline}" height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" border: "2px solid {colors.brand-blue-deep}" text-input-error: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" border: "1px solid #d45656" search-pill: backgroundColor: "{colors.surface}" textColor: "{colors.steel}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "{spacing.xs} {spacing.md}" height: 36px border: "1px solid {colors.hairline}" segmented-tab: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.button-md}" rounded: "0" padding: "{spacing.md} {spacing.lg}" border: "0 0 2px transparent solid" segmented-tab-active: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" border: "0 0 2px {colors.ink} solid" pill-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" rounded: "{rounded.full}" padding: "{spacing.xs} {spacing.md}" border: "1px solid {colors.hairline}" pill-tab-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" border: "1px solid {colors.primary}" badge-success: backgroundColor: "{colors.success-bg}" textColor: "{colors.success-text}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-new: backgroundColor: "{colors.brand-coral}" textColor: "{colors.on-dark}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-beta: backgroundColor: "{colors.brand-blue-200}" textColor: "{colors.brand-blue-deep}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-code: backgroundColor: "{colors.brand-blue-200}" textColor: "{colors.brand-blue-deep}" typography: "{typography.caption-bold}" rounded: "{rounded.sm}" padding: "2px 6px" promo-banner: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.lg}" data-table: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" border: "1px solid {colors.hairline}" data-table-header: backgroundColor: "{colors.surface}" textColor: "{colors.steel}" typography: "{typography.caption-bold}" padding: "{spacing.sm} {spacing.md}" data-table-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "{spacing.md}" border: "0 0 1px {colors.hairline-soft} solid" sidebar-nav-item: backgroundColor: "transparent" textColor: "{colors.charcoal}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.md}" sidebar-nav-item-active: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" doc-toc-item: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm}" padding: "{spacing.xs} 0" ai-product-tile: backgroundColor: "{colors.canvas}" rounded: "{rounded.xxxl}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" footer-region: backgroundColor: "{colors.footer-bg}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" padding: "{spacing.section} {spacing.xxl}" footer-link: backgroundColor: "transparent" textColor: "{colors.muted}" typography: "{typography.body-sm}" padding: "{spacing.xxs} 0" hero-band-marketing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.hero-display}" rounded: "{rounded.lg}" padding: "{spacing.hero}" product-matrix-grid: backgroundColor: "{colors.canvas}" rounded: "{rounded.hero}" padding: "{spacing.xxl}" ai-product-matrix: backgroundColor: "{colors.canvas}" rounded: "{rounded.xxxl}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" docs-prose-block: backgroundColor: "{colors.canvas}" textColor: "{colors.charcoal}" typography: "{typography.body-md}" padding: "{spacing.xxl}" models-comparison-table: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" border: "1px solid {colors.hairline}" testimonial-stat-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-lg}" padding: "{spacing.xl}"

Overview

MiniMax stages itself as a Chinese AI infrastructure brand with a sophisticated dual identity. Marketing surfaces and platform pages anchor in stark white canvas with deep-black typographic emphasis — the brand voice is confident, technical, almost editorial. But each model release gets its own vibrant gradient identity card: M2.7 in volcanic coral-red, Music 2.6 in magenta-pink, Hailuo in deep blue, Speech 2.8 in saturated orange-purple. Together these vibrant tiles read like album covers laid out on the homepage — each one declaring its own product personality.

DM Sans anchors every surface from oversized 80px hero displays down to 12px micro labels. The geometric, slightly humanist character of the face suits both the dense documentation surfaces (where 14px body type carries 1.5 line-height for long-form prose) and the high-impact marketing displays (where -2px letter-spacing tightens 80px headlines). Buttons are universally pill-shaped (rounded-full) with a sharp two-tier system: black-pill primary (the dominant CTA) and outline-pill secondary. Cards split into two distinct families: vibrant gradient product showcases (32px corner softening) and quiet white documentation cards (16px corner softening).

Key Characteristics:

• Stark monochrome palette — black ({colors.primary}) and white ({colors.canvas}) — broken open by saturated brand-color gradient cards

• Distinct product-color encoding: each model line has its own vibrant brand color (coral M2.7, magenta Music 2.6, blue Hailuo, orange Speech 2.8)

• DM Sans across the entire system; Inter as fallback

• Pill-shaped buttons ({rounded.full}) and pill-shaped tabs everywhere; rectangular forms only inside data tables and dense docs

• Hero typography uses tight 1.10 line-height with -2px letter-spacing for impact

• Documentation surfaces use a 3-column layout: left sidebar nav, center prose body, right table-of-contents

• Black promo banners ({colors.primary}) above the nav for time-bound brand moments

Colors

Source pages: minimax.io/ (homepage), /models/text/m27 (product showcase), platform.minimax.io/docs/guides/models-intro (documentation), /subscribe/token-plan (pricing). Token coverage was identical across all four pages.

Brand & Accent

• Brand Coral ({colors.brand-coral}): Signature high-impact accent. Used on M2.7 product card, "Token Pla