yaclty/awesome-design-md
1
0
Fork 0
mirror of https://github.com/VoltAgent/awesome-design-md.git synced 2026-05-14 13:06:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

update design md v2

Browse Source
This commit is contained in:
necatiozmen 2026-05-02 09:33:09 +03:00
parent fc722f6224
commit 863444e92f
7 changed files with 5091 additions and 1517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

937
design-md/meta/DESIGN.md
View File

@ -1,366 +1,683 @@
# Design System Inspired by Meta (Store) ---
version: alpha
name: Meta
description: Meta's design system spans hardware commerce (Quest VR, Ray-Ban Meta AI glasses) and brand surfaces with a confident product-merchandising voice. The system pairs a stark white canvas with full-bleed photographic product cards, a confident Optimistic VF wordmark/headline face, dual-CTA hero patterns (black primary + outlined secondary), and a saturated cobalt blue (#0064E0) for in-product purchase actions. Pill-shaped 100px-radius buttons, generous 24-32px card rounding, and tight three-tier text hierarchy carry across homepage, product detail (PDP), buy-now configurator, and accessory subpages.
## 1. Visual Theme & Atmosphere colors:
primary: "#0064e0"
primary-deep: "#0457cb"
primary-soft: "#0091ff"
on-primary: "#ffffff"
ink-button: "#000000"
on-ink-button: "#ffffff"
fb-blue: "#1876f2"
meta-link: "#385898"
oculus-purple: "#a121ce"
success: "#31a24c"
success-bg: "#24e400"
attention: "#f2a918"
warning: "#f7b928"
warning-bg: "#ffe200"
critical: "#e41e3f"
critical-strong: "#f0284a"
canvas: "#ffffff"
surface-soft: "#f1f4f7"
ink-deep: "#0a1317"
ink: "#1c1e21"
charcoal: "#444950"
slate: "#4b4c4f"
steel: "#5d6c7b"
stone: "#8595a4"
hairline: "#ced0d4"
hairline-soft: "#dee3e9"
disabled-text: "#bcc0c4"
The Meta Store is a product-forward retail experience built to sell hardware — Quest VR headsets, Ray-Ban Meta smart glasses, and accessories. The design walks a tightrope between consumer electronics showroom and lifestyle editorial, deploying cinematic product photography against expansive white canvas to create a gallery-like sense of aspiration. Every design decision serves the merchandise: generous negative space frames hero product shots like museum pieces, while alternating light and dark surface sections create a visual rhythm that mimics the experience of walking through a physical retail space. typography:
hero-display:
fontFamily: Optimistic VF
fontSize: 64px
fontWeight: 500
lineHeight: 1.16
fontFeature: "ss01, ss02"
display-lg:
fontFamily: Optimistic VF
fontSize: 48px
fontWeight: 500
lineHeight: 1.17
fontFeature: "ss01, ss02"
heading-lg:
fontFamily: Optimistic VF
fontSize: 36px
fontWeight: 500
lineHeight: 1.28
fontFeature: "ss01, ss02"
heading-md:
fontFamily: Optimistic VF
fontSize: 28px
fontWeight: 300
lineHeight: 1.21
fontFeature: "ss01, ss02"
heading-sm:
fontFamily: Optimistic VF
fontSize: 24px
fontWeight: 500
lineHeight: 1.25
fontFeature: "ss01, ss02"
subtitle-lg:
fontFamily: Optimistic VF
fontSize: 18px
fontWeight: 700
lineHeight: 1.44
subtitle-md:
fontFamily: Optimistic VF
fontSize: 18px
fontWeight: 400
lineHeight: 1.44
body-md-bold:
fontFamily: Optimistic VF
fontSize: 16px
fontWeight: 700
lineHeight: 1.50
letterSpacing: -0.16px
body-md:
fontFamily: Optimistic VF
fontSize: 16px
fontWeight: 400
lineHeight: 1.50
letterSpacing: -0.16px
body-sm-bold:
fontFamily: Optimistic VF
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
letterSpacing: -0.14px
body-sm:
fontFamily: Optimistic VF
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: -0.14px
caption-bold:
fontFamily: Optimistic VF
fontSize: 12px
fontWeight: 700
lineHeight: 1.33
caption:
fontFamily: Optimistic VF
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
button-md:
fontFamily: Optimistic VF
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
letterSpacing: -0.14px
link-md:
fontFamily: Optimistic VF
fontSize: 16px
fontWeight: 700
lineHeight: 1.50
letterSpacing: -0.16px
The "Dolly" design system (Meta's internal name for the store layer) sits atop the broader FDS (Facebook Design System) foundation, inheriting its gray scale and semantic tokens while overlaying its own product-focused palette. The result is a system that feels distinctly Meta — the custom Optimistic typeface brings warmth and approachability to what could otherwise be cold tech retail — yet flexible enough to showcase wildly different product lines (from VR headsets to fashion eyewear) without feeling disjointed. The surface strategy is binary: pure white for browsing and information, rich dark for immersive product moments. rounded:
xs: 2px
sm: 4px
md: 6px
lg: 8px
xl: 16px
xxl: 24px
xxxl: 32px
feature: 40px
full: 100px
circle: 9999px
The store's visual hierarchy is ruthlessly simple. Photography does the heavy lifting, supported by short, punchy headlines in Optimistic Medium and body text that stays brief and scannable. Calls to action are pill-shaped, unmistakable, and always Meta Blue. There is no visual noise, no decoration for decoration's sake — every element either sells or navigates. spacing:
xxs: 4px
xs: 8px
sm: 10px
md: 12px
base: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section-sm: 48px
section: 64px
section-lg: 80px
hero: 120px
components:
button-primary:
backgroundColor: "{colors.ink-button}"
textColor: "{colors.on-ink-button}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "14px 30px"
button-primary-pressed:
backgroundColor: "{colors.charcoal}"
textColor: "{colors.on-ink-button}"
button-primary-disabled:
backgroundColor: "{colors.disabled-text}"
textColor: "{colors.canvas}"
button-buy-cta:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "14px 30px"
button-buy-cta-pressed:
backgroundColor: "{colors.primary-deep}"
textColor: "{colors.on-primary}"
button-secondary:
backgroundColor: "transparent"
textColor: "{colors.ink-deep}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "12px 28px"
border: "2px solid {colors.ink-deep}"
button-ghost:
backgroundColor: "transparent"
textColor: "{colors.ink-deep}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "10px 22px"
border: "2px solid rgba(10, 19, 23, 0.12)"
button-pill-tab:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm-bold}"
rounded: "{rounded.full}"
padding: "8px 16px"
border: "1px solid {colors.hairline}"
button-pill-tab-active:
backgroundColor: "{colors.ink-deep}"
textColor: "{colors.canvas}"
button-icon-circular:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
rounded: "{rounded.circle}"
size: 40px
card-product-feature:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xxxl}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
card-feature-photo:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xxxl}"
padding: "0"
border: "none"
card-promo-strip:
backgroundColor: "{colors.ink-deep}"
textColor: "{colors.canvas}"
rounded: "{rounded.xxxl}"
padding: "{spacing.section}"
card-icon-feature:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
card-checkout-summary:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline-soft}"
shadow: "rgba(20, 22, 26, 0.3) 0px 1px 4px 0px"
product-thumbnail:
backgroundColor: "{colors.surface-soft}"
rounded: "{rounded.xl}"
padding: "{spacing.base}"
aspect-ratio: "1 / 1"
text-input:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-md}"
rounded: "{rounded.lg}"
padding: "{spacing.md}"
border: "1px solid {colors.hairline}"
height: 44px
text-input-focused:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
border: "2px solid {colors.fb-blue}"
text-input-error:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
border: "1px solid {colors.critical-strong}"
search-pill:
backgroundColor: "{colors.surface-soft}"
textColor: "{colors.steel}"
typography: "{typography.body-sm}"
rounded: "{rounded.full}"
padding: "{spacing.md} {spacing.lg}"
height: 40px
radio-option:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.lg}"
border: "1px solid rgba(10, 19, 23, 0.12)"
radio-option-selected:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
border: "2px solid #0143b5"
color-swatch-circle:
rounded: "{rounded.circle}"
size: 32px
border: "2px solid {colors.canvas}"
badge-promo-yellow:
backgroundColor: "{colors.warning}"
textColor: "{colors.ink-deep}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-attention:
backgroundColor: "{colors.attention}"
textColor: "{colors.canvas}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-success:
backgroundColor: "{colors.success}"
textColor: "{colors.canvas}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-critical:
backgroundColor: "{colors.critical}"
textColor: "{colors.canvas}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
promo-banner:
backgroundColor: "{colors.ink-deep}"
textColor: "{colors.canvas}"
typography: "{typography.body-sm-bold}"
padding: "{spacing.md} {spacing.xl}"
faq-accordion-item:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline-soft}"
why-buy-tile:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xxl} {spacing.xl}"
border: "1px solid {colors.hairline-soft}"
warranty-card:
backgroundColor: "{colors.surface-soft}"
rounded: "{rounded.xxl}"
padding: "{spacing.xxl}"
footer-region:
backgroundColor: "{colors.canvas}"
textColor: "{colors.steel}"
typography: "{typography.body-sm}"
padding: "{spacing.section} {spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
hero-band-marketing:
backgroundColor: "{colors.canvas}"
textColor: "{colors.canvas}"
typography: "{typography.hero-display}"
rounded: "{rounded.xxxl}"
padding: "{spacing.section-lg}"
product-gallery-pdp:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xxxl}"
padding: "{spacing.base}"
color-sku-picker-row:
backgroundColor: "{colors.surface-soft}"
rounded: "{rounded.lg}"
padding: "{spacing.base}"
feature-icon-row:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline-soft}"
tech-specs-table:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
rounded: "{rounded.lg}"
padding: "{spacing.lg}"
border: "1px solid {colors.hairline-soft}"
testimonial-customer-card:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-md}"
rounded: "{rounded.xl}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
---
## Overview
Meta's commerce surfaces (homepage, Quest configurator, Ray-Ban product detail, prescription page) read as a confident hardware merchandiser. The brand voice is photography-first: large, full-bleed product imagery dominates above-the-fold real estate, with white space and tight typographic hierarchy carrying the rest. The system has a recognizable dual-CTA pattern — a black pill-shaped primary on marketing surfaces shifting to a saturated cobalt blue ({colors.primary}) inside the buy-now flows, paired with an outlined ghost button for secondary navigation.
Optimistic VF — Meta's variable display face — anchors the entire system, ranging from a 64px hero display down to a 12px caption. The face's `ss01` and `ss02` stylistic sets are switched on across every heading role, contributing to the brand's slightly humanist, friendly geometric character. Below 768px the system collapses cleanly: hero stacks, pill nav becomes a hamburger, three-up feature grids flatten to a single column, and product configurators drop their right-rail summary into a sticky bottom bar.
**Key Characteristics:** **Key Characteristics:**
- Photography-first retail design where products are the visual heroes, not UI - Stark white canvas ({colors.canvas}) carrying full-bleed product photography with `{rounded.xxxl}` (32px) corner softening on showcase tiles
- Binary surface strategy: pure white for information, deep dark for immersive product moments - Two-tier primary button system: marketing CTAs use {colors.ink-button} pills; commerce CTAs use {colors.primary} cobalt pills inside buy-now panels
- Pill-shaped CTAs in saturated blue create unmistakable action points - Optimistic VF as the universal display + body face with consistent `ss01, ss02` OpenType features
- Optimistic VF typeface with OpenType ss01/ss02 features brings geometric warmth - Pill-shaped buttons ({rounded.full}) and `{rounded.xxxl}`/`{rounded.feature}` cards as the dominant geometric signature
- Generous whitespace frames products like gallery exhibits - Saturated promotional banners (yellow {colors.warning}, dark {colors.ink-deep}) used sparingly above the nav for time-bound offers
- 8px spacing grid with disciplined vertical rhythm - Photographic feature cards with no card chrome (no border, no shadow) — the product imagery IS the surface treatment
- Alternating light/dark sections create a "walkthrough" retail cadence
## 2. Color Palette & Roles ## Colors
### Primary > Source pages: meta.com/ (homepage), /ai-glasses/ray-ban-meta-skyler-gen-2/ (PDP), /quest/quest-3s/buy-now/ (configurator), /ai-glasses/prescription/ (lens upsell). Token coverage was identical across all four pages — the design system is genuinely unified.
- **Meta Blue** (`#0064E0`): Primary CTA background, interactive links, action-driving elements throughout the store ### Brand & Accent
- **Meta Blue Hover** (`#0143B5`): Darkened blue for hover states on primary buttons - **Cobalt Primary** ({colors.primary}): The buy-now CTA color. Used on every "Add to cart", "Configure", "Pre-order" button inside the commerce flow and the right-rail purchase panel.
- **Meta Blue Pressed** (`#004BB9`): Deepest blue for active/pressed button states - **Deep Cobalt** ({colors.primary-deep}): Pressed-state and dark-surface variant of the cobalt primary; also the active link color.
- **Meta Blue Light** (`#47A5FA`): Lighter blue variant used on dark backgrounds for CTAs - **Soft Cobalt** ({colors.primary-soft}): Translucent background tint for informational callouts (`{colors.primary-soft}` at 15% alpha).
- **Facebook Blue** (`#1877F2`): Legacy accent inherited from FDS, used for deemphasized button text and badges - **Facebook Blue** ({colors.fb-blue}): Selected radio/checkbox state and inline form-control activation color.
- **Meta Link Blue** ({colors.meta-link}): Reserved for legacy navigation and footer link affordances.
- **Oculus Purple** ({colors.oculus-purple}): VR product accent — used inside Quest-branded surfaces for category emphasis.
### Secondary & Accent ### Surface
- **Canvas White** ({colors.canvas}): Page background and primary card surface.
- **Soft Cloud** ({colors.surface-soft}): Subtle product-thumbnail and warranty-card background; also the search-pill rest state.
- **Hairline Gray** ({colors.hairline}): 1px input border and form-control divider.
- **Hairline Soft** ({colors.hairline-soft}): Quieter divider used on cards, footer separators, and section breaks.
- **Ray-Ban Red** (`#D6311F`): Product-specific accent for Ray-Ban Meta smart glasses sections ### Text
- **Oculus Purple** (`#A121CE`): Quest/Oculus product accent for VR content - **Deep Ink** ({colors.ink-deep}): Primary headline and body text on light surfaces.
- **Work Purple** (`#6441D2`): Accent for Meta for Work/enterprise content - **Ink** ({colors.ink}): Standard body and secondary headline text.
- **Portal Blue** (`#1B365D`): Deep navy accent for Portal product line - **Charcoal** ({colors.charcoal}): Tertiary body text and form-button labels.
- **Portal Hero Blue** (`#C8E4E8`): Soft teal-blue for Portal hero backgrounds - **Slate** ({colors.slate}): Section-header copy and supporting microcopy.
- **Portal Light Blue** (`#ADD4E0`): Secondary Portal surface tint - **Steel** ({colors.steel}): Quieter caption text and footer link hierarchy.
- **Stone** ({colors.stone}): Disabled or de-emphasized labels.
### Surface & Background ### Semantic
- **Success** ({colors.success}): "In stock", "Free returns" affirmations.
- **Attention** ({colors.attention}): Mid-priority alerts and timed callouts.
- **Warning** ({colors.warning}): Promotional banners ("Get 25% off…") and limited-time tags.
- **Critical** ({colors.critical}): Validation errors, destructive feedback.
- **Critical Strong** ({colors.critical-strong}): Form-input error border and inline error labels.
- **White** (`#FFFFFF`): Primary page canvas, nav bar background, card surfaces ## Typography
- **Soft Gray** (`#F1F4F7`): Secondary background for content sections (--dolly-bg-grey)
- **Warm Gray** (`#F7F8FA`): Flat card background, subtle surface differentiation
- **Web Wash** (`#F0F2F5`): Deemphasized background areas, attachment footers
- **Linen** (`#F2F0E6`): Warm off-white for lifestyle-adjacent sections
- **Baby Blue** (`#E8F3FF`): Highlight background, subtle blue tint for informational areas
- **Near Black** (`#1C1E21`): Dark section backgrounds, immersive product showcase areas
- **Oculus Light** (`#181A1B`): Slightly warm dark surface for Quest product sections
- **Oculus Dark** (`#000000`): Pure black for maximum contrast product displays
- **Overlay** (`rgba(0, 0, 0, 0.6)`): Modal/lightbox backdrop
### Neutrals & Text
- **Primary Text** (`#050505`): Main body and heading text on light surfaces
- **Dark Charcoal** (`#1C2B33`): Dolly system primary text, slightly warmer than pure black (--dolly-text-primary)
- **Icon Secondary** (`#465A69`): Secondary icon fills, subdued UI elements
- **Secondary Text** (`#65676B`): Supporting copy, labels, timestamps (--secondary-text)
- **Slate Gray** (`#5D6C7B`): Meta Store secondary text, product descriptions (--dolly-text-secondary)
- **Section Header** (`#4B4C4F`): Mid-gray for section titles
- **Button Text Gray** (`#444950`): FDS button text default (--fds-button-text)
- **Disabled Text** (`#BCC0C4`): Inactive button labels, placeholder text
- **CTA Disabled Text** (`#8595A4`): Muted blue-gray for disabled interactive labels
- **Divider** (`#CED0D4`): Content separators, input borders
- **Divider Gray** (`#DEE3E9`): Lighter divider for Dolly sections
- **CTA Gray Border** (`#CBD2D9`): Outline button borders
- **Dark Gray Border** (`#909396`): Stronger outline for emphasis
### Semantic & Accent
- **Success Green** (`#31A24C`): Badge success background, positive indicators
- **Store Success** (`#007D1E`): Darker success green for Dolly store confirmations
- **Error Red** (`#E41E3F`): Critical badge background, notification badges
- **Store Error** (`#C80A28`): Darker error red for Dolly store error states
- **Warning Amber** (`#F7B928`): Attention badges, caution indicators
- **Positive BG** (`rgba(36, 228, 0, 0.15)`): Subtle success background tint
- **Error BG** (`rgba(255, 123, 145, 0.15)`): Subtle error background tint
- **Warning BG** (`rgba(255, 226, 0, 0.15)`): Subtle warning background tint
- **Info BG** (`rgba(0, 145, 255, 0.15)`): Subtle informational blue tint
### Base Color Spectrum (FDS)
- **Cherry** (`#F3425F`): Expressive accent
- **Grape** (`#9360F7`): Purple accent
- **Lime** (`#45BD62`): Green accent
- **Seafoam** (`#54C7EC`): Cyan accent
- **Teal** (`#2ABBA7`): Teal accent
- **Tomato** (`#FB724B`): Orange accent
- **Pink** (`#FF66BF`): Pink accent
### Gradient System
- **Dark Overlay Gradient**: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` — applied over dark product photography for text legibility
- **Blue Infinity Gradient**: The Meta symbol uses a blue-to-teal gradient on brand materials, though the store uses flat blue
- **Shadow Alpha Scale**: 0.05, 0.10, 0.15, 0.20, 0.30, 0.40, 0.50, 0.60, 0.80 — both black and white alpha ramps for layered transparency
## 3. Typography Rules
### Font Family ### Font Family
**Optimistic VF** is Meta's proprietary variable display face. Fallbacks: Montserrat, Helvetica, Arial, Noto Sans. The variable axes carry from 300 (light heading-md, used for editorial intro headlines like "Look forward") through 500 (display, hero, heading-sm) up to 700 (subtitle, body emphasis, button labels). Stylistic sets `ss01` and `ss02` are switched on across every heading role — they soften the geometry and give the type a slightly humanist breathing.
**Primary:** Optimistic VF (variable font by Dalton Maag, commissioned by Meta) A secondary Helvetica fallback chain is used for technical microcopy (12px) inside spec sheets and footer fine print.
- Fallbacks: Montserrat, Helvetica, Arial, Noto Sans
- OpenType features: `"ss01", "ss02"` — stylistic sets that activate Meta-specific alternate glyphs
- Variable font with continuous weight axis (observed: 300, 400, 500, 700)
**Secondary:** Helvetica
- Fallbacks: Arial
- Used for small utility text (12px footer links, legal copy)
### Hierarchy ### Hierarchy
| Role | Size | Weight | Line Height | Letter Spacing | Notes | | Token | Size | Weight | Line Height | Letter Spacing | OpenType | Use |
|------|------|--------|-------------|----------------|-------| |---|---|---|---|---|---|---|
| Display 1 | 64px | 500 (Medium) | 1.16 | — | Hero headlines on desktop, ss01+ss02 | | `{typography.hero-display}` | 64px | 500 | 1.16 | 0 | ss01, ss02 | Homepage hero ("Get 25% off…", category opener) |
| Display 2 | 48px | 500 (Medium) | 1.17 | — | Section heroes, product titles | | `{typography.display-lg}` | 48px | 500 | 1.17 | 0 | ss01, ss02 | Section-opener display ("Made for prescriptions. Built for comfort.") |
| Heading 1 | 36px | 500 (Medium) | 1.28 | — | Major section headings | | `{typography.heading-lg}` | 36px | 500 | 1.28 | 0 | ss01, ss02 | Subsection headlines ("Why buy from Meta", "Tech specs") |
| Heading 2 | 28px | 300 (Light) | 1.21 | — | Subheadings, lighter feel | | `{typography.heading-md}` | 28px | 300 | 1.21 | 0 | ss01, ss02 | Editorial subheads in lighter weight ("Look forward", "Built for prescriptions") |
| Heading 3 | 18px | 700 (Bold) | 1.44 | — | Card titles, bold callouts, ss01+ss02 | | `{typography.heading-sm}` | 24px | 500 | 1.25 | 0 | ss01, ss02 | Card titles, feature-tile headers |
| Body | 18px | 400 (Regular) | 1.44 | — | Product descriptions, body copy | | `{typography.subtitle-lg}` | 18px | 700 | 1.44 | 0 | — | Bold callouts, FAQ question titles |
| Body Compact | 16px | 500 (Medium) | 1.50 | -0.16px | Navigation links, UI labels | | `{typography.subtitle-md}` | 18px | 400 | 1.44 | 0 | — | Body lead and longer-line subtitles |
| Caption Bold | 14px | 700 (Bold) | 1.43 | — | Emphasized labels, price text | | `{typography.body-md}` | 16px | 400 | 1.50 | -0.16px | — | Primary body text |
| Caption | 14px | 400 (Regular) | 1.43 | -0.14px | Secondary labels, metadata | | `{typography.body-md-bold}` | 16px | 700 | 1.50 | -0.16px | — | Body emphasis and link-md |
| Small | 12px | 400 (Regular) | 1.33 | — | Footer links, legal text, timestamps | | `{typography.body-sm}` | 14px | 400 | 1.43 | -0.14px | — | Secondary body, helper text |
| Button | 14px | 400 (Regular) | 1.43 | -0.14px | Button label text | | `{typography.body-sm-bold}` | 14px | 700 | 1.43 | -0.14px | — | Pill tab labels, footer headings |
| `{typography.caption-bold}` | 12px | 700 | 1.33 | 0 | — | Badge labels, timestamps |
| `{typography.caption}` | 12px | 400 | 1.33 | 0 | — | Footer fine print, legal microcopy |
| `{typography.button-md}` | 14px | 700 | 1.43 | -0.14px | — | Pill button labels |
| `{typography.link-md}` | 16px | 700 | 1.50 | -0.16px | — | Inline navigation links |
### Principles ### Principles
- Negative letter-spacing on body roles (`-0.14px` to `-0.16px`) tightens the type fractionally — Optimistic VF was designed for this snug-but-not-condensed setting.
- Editorial subheads use the 300 weight to introduce visual rest between the 500-weight display headlines and the 400-weight body, creating a three-tier visual rhythm.
- All headings carry `ss01, ss02` stylistic sets together — the design treats them as a paired alternates package, never one without the other.
- Buttons, pill tabs, and footer headings share `{typography.body-sm-bold}` (14px / 700 / -0.14px), creating a tight visual relationship between interactive elements.
Optimistic VF is the cornerstone of Meta's typographic identity — a humanist sans-serif with geometric underpinnings that strikes a balance between Silicon Valley precision and consumer warmth. The "ss01" and "ss02" stylistic sets introduce alternate glyphs that give headlines a distinctive Meta character. Weight 500 (Medium) dominates headlines, creating a presence that commands without shouting, while the unexpected use of weight 300 (Light) at 28px adds an airy, editorial quality to subheadings. Negative letter-spacing at smaller sizes (-0.14px to -0.16px) tightens the optical rhythm for UI elements, keeping the reading experience crisp and efficient. ## Layout
## 4. Component Stylings
### Buttons
**Primary (Pill)**
- Background: Meta Blue (`#0064E0`)
- Text: White (`#FFFFFF`)
- Border: none
- Border radius: fully rounded pill (100px)
- Padding: 10px 22px
- Font: Optimistic VF, 14px, regular, -0.14px tracking
- Hover: darkens to `#0143B5`, scale(1.1) transform
- Pressed: `#004BB9`, scale(0.9), opacity 0.5
- Focus: 3px ring in accent color, outline auto 2px
- Transition: background 200ms ease, transform 150ms ease
**Secondary (Outlined Pill)**
- Background: transparent
- Text: Dark Charcoal (`#1C2B33`) at 50% opacity
- Border: 2px solid `rgba(10, 19, 23, 0.12)`
- Border radius: fully rounded pill (100px)
- Padding: 10px 22px
- Hover: background shifts to `rgba(70, 90, 105, 0.7)`, text to white
**Ghost/Link Button**
- Background: transparent / `rgba(255, 255, 255, 0)`
- Text: Link Blue (`#385898`)
- Border radius: 24px
- Padding: 4px 12px
**Disabled**
- Background: `#DEE3E9` (--dolly-cta-disabled)
- Text: `#8595A4` (--dolly-cta-disabled-text)
- Cursor: not-allowed, no hover effects
### Cards & Containers
- Background: White (`#FFFFFF`) or Flat Gray (`#F7F8FA`)
- Corner radius: 20px (--card-corner-radius) for standard cards, 24px for product feature cards
- Padding: 10px horizontal, 20px vertical (--card-padding)
- Shadow: `0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)` (elevated cards)
- Hover: subtle lift via translateY(-2px) and shadow intensification
- Transition: transform 300ms ease, box-shadow 300ms ease
- Product cards use full-bleed imagery with text overlay on dark gradient
### Inputs & Forms
- Background: White (`#FFFFFF`)
- Border: 1px solid `#CED0D4` (--input-border-color)
- Border radius: 8px
- Font: Optimistic VF, 16px
- Focus: border color shifts to accent blue `hsl(214, 89%, 52%)`, 3px outer ring
- Error: border and label color `hsl(350, 87%, 55%)`
- Placeholder: `#65676B` (--secondary-text)
- Transition: border-color 200ms ease, box-shadow 200ms ease
### Navigation
- Background: White (`#FFFFFF`), sticky at top
- Frosted glass effect: `rgba(241, 244, 247, 0.8)` with backdrop-filter blur
- Logo: Meta wordmark SVG, left-aligned
- Links: Optimistic VF, 16px/500, Dark Charcoal (`#1C2B33`)
- Hover: underline decoration
- CTA: Blue pill button, right-aligned
- Mobile: hamburger collapse, full-screen overlay nav
- Height: approximately 56px desktop, 48px mobile
- Border-bottom: subtle `rgba(0,0,0,0.1)` separator
### Image Treatment
- Product hero: full-width, cinematic aspect ratio (~21:9 on desktop, ~4:3 on mobile)
- Product cards: 1:1 or 4:3, edge-to-edge within card radius
- Feature images: rounded corners matching card radius (20-24px)
- Dark text-over-image: gradient overlay `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))`
- Lazy loading: native loading="lazy" on below-fold images
- WebP format with JPEG fallback
### Product-Specific Sections
- **Quest sections**: Dark backgrounds (`#181A1B` or `#000000`), white/light text, purple accents (`#A121CE`)
- **Ray-Ban sections**: Warm lifestyle photography, red accents (`#D6311F`), linen tones (`#F2F0E6`)
- **Portal sections**: Teal-blue palette (`#C8E4E8`, `#ADD4E0`), navy accents (`#1B365D`)
## 5. Layout Principles
### Spacing System ### Spacing System
- **Base unit**: 4px increment with 8px as the dominant primary step.
Base unit: 8px - **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (10px) · `{spacing.md}` (12px) · `{spacing.base}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (80px) · `{spacing.hero}` (120px).
- **Section rhythm**: Marketing sections separate at `{spacing.section-lg}` (80px); product detail sections compress to `{spacing.section}` (64px); FAQ stacks tighten further to `{spacing.xxl}` (32px).
| Token | Value | Use | - **Card internal padding**: Standard `{spacing.xxl}` (32px); icon-feature tiles compress to `{spacing.xl}` (24px); promo-strip cards expand to `{spacing.section}` (64px) for hero presence.
|-------|-------|-----|
| space-1 | 1px | Hairline borders |
| space-2 | 4px | Tight internal padding |
| space-3 | 8px | Base unit, icon gaps |
| space-4 | 10px | Card horizontal padding |
| space-5 | 12px | Button icon spacing, tight margins |
| space-6 | 14px | Caption line height spacing |
| space-7 | 16px | Standard paragraph spacing, nav padding |
| space-8 | 18px | Body text vertical rhythm |
| space-9 | 24px | Card section spacing, grid gaps |
| space-10 | 32px | Section content padding |
| space-11 | 40px | Major content block spacing |
| space-12 | 48px | Section vertical padding (compact) |
| space-13 | 64px | Section vertical padding (standard) |
| space-14 | 80px | Hero section padding, large section gaps |
### Grid & Container ### Grid & Container
- Marketing page max-width sits around 1280px with 32–48px gutters.
- Max container width: ~1440px, centered with auto margins - The PDP layout uses a 2-column split: hero gallery (~58% width) + sticky purchase rail (~42%, with `max-width: 380px` on the rail).
- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile - Three-up feature grids ("Why buy from Meta") use a 24px column gap; six-up product thumbnail rows (color/SKU pickers) use a 12px gap.
- Feature grid: 2-column split (image + content), stacks on mobile
- Grid gap: 24px between cards, 16px on mobile
- Page horizontal padding: 24-40px depending on breakpoint
### Whitespace Philosophy ### Whitespace Philosophy
Whitespace is product-photography-first. Hero sections give product imagery 50–70% of the viewport height; copy is given oxygen to breathe in `{spacing.xxl}` to `{spacing.xxxl}` blocks above and below. Inside the configurator, whitespace tightens — the buy-now panel is information-dense, with `{spacing.base}` to `{spacing.lg}` rhythm between option groups.
Whitespace is the store's primary luxury signifier. Sections breathe with 64-80px vertical padding, creating a sense of unhurried browsing. Product images float in generous negative space rather than being crammed edge-to-edge. This restrained spacing communicates premium positioning — the visual equivalent of wide aisles in a high-end retail store. ## Elevation & Depth
The system runs predominantly flat. Elevation is reserved for two interaction layers:
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow; `{rounded.xxxl}` rounding + `{colors.hairline-soft}` border | Default product cards, why-buy tiles |
| 1 (subtle) | `rgba(0, 0, 0, 0.2) 1px 1px 0px 0px` | Pill-tab activation indicator |
| 2 (sticky panel) | `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px` | PDP right-rail purchase summary, sticky mobile checkout bar |
### Decorative Depth
- Photography-as-depth: full-bleed product imagery on `{rounded.xxxl}` cards creates atmospheric layering without shadows.
- Translucent overlays (`rgba(255, 255, 255, 0.1)` to `rgba(10, 19, 23, 0.12)`) cover dark hero photography to lift legibility of overlaid text.
- Decorative pastel tints inside accessory cards — soft pink, ice-blue, mint — appear briefly behind product cutouts but are NOT formalized as system tokens (treated as photographic content).
## Shapes
### Border Radius Scale ### Border Radius Scale
| Value | Context | | Token | Value | Use |
|-------|---------| |---|---|---|
| 8px | Inputs, small UI elements, glimmer placeholders | | `{rounded.xs}` | 2px | Inline checkbox marks, fine UI corners |
| 20px | Cards (--card-corner-radius) | | `{rounded.sm}` | 4px | Tags, micro-controls |
| 24px | Feature cards, product highlight areas, ghost buttons | | `{rounded.md}` | 6px | Square thumbnail rounding |
| 100px | Pill buttons, tags, badges (fully rounded) | | `{rounded.lg}` | 8px | Form inputs, radio-option containers |
| `{rounded.xl}` | 16px | Standard feature cards, FAQ accordion items |
| `{rounded.xxl}` | 24px | Warranty / accessory tiles, ghost-style action cards |
| `{rounded.xxxl}` | 32px | Photographic feature cards, big promo strips |
| `{rounded.feature}` | 40px | Accessory hero panels, "Built for prescriptions" cards |
| `{rounded.full}` | 100px | Pill buttons, tab chips, badges |
| `{rounded.circle}` | 50% | Color swatches, circular icon buttons |
## 6. Depth & Elevation ### Photography Geometry
- Product hero photography sits in `{rounded.xxxl}` (32px) frames more often than rectangles.
- Color/material swatches are perfect circles (`{rounded.circle}`, 32px diameter, 2px white border ring when selected).
- Square product thumbnails (`aspect-ratio: 1/1`) use `{rounded.xl}` rounding.
- Six-up "color & SKU" picker rows use 1:1 aspect tiles with `{rounded.lg}` (8px) corners — tighter than the hero photography frames to differentiate selection-grid context from showcase context.
| Level | Treatment | Use | ## Components
|-------|-----------|-----|
| Flat | No shadow, background differentiation only | Default cards, sections |
| Level 1 | `0 2px 4px 0 rgba(0,0,0,0.1)` | Subtle lift for interactive cards |
| Level 2 | `0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)` | Elevated cards, dropdowns |
| Overlay | `rgba(0,0,0,0.6)` full-screen | Modal/lightbox backdrop |
| Inset | `rgba(255,255,255,0.5)` inset | Inner glow on glass-effect surfaces |
The Meta Store favors a primarily flat elevation model. Most surface differentiation comes from background color shifts (white → soft gray → dark) rather than shadows. When shadows appear, they are soft, diffused, and use the dual-shadow pattern (a large blurred shadow for ambient light + a small sharp shadow for direct light). This creates a physically plausible depth feel without heavy visual weight. > Per the no-hover policy, hover states are NOT documented for any component below. Default and pressed/active states only.
### Decorative Depth ### Buttons
- **Frosted glass nav**: `rgba(241, 244, 247, 0.8)` background with backdrop-filter blur, creating a translucent navigation bar **`button-primary`** — Black pill primary CTA for marketing surfaces ("Shop", "Pre-order").
- **Dark section gradient**: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` overlay on product photography for text legibility - Background `{colors.ink-button}`, text `{colors.on-ink-button}`, typography `{typography.button-md}`, padding `14px 30px`, rounded `{rounded.full}`.
- **Glimmer loading states**: Pulsating opacity animation (0.25 → 1.0) on `#979A9F` base color with 8px radius, 1000ms steps timing — used for skeleton screens during product image loading - Pressed state `button-primary-pressed` flips background to `{colors.charcoal}`.
- Disabled state `button-primary-disabled` uses `{colors.disabled-text}` background.
## 7. Do's and Don'ts **`button-buy-cta`** — Cobalt pill primary CTA for commerce flows ("Add to cart", "Configure", "Continue").
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `14px 30px`, rounded `{rounded.full}`.
- Pressed state `button-buy-cta-pressed` deepens background to `{colors.primary-deep}`.
- This variant ONLY appears inside the buy-now configurator and PDP purchase rail. Marketing surfaces use `button-primary` instead.
**`button-secondary`** — Outlined ghost CTA, often paired with primary in dual-CTA hero patterns.
- Background transparent, text `{colors.ink-deep}`, border `2px solid {colors.ink-deep}`, typography `{typography.button-md}`, padding `12px 28px`, rounded `{rounded.full}`.
**`button-ghost`** — Quieter outlined variant used for tertiary CTAs.
- Background transparent, text `{colors.ink-deep}`, border `2px solid rgba(10, 19, 23, 0.12)`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
**`button-pill-tab`** + **`button-pill-tab-active`** — Top-of-page category navigation pills ("Glasses / Quest / Apps").
- Inactive: background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, padding `8px 16px`, rounded `{rounded.full}`.
- Active: background `{colors.ink-deep}`, text `{colors.canvas}`. No border in active state — the dark fill replaces it.
**`button-icon-circular`** — 40×40px circular utility buttons (carousel arrows, share, favorite).
- Background `{colors.canvas}`, icon color `{colors.ink}`, rounded `{rounded.circle}`.
### Cards & Containers
**`card-product-feature`** — White feature card with product photography and copy (homepage "Designed for sport", "Advanced. Inside and out.").
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.
**`card-feature-photo`** — Edge-to-edge photographic showcase tile with NO chrome (homepage "Built for prescriptions" full-bleed glasses card).
- Background `{colors.canvas}` (visible only at the corners), rounded `{rounded.xxxl}`, no padding, no border. The image fills the card; copy is overlaid bottom-left in white.
**`card-promo-strip`** — Dark full-width promo card with embedded copy + CTAs (homepage "Meta Quest brings the magic of virtual reality" wide strip).
- Background `{colors.ink-deep}`, text `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.section}`.
**`card-icon-feature`** — Three-up feature tile with line icon, headline, and short copy ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
**`card-checkout-summary`** — PDP right-rail sticky summary with title, price, color picker, "Add to cart" button.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px`.
**`product-thumbnail`** — Square product image cell used in color/SKU pickers and "People also bought" rows.
- Background `{colors.surface-soft}`, rounded `{rounded.xl}`, padding `{spacing.base}`, aspect-ratio `1 / 1`.
**`warranty-card`** — Promo callout for warranty + finance offers ("1y Warranty", "Meta Horizon+").
- Background `{colors.surface-soft}`, rounded `{rounded.xxl}`, padding `{spacing.xxl}`. Uses pastel-tinted variants for additional perks.
**`why-buy-tile`** — 4-up reassurance tile row in the lower marketing zone.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl} {spacing.xl}`, border `1px solid {colors.hairline-soft}`. Heading in `{typography.subtitle-lg}`, body in `{typography.body-sm}`.
### Inputs & Forms
**`text-input`** — Standard form field (footer email subscribe, support form).
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.lg}`, padding `{spacing.md}`, height 44px.
**`text-input-focused`** — Activated state.
- Border switches to `2px solid {colors.fb-blue}`.
**`text-input-error`** — Validation error state.
- Border switches to `1px solid {colors.critical-strong}`; error label below in `{colors.critical-strong}` `{typography.body-sm}`.
**`search-pill`** — Top-nav search field.
- Background `{colors.surface-soft}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.full}`, height 40px.
**`radio-option`** + **`radio-option-selected`** — Configurator option cards (storage, color variant, shipping option).
- Inactive: background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid rgba(10, 19, 23, 0.12)`.
- Selected: border switches to `2px solid #0143b5` (deep cobalt) — the cobalt theme persists into form-control selection signaling.
**`color-swatch-circle`** — Round color/material picker (Ray-Ban frame finishes, glass colors).
- 32px diameter, `{rounded.circle}`, `2px solid {colors.canvas}` ring on selection over the swatch's own fill color.
### Badges & Status
**`badge-promo-yellow`** — Limited-time offer chip ("Limited time", "Sale").
- Background `{colors.warning}`, text `{colors.ink-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-attention`** — Mid-priority status indicator ("Almost gone", "Selling fast").
- Background `{colors.attention}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-success`** — Affirmative status ("In stock", "Verified", "Free shipping").
- Background `{colors.success}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-critical`** — Urgent/destructive label ("Out of stock", "Discontinued", error chips).
- Background `{colors.critical}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`promo-banner`** — Sticky full-width promotional strip ABOVE the top nav ("Get 25% off the #1 selling AI glasses").
- Background `{colors.ink-deep}` (or `{colors.warning}` for yellow promo variants), text `{colors.canvas}` (or `{colors.ink-deep}` on yellow), typography `{typography.body-sm-bold}`, padding `{spacing.md} {spacing.xl}`. Carries one-line offer copy plus an inline CTA link.
### Navigation
**Top Navigation (Desktop)** — Sticky white bar with category pill tabs, search, account, cart.
- Background `{colors.canvas}`, height ~64px with bottom `1px solid {colors.hairline-soft}`.
- Left: Meta wordmark logo (61×14px). Center: pill-tab category nav. Right: search-pill + circular icon buttons (account, cart).
**Top Navigation (Mobile)** — Compressed to logo + hamburger + cart icon. Pill-tab nav slides into a full-screen drawer below 768px.
**Promo Banner** — Full-width strip ABOVE the nav for time-bound offers.
- Background `{colors.ink-deep}` or `{colors.warning}` (yellow), text `{colors.canvas}` or `{colors.ink-deep}`, typography `{typography.body-sm-bold}`, padding `{spacing.md} {spacing.xl}`. Carries one-line offer copy + inline link.
**Breadcrumb (PDP)** — Inline path above the product hero ("Glasses › Ray-Ban Meta › Skyler (Gen 2)").
- Typography `{typography.body-sm}`, separator dot in `{colors.stone}`, active leaf in `{colors.ink}`, parent links in `{colors.steel}`.
### Signature Components
**`hero-band-marketing`** — Full-bleed photographic hero with overlaid copy + dual-CTA pair.
- Edge-to-edge product photography on a dark or photographic background. Overlay copy in `{typography.hero-display}` white. Below the title: 1-line subtitle in `{typography.subtitle-md}` then `button-primary` + `button-secondary` pair.
**`product-gallery-pdp`** — Product detail page main hero: 4-up vertical thumbnail strip on the left, large product image center, sticky purchase rail right.
- Thumbnails: 80×80px, `{rounded.lg}`, `{colors.surface-soft}` background, 1px `{colors.hairline-soft}` border (active border switches to `{colors.ink-deep}`).
- Main image area: ~720×720px on desktop, `{rounded.xxxl}` rounding, photographic surface.
- Sticky rail uses `card-checkout-summary`.
**`color-sku-picker-row`** — Six-up grid of square product variants with name + price below each.
- Tile background `{colors.surface-soft}`, rounded `{rounded.lg}`, image padded `{spacing.base}`. Active tile border switches to `2px solid {colors.ink-deep}`. Below the tile: variant name in `{typography.body-sm-bold}` and price in `{typography.body-sm}`.
**`feature-icon-row`** — Four reassurance benefits ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").
- 4-column grid, each cell uses `card-icon-feature` chrome with a 32px line icon at top, headline `{typography.subtitle-lg}`, body `{typography.body-sm}`.
**`faq-accordion`** — Vertical stack of expandable Q&A items.
- Each item uses `faq-accordion-item` chrome. Question in `{typography.subtitle-lg}` left, chevron icon (`{colors.steel}`, 20px) right. Expanded answer drops in `{typography.body-md}` text below with `{spacing.base}` top padding.
**`tech-specs-table`** — Two-column key/value table for product specifications.
- Row layout: spec label (`{typography.body-sm-bold}` `{colors.ink}`) left, spec value (`{typography.body-sm}` `{colors.charcoal}`) right. Row separator `1px solid {colors.hairline-soft}`. Section headers in `{typography.heading-sm}` above each spec group.
**`testimonial-customer-card`** — Small editorial card with author + quote + photo.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`. Avatar circle 40px, byline in `{typography.body-sm-bold}`, quote in `{typography.body-md}`.
**`footer-region`** — Dense multi-column site footer.
- Background `{colors.canvas}`, top border `1px solid {colors.hairline-soft}`, padding `{spacing.section} {spacing.xxl}`. Six column groups with section headings in `{typography.body-sm-bold}` `{colors.ink}` and link lists in `{typography.body-sm}` `{colors.steel}`. Bottom row contains language picker, region selector, legal links in `{typography.caption}` `{colors.stone}`.
## Do's and Don'ts
### Do ### Do
- Reserve `{colors.primary}` (cobalt) for buy-now CTAs only — its visual weight is meaningful precisely because it doesn't appear on marketing pages.
- Use pill-shaped (100px radius) buttons for all primary and secondary CTAs - Use `{colors.ink-button}` (black) for marketing-surface primary CTAs. Pair with `{colors.button-secondary}` ghost outline for the secondary action.
- Let product photography dominate — make images the visual hero of every section - Apply `{rounded.full}` to every button, every category pill, every badge, every chip — buttons are NEVER squared in Meta's system.
- Alternate between light and dark surface sections to create visual rhythm - Apply `{rounded.xxxl}` to photographic product cards and `{rounded.xl}` to icon-feature tiles to maintain the visible card-hierarchy contrast.
- Use Optimistic VF with ss01 and ss02 features for all display text - Switch on `ss01, ss02` together for any Optimistic VF heading. Never one stylistic set without the other.
- Keep body copy brief and scannable — this is retail, not editorial - Use the 300-weight `{typography.heading-md}` for editorial subheads — it creates the brand's signature visual rhythm against the 500-weight displays.
- Use the dual-shadow pattern (ambient + direct) when elevation is needed
- Apply Meta Blue (`#0064E0`) exclusively for actionable elements
- Use generous whitespace (64-80px section padding) to convey premium feel
- Apply gradient overlays on dark photography when placing text over images
- Use the semantic color tokens (success, error, warning) consistently for status communication
### Don't ### Don't
- Don't use `{colors.primary}` (cobalt) for marketing-surface primary buttons — it conflicts with Meta's brand-history positioning of black-CTA-on-white-canvas marketing.
- Don't introduce additional accent colors beyond cobalt + Oculus purple. The hardware brand is deliberately monochromatic outside its product photography.
- Don't soften the corners of pill buttons below `{rounded.full}`. The pill is a brand signature.
- Don't run feature cards without rounding — `{rounded.xxxl}` is the minimum for any photographic surface.
- Don't reduce `{typography.body-md}` line-height below 1.50 — the negative letter-spacing already tightens the metric and any further compression breaks legibility.
- Don't apply heavy shadows to marketing cards. Elevation is a commerce-flow signal, not a marketing flourish.
- Don't use sharp corners (< 8px radius) — the Meta Store is all smooth curves ## Responsive Behavior
- Don't mix product-specific accents (Ray-Ban Red with Quest Purple in the same section)
- Don't add decorative borders or ornamental dividers — dividers are functional only
- Don't place important text directly on photography without a gradient scrim
- Don't use weight 300 for anything smaller than 28px — it becomes too thin
- Don't use Facebook Blue (`#1877F2`) as a primary CTA color — use Meta Blue (`#0064E0`) instead
- Don't crowd product images — maintain generous padding around all photography
- Don't use more than 2 levels of text hierarchy in a single card
- Don't add drop shadows to cards in dark sections — rely on border and color separation
- Don't use long paragraphs — limit to 2-3 lines of body copy per block
## 8. Responsive Behavior
### Breakpoints ### Breakpoints
| Name | Width | Key Changes | | Name | Width | Key Changes |
|------|-------|-------------| |---|---|---|
| Mobile | <768px | Single column, hamburger nav, hero text shrinks to 36px, full-width product cards, 48px section padding | | Mobile (small) | < 480px | Single column. Hero text drops to `{typography.display-lg}` or smaller. Pill tabs collapse into hamburger drawer. PDP gallery stacks above purchase rail; rail becomes sticky bottom bar. |
| Tablet | 768-1024px | 2-column product grid, compact nav, hero text at 48px | | Mobile (large) | 480 – 767px | Same as small but feature tiles render two-up. |
| Desktop | 1024-1440px | 3-column product grid, full horizontal nav, hero text at 64px, 80px section padding | | Tablet | 768 – 1023px | Two-column feature grids. Pill-tab nav returns. PDP gallery + purchase rail render side-by-side at compressed proportions (~60/40). |
| Large Desktop | >1440px | Max-width container (1440px) centered, increased horizontal margins | | Desktop | 1024 – 1359px | Full three- and four-up feature grids; full pill-tab category nav; PDP at standard 58/42 split. |
| Wide Desktop | ≥ 1360px | Same as desktop with wider hero gutters and larger product photography. |
### Touch Targets ### Touch Targets
- Pill buttons render at 40–44px effective height (with the 14px button text + `14px 30px` padding). Above the WCAG AAA 44px floor.
- Minimum touch target: 44x44px (WCAG AAA compliant) - Circular icon buttons are 40×40px — at the AA floor; bumps to 44×44px on mobile via override.
- Mobile button height: minimum 44px with 10px vertical padding - Color swatch circles are 32×32px. To hit AAA, the swatch carries a 12px clear hit zone around it (effective hit target ~56px).
- Nav hamburger icon: 48x48px touch area - Form inputs render at 44px height to align with primary button height.
- Product card tappable area: full card surface
### Collapsing Strategy ### Collapsing Strategy
- **Promo banner** stays full-width on all breakpoints; truncates with ellipsis on small mobile, retains the inline link affordance.
- **Navigation**: Horizontal links collapse to hamburger menu below 768px; CTA button remains visible - **Pill-tab nav** below 768px collapses into a hamburger drawer; the active tab is rendered as a label inside the closed nav.
- **Product grids**: 3-col → 2-col at 1024px → 1-col at 768px - **PDP layout**: gallery stacks above the purchase summary at < 1024px; the summary becomes a sticky bottom bar with price + "Add to cart" button at < 768px. The full summary remains scrollable above the sticky bar.
- **Hero sections**: Display text scales from 64px → 48px → 36px; CTA buttons stack vertically on mobile - **Feature grids** (3-up, 4-up) collapse to 2-up at 768–1023px and 1-up at < 768px. Card padding compresses from `{spacing.xxl}` to `{spacing.xl}` at the 1-up breakpoint.
- **Feature sections**: 2-column (image + text) → full-width stacked below 768px, image on top - **Hero typography**: `{typography.hero-display}` (64px) drops to `{typography.heading-lg}` (36px) at < 768px and `{typography.heading-sm}` (24px) at < 480px.
- **Section padding**: 80px → 64px → 48px → 32px as viewport narrows - **Footer**: 6-column desktop layout reflows to 2-column at tablet and accordion-collapsed groups at mobile.
- **Card radius**: Remains consistent at 20-24px across all breakpoints
### Image Behavior ### Image Behavior
- Product photography uses 1:1 (thumbnails, color pickers), 4:3 (PDP gallery), and 16:9 (homepage promo strips) ratios.
- Hero photography is full-bleed with `{rounded.xxxl}` corners; lazy-loaded below the fold.
- Product variant images preserve their `{rounded.lg}` thumbnails across all breakpoints — they never go full-width on mobile.
- Responsive images via srcset with multiple resolutions ## Iteration Guide
- WebP format with progressive JPEG fallback
- Hero images: full-bleed on mobile, contained on desktop
- Product grid images: maintain aspect ratio, scale proportionally
- Art direction: hero crop changes between desktop (wide cinematic) and mobile (tighter product focus)
- Lazy loading with glimmer skeleton (pulsating gray placeholder) during load
## 9. Agent Prompt Guide 1. Focus on ONE component at a time. The system has high internal consistency — small precision wins compound.
2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.
3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs, contrast issues, orphaned tokens.
4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-focused`) — do not bury them inside prose.
5. Default to `{typography.body-md}` for body and `{typography.subtitle-lg}` for emphasis. Headlines step down through `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
6. Keep `{colors.primary}` (cobalt) scarce. If it appears outside the buy-now flow on a viewport, ask whether the surface really needs to look like a checkout panel.
7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this design language and should be filtered out of any work surface.
### Quick Color Reference ## Known Gaps
- Primary CTA: Meta Blue (`#0064E0`) - Selected/checked states for non-button form controls (toggle, multi-select) were not visible on the captured surfaces — implement following the cobalt-on-white pattern from `radio-option-selected`.
- Background: White (`#FFFFFF`) - Animation/transition timings are not extracted; recommend 150–250ms ease-out for primary surface transitions and 300ms ease-in-out for accordion expand/collapse.
- Heading text: Dark Charcoal (`#1C2B33`) - Specific dark-mode token values for canvas, surface, ink, and hairline are not defined; the brand has not surfaced a published dark-mode token set on these commerce pages.
- Body text: Slate Gray (`#5D6C7B`) - Pastel decorative tints inside accessory cards (soft pink, ice blue, mint) appear visually but are not formalized — treat them as photographic content, not as system colors.
- Border/divider: Divider Gray (`#DEE3E9`)
- Secondary surface: Soft Gray (`#F1F4F7`)
- Dark sections: Near Black (`#1C1E21`)
### Example Component Prompts
- "Create a product hero section with a full-width cinematic image, `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` text overlay, Optimistic-style 64px/500 white headline, and a Meta Blue (`#0064E0`) pill button (100px radius, 10px 22px padding)"
- "Design a 3-column product card grid with 20px rounded corners, white backgrounds, edge-to-edge product images at top, 18px/400 body text in Slate Gray (`#5D6C7B`), and 24px grid gap"
- "Build a sticky navigation bar with white background, `rgba(241, 244, 247, 0.8)` frosted glass effect, 16px/500 dark text links, and a right-aligned Meta Blue pill CTA"
- "Create a dark product showcase section with `#1C1E21` background, white 48px/500 headline, `#5D6C7B` body text, and a secondary outlined pill button with `rgba(10, 19, 23, 0.12)` border"
- "Design a feature comparison grid with Soft Gray (`#F1F4F7`) background, 24px rounded cards, Meta Blue checkmark icons, and 14px/700 bold labels"
### Iteration Guide
When refining existing screens generated with this design system:
1. Focus on ONE component at a time
2. Reference specific color names and hex codes from this document
3. Use natural language descriptions, not CSS values — "pill-shaped Meta Blue button" not "border-radius: 100px; background: #0064E0"
4. Describe the desired "feel" alongside specific measurements — "generous whitespace like a gallery" means 64-80px section padding
5. For dark sections, specify which product context (Quest dark `#181A1B`, pure black `#000000`, or standard dark `#1C1E21`)
6. Always specify the Optimistic VF weight explicitly (300, 400, 500, or 700) — each creates a dramatically different feel

889
design-md/minimax/DESIGN.md
View File

@ -1,257 +1,746 @@
# Design System Inspired by 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.
## 1. Visual Theme & Atmosphere 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"
MiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (`#ffffff`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable. 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
The typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement. rounded:
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
xxl: 20px
xxxl: 24px
hero: 32px
full: 9999px
What makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a "gallery of AI capabilities" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool. 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:** **Key Characteristics:**
- White-dominant layout with colorful product card accents - Stark monochrome palette — black ({colors.primary}) and white ({colors.canvas}) — broken open by saturated brand-color gradient cards
- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data) - 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)
- Pill buttons (9999px radius) for primary navigation and CTAs - DM Sans across the entire system; Inter as fallback
- Generous rounded cards (20px–24px radius) for product showcases - Pill-shaped buttons ({rounded.full}) and pill-shaped tabs everywhere; rectangular forms only inside data tables and dense docs
- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light) - Hero typography uses tight 1.10 line-height with -2px letter-spacing for impact
- Brand pink (`#ea5ec1`) as secondary accent - Documentation surfaces use a 3-column layout: left sidebar nav, center prose body, right table-of-contents
- Near-black text (`#222222`, `#18181b`) on white backgrounds - Black promo banners ({colors.primary}) above the nav for time-bound brand moments
- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth
- Dark footer section (`#181e25`) with product/company links
## 2. Color Palette & Roles ## Colors
### Brand Primary > 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 Blue** (`#1456f0`): `--brand-6`, primary brand identity color
- **Sky Blue** (`#3daeff`): `--col-brand00`, lighter brand variant for accents
- **Brand Pink** (`#ea5ec1`): `--col-brand02`, secondary brand accent
### Blue Scale (Primary) ### Brand & Accent
- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds - **Brand Coral** ({colors.brand-coral}): Signature high-impact accent. Used on M2.7 product card, "Token Plan" hero band, promo CTA strips, and "NEW" badges. Carries the brand's most attention-grabbing energy.
- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights - **Brand Magenta** ({colors.brand-magenta}): Secondary product-card identity (Music 2.6); used for music/audio product encoding.
- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions - **Brand Blue** ({colors.brand-blue}): Hailuo video product identity; primary blue accent across the system.
- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states - **Brand Blue Deep** ({colors.brand-blue-deep}): Form-control activation, link emphasis.
- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed/active states - **Brand Blue 700** ({colors.brand-blue-700}): Documentation tag and reference text color.
- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis - **Brand Cyan** ({colors.brand-cyan}): Atmospheric blue for product gradients and decorative wash.
- **Brand Blue 200** ({colors.brand-blue-200}): Code badges, info-tag backgrounds.
- **Brand Purple** ({colors.brand-purple}): Speech 2.8 and minor purple-product identity; gradient mate for magenta cards.
### Text Colors ### Surface
- **Near Black** (`#222222`): `--col-text00`, primary text - **Canvas White** ({colors.canvas}): Primary page background and card surface.
- **Dark** (`#18181b`): Button text, headings - **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, sidebar-nav active state.
- **Charcoal** (`#181e25`): Dark surface text, footer background - **Surface Soft** ({colors.surface-soft}): Quieter section divisions.
- **Dark Gray** (`#45515e`): `--col-text04`, secondary text - **Hairline** ({colors.hairline}): 1px input border and primary divider.
- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels - **Hairline Soft** ({colors.hairline-soft}): Quieter table-row divider and secondary section break.
- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text
### Surface & Background ### Text
- **Pure White** (`#ffffff`): `--col-bg13`, primary background - **Ink** ({colors.ink}): Primary headline and CTA text — the brand's near-black anchor.
- **Light Gray** (`#f0f0f0`): Secondary button backgrounds - **Ink Strong** ({colors.ink-strong}): Pure black used in promo banners and hero displays for maximum contrast.
- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay - **Charcoal** ({colors.charcoal}): Body text on light surfaces.
- **Border Light** (`#f2f3f5`): Subtle section dividers - **Slate** ({colors.slate}): Secondary text, metadata.
- **Border Gray** (`#e5e7eb`): Component borders - **Steel** ({colors.steel}): Tertiary text, table headers, sidebar inactive items.
- **Stone** ({colors.stone}): Muted captions and tab inactive labels.
- **Muted** ({colors.muted}): Footer link text and de-emphasized labels.
### Semantic ### Semantic
- **Success Background** (`#e8ffea`): `--success-bg`, positive state backgrounds - **Success Background** ({colors.success-bg}): Pale-green wash for success badges and confirmations.
- **Success Text** ({colors.success-text}): Deep-green ink for success badge labels.
- Error tones derive from a `#d45656` red used in input border error states (not extracted as a top-level system token).
### Shadows ## Typography
- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`): Default card shadow
- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`): Ambient soft shadow
- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`): Brand-tinted glow
- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`): Directional brand glow
- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`): Lifted card shadow
## 3. Typography Rules ### Font Family
**DM Sans** (primary): Geometric variable sans-serif. Used across every surface, every role. Fallbacks: Inter, Helvetica Neue, Helvetica, Arial.
### Font Families DM Sans was chosen for its dual fluency: it scales cleanly from 80px hero displays (where -2px letter-spacing creates magazine-grade tightness) down to 12px micro labels (where the slightly humanist counters maintain legibility). The face has no italic variant in the brand's deployment — emphasis comes from weight (500/600/700) instead.
- **Primary UI**: `DM Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
- **Display**: `Outfit`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
- **Mid-tier**: `Poppins`
- **Data/Technical**: `Roboto`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
### Hierarchy ### Hierarchy
| Role | Font | Size | Weight | Line Height | Notes | | Token | Size | Weight | Line Height | Letter Spacing | Use |
|------|------|------|--------|-------------|-------| |---|---|---|---|---|---|
| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines | | `{typography.hero-display}` | 80px | 600 | 1.10 | -2px | Homepage hero ("MiniMax Music 2.6") |
| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles | | `{typography.display-lg}` | 56px | 600 | 1.10 | -1.5px | Section openers, major page heroes |
| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers | | `{typography.heading-lg}` | 40px | 600 | 1.20 | -1px | Sub-page headlines ("Token Plan", "Models Overview") |
| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings | | `{typography.heading-md}` | 32px | 600 | 1.25 | -0.5px | Subsection headers ("Full-Stack Model Matrix") |
| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings | | `{typography.heading-sm}` | 24px | 600 | 1.30 | 0 | Card titles, feature headers |
| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names | | `{typography.card-title}` | 20px | 600 | 1.40 | 0 | Product-card titles, feature-tile headers |
| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body | | `{typography.subtitle}` | 18px | 500 | 1.50 | 0 | Section subtitles, lead body |
| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text | | `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |
| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis | | `{typography.body-md-bold}` | 16px | 700 | 1.50 | 0 | Body emphasis |
| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links | | `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells, navigation |
| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons | | `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar nav, button labels |
| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata | | `{typography.caption}` | 13px | 400 | 1.70 | 0 | Documentation captions, fine print |
| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges | | `{typography.caption-bold}` | 13px | 600 | 1.50 | 0 | Badge labels, table-header text |
| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations | | `{typography.micro}` | 12px | 400 | 1.50 | 0 | Footer microcopy, chip labels |
| `{typography.button-md}` | 14px | 600 | 1.40 | 0 | Pill button labels |
### Principles ### Principles
- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts. - **Tight hero leading** (1.10) and aggressive negative letter-spacing on display sizes create a magazine-quality typographic display unique to MiniMax.
- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed). - **Generous body leading** (1.50) keeps long-form documentation comfortable; captions push to 1.70 for scientific-paper-grade clarity.
- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis. - **Weight discipline:** 400 (body), 500 (medium emphasis), 600 (headings/buttons), 700 (strong inline emphasis). Heavier weights are not used.
- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient. - **Single typeface** strategy — never mix DM Sans with another sans-serif. Code samples (when shown) use a system monospace fallback, but no second typeface enters the brand canvas.
## 4. Component Stylings ## Layout
### Spacing System
- **Base unit**: 4px (8px primary increment).
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (80px) · `{spacing.hero}` (96px).
- **Section rhythm**: Marketing pages separate at `{spacing.hero}` (96px) above-fold, then `{spacing.section-lg}` (80px) below; documentation tightens to `{spacing.section}` (64px); table rows compress to `{spacing.md}` (16px).
- **Card internal padding**: Vibrant product cards use `{spacing.xxl}` (32px); documentation cards use `{spacing.lg}–{spacing.xl}` (20–24px); promo strips expand to `{spacing.section}` (64px).
### Grid & Container
- Marketing pages use a 1280px max-width with 32px gutters.
- Homepage product matrix renders as a 4-column row of 32px-rounded gradient cards, each ~280–320px wide.
- AI Product Matrix below uses a 4-column grid with 16px-rounded white cards.
- Documentation surfaces use a 3-column layout: left sidebar nav (~220px), center prose body (~720px max-width), right TOC (~180px). Sidebar persists on desktop; collapses to drawer below 1024px.
- Token Plan / pricing pages use 2-column tabs above a 3-column tier card grid.
### Whitespace Philosophy
Marketing pages give product photography and color cards generous breathing room — `{spacing.hero}` (96px) above-the-fold creates visual oxygen for the 80px hero display. Inside documentation, whitespace tightens dramatically: section gaps drop to `{spacing.xxl}` (32px), table rows pack down to `{spacing.md}` (16px), and the sidebar nav uses `{spacing.xs}` (8px) vertical rhythm.
## Elevation & Depth
The system runs predominantly flat. Elevation is reserved for sticky panels, dropdowns, and the rare floating CTA.
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows, form inputs |
| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Card-recommendation, hover-elevated tiles |
| 2 (card) | `rgba(0, 0, 0, 0.08) 0px 4px 6px 0px` | Standard feature cards, dropdowns |
| 3 (atmospheric) | `rgba(0, 0, 0, 0.08) 0px 0px 22px 0px` | Diffuse glow on featured product cards |
| 4 (modal) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Modals, confirmation dialogs, sticky panels |
### Decorative Depth
- The vibrant gradient product cards carry their own atmospheric depth via internal radial gradients and silhouette imagery — no shadow needed; the color does the work.
- Brand-tinted shadows (`rgba(44, 30, 116, 0.16) 0px 0px 15px`) appear under purple-themed cards for subtle ambient lift.
- Dotted/grain textures occasionally appear inside product cards as photographic-content decoration; these are not formalized as system tokens.
## Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Code chips, micro-controls |
| `{rounded.sm}` | 6px | Compact controls, table cells |
| `{rounded.md}` | 8px | Inputs, secondary buttons, search pill |
| `{rounded.lg}` | 12px | Documentation cards, recommendation tiles |
| `{rounded.xl}` | 16px | Standard feature cards, AI product tiles |
| `{rounded.xxl}` | 20px | Larger feature panels |
| `{rounded.xxxl}` | 24px | AI product tile feature variants |
| `{rounded.hero}` | 32px | Vibrant gradient product cards, promo CTA strip |
| `{rounded.full}` | 9999px | All buttons, all pill tabs, badges |
### Photography Geometry
- Vibrant product cards use 32px corner softening — distinct from the 16px used on quiet white cards. The doubled radius is the visual signature of "this is a featured product moment."
- Product imagery inside cards is treated as photographic content (silhouettes, dark portrait studio lighting) without rounded internal frames.
- Avatar circles (rare, in testimonials) are `{rounded.full}` — perfect circles.
## Components
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
### Buttons ### Buttons
**Pill Primary Dark** **`button-primary`** — Black pill primary CTA, the dominant action across all surfaces.
- Background: `#181e25` - Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
- Text: `#ffffff` - Pressed state `button-primary-pressed` lifts to `{colors.charcoal}`.
- Padding: 11px 20px - Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.
- Radius: 8px
- Use: Primary CTA ("Get Started", "Learn More")
**Pill Nav** **`button-secondary`** — Outlined pill secondary action, paired with primary in dual-CTA hero patterns.
- Background: `rgba(0, 0, 0, 0.05)` (subtle tint) - Background transparent, text `{colors.ink}`, border `1px solid {colors.ink}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
- Text: `#18181b`
- Radius: 9999px (full pill)
- Use: Navigation tabs, filter toggles
**Pill White** **`button-tertiary`** — White-fill quieter pill, used for tertiary nav and informational CTAs.
- Background: `#ffffff` - Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
- Text: `rgba(24, 30, 37, 0.8)`
- Radius: 9999px
- Opacity: 0.5 (default state)
- Use: Secondary nav, inactive tabs
**Secondary Light** **`button-link`** — Inline text link styled as a subtle button.
- Background: `#f0f0f0` - Background transparent, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `8px 0`. Underline appears on activation.
- Text: `#333333`
- Padding: 11px 20px
- Radius: 8px
- Use: Secondary actions
### Product Cards **`button-icon-circular`** — 36×36px circular utility button (carousel arrows, share, copy).
- Background: Vibrant gradients (pink/purple/orange/blue) - Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.
- Radius: 20px–24px (generous rounding)
- Shadow: `rgba(44, 30, 116, 0.16) 0px 0px 15px` (brand purple glow)
- Content: Product name, model version, descriptive text
- Each card has its own color palette matching the product identity
### AI Product Cards (Matrix) ### Vibrant Product Cards
- Background: white with subtle shadow
- Radius: 13px–16px
- Shadow: `rgba(0, 0, 0, 0.08) 0px 4px 6px`
- Icon/illustration centered above product name
- Product name in DM Sans 14–16px weight 500
### Links **`product-card-coral`** — M2.7 / Token Plan signature card.
- **Primary**: `#18181b` or `#181e25`, underline on dark text - Background `{colors.brand-coral}`, text `{colors.on-dark}`, rounded `{rounded.hero}` (32px), padding `{spacing.xxl}`.
- **Secondary**: `#8e8e93`, muted for less emphasis - Hosts the M2.7 wordmark in massive `{typography.display-lg}` with white tagline.
- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections
**`product-card-magenta`** — Music 2.6 product showcase.
- Background `{colors.brand-magenta}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
**`product-card-blue`** — Hailuo Video product showcase.
- Background `{colors.brand-blue}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
**`product-card-purple`** — Speech 2.8 / variant product showcase.
- Background `{colors.brand-purple}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
**`product-card-photo`** — Dark portrait product card (homepage S2 placement, video-emotion product).
- Background `{colors.primary}` (black with overlaid product photo), text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
### Cards & Containers
**`card-base`** — Standard documentation/feature card.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
**`card-feature`** — Quieter feature panel on light gray.
- Background `{colors.surface}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.
**`card-recommendation`** — "Recommended Reading" tile in documentation footer.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`.
**`promo-cta-card`** — Bright orange "Refunds of 10%..." promo strip with embedded CTA pill.
- Background `{colors.brand-coral}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.section}`. Embedded button uses `button-tertiary` (white pill on coral) for the "Join Now" action.
**`ai-product-tile`** — White card in the AI Product Matrix grid (Agent, Hailuo Video, MiniMax Audio).
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. Carries an icon/illustration top, title `{typography.card-title}`, description `{typography.body-sm}`.
### Inputs & Forms
**`text-input`** — Standard text field.
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 40px.
**`text-input-focused`** — Activated state.
- Border switches to `2px solid {colors.brand-blue-deep}`.
**`text-input-error`** — Validation error state.
- Border switches to `1px solid #d45656`; error label below in matching red `{typography.body-sm}`.
**`search-pill`** — Documentation top-bar search field.
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 36px, border `1px solid {colors.hairline}`.
### Tabs
**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation (Benchmark / Self-Evaluation / Multi-Agent Collaboration on the M2.7 page).
- Inactive: text `{colors.steel}`, transparent background, padding `{spacing.md} {spacing.lg}`. Active: text shifts to `{colors.ink}`, 2px bottom border in `{colors.ink}`.
**`pill-tab`** + **`pill-tab-active`** — Pricing-page tab nav (Token Plan / Audio Subscription / Video Package).
- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active: background `{colors.primary}`, text `{colors.on-primary}`, no border (or matching black border).
### Badges & Status
**`badge-success`** — Pale-green confirmation badge ("Available", "Active").
- Background `{colors.success-bg}`, text `{colors.success-text}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-new`** — Coral "NEW" / "Live" pill for fresh releases.
- Background `{colors.brand-coral}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-beta`** — Pale-blue "BETA" / informational pill.
- Background `{colors.brand-blue-200}`, text `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-code`** — Inline code-style chip ("Code", "API").
- Background `{colors.brand-blue-200}`, text `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 6px`.
**`promo-banner`** — Sticky black promotional strip ABOVE the top nav ("Invite & Earn — Rewards for Both!").
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.lg}`. Carries one-line copy with optional inline link.
### Data Tables
**`data-table`** — Documentation models comparison table.
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
**`data-table-header`** — Top header row of the data table.
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.caption-bold}`, padding `{spacing.sm} {spacing.md}`.
**`data-table-row`** — Body rows.
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, padding `{spacing.md}`, bottom border `1px solid {colors.hairline-soft}`.
### Navigation ### Navigation
- Clean horizontal nav on white background
- MiniMax logo left-aligned (red accent in logo)
- DM Sans 14px weight 500 for nav items
- Pill-shaped active indicators (9999px radius)
- "Login" text link, minimal right-side actions
- Sticky header behavior
## 5. Layout Principles **Top Navigation (Marketing)** — Sticky white bar with logo, link list, and right-side CTAs.
- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`.
- Left: MiniMax wordmark + horizontal link list (Models, Product, API, Company).
- Right: black-pill "Contact Us" + outlined-pill "Login".
### Spacing System **Top Navigation (Documentation/Platform)** — Compressed nav with center search-pill and right-side account/upgrade CTAs.
- Base unit: 8px - Background `{colors.canvas}`, height ~56px, with search-pill at center and "Documentation / Account / Subscribe" links + black-pill "Sign Up" right.
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px
### Grid & Container **`sidebar-nav-item`** + **`sidebar-nav-item-active`** — Documentation left rail link entries.
- Max content width centered on page - Inactive: background transparent, text `{colors.charcoal}`, typography `{typography.body-sm}`, rounded `{rounded.sm}`, padding `{spacing.xs} {spacing.md}`.
- Product card grids: horizontal scroll or 3–4 column layout - Active: background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`.
- Full-width white sections with contained content
- Dark footer at full-width
### Breakpoints **`doc-toc-item`** — Right-rail table-of-contents links.
| Name | Width | Key Changes | - Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xs} 0`. Active item color shifts to `{colors.ink}`.
|------|-------|-------------|
| Mobile | <768px | Single column, stacked cards |
| Tablet | 768–1024px | 2-column grids |
| Desktop | >1024px | Full layout, horizontal card scrolls |
### Whitespace Philosophy ### Signature Components
- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.
- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct "chapters" of content.
- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.
### Border Radius Scale **`hero-band-marketing`** — Centered hero with massive 80px display + dual-CTA pair.
- Minimal (4px): Small tags, micro badges - Layout: centered headline in `{typography.hero-display}` ({colors.ink}), centered subtitle in `{typography.subtitle}` ({colors.steel}), centered button row (`button-primary` + `button-secondary`).
- Standard (8px): Buttons, small cards
- Comfortable (11px–13px): Medium cards, panels
- Generous (16px–20px): Large product cards
- Large (22px–24px): Hero product cards, major containers
- Pill (30px–32px): Badge pills, rounded panels
- Full (9999px): Buttons, nav tabs
## 6. Depth & Elevation **`product-matrix-grid`** — 4-column horizontal scroll of vibrant gradient product cards (homepage "Full-Stack Model Matrix").
- Each tile uses one of the `product-card-*` variants (coral, magenta, blue, purple, photo).
- Card title in `{typography.display-lg}` (M2.7 wordmark) or `{typography.heading-lg}` (Music 2.6).
- Below the wordmark: thin tagline in `{typography.body-sm}` 80% white opacity.
- Optional badge top-right: `badge-new`.
- Card heights are uniform (~360–400px); the row scrolls horizontally on mobile.
| Level | Treatment | Use | **`ai-product-matrix`** — 4-column grid of white product tiles below the vibrant matrix (Agent / Hailuo Video / Audio / Video).
|-------|-----------|-----| - Each tile is `ai-product-tile` chrome.
| Flat (Level 0) | No shadow | White background, text blocks | - Top: 100px-tall illustration zone (often line-art icon or 3D mark).
| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers | - Below: title in `{typography.card-title}`, description in `{typography.body-sm}` `{colors.steel}`.
| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | Soft glow around elements |
| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | Featured product cards |
| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Lifted cards, hover states |
**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (`rgba(44, 30, 116, ...)`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards. **`docs-prose-block`** — Documentation main content area.
- Max-width ~720px, centered. Body in `{typography.body-md}` `{colors.charcoal}` line-height 1.6.
- Inline code in `{typography.body-md}` monospace fallback with `{colors.surface}` background and `{rounded.xs}` corners.
## 7. Do's and Don'ts **`models-comparison-table`** — Documentation table comparing model sizes and features.
- Uses `data-table` chrome. Each row carries a model name (linkified, in `{colors.ink}` body-sm-medium), a description column (`{colors.charcoal}`), and a features bullet list column.
**`testimonial-stat-row`** — Stats strip ("214,000+ Enterprise Clients & Developers", "0+ Countries Served").
- Horizontal row of 4 stat cells, each cell with a large number in `{typography.heading-lg}` `{colors.ink}` and a label below in `{typography.body-sm}` `{colors.steel}`.
**`footer-region`** — Dense black-canvas multi-column footer.
- Background `{colors.footer-bg}`, padding `{spacing.section} {spacing.xxl}`.
- Top row: MiniMax wordmark ("intelligence with everyone" tagline) and social icons (X, Twitter, GitHub, etc.).
- Body: 4-column link grid (Research / Product / API / Company / News).
- Section headers in `{typography.body-sm-medium}` `{colors.on-dark}`.
**`footer-link`** — Individual link entry inside the footer column.
- Background transparent, text `{colors.muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. Active/visited states do not change color — only opacity shifts on activation.
## Do's and Don'ts
### Do ### Do
- Use white as the dominant background — let product cards provide the color - Use `{colors.primary}` (black) as the dominant CTA — it's the brand's most recognizable interactive element.
- Apply pill radius (9999px) for navigation tabs and toggle buttons - Reserve product brand colors (`{colors.brand-coral}`, `{colors.brand-magenta}`, `{colors.brand-blue}`, `{colors.brand-purple}`) ONLY for product-identity moments — never for general buttons or text.
- Use generous border radius (20px–24px) for product showcase cards - Pair `{rounded.hero}` (32px) gradient cards with `{rounded.xl}` (16px) white cards in the same viewport — the radius contrast is the visual signature.
- Employ the purple-tinted shadow for featured/hero product cards - Apply `{rounded.full}` to every button, every pill tab, every badge.
- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only - Use `{typography.hero-display}` (80px) with -2px letter-spacing for hero displays — never compromise the leading or letter-spacing.
- Use Outfit for display headings, DM Sans for everything functional - Treat each model/product line as a distinct color identity. M2.7 is coral, Music is magenta, Hailuo is blue. These are brand assignments, not free choices.
- Maintain the universal 1.50 line-height across body text
- Let colorful product illustrations/gradients serve as the primary visual interest
### Don't ### Don't
- Don't add colored backgrounds to main content sections — white is structural - Don't use brand-coral or brand-magenta on body text or large surfaces — they lose meaning when overused.
- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core - Don't soften corners on buttons (anything less than `{rounded.full}`); the pill is a brand signature.
- Don't apply the brand pink (`#ea5ec1`) to text or buttons — it's for logo and decorative accents only - Don't introduce a second display typeface; DM Sans handles every role.
- Don't mix more than one display font per section (Outfit OR Poppins, not both) - Don't reduce hero leading below 1.10 — the brand needs that breathing room on the 80px display.
- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text - Don't apply heavy shadows on white cards; flat-with-borders is the documentation default.
- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint - Don't put gradient backgrounds on standard buttons; gradients are reserved for product-card identity moments.
- Don't use Roboto for headings — it's the data/technical context font only
## 8. Responsive Behavior ## Responsive Behavior
### Breakpoints ### Breakpoints
| Name | Width | Key Changes | | Name | Width | Key Changes |
|------|-------|-------------| |---|---|---|
| Mobile | <768px | Single column, stacked product cards, hamburger nav | | Mobile (small) | < 480px | Single column. Hero drops to 40px. Pill nav collapses to hamburger. Product matrix horizontal-scroll. Footer 1-column accordion. |
| Tablet | 768–1024px | 2-column product grids, condensed spacing | | Mobile (large) | 480 – 767px | Same as small but AI product matrix renders 2-up. |
| Desktop | >1024px | Full horizontal card layouts, expanded spacing | | Tablet | 768 – 1023px | 2-column AI product matrix. Pill-tab nav returns. Documentation sidebar collapses to drawer. |
| Desktop | 1024 – 1279px | Full 4-column product matrix; 3-column docs grid (sidebar / body / TOC). |
| Wide Desktop | ≥ 1280px | Wider hero gutters, larger product photography, fixed 220px sidebar. |
### Touch Targets
- Pill buttons render at 38–40px effective height — bumps to 44px on mobile via padding override.
- Circular icon buttons: 36×36px desktop → 44×44px on mobile.
- Form inputs render at 40px height; bumps to 44px on mobile.
- Sidebar nav items render at ~32px tall — bumps to 44px on mobile drawers.
### Collapsing Strategy ### Collapsing Strategy
- Hero: 80px → responsive scaling to ~40px on mobile - **Promo banner** stays full-width; collapses to single line at < 480px with truncation.
- Product card grid: horizontal scroll → 2-column → single column stacked - **Top nav** below 1024px collapses to hamburger; horizontal links move into drawer.
- Navigation: horizontal → hamburger menu - **Documentation grid**: 3-column desktop → sidebar-drawer at < 1024px → single-column with collapsible sidebar at < 768px.
- Footer: multi-column → stacked sections - **Product matrix**: 4-column desktop → horizontal-scroll at < 1024px (carousel-style with snap points).
- Spacing: 64–80px gaps → 32–40px on mobile - **AI Product Matrix**: 4-column → 2-column at tablet → 1-column at mobile.
- **Hero typography**: `{typography.hero-display}` (80px) → 56px at < 1024px → 40px at < 768px → 32px at < 480px.
- **Stats strip**: 4-column → 2×2 at < 768px → 1-column at < 480px.
## 9. Agent Prompt Guide ### Image Behavior
- Product card imagery uses photographic content with internal gradient overlays; lazy-loaded below the fold.
- AI product tile illustrations are SVG-based; remain crisp at all breakpoints.
- Avatar imagery in testimonials uses 1:1 aspect ratio with `{rounded.full}` masking.
### Quick Color Reference ## Iteration Guide
- Background: `#ffffff` (primary), `#181e25` (dark/footer)
- Text: `#222222` (primary), `#45515e` (secondary), `#8e8e93` (muted)
- Brand Blue: `#1456f0` (brand), `#3b82f6` (primary-500), `#2563eb` (hover)
- Brand Pink: `#ea5ec1` (accent only)
- Borders: `#e5e7eb`, `#f2f3f5`
### Example Component Prompts 1. Focus on ONE component at a time. The system has high internal consistency.
- "Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text)." 2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.
- "Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area." 3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs and contrast issues.
- "Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned." 4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-active`).
- "Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500." 5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Headlines step down `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
- "Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout." 6. Keep brand colors (coral, magenta, blue, purple) confined to product-card identity. If a brand color appears on a standard button or generic surface, ask whether it earned that surface.
7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this language.
### Iteration Guide ## Known Gaps
1. Start with white — color comes from product cards and illustrations only
2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons - Specific dark-mode token values (canvas, surface, ink, hairline) are not surfaced on these pages; the brand has not yet shipped a published dark-mode palette.
3. Purple-tinted shadows for featured cards, neutral shadows for everything else - Animation/transition timings are not extracted; recommend 150–200ms ease for hover/focus state transitions.
4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only - Form validation success state is not explicitly captured beyond defaults — implement following standard green-border + success badge patterns.
5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable - Code syntax highlighting palette inside docs is not formalized; documentation samples appear with system-default monospace and minimal coloring.
6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements

1048
design-md/mintlify/DESIGN.md
View File

File diff suppressed because it is too large Load Diff

881
design-md/miro/DESIGN.md
View File

@ -1,108 +1,825 @@
# Design System Inspired by Miro ---
version: alpha
name: Miro
description: Miro presents itself as the AI-powered visual workspace through a confident, almost playful brand voice — anchored by its signature canary yellow ({colors.brand-yellow}) wordmark over white canvas, broken open by colorful pastel feature tints (rose, teal, coral, orange, mint) that echo the actual sticky-note color palette used on the live whiteboard. Black-pill primary buttons dominate marketing, real Miro-board mockups serve as feature illustrations, and a 4-tier pricing grid leads into a dense comparison table. Roobert PRO carries display headlines; the system supports homepage, pricing, AI Workflows product page, agile vertical, and customer stories surfaces.
## 1. Visual Theme & Atmosphere colors:
primary: "#1c1c1e"
on-primary: "#ffffff"
brand-yellow: "#ffd02f"
brand-yellow-deep: "#fcb900"
yellow-light: "#fff4c4"
yellow-dark: "#746019"
brand-blue: "#4262ff"
blue-450: "#5b76fe"
blue-pressed: "#2a41b6"
brand-coral: "#ff9999"
coral-light: "#ffc6c6"
coral-dark: "#600000"
brand-rose: "#ffd8f4"
rose-light: "#fde0f0"
brand-pink: "#fde0f0"
brand-teal: "#0fbcb0"
teal-light: "#c3faf5"
moss-dark: "#187574"
brand-orange-light: "#ffe6cd"
brand-red: "#fbd4d4"
brand-red-dark: "#e3c5c5"
success-accent: "#00b473"
canvas: "#ffffff"
surface: "#f7f8fa"
surface-soft: "#fafbfc"
surface-yellow: "#fff8e0"
surface-pricing-featured: "#f5f3ff"
hairline: "#e0e2e8"
hairline-soft: "#eef0f3"
hairline-strong: "#c7cad5"
ink-deep: "#050038"
ink: "#1c1c1e"
charcoal: "#2c2c34"
slate: "#555a6a"
steel: "#6b6f7e"
stone: "#8e91a0"
muted: "#a5a8b5"
on-dark: "#ffffff"
on-dark-muted: "#a5a8b5"
footer-bg: "#1c1c1e"
Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing different collaboration contexts. typography:
hero-display:
fontFamily: Roobert PRO
fontSize: 80px
fontWeight: 500
lineHeight: 1.05
letterSpacing: -2px
display-lg:
fontFamily: Roobert PRO
fontSize: 60px
fontWeight: 500
lineHeight: 1.10
letterSpacing: -1.5px
heading-1:
fontFamily: Roobert PRO
fontSize: 48px
fontWeight: 500
lineHeight: 1.15
letterSpacing: -1px
heading-2:
fontFamily: Roobert PRO
fontSize: 36px
fontWeight: 500
lineHeight: 1.20
letterSpacing: -0.5px
heading-3:
fontFamily: Roobert PRO
fontSize: 28px
fontWeight: 500
lineHeight: 1.25
heading-4:
fontFamily: Roobert PRO
fontSize: 22px
fontWeight: 500
lineHeight: 1.30
heading-5:
fontFamily: Roobert PRO
fontSize: 18px
fontWeight: 500
lineHeight: 1.40
subtitle:
fontFamily: Roobert PRO
fontSize: 18px
fontWeight: 400
lineHeight: 1.50
body-md:
fontFamily: Roobert PRO
fontSize: 16px
fontWeight: 400
lineHeight: 1.50
body-md-medium:
fontFamily: Roobert PRO
fontSize: 16px
fontWeight: 500
lineHeight: 1.50
body-sm:
fontFamily: Roobert PRO
fontSize: 14px
fontWeight: 400
lineHeight: 1.50
body-sm-medium:
fontFamily: Roobert PRO
fontSize: 14px
fontWeight: 500
lineHeight: 1.50
caption:
fontFamily: Roobert PRO
fontSize: 13px
fontWeight: 400
lineHeight: 1.40
caption-bold:
fontFamily: Roobert PRO
fontSize: 13px
fontWeight: 600
lineHeight: 1.40
micro:
fontFamily: Roobert PRO
fontSize: 12px
fontWeight: 500
lineHeight: 1.40
micro-uppercase:
fontFamily: Roobert PRO
fontSize: 11px
fontWeight: 600
lineHeight: 1.40
letterSpacing: 0.5px
button-md:
fontFamily: Roobert PRO
fontSize: 14px
fontWeight: 500
lineHeight: 1.30
stat-display:
fontFamily: Roobert PRO
fontSize: 64px
fontWeight: 500
lineHeight: 1.10
letterSpacing: -1.5px
The typography uses Roobert PRO Medium as the primary display font with OpenType character variants (`"blwf", "cv03", "cv04", "cv09", "cv11"`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (`"liga" 0, "ss01", "ss04", "ss05"`). The design is built with Framer, giving it smooth animations and modern component patterns. rounded:
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
xxl: 20px
xxxl: 28px
feature: 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: 96px
hero: 120px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "12px 24px"
button-primary-pressed:
backgroundColor: "{colors.charcoal}"
textColor: "{colors.on-primary}"
button-primary-disabled:
backgroundColor: "{colors.hairline}"
textColor: "{colors.muted}"
button-yellow:
backgroundColor: "{colors.brand-yellow}"
textColor: "{colors.primary}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "12px 24px"
button-blue:
backgroundColor: "{colors.brand-blue}"
textColor: "{colors.on-primary}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "12px 24px"
button-secondary:
backgroundColor: "transparent"
textColor: "{colors.ink}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "12px 24px"
border: "1px solid {colors.hairline-strong}"
button-on-dark:
backgroundColor: "{colors.on-dark}"
textColor: "{colors.primary}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "12px 24px"
button-ghost:
backgroundColor: "transparent"
textColor: "{colors.ink}"
typography: "{typography.button-md}"
rounded: "{rounded.md}"
padding: "8px 12px"
button-link:
backgroundColor: "transparent"
textColor: "{colors.brand-blue}"
typography: "{typography.body-sm-medium}"
padding: "0"
button-icon-circular:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
rounded: "{rounded.full}"
size: 36px
border: "1px solid {colors.hairline}"
card-base:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline-soft}"
card-feature:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xxxl}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
card-feature-yellow:
backgroundColor: "{colors.brand-yellow}"
textColor: "{colors.primary}"
rounded: "{rounded.xxxl}"
padding: "{spacing.xxl}"
card-feature-coral:
backgroundColor: "{colors.coral-light}"
textColor: "{colors.primary}"
rounded: "{rounded.xxxl}"
padding: "{spacing.xxl}"
card-feature-teal:
backgroundColor: "{colors.teal-light}"
textColor: "{colors.primary}"
rounded: "{rounded.xxxl}"
padding: "{spacing.xxl}"
card-feature-rose:
backgroundColor: "{colors.rose-light}"
textColor: "{colors.primary}"
rounded: "{rounded.xxxl}"
padding: "{spacing.xxl}"
card-customer-story:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xxxl}"
padding: "0"
border: "1px solid {colors.hairline-soft}"
card-stat:
backgroundColor: "transparent"
textColor: "{colors.ink}"
typography: "{typography.stat-display}"
padding: "{spacing.lg}"
pricing-card:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline}"
pricing-card-featured:
backgroundColor: "{colors.surface-pricing-featured}"
rounded: "{rounded.xl}"
padding: "{spacing.xxl}"
border: "2px solid {colors.brand-blue}"
pricing-card-enterprise:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
rounded: "{rounded.xl}"
padding: "{spacing.xxl}"
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-strong}"
height: 44px
text-input-focused:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
border: "2px solid {colors.brand-blue}"
search-pill:
backgroundColor: "{colors.surface}"
textColor: "{colors.steel}"
typography: "{typography.body-sm}"
rounded: "{rounded.md}"
padding: "{spacing.xs} {spacing.md}"
height: 40px
border: "1px solid {colors.hairline}"
filter-dropdown:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm-medium}"
rounded: "{rounded.full}"
padding: "{spacing.xs} {spacing.md}"
border: "1px solid {colors.hairline-strong}"
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}"
toggle-monthly-yearly:
backgroundColor: "{colors.surface}"
textColor: "{colors.ink}"
rounded: "{rounded.full}"
padding: "4px"
badge-promo:
backgroundColor: "{colors.brand-yellow}"
textColor: "{colors.primary}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-tag-yellow:
backgroundColor: "{colors.surface-yellow}"
textColor: "{colors.yellow-dark}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-tag-purple:
backgroundColor: "{colors.surface-pricing-featured}"
textColor: "{colors.brand-blue}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-tag-coral:
backgroundColor: "{colors.coral-light}"
textColor: "{colors.coral-dark}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-success:
backgroundColor: "{colors.success-accent}"
textColor: "{colors.on-primary}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-discount:
backgroundColor: "{colors.brand-yellow}"
textColor: "{colors.primary}"
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.md}"
comparison-table:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
rounded: "{rounded.md}"
border: "1px solid {colors.hairline}"
comparison-row:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
padding: "{spacing.md} {spacing.lg}"
border: "0 0 1px {colors.hairline-soft} solid"
template-card:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.md}"
border: "1px solid {colors.hairline}"
whiteboard-mockup:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "0"
border: "1px solid {colors.hairline-soft}"
shadow: "rgba(5, 0, 56, 0.08) 0px 12px 32px -4px"
faq-accordion-item:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.md}"
padding: "{spacing.xl}"
border: "0 0 1px {colors.hairline} solid"
logo-wall-item:
backgroundColor: "transparent"
textColor: "{colors.steel}"
typography: "{typography.body-md-medium}"
padding: "{spacing.lg}"
hero-band-marketing:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.hero-display}"
rounded: "0"
padding: "{spacing.hero}"
cta-banner-dark:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
rounded: "{rounded.feature}"
padding: "{spacing.section}"
industry-tile:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline-soft}"
capterra-badge:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.caption}"
rounded: "{rounded.md}"
padding: "{spacing.sm} {spacing.md}"
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.on-dark-muted}"
typography: "{typography.body-sm}"
padding: "{spacing.xxs} 0"
app-store-badge:
backgroundColor: "{colors.canvas}"
textColor: "{colors.primary}"
typography: "{typography.caption-bold}"
rounded: "{rounded.md}"
padding: "{spacing.sm} {spacing.md}"
---
## Overview
Miro positions itself as the AI-powered visual workspace through a confident, slightly playful brand voice. The homepage opens with a stark white canvas anchored by a small canary-yellow Miro wordmark in the top-left, a black-pill primary CTA "Get started free" and a secondary "Book a demo" outline pill — then dramatic real-Miro-board mockup imagery (sticky notes, kanban, mind maps) carries the visual weight. Across deeper surfaces, the system breaks open: pastel feature cards (rose, teal, coral, yellow) echo the actual sticky-note color palette of the live whiteboard product, and customer story cards reuse those tints to differentiate brand vignettes.
Roobert PRO — Miro's custom display face — anchors every typographic surface, from the 80px hero display down to 11px micro labels. The face's slightly rounded, geometric character pairs naturally with the playful product photography and the friendly product positioning. Black-pill primary buttons (`{rounded.full}`) dominate marketing CTAs; the brand color, signature canary yellow ({colors.brand-yellow}), is reserved for the wordmark, top promo banners, and "yellow tag" feature pills — never as a primary CTA. The 4-tier pricing comparison (Free / Starter / Business / Enterprise) leads into the densest surface in the system: a feature comparison table that runs ~80 rows deep across multiple section dividers.
**Key Characteristics:** **Key Characteristics:**
- White canvas with near-black (`#1c1c1e`) text - Stark white canvas + Miro wordmark in canary yellow ({colors.brand-yellow}) as the recognizable opening signature
- Roobert PRO Medium with multiple OpenType character variants - Black-pill primary CTAs ({colors.primary} + `{rounded.full}`) as the dominant interactive element
- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs) - Pastel feature cards (yellow, rose, coral, teal, mint) that echo the actual sticky-note palette
- Blue 450 (`#5b76fe`) as primary interactive color - Roobert PRO across every UI surface; geometric, slightly rounded character
- Success green (`#00b473`) for positive states - Real Miro-board mockup imagery used as feature illustrations
- Generous border-radius: 8px–50px range - 4-tier pricing card grid + dense feature comparison table
- Framer-built with smooth motion patterns - Massive dark footer ({colors.footer-bg}) with multi-column links + app-store badges
- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`
## 2. Color Palette & Roles ## Colors
### Primary > Source pages: miro.com/ (homepage), /pricing/ (4-tier comparison), /products/ai-workflows/ (AI product), /agile/ (vertical landing), /customers/ (story directory). Token coverage was identical across all five pages.
- **Near Black** (`#1c1c1e`): Primary text
- **White** (`#ffffff`): `--tw-color-white`, primary surface
- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive
- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`
### Pastel Accents (Light/Dark pairs) ### Brand & Accent
- **Coral**: Light `#ffc6c6` / Dark `#600000` - **Miro Yellow** ({colors.brand-yellow}): The brand's recognizable canary yellow — wordmark color, top promo banner, "yellow tag" pills
- **Rose**: Light `#ffd8f4` / Dark (implied) - **Yellow Deep** ({colors.brand-yellow-deep}): Darker variant for hover states and emphasis
- **Teal**: Light `#c3faf5` / Dark `#187574` - **Yellow Light** ({colors.yellow-light}): Pale yellow background tint for tag chips
- **Orange**: Light `#ffe6cd` - **Yellow Dark** ({colors.yellow-dark}): Yellow-tag text color (dark olive) for chip foreground
- **Yellow**: Dark `#746019` - **Brand Blue** ({colors.brand-blue}): Action blue for inline links and featured-pricing-tier border
- **Moss**: Dark `#187574` - **Blue Pressed** ({colors.blue-pressed}): Pressed-state blue
- **Pink** (`#fde0f0`): Soft pink surface - **Brand Coral** ({colors.brand-coral}): Coral accent for warm callouts
- **Red** (`#fbd4d4`): Light red surface - **Coral Light** ({colors.coral-light}): Pale coral for feature card backgrounds
- **Dark Red** (`#e3c5c5`): Muted red - **Coral Dark** ({colors.coral-dark}): Coral-tag text color (deep wine)
- **Brand Rose** ({colors.brand-rose}): Soft rose-pink for feature card variants
- **Brand Teal** ({colors.brand-teal}): Brand teal
- **Teal Light** ({colors.teal-light}): Pale teal for feature card backgrounds
- **Moss Dark** ({colors.moss-dark}): Deep teal-green text color
- **Brand Pink** ({colors.brand-pink}): Pale pink for soft callouts
- **Brand Orange Light** ({colors.brand-orange-light}): Soft orange for feature card backgrounds
### Surface
- **Canvas White** ({colors.canvas}): Page background and primary card surface
- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest
- **Surface Soft** ({colors.surface-soft}): Quieter section divisions
- **Surface Yellow** ({colors.surface-yellow}): Pale yellow-tinted surface for tag chip
- **Surface Pricing Featured** ({colors.surface-pricing-featured}): Pale lavender for featured pricing tier
- **Hairline** ({colors.hairline}): 1px borders and primary dividers
- **Hairline Soft** ({colors.hairline-soft}): Quieter table-row dividers
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs
### Text
- **Ink Deep** ({colors.ink-deep}): Headlines on lighter feature cards
- **Ink** ({colors.ink}): Primary headlines and body text
- **Charcoal** ({colors.charcoal}): Body emphasis text
- **Slate** ({colors.slate}): Secondary text, metadata
- **Steel** ({colors.steel}): Tertiary text, footer links
- **Stone** ({colors.stone}): Captions, muted labels
- **Muted** ({colors.muted}): Disabled labels, input placeholders
- **On Dark** ({colors.on-dark}): White text on dark surfaces
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white on dark
### Semantic ### Semantic
- **Success** (`#00b473`): `--tw-color-success-accent` - **Success Accent** ({colors.success-accent}): Confirmation/success indicator green
- **Brand Red** ({colors.brand-red}): Soft red for error backgrounds
- **Brand Red Dark** ({colors.brand-red-dark}): Stronger red for error borders
### Neutral ## Typography
- **Slate** (`#555a6a`): Secondary text
- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`
- **Border** (`#c7cad5`): Button borders
- **Ring** (`rgb(224,226,232)`): Shadow-as-border
## 3. Typography Rules ### Font Family
**Roobert PRO** (primary): Miro's custom geometric sans-serif typeface. Used across every UI surface from oversized 80px hero displays to 11px micro labels. The face has a slightly rounded, friendly character that matches the brand's playful product positioning. Fallbacks: Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif.
### Font Families
- **Display**: `Roobert PRO Medium`, fallback: Placeholder — `"blwf", "cv03", "cv04", "cv09", "cv11"`
- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`
- **Body**: `Noto Sans` — `"liga" 0, "ss01", "ss04", "ss05"`
### Hierarchy ### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | | Token | Size | Weight | Line Height | Letter Spacing | Use |
|------|------|------|--------|-------------|----------------| |---|---|---|---|---|---|
| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px | | `{typography.hero-display}` | 80px | 500 | 1.05 | -2px | Marketing hero ("See how teams get great done with Miro") |
| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px | | `{typography.display-lg}` | 60px | 500 | 1.10 | -1.5px | Major section openers |
| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px | | `{typography.heading-1}` | 48px | 500 | 1.15 | -1px | Page-level headlines |
| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px | | `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Subsection headlines |
| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal | | `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Card titles |
| Body | Noto Sans | 18px | 400 | 1.45 | normal | | `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Feature tile titles |
| Body Standard | Noto Sans | 16px | 400–600 | 1.50 | -0.16px | | `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | FAQ questions, smaller cards |
| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px | | `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle |
| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal | | `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |
| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px | | `{typography.body-md-medium}` | 16px | 500 | 1.50 | 0 | Logo wall labels |
| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase | | `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells |
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Filter dropdowns, button labels |
| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Helper text |
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels, tag chips |
| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Footer microcopy |
| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 0.5px | Section dividers in tables |
| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Pill button labels |
| `{typography.stat-display}` | 64px | 500 | 1.10 | -1.5px | "100M+ users" stat callouts |
## 4. Component Stylings ### Principles
- **Tight hero leading** (1.05) creates magazine-grade display headlines on the 80px hero
- **Negative letter-spacing progression** — display sizes use -2px to -1.5px; smaller headings relax to 0
- **Stat-display token** (64px / 500) for marketing stat callouts
- **Single weight scale** — 400 (body), 500 (medium emphasis + headings), 600 (badges and uppercase). Roobert PRO does not use 700 in this system.
## Layout
### Spacing System
- **Base unit**: 4px (8px primary increment)
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (96px) · `{spacing.hero}` (120px)
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing comparison tightens to `{spacing.section}` (64px); customer story stack uses `{spacing.xxl}` (32px)
- **Card internal padding**: `{spacing.xl}` (24px) for compact cards; `{spacing.xxl}` (32px) for feature panels
### Grid & Container
- Marketing pages use 1280px max-width with 32px gutters
- Pricing page renders 4-tier card row at desktop (Free / Starter / Business / Enterprise)
- Customer stories page uses 2-column grid with filter dropdowns
- AI Workflows page uses 2-column hero, then 3-up feature grid
### Whitespace Philosophy
Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding gives the small wordmark room to breathe. Pricing surfaces tighten dramatically.
## Elevation & Depth
The system runs predominantly flat with strategic depth on hero mockups.
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow; `{colors.hairline-soft}` border | Default cards, table rows, form inputs |
| 1 (subtle) | `rgba(5, 0, 56, 0.04) 0px 1px 2px 0px` | Subtle hover-elevated tiles |
| 2 (card) | `rgba(5, 0, 56, 0.06) 0px 4px 12px 0px` | Standard feature cards |
| 3 (mockup) | `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px` | Hero whiteboard mockup framing |
| 4 (modal) | `rgba(5, 0, 56, 0.12) 0px 16px 48px -8px` | Modals, dropdowns |
### Decorative Depth
- The atmospheric depth on Miro's hero comes from the live-product-board mockup illustrations — sticky notes layered at z-offsets, color-block tints behind whiteboard frames
- Pastel feature cards carry their own visual weight via saturated background color
- Customer-story cards layer dark photographic content with overlay scrims
## Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Small chips, micro-controls |
| `{rounded.sm}` | 6px | Discount badges |
| `{rounded.md}` | 8px | Inputs, search-pill |
| `{rounded.lg}` | 12px | Standard cards, table containers |
| `{rounded.xl}` | 16px | Pricing cards, feature panels |
| `{rounded.xxl}` | 20px | Larger feature cards |
| `{rounded.xxxl}` | 28px | Pastel feature cards (yellow, rose, coral, teal) |
| `{rounded.feature}` | 32px | Hero CTA banner cards |
| `{rounded.full}` | 9999px | All buttons, pill tabs, badges |
### Photography Geometry
- Real Miro board mockups render with `{rounded.xl}` (16px) corners and a subtle drop shadow
- Customer story cards use `{rounded.xxxl}` (28px) corners with full-bleed photography
- Template card thumbnails use `{rounded.xl}` (16px) with photographic content
- Customer logos wall presents wordmarks inline at consistent 100px height
## Components
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
### Buttons ### Buttons
- Outlined: transparent bg, `1px solid #c7cad5`, 8px radius, 7px 12px padding
- White circle: 50% radius, white bg with shadow
- Blue primary (implied from interactive color)
### Cards: 12px–24px radius, pastel backgrounds **`button-primary`** — Black pill primary CTA, the dominant action ("Get started free").
### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding - Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
- Pressed state `button-primary-pressed` lifts to `{colors.charcoal}`.
- Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.
## 5. Layout Principles **`button-yellow`** — Brand-yellow pill for moments of brand emphasis.
- Spacing: 1–24px base scale - Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers)
- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`
## 6. Depth & Elevation **`button-blue`** — Brand-blue pill for inline action callouts.
Minimal — ring shadow + pastel surface contrast - Background `{colors.brand-blue}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
**`button-secondary`** — Outlined pill for secondary actions ("Book a demo").
- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
**`button-on-dark`** — White pill for dark CTA banners.
- Background `{colors.on-dark}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
**`button-ghost`** — Quieter rectangular ghost button.
- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`.
**`button-link`** — Inline text link.
- Background transparent, text `{colors.brand-blue}`, typography `{typography.body-sm-medium}`, padding `0`.
**`button-icon-circular`** — 36×36px circular utility button.
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.
### Cards & Containers
**`card-base`** — Standard content card.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
**`card-feature`** — White feature card with larger 28px corners.
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.
**`card-feature-yellow`** — Pastel-yellow feature card.
- Background `{colors.brand-yellow}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
**`card-feature-coral`** — Pastel-coral feature card variant.
- Background `{colors.coral-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
**`card-feature-teal`** — Pastel-teal feature card variant.
- Background `{colors.teal-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
**`card-feature-rose`** — Pastel-rose feature card variant.
- Background `{colors.rose-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
**`card-customer-story`** — Customer story card.
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `0` (image fills the card), border `1px solid {colors.hairline-soft}`.
**`card-stat`** — Stat-row cell for "100M+ users".
- Background transparent, text `{colors.ink}`, typography `{typography.stat-display}`, padding `{spacing.lg}`.
**`pricing-card`** — Standard pricing tier card.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
**`pricing-card-featured`** — Featured pricing tier (Business — lavender background + blue border).
- Background `{colors.surface-pricing-featured}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `2px solid {colors.brand-blue}`.
**`pricing-card-enterprise`** — Dark-canvas enterprise tier card.
- Background `{colors.primary}`, text `{colors.on-primary}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.
### Inputs & Forms
**`text-input`** — Standard text field.
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.
**`text-input-focused`** — Activated state.
- Border switches to `2px solid {colors.brand-blue}`.
**`search-pill`** — Search bar.
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 40px, border `1px solid {colors.hairline}`.
**`filter-dropdown`** — Pill-shaped filter dropdown ("Company use" / "Industry" / "Use case").
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`, rounded `{rounded.full}`, padding `{spacing.xs} {spacing.md}`, border `1px solid {colors.hairline-strong}`.
### Tabs
**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav.
- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active: background `{colors.primary}`, text `{colors.on-primary}`.
**`toggle-monthly-yearly`** — Two-state pill toggle (Monthly / Annual on pricing).
- Background `{colors.surface}`, rounded `{rounded.full}`, padding `4px`.
### Badges & Status
**`badge-promo`** — Yellow promo banner badge.
- Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-tag-yellow`** — Soft-yellow feature tag chip ("Yellow" tag on AI Workflows page).
- Background `{colors.surface-yellow}`, text `{colors.yellow-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-tag-purple`** — Lavender feature tag chip ("AI agent" tag).
- Background `{colors.surface-pricing-featured}`, text `{colors.brand-blue}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-tag-coral`** — Coral feature tag chip variant.
- Background `{colors.coral-light}`, text `{colors.coral-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-success`** — Green success indicator.
- Background `{colors.success-accent}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-discount`** — Yellow rectangular discount pill ("Save 15%").
- Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 6px`.
**`promo-banner`** — Sticky black promo strip ABOVE the top nav.
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. Carries inline yellow "GET YOUR SPOT" pill.
### Tables
**`comparison-table`** — Pricing feature comparison table.
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
**`comparison-row`** — Individual feature row.
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.
### Documentation Components
**`whiteboard-mockup`** — Real Miro-board UI rendered as feature illustration.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px`.
**`template-card`** — Template thumbnail card.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}`, border `1px solid {colors.hairline}`.
**`industry-tile`** — Industry-vertical tile.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
**`faq-accordion-item`** — FAQ panel item.
- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.
**`logo-wall-item`** — Customer logo wordmark cell.
- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
**`capterra-badge`** — Review/rating badge in the footer.
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.caption}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, border `1px solid {colors.hairline}`.
**`app-store-badge`** — App store / Google Play download pill.
- Background `{colors.canvas}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`.
### Navigation
**Top Navigation (Marketing)** — Sticky white bar with yellow Miro wordmark + horizontal links + right-side CTAs.
- Background `{colors.canvas}`, height ~64px.
- Left: Yellow square Miro wordmark + horizontal link list (Product, Solutions, Resources).
- Right: "Login / Pricing / Contact sales" links + black-pill "Get started free".
### Signature Components
**`hero-band-marketing`** — Marketing hero band.
- Background `{colors.canvas}`, padding `{spacing.hero}`.
- Layout: centered headline in `{typography.hero-display}`, centered subtitle, centered button row, then whiteboard mockup illustration below.
**`cta-banner-dark`** — Dark CTA banner at the bottom of feature pages.
- Background `{colors.primary}`, text `{colors.on-primary}`, rounded `{rounded.feature}`, padding `{spacing.section}`. Centered headline + subtitle + `button-on-dark` "Get started free".
**`footer-region`** — Massive multi-column dark footer.
- Background `{colors.footer-bg}`, padding `{spacing.section} {spacing.xxl}`.
- 6-column link grid (Product / Solutions / Tools / Resources / Company / Plans & Pricing).
- Section headings in `{typography.body-md-medium}` `{colors.on-dark}`.
**`footer-link`** — Individual link in the footer.
- Background transparent, text `{colors.on-dark-muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
## Do's and Don'ts
## 7. Do's and Don'ts
### Do ### Do
- Use pastel light/dark pairs for feature sections - Reserve `{colors.brand-yellow}` for the wordmark, top promo banner, and "yellow tag" chips
- Apply Roobert PRO with OpenType character variants - Use `{colors.primary}` (black) as the dominant CTA on all surfaces
- Use Blue 450 (#5b76fe) for interactive elements - Pair pastel feature cards (yellow, rose, coral, teal) with white feature cards in the same viewport
- Apply `{rounded.full}` to every button, every pill tab, every status badge
- Apply `{rounded.xxxl}` (28px) to pastel feature cards
- Use real Miro-board mockups as feature illustrations
- Maintain Roobert PRO across every UI surface
### Don't ### Don't
- Don't use heavy shadows - Don't use `{colors.brand-yellow}` on standard CTAs or large background surfaces
- Don't mix more than 2 pastel accents per section - Don't introduce additional accent colors beyond yellow + brand pastels
- Don't soften corners on buttons; the pill is a brand signature
- Don't reduce hero leading below 1.05
- Don't apply heavy shadows on flat documentation cards; reserve elevation for whiteboard mockups
- Don't use stock photography — show the live product board UI
## 8. Responsive Behavior ## Responsive Behavior
Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px
## 9. Agent Prompt Guide ### Breakpoints
### Quick Color Reference | Name | Width | Key Changes |
- Text: Near Black (`#1c1c1e`) |---|---|---|
- Background: White (`#ffffff`) | Mobile (small) | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. |
- Interactive: Blue 450 (`#5b76fe`) | Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 48px. |
- Success: `#00b473` | Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. |
- Border: `#c7cad5` | Desktop | 1024 – 1279px | 4-tier pricing card row. Customer story grid 2-up. Hero at 64px. |
### Example Component Prompts | Wide Desktop | ≥ 1280px | Full hero presentation, 80px hero display. |
- "Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius)."
### Touch Targets
- Pill buttons render at 40–44px effective height — at WCAG AAA floor
- Circular icon buttons: 36×36px desktop → 44×44px mobile
- Form inputs render at 44px height
- Filter dropdowns render at ~36px tall — bumps to 44px on mobile
### Collapsing Strategy
- **Promo banner** stays full-width; truncates at < 480px
- **Top nav** below 1024px collapses to hamburger
- **Hero band**: 2-column hero collapses to stacked at < 1024px
- **Pricing comparison**: 4-column tiers → 2-column tablet → 1-column mobile; comparison table becomes horizontal-scroll
- **Customer story grid**: 2-up → 1-up at < 768px
- **Hero typography**: 80px → 60px tablet → 48px mobile-large → 36px mobile-small
- **Footer**: 6-column desktop → 3-column tablet → 2-column mobile → accordion at small mobile
### Image Behavior
- Whiteboard mockups maintain aspect ratio; lazy-loaded below the fold
- Customer story photography uses 16:9 ratio with full-bleed scaling
- Logo wall presents wordmarks at consistent 100px height
## Iteration Guide
1. Focus on ONE component at a time
2. Reference component names and tokens directly
3. Run `npx @google/design.md lint DESIGN.md` after edits
4. Add new variants as separate `components:` entries
5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis
6. Keep `{colors.brand-yellow}` confined to wordmark, promo banner, and yellow-tag chips
7. Pill-shaped buttons (`{rounded.full}`) always
8. When showing the product, use a real Miro-board mockup with sticky-note color tints
## Known Gaps
- Specific dark-mode token values not surfaced
- Animation/transition timings not extracted; recommend 150–200ms ease
- Form validation success state not explicitly captured beyond defaults
- Sticky note color tints inside the actual whiteboard product are richer than what marketing surfaces capture

914
design-md/mistral.ai/DESIGN.md
View File

@ -1,261 +1,773 @@
# Design System Inspired by Mistral AI ---
version: alpha
name: Mistral AI
description: Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal "sunset stripe" bar that closes every page. The system pairs warm cream-yellow surfaces ({colors.cream}) with a saturated orange primary CTA ({colors.primary}) and uses an elegant near-serif voice for hero displays. Coverage spans homepage (Frontier AI hero), Le Studio product page, Coding solutions, news article surfaces, contact form, and services tier page — all anchored by the signature gradient closing band.
## 1. Visual Theme & Atmosphere colors:
primary: "#fa520f"
primary-deep: "#cc3a05"
on-primary: "#ffffff"
sunshine-300: "#ffd06a"
sunshine-500: "#ffb83e"
sunshine-700: "#ffa110"
sunshine-800: "#ff8105"
sunshine-900: "#ff8a00"
yellow-saturated: "#ffd900"
cream: "#fff8e0"
cream-light: "#fffaeb"
cream-deeper: "#fff0c2"
beige-deep: "#e6d5a8"
block-5: "#ffe295"
block-6: "#ffd900"
block-7: "#ff8105"
ink: "#1f1f1f"
ink-tint: "#3d3d3d"
charcoal: "#2c2c2c"
slate: "#4a4a4a"
steel: "#6a6a6a"
stone: "#8a8a8a"
muted: "#a8a8a8"
hairline: "#e5e5e5"
hairline-soft: "#ededed"
hairline-strong: "#c7c7c7"
canvas: "#ffffff"
surface: "#fafafa"
surface-cream: "#fff8e0"
surface-cream-soft: "#fffaeb"
surface-code: "#1c1c1e"
on-dark: "#ffffff"
on-dark-muted: "#a8a8a8"
on-cream: "#1f1f1f"
footer-cream: "#fff8e0"
link: "#fa520f"
Mistral AI's interface is a sun-drenched landscape rendered in code — a warm, bold, unapologetically European design that trades the typical blue-screen AI aesthetic for golden amber, burnt orange, and the feeling of late-afternoon light in southern France. Every surface glows with warmth: backgrounds fade from pale cream to deep amber, shadows carry golden undertones (`rgba(127, 99, 21, ...)`), and the brand's signature orange (`#fa520f`) burns through the page like a signal fire. typography:
hero-display:
fontFamily: PP Editorial Old
fontSize: 84px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -1.5px
display-lg:
fontFamily: PP Editorial Old
fontSize: 64px
fontWeight: 400
lineHeight: 1.10
letterSpacing: -1px
heading-1:
fontFamily: PP Editorial Old
fontSize: 52px
fontWeight: 400
lineHeight: 1.15
letterSpacing: -0.5px
heading-2:
fontFamily: Inter
fontSize: 36px
fontWeight: 500
lineHeight: 1.20
letterSpacing: -0.5px
heading-3:
fontFamily: Inter
fontSize: 28px
fontWeight: 500
lineHeight: 1.25
heading-4:
fontFamily: Inter
fontSize: 22px
fontWeight: 500
lineHeight: 1.30
heading-5:
fontFamily: Inter
fontSize: 18px
fontWeight: 500
lineHeight: 1.40
subtitle:
fontFamily: Inter
fontSize: 18px
fontWeight: 400
lineHeight: 1.50
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.55
body-md-medium:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.55
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.50
body-sm-medium:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.50
caption:
fontFamily: Inter
fontSize: 13px
fontWeight: 400
lineHeight: 1.40
caption-bold:
fontFamily: Inter
fontSize: 13px
fontWeight: 600
lineHeight: 1.40
micro:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.40
micro-uppercase:
fontFamily: Inter
fontSize: 11px
fontWeight: 600
lineHeight: 1.40
letterSpacing: 1px
button-md:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.30
stat-display:
fontFamily: PP Editorial Old
fontSize: 56px
fontWeight: 400
lineHeight: 1.10
letterSpacing: -1px
code-md:
fontFamily: JetBrains Mono
fontSize: 14px
fontWeight: 400
lineHeight: 1.50
The design language is maximalist in its warmth but minimalist in its structure. Huge display headlines (82px) crash into the viewport with aggressive negative tracking (-2.05px), creating text blocks that feel like billboards or protest posters — declarations rather than descriptions. The typography uses Arial (likely a custom font with Arial as fallback) at extreme sizes, creating a raw, unadorned voice that says "we build frontier AI" with no decoration needed. rounded:
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
xxl: 20px
full: 9999px
What makes Mistral distinctive is the complete commitment to a warm color temperature. The signature "block" identity — a gradient system flowing from bright yellow (`#ffd900`) through amber (`#ffa110`) to burnt orange (`#fa520f`) — creates a visual identity that's immediately recognizable. Even the shadows are warm, using amber-tinted blacks instead of cool grays. Combined with dramatic landscape photography in golden tones, the design feels less like a tech company and more like a European luxury brand that happens to build language models. spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section-sm: 48px
section: 64px
section-lg: 96px
hero: 120px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button-md}"
rounded: "{rounded.md}"
padding: "10px 20px"
button-primary-pressed:
backgroundColor: "{colors.primary-deep}"
textColor: "{colors.on-primary}"
button-primary-disabled:
backgroundColor: "{colors.hairline}"
textColor: "{colors.muted}"
button-cream:
backgroundColor: "{colors.cream}"
textColor: "{colors.ink}"
typography: "{typography.button-md}"
rounded: "{rounded.md}"
padding: "10px 20px"
border: "1px solid {colors.beige-deep}"
button-dark:
backgroundColor: "{colors.ink}"
textColor: "{colors.on-dark}"
typography: "{typography.button-md}"
rounded: "{rounded.md}"
padding: "10px 20px"
button-secondary:
backgroundColor: "transparent"
textColor: "{colors.ink}"
typography: "{typography.button-md}"
rounded: "{rounded.md}"
padding: "10px 20px"
border: "1px solid {colors.hairline-strong}"
button-on-cream:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.button-md}"
rounded: "{rounded.md}"
padding: "10px 20px"
border: "1px solid {colors.beige-deep}"
button-link:
backgroundColor: "transparent"
textColor: "{colors.primary}"
typography: "{typography.body-sm-medium}"
padding: "0"
card-base:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline-soft}"
card-feature:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
card-cream:
backgroundColor: "{colors.cream}"
textColor: "{colors.ink}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.beige-deep}"
card-cream-soft:
backgroundColor: "{colors.surface-cream-soft}"
textColor: "{colors.ink}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
card-feature-product:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
shadow: "rgba(0, 0, 0, 0.04) 0px 4px 12px"
card-photographic:
backgroundColor: "{colors.surface-code}"
textColor: "{colors.on-dark}"
rounded: "{rounded.lg}"
padding: "0"
pricing-card:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
pricing-card-featured:
backgroundColor: "{colors.cream}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "2px solid {colors.primary}"
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-strong}"
height: 44px
text-input-focused:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
border: "2px solid {colors.primary}"
text-area:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
border: "1px solid {colors.hairline-strong}"
contact-form-panel:
backgroundColor: "{colors.cream}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.beige-deep}"
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.ink}"
textColor: "{colors.on-dark}"
rounded: "{rounded.full}"
border: "1px solid {colors.ink}"
segmented-tab:
backgroundColor: "transparent"
textColor: "{colors.steel}"
typography: "{typography.body-sm-medium}"
padding: "{spacing.sm} {spacing.md}"
border: "0 0 2px transparent solid"
segmented-tab-active:
backgroundColor: "transparent"
textColor: "{colors.primary}"
typography: "{typography.body-sm-medium}"
border: "0 0 2px {colors.primary} solid"
badge-orange:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-cream:
backgroundColor: "{colors.cream-deeper}"
textColor: "{colors.ink}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-dark:
backgroundColor: "{colors.ink}"
textColor: "{colors.on-dark}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
promo-banner:
backgroundColor: "{colors.ink}"
textColor: "{colors.on-dark}"
typography: "{typography.body-sm-medium}"
padding: "{spacing.sm} {spacing.md}"
hero-band-sunset:
backgroundColor: "{colors.sunshine-700}"
textColor: "{colors.ink}"
rounded: "0"
padding: "{spacing.hero}"
sunset-stripe-band:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
rounded: "0"
padding: "{spacing.lg} 0"
cta-banner-cream:
backgroundColor: "{colors.cream}"
textColor: "{colors.ink}"
rounded: "{rounded.lg}"
padding: "{spacing.section}"
code-block:
backgroundColor: "{colors.surface-code}"
textColor: "{colors.on-dark}"
typography: "{typography.code-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
code-block-header:
backgroundColor: "{colors.surface-code}"
textColor: "{colors.on-dark-muted}"
typography: "{typography.caption}"
padding: "{spacing.xs} {spacing.md}"
border: "0 0 1px rgba(255,255,255,0.08) solid"
feature-icon-tile:
backgroundColor: "{colors.cream}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
border: "1px solid {colors.beige-deep}"
industry-tile:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline-soft}"
stat-cell:
backgroundColor: "transparent"
textColor: "{colors.ink}"
typography: "{typography.stat-display}"
padding: "{spacing.lg}"
customer-testimonial-card:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline-soft}"
logo-wall-item:
backgroundColor: "transparent"
textColor: "{colors.steel}"
typography: "{typography.body-md-medium}"
padding: "{spacing.lg}"
faq-accordion-item:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.md}"
padding: "{spacing.xl}"
border: "0 0 1px {colors.hairline} solid"
footer-region:
backgroundColor: "{colors.footer-cream}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
padding: "{spacing.section} {spacing.xxl}"
footer-link:
backgroundColor: "transparent"
textColor: "{colors.primary}"
typography: "{typography.body-sm}"
padding: "{spacing.xxs} 0"
app-store-badge:
backgroundColor: "{colors.ink}"
textColor: "{colors.on-dark}"
typography: "{typography.caption-bold}"
rounded: "{rounded.md}"
padding: "{spacing.sm} {spacing.md}"
---
## Overview
Mistral AI carries itself with a singular, almost cinematographic visual signature — the homepage opens with "Frontier AI. In your hands." rendered in elegant near-serif display type over a photographic mountain landscape bathed in mustard-orange sunset light. Below the hero, every page closes with the same recognizable element: a horizontal "sunset stripe" gradient band running red→orange→yellow→cream that wraps the foot of the page just above the footer. This stripe is THE brand recognizer — it appears on the homepage, products/studio, solutions/coding, news articles, contact form, and services tier page without exception.
The system pairs PP Editorial Old (a near-serif elegant display face) for hero displays with Inter for everything else (body, headings, UI). Cream-yellow surfaces ({colors.cream}, {colors.surface-cream-soft}) anchor form panels and feature cards; saturated orange ({colors.primary}) carries primary CTAs; the deep mountain photography on the homepage and the dark code mockups inside Le Studio create photographic depth. Cards are rectangular with `{rounded.lg}` (12px) corners — distinctly less playful than Miro's or Mintlify's pill-buttons-everywhere approach. Buttons are also `{rounded.md}` (8px), not pills — Mistral's geometry is more sober and editorial than its peers.
**Key Characteristics:** **Key Characteristics:**
- Golden-amber color universe: every tone from pale cream (#fffaeb) to burnt orange (#fa520f) - Atmospheric mountain-sunset hero photography (orange-red-yellow gradient sky)
- Massive display typography (82px) with aggressive negative letter-spacing (-2.05px) - Horizontal "sunset stripe" band ({colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream}) at every page bottom
- Warm golden shadow system using amber-tinted rgba values - Cream-yellow surfaces ({colors.cream}, {colors.cream-soft}) for form panels and feature cards
- The Mistral "M" block identity — a gradient from yellow to orange - PP Editorial Old (or similar near-serif) for hero displays; Inter for everything else
- Dramatic landscape photography in warm golden tones - `{rounded.md}` (8px) buttons and `{rounded.lg}` (12px) cards — less playful, more editorial geometry
- Uppercase typography used strategically for section labels and CTAs - Saturated orange primary CTA ({colors.primary}) carries every action call
- Near-zero border-radius — sharp, architectural geometry
- French-European confidence: bold, warm, declarative
## 2. Color Palette & Roles ## Colors
### Primary > Source pages: mistral.ai/ (homepage), /products/studio (Le Studio product), /solutions/coding (coding solution), /news/vibe-remote-agents-mistral-medium-3-5 (news), /contact (contact form), /services (services tiers). Token coverage was identical across all six pages.
- **Mistral Orange** (`#fa520f`): The core brand color — a vivid, saturated orange-red that anchors the entire identity. Used for primary emphasis, the brand block, and the highest-signal moments.
- **Mistral Flame** (`#fb6424`): A slightly warmer, lighter variant of the brand orange used for secondary brand moments and hover states.
- **Block Orange** (`#ff8105`): A pure orange used in the gradient block system — warmer and less red than Mistral Orange.
### Secondary & Accent ### Brand & Accent
- **Sunshine 900** (`#ff8a00`): Deep golden amber — the darkest sunshine tone, used for strong accent moments. - **Mistral Orange** ({colors.primary}): Primary CTA color, brand orange
- **Sunshine 700** (`#ffa110`): Warm amber-gold — the core sunshine accent for backgrounds and interactive elements. - **Orange Deep** ({colors.primary-deep}): Pressed-state and emphasis variant
- **Sunshine 500** (`#ffb83e`): Medium golden — balanced warmth for mid-level emphasis. - **Sunshine 300** ({colors.sunshine-300}): Atmospheric light orange-yellow
- **Sunshine 300** (`#ffd06a`): Light golden — for subtle warm tints and secondary backgrounds. - **Sunshine 500** ({colors.sunshine-500}): Mid-spectrum sunset orange
- **Block Gold** (`#ffe295`): Pale gold — soft background accents and gentle warmth. - **Sunshine 700** ({colors.sunshine-700}): Saturated mid sunset gradient stop
- **Bright Yellow** (`#ffd900`): The brightest tone in the gradient — used at the "top" of the block identity. - **Sunshine 800** ({colors.sunshine-800}): Deep sunset gradient stop
- **Sunshine 900** ({colors.sunshine-900}): Deepest sunset orange
- **Yellow Saturated** ({colors.yellow-saturated}): Pure brand yellow used in the sunset stripe gradient
- **Block 5/6/7** ({colors.block-5}, {colors.block-6}, {colors.block-7}): Spectrum stops along the sunset gradient (light-yellow → mid-yellow → deep-orange)
### Surface & Background ### Cream / Neutral Warm
- **Warm Ivory** (`#fffaeb`): The lightest page background — barely tinted with warmth, the foundation canvas. - **Cream** ({colors.cream}): Warm yellow-cream surface for form panels, feature cards, footer
- **Cream** (`#fff0c2`): The primary warm surface and secondary button background — noticeably golden. - **Cream Soft** ({colors.cream-soft}): Lighter cream variant
- **Pure White** (`#ffffff`): Used for maximum contrast elements and popover surfaces. - **Cream Deeper** ({colors.cream-deeper}): More-saturated cream for badge/tag chips
- **Mistral Black** (`#1f1f1f`): The primary dark surface for buttons, text, and dark sections. - **Beige Deep** ({colors.beige-deep}): Cream surface 1px border color
- **Accent Orange** (defined as `hsl(17, 96%, 52%)`): The functional accent color for interactive states.
### Neutrals & Text ### Surface
- **Mistral Black** (`#1f1f1f`): Primary text color and dark button backgrounds — a near-black that's warmer than pure #000. - **Canvas White** ({colors.canvas}): Page background and card surface
- **Black Tint** (defined as `hsl(0, 0%, 24%)`): A medium dark gray for secondary text on light backgrounds. - **Surface** ({colors.surface}): Subtle quieter background
- **Pure White** (`#ffffff`): Text on dark surfaces and CTA labels. - **Surface Cream** ({colors.surface-cream}): Cream-yellow tinted surface
- **Surface Code** ({colors.surface-code}): Dark code-block / IDE mockup surface
- **Hairline** ({colors.hairline}): 1px borders
- **Hairline Soft** ({colors.hairline-soft}): Quieter dividers
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs
### Semantic & Accent ### Text
- **Input Border** (defined as `hsl(240, 5.9%, 90%)`): A cool-tinted light gray for form borders — one of the few cool tones in the system. - **Ink** ({colors.ink}): Primary headlines and body text
- **White Overlay** (`oklab(1, 0, 0 / 0.088–0.1)`): Semi-transparent white for frosted glass effects and button overlays. - **Ink Tint** ({colors.ink-tint}): Slightly softer black for hero overlay text
- **Charcoal** ({colors.charcoal}): Body emphasis
- **Slate** ({colors.slate}): Secondary text
- **Steel** ({colors.steel}): Tertiary text, captions
- **Stone** ({colors.stone}): Muted labels
- **Muted** ({colors.muted}): Disabled, placeholders
- **On Dark** ({colors.on-dark}): White text on dark surfaces
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white
- **On Cream** ({colors.on-cream}): Ink text on cream surfaces
### Gradient System ### Semantic
- **Mistral Block Gradient**: The signature identity — a multi-step gradient flowing through Yellow (`#ffd900`) → Gold (`#ffe295`) → Amber (`#ffa110`) → Orange (`#ff8105`) → Flame (`#fb6424`) → Mistral Orange (`#fa520f`). This gradient appears in the logo blocks, section backgrounds, and decorative elements. - **Link** ({colors.link}): Inline link color (matches primary orange)
- **Golden Landscape Wash**: Photography and backgrounds use warm amber overlays creating a consistent golden temperature across the page.
- **Warm Shadow Cascade**: Multi-layered golden shadows that build depth with amber-tinted transparency rather than gray.
## 3. Typography Rules ## Typography
### Font Family ### Font Family
- **Primary**: Likely a custom font (Font Source detected) with `Arial` as fallback, and extended stack: `ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji` **PP Editorial Old** (display): Mistral's signature near-serif elegant display typeface used for hero displays, large numbers, and editorial section openers. Carries a slightly classical, intelligent character that contrasts the contemporary product positioning. Fallbacks: 'Times New Roman', Georgia, serif.
**Inter** (UI prose): Variable typeface for body, navigation, buttons, labels, captions. Fallbacks: ui-sans-serif, system-ui, -apple-system, sans-serif.
**JetBrains Mono** (code): Monospace for code blocks and IDE mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.
### Hierarchy ### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | | Token | Size | Weight | Line Height | Letter Spacing | Family | Use |
|------|------|------|--------|-------------|----------------|-------| |---|---|---|---|---|---|---|
| Display / Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | Maximum impact, billboard scale | | `{typography.hero-display}` | 84px | 400 | 1.05 | -1.5px | PP Editorial Old | Hero ("Frontier AI. In your hands.") |
| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | Feature section anchors | | `{typography.display-lg}` | 64px | 400 | 1.10 | -1px | PP Editorial Old | Section openers |
| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | Secondary section titles | | `{typography.heading-1}` | 52px | 400 | 1.15 | -0.5px | PP Editorial Old | Page headlines ("Get in touch with the team.") |
| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | Card headings, feature names | | `{typography.stat-display}` | 56px | 400 | 1.10 | -1px | PP Editorial Old | Stat callouts ("75%") |
| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Mid-level headings | | `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Inter | Subsection headlines |
| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | Small headings | | `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Inter | Card titles |
| Body / Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text | | `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Inter | Feature tile titles |
| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Uppercase CTA labels | | `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | Inter | Smaller card titles |
| Caption / Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, secondary links | | `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Inter | Hero subtitle, lead body |
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Inter | Primary body text |
| `{typography.body-md-medium}` | 16px | 500 | 1.55 | 0 | Inter | Body emphasis |
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Inter | Secondary body |
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Inter | Active sidebar, button labels |
| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Inter | Helper text |
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Inter | Badge labels |
| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Inter | Footer microcopy |
| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Inter | Section eyebrows |
| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Inter | Button labels |
| `{typography.code-md}` | 14px | 400 | 1.50 | 0 | JetBrains Mono | Code blocks |
### Principles ### Principles
- **Single weight, maximum impact**: The entire system uses weight 400 (regular) — even at 82px. This creates a surprisingly elegant effect where the size alone carries authority without needing bold weight. - **Editorial / sans pairing** — PP Editorial Old (near-serif, classical) anchors hero displays; Inter (geometric sans) carries everything else. The contrast IS the brand voice.
- **Ultra-tight at scale**: Line-heights of 0.95–1.00 at display sizes create text blocks where ascenders nearly touch descenders from the line above — creating dense, poster-like composition. - **Generous body leading** (1.55 on body-md) for editorial readability across long-form pages
- **Aggressive tracking on display**: -2.05px letter-spacing at 82px compresses the hero text into a monolithic block. - **Tight hero leading** (1.05 on 84px display) creates magazine-grade typographic display
- **Uppercase as emphasis**: Strategic `text-transform: uppercase` on button labels and section markers creates a formal, European signage quality. - **Negative letter-spacing** progresses with size — display sizes use -1.5px to -0.5px; smaller heads relax to 0
- **No weight variation**: Unlike most systems that use 300–700 weight range, Mistral uses 400 everywhere. Hierarchy comes from size and color, never weight. - **Stat-display token** (56px Editorial) for marketing stat callouts ("75% / 80% / 100%")
## 4. Component Stylings ## Layout
### Spacing System
- **Base unit**: 4px (8px primary increment)
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (96px) · `{spacing.hero}` (120px)
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); content pages tighten to `{spacing.section}` (64px)
- **Card internal padding**: `{spacing.xl}` (24px) for compact cards; `{spacing.xxl}` (32px) for feature panels and form panels
### Grid & Container
- Marketing pages use 1280px max-width with 32px gutters
- Hero band uses 2-column split (text left, sunset photography right) on desktop
- Le Studio product page uses 3-up feature grid below the hero
- Contact page uses 1-column layout with cream form panel centered (~520px max-width)
- Services page uses 4-tier card layout with cream feature panel separator strip
### Whitespace Philosophy
Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding lets the mountain-sunset photography fill the frame. Form pages tighten dramatically: contact form panel uses `{spacing.xxl}` (32px) internal padding, fields stack on `{spacing.md}` (16px) gap.
## Elevation & Depth
The system runs predominantly flat with strategic atmospheric depth from photography.
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow; `{colors.hairline-soft}` border | Default cards, table rows, form inputs |
| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |
| 2 (card) | `rgba(0, 0, 0, 0.04) 0px 4px 12px 0px` | Standard feature cards |
| 3 (mockup) | `rgba(0, 0, 0, 0.08) 0px 12px 24px -4px` | IDE mockup, code editor frames |
| 4 (modal) | `rgba(0, 0, 0, 0.12) 0px 16px 48px -8px` | Modals, dropdowns |
### Decorative Depth
- The atmospheric depth on Mistral's hero comes from the photographic mountain-sunset imagery — natural light gradient does the work
- The "sunset stripe" closing band carries depth via its multi-stop gradient (red → orange → yellow → cream)
- IDE / code mockups use dark-canvas backgrounds with subtle drop shadow
## Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Small chips, micro-controls |
| `{rounded.sm}` | 6px | Discount badges, compact UI |
| `{rounded.md}` | 8px | Buttons, inputs, search-pill, code blocks |
| `{rounded.lg}` | 12px | Cards, modals, panels (the dominant card radius) |
| `{rounded.xl}` | 16px | Larger feature panels |
| `{rounded.xxl}` | 20px | Featured emphasis cards |
| `{rounded.full}` | 9999px | Status badges, pill tabs (used sparingly — most buttons are NOT pills) |
The radius scale is sober and editorial — Mistral does NOT use pill buttons. `{rounded.md}` (8px) for buttons, `{rounded.lg}` (12px) for cards, `{rounded.full}` reserved for badges and the rare pill tab.
### Photography Geometry
- Hero photography is full-bleed atmospheric mountain-sunset imagery with no internal framing
- IDE/code mockups render with `{rounded.lg}` (12px) corners on dark canvas
- Customer logos wall presents wordmarks inline at consistent 60–80px height
- Product imagery (Le Studio mockup, agent UI mockups) sits in `{rounded.lg}` panels with subtle border
## Components
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
### Buttons ### Buttons
**Cream Surface** **`button-primary`** — Saturated-orange primary CTA, the dominant action.
- Background: Cream (`#fff0c2`) - Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
- Text: Mistral Black (`#1f1f1f`) - Pressed state `button-primary-pressed` deepens to `{colors.primary-deep}`.
- No visible border - Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.
- The warm, inviting secondary CTA
**Dark Solid** **`button-cream`** — Warm cream-yellow secondary action, common on cream-surface sections.
- Background: Mistral Black (`#1f1f1f`) - Background `{colors.cream}`, text `{colors.ink}`, border `1px solid {colors.beige-deep}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
- Text: Pure White (`#ffffff`)
- Padding: 12px (all sides)
- No visible border
- The primary action button — dark on warm
**Ghost / Transparent** **`button-dark`** — Dark/black primary CTA on cream surfaces.
- Background: transparent with slight dark overlay (`oklab(0, 0, 0 / 0.1)`) - Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
- Text: Mistral Black (`#1f1f1f`)
- Opacity: 0.4
- For secondary/de-emphasized actions
**Text / Underline** **`button-secondary`** — Outlined secondary action.
- Background: transparent - Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
- Text: Mistral Black (`#1f1f1f`)
- Padding: 8px 0px 0px (top-only) **`button-on-cream`** — White button on cream-tinted backgrounds.
- Minimal styling — text link as button - Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.beige-deep}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
- For tertiary navigation actions
**`button-link`** — Inline orange text link.
- Background transparent, text `{colors.primary}`, typography `{typography.body-sm-medium}`, padding `0`. Underline on activation.
### Cards & Containers ### Cards & Containers
- Background: Warm Ivory (`#fffaeb`), Cream (`#fff0c2`), or Pure White
- Border: minimal to none — containers defined by background color **`card-base`** — Standard content card.
- Radius: near-zero — sharp, architectural corners - Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
- Shadow: warm golden multi-layer (`rgba(127, 99, 21, 0.12) -8px 16px 39px, rgba(127, 99, 21, 0.1) -33px 64px 72px, rgba(127, 99, 21, 0.06) -73px 144px 97px, ...`) — a dramatic, cascading warm shadow
- Distinctive: the golden shadow creates a "golden hour" lighting effect **`card-feature`** — White feature card with larger padding.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid `{colors.hairline-soft}`.
**`card-cream`** — Warm cream-yellow feature card (services tiers, perk callouts).
- Background `{colors.cream}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.beige-deep}`.
**`card-cream-soft`** — Lighter cream variant.
- Background `{colors.surface-cream-soft}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
**`card-feature-product`** — Product showcase card with subtle elevation.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(0, 0, 0, 0.04) 0px 4px 12px`.
**`card-photographic`** — Photographic product card with dark background.
- Background `{colors.surface-code}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `0` (image fills the card).
**`pricing-card`** — Standard pricing tier card.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.
**`pricing-card-featured`** — Featured pricing tier (cream background + orange border).
- Background `{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.primary}`.
### Inputs & Forms ### Inputs & Forms
- Border: `hsl(240, 5.9%, 90%)` — the sole cool-toned element
- Focus: accent color ring **`text-input`** — Standard text field.
- Minimal styling consistent with sparse aesthetic - Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.
**`text-input-focused`** — Activated state.
- Border switches to `2px solid {colors.primary}`.
**`text-area`** — Multi-line text area for contact form.
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.md}`.
**`contact-form-panel`** — Cream-tinted form container on the contact page.
- Background `{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.beige-deep}`. Hosts text-inputs, text-area, submit `button-dark`.
### Tabs
**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (used sparingly on product pages).
- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active: background `{colors.ink}`, text `{colors.on-dark}`.
**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.
- Inactive: text `{colors.steel}`, transparent background, padding `{spacing.sm} {spacing.md}`, no bottom border.
- Active: text `{colors.primary}`, 2px bottom border in `{colors.primary}`.
### Badges & Status
**`badge-orange`** — Saturated orange badge.
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-cream`** — Cream-tinted tag chip.
- Background `{colors.cream-deeper}`, text `{colors.ink}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-dark`** — Dark/black status badge.
- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`promo-banner`** — Sticky black promo strip ABOVE the top nav.
- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. Carries one-line copy + inline CTA.
### Code
**`code-block`** — Syntax-highlighted IDE-style code block (Le Studio page mockup, agent demos).
- Background `{colors.surface-code}`, text `{colors.on-dark}`, typography `{typography.code-md}`, rounded `{rounded.md}`, padding `{spacing.md}`.
**`code-block-header`** — Header bar above the code block.
- Background `{colors.surface-code}`, text `{colors.on-dark-muted}`, typography `{typography.caption}`, padding `{spacing.xs} {spacing.md}`, bottom border `1px solid rgba(255,255,255,0.08)`.
### Documentation Components
**`feature-icon-tile`** — Cream-yellow feature icon callout.
- Background `{colors.cream}`, rounded `{rounded.md}`, padding `{spacing.md}`, border `1px solid {colors.beige-deep}`.
**`industry-tile`** — Industry-vertical tile in solutions page grid.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
**`stat-cell`** — Stat-row cell ("75% more / 80% better").
- Background transparent, text `{colors.ink}`, typography `{typography.stat-display}`, padding `{spacing.lg}`.
**`customer-testimonial-card`** — Customer quote card (used inside Le Studio and Solutions pages).
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`. Quote in `{typography.body-md}`, attribution in `{typography.body-sm}` `{colors.steel}`.
**`logo-wall-item`** — Customer logo wordmark cell.
- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
**`faq-accordion-item`** — FAQ panel.
- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.
**`app-store-badge`** — App Store / Google Play download badge.
- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`.
### Navigation ### Navigation
- Transparent nav overlaying the warm hero
- Logo: Mistral "M" wordmark
- Links: Dark text (white on dark sections)
- CTA: Dark solid button or cream surface button
- Minimal, wide-spaced layout
### Image Treatment **Top Navigation (Marketing)** — Sticky white bar.
- Dramatic landscape photography in warm golden tones - Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`.
- The winding road through golden hills — a recurring visual motif - Left: Mistral M-mark logo + "MISTRAL AI_" wordmark + horizontal link list (Products, Solutions, Research, Blog, Customers, Company).
- The Mistral "M" rendered at large scale on golden backgrounds - Right: "Contact Sales" link + black-pill "Try Studio" CTA.
- Warm color grading on all photography
- Full-bleed sections with photography
### Distinctive Components ### Signature Components
**Mistral Block Identity** **`hero-band-sunset`** — Atmospheric sunset hero band.
- A row of colored blocks forming the gradient: yellow → amber → orange → burnt orange - Background gradient `linear-gradient(135deg, {colors.sunshine-700} 0%, {colors.sunshine-900} 60%, {colors.primary} 100%)` overlaid on photographic mountain landscape.
- Each block gets progressively more orange/red - Layout: hero headline left in `{typography.hero-display}` ({colors.ink}), subtitle in `{typography.subtitle}` ({colors.ink-tint}), button row (`button-dark` + `button-secondary`), atmospheric mountain photography right.
- The visual DNA of the brand — recognizable at any size
**Golden Shadow Cards** **`sunset-stripe-band`** — Horizontal closing band at the foot of every page.
- Cards elevated with warm amber multi-layered shadows - Multi-stop gradient: `{colors.primary}` → `{colors.sunshine-700}` → `{colors.sunshine-500}` → `{colors.yellow-saturated}` → `{colors.cream}`.
- 5 layers of shadow from 16px to 400px offset - Padding `{spacing.lg} 0`. Spans full width, sits above the footer. THIS IS THE BRAND'S MOST RECOGNIZABLE SIGNATURE ELEMENT.
- Creates a "floating in golden light" effect unique to Mistral
**Dark Footer Gradient** **`cta-banner-cream`** — Page-bottom CTA band on cream surface.
- Footer transitions from warm amber to dark through a dramatic gradient - Background `{colors.cream}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section}`. "The next chapter of AI is yours." headline in `{typography.heading-1}` (PP Editorial Old), button row below.
- Creates a "sunset" effect as the page ends
## 5. Layout Principles **`footer-region`** — Cream-tinted multi-column footer.
- Background `{colors.footer-cream}`, padding `{spacing.section} {spacing.xxl}`.
- 5-column link grid (Why Mistral / Explore / Build / Legal + brand mark column).
- Bottom: language picker + social icons.
### Spacing System **`footer-link`** — Individual footer link.
- Base unit: 8px - Background transparent, text `{colors.primary}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
- Scale: 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 98px, 100px
- Button padding: 12px or 8px 0px (compact)
- Section vertical spacing: very generous (80px–100px)
### Grid & Container ## Do's and Don'ts
- Max container width: approximately 1280px, centered
- Hero: full-width with massive typography overlaying warm backgrounds
- Feature sections: wide-format layouts with dramatic imagery
- Card grids: 2–3 column layouts
### Whitespace Philosophy
- **Bold declarations**: Huge headlines surrounded by generous whitespace create billboard-like impact — each statement gets its own breathing space.
- **Warm void**: Empty space itself feels warm because the backgrounds are tinted ivory/cream rather than pure white.
- **Photography as space-filler**: Large landscape images serve double duty as content and decorative whitespace.
### Border Radius Scale
- Near-zero: The dominant radius — sharp, architectural corners on most elements
- This extreme sharpness contrasts with the warmth of the colors, creating a tension between soft color and hard geometry.
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page backgrounds, text blocks |
| Golden Float (Level 1) | Multi-layer warm shadow (5 layers, 12%→0% opacity, amber-tinted) | Feature cards, product showcases, elevated content |
**Shadow Philosophy**: Mistral uses a single but extraordinarily complex shadow — **five cascading layers** of amber-tinted shadow (`rgba(127, 99, 21, ...)`) that build from a close 16px offset to a distant 400px offset. The result is a rich, warm, "golden hour" lighting effect that makes elevated elements look like they're bathed in afternoon sunlight. This is the most distinctive shadow system in any major AI brand.
## 7. Do's and Don'ts
### Do ### Do
- Use the warm color spectrum exclusively: ivory, cream, amber, gold, orange - Reserve `{colors.primary}` (saturated orange) for primary CTAs and active states only
- Keep display typography at 82px+ with -2.05px letter-spacing for hero sections - Use the **sunset stripe band** at the foot of every page — it's the brand's most recognizable signature
- Use the Mistral block gradient (yellow → amber → orange) for brand moments - Pair PP Editorial Old (display) with Inter (UI) — never substitute either with a generic alternative
- Apply warm golden shadows (amber-tinted rgba) for elevated elements - Apply `{rounded.md}` (8px) to buttons and `{rounded.lg}` (12px) to cards consistently
- Use Mistral Black (#1f1f1f) for text — never pure #000000 - Use cream-yellow surfaces ({colors.cream}) for form panels, feature cards, and footer
- Keep font weight at 400 throughout — let size and color carry hierarchy - Anchor heroes with photographic mountain-sunset imagery (or its visual equivalent — atmospheric gradient sky)
- Use sharp, architectural corners — near-zero border-radius - Use stat-display token (PP Editorial 56px) for stat callouts to maintain editorial character
- Apply uppercase on button labels and section markers for European formality
- Use warm landscape photography with golden color grading
### Don't ### Don't
- Don't introduce cool colors (blue, green, purple) — the palette is exclusively warm - Don't use pill-shaped buttons (`{rounded.full}`) — Mistral's geometry is sober and editorial, not playful
- Don't use bold (700+) weight — 400 is the only weight - Don't introduce additional accent colors beyond the orange/yellow/cream sunset palette
- Don't round corners — the sharp geometry is intentional - Don't reduce hero leading below 1.05 — the editorial display needs that magazine-grade tightness
- Don't use cool-toned shadows — shadows must carry amber warmth - Don't replace PP Editorial Old hero displays with Inter — the editorial / sans contrast IS the brand
- Don't use pure white as a page background — always warm-tinted (#fffaeb minimum) - Don't apply heavy shadows on flat documentation cards; reserve elevation for IDE mockups
- Don't reduce hero text below 48px on desktop — the billboard scale is core - Don't drop the sunset stripe band from any page bottom — it's the brand's continuity element
- Don't use more than 2 font weights — size variation replaces weight variation
- Don't add gradients outside the warm spectrum — no blue-to-purple, no cool transitions
- Don't use generic gray for text — even neutrals should be warm-tinted
## 8. Responsive Behavior ## Responsive Behavior
### Breakpoints ### Breakpoints
| Name | Width | Key Changes | | Name | Width | Key Changes |
|------|-------|-------------| |---|---|---|
| Mobile | <640px | Single column, stacked everything, hero text reduces to ~32px | | Mobile (small) | < 480px | Single column. Hero scales to 40px (PP Editorial). Pill nav collapses to hamburger. Pricing tiers stack 1-up. |
| Tablet | 640–768px | Minor layout adjustments | | Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 52px. |
| Small Desktop | 768–1024px | 2-column layouts begin | | Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 64px. |
| Desktop | 1024–1280px | Full layout with maximum typography scale | | Desktop | 1024 – 1279px | Multi-column layouts. Hero 76px. Stat row at full width. |
| Wide Desktop | ≥ 1280px | Full 84px hero presentation. |
### Touch Targets ### Touch Targets
- Buttons use generous padding (12px minimum) - Buttons render at 40–44px effective height — at WCAG AAA floor with `10px 20px` padding
- Navigation elements adequately spaced - Form inputs render at 44px height
- Cards serve as large touch targets - Pill tabs render at ~32px tall — bumps to 44px on mobile
### Collapsing Strategy ### Collapsing Strategy
- **Navigation**: Collapses to hamburger on mobile - **Promo banner** stays full-width; truncates at < 480px
- **Hero text**: 82px → 56px → 48px → 32px progressive scaling - **Top nav** below 1024px collapses to hamburger
- **Feature sections**: Multi-column → stacked - **Hero band**: 2-column hero (text + photography) collapses to stacked at < 1024px
- **Photography**: Scales proportionally, may crop on mobile - **Pricing tiers**: 4-column desktop → 2-column tablet → 1-column mobile
- **Block identity**: Scales down proportionally - **Stat row**: 3-column → stacked at < 768px
- **Hero typography**: 84px → 64px → 52px → 40px
- **Footer**: 5-column desktop → 3-column tablet → 1-column accordion mobile
- **Sunset stripe band** stays full-width on all breakpoints
### Image Behavior ### Image Behavior
- Landscape photography scales proportionally - Mountain-sunset photography uses 16:9 ratio with full-bleed scaling
- Warm color grading maintained at all sizes - IDE mockup images maintain aspect ratio across breakpoints
- Block gradient elements resize fluidly - Customer logo wall presents wordmarks at consistent 60–80px height
- No art direction changes — same warm composition at all sizes
## 9. Agent Prompt Guide ## Iteration Guide
### Quick Color Reference 1. Focus on ONE component at a time
- Brand Orange: "Mistral Orange (#fa520f)" 2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`)
- Page Background: "Warm Ivory (#fffaeb)" 3. Run `npx @google/design.md lint DESIGN.md` after edits
- Warm Surface: "Cream (#fff0c2)" 4. Add new variants as separate `components:` entries
- Primary Text: "Mistral Black (#1f1f1f)" 5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Hero displays use `{typography.hero-display}` (PP Editorial Old).
- Sunshine Amber: "Sunshine 700 (#ffa110)" 6. Keep `{colors.primary}` confined to primary CTAs, active states, and the sunset stripe band
- Bright Gold: "Bright Yellow (#ffd900)" 7. Cards use `{rounded.lg}` (12px), buttons use `{rounded.md}` (8px). Pills (`{rounded.full}`) reserved for badges only.
- Text on Dark: "Pure White (#ffffff)" 8. Always include the sunset-stripe-band component at the foot of every page mockup.
### Example Component Prompts ## Known Gaps
- "Create a hero section on Warm Ivory (#fffaeb) with a massive headline at 82px Arial weight 400, line-height 1.0, letter-spacing -2.05px. Mistral Black (#1f1f1f) text. Add a dark solid CTA button (#1f1f1f bg, white text, 12px padding, sharp corners) and a cream secondary button (#fff0c2 bg)."
- "Design a feature card on Cream (#fff0c2) with sharp corners (no border-radius). Apply the golden shadow system: rgba(127, 99, 21, 0.12) -8px 16px 39px as the primary layer. Title at 32px weight 400, body at 16px."
- "Build the Mistral block identity: a row of colored blocks from Bright Yellow (#ffd900) through Sunshine 700 (#ffa110) to Mistral Orange (#fa520f). Sharp corners, no gaps."
- "Create a dark footer section on Mistral Black (#1f1f1f) with Pure White (#ffffff) text. Footer links at 14px. Add a warm gradient from Sunshine 700 (#ffa110) at the top fading to Mistral Black."
### Iteration Guide - Specific dark-mode token values not surfaced; the brand has not shipped a published dark-mode palette
1. Keep the warm temperature — "shift toward amber" not "shift toward gray" - Animation/transition timings not extracted; recommend 150–200ms ease for hover/focus state transitions
2. Use size for hierarchy — 82px → 56px → 48px → 32px → 24px → 16px - Form validation success state not explicitly captured beyond defaults
3. Never add border-radius — sharp corners only - Sunset stripe band gradient stops are approximations — the actual values may vary slightly across pages but the visual rhythm is consistent
4. Shadows are always warm: "golden shadow with amber tones"
5. Font weight is always 400 — describe emphasis through size and color

921
design-md/mongodb/DESIGN.md
View File

@ -1,266 +1,767 @@
# Design System Inspired by MongoDB ---
version: alpha
name: MongoDB
description: MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with bright MongoDB green ({colors.brand-green}) CTAs paired with stark white documentation surfaces. The signature green pill button is unmistakable across product, pricing, learning, and AI use-case surfaces. The system uses Euclid Circular A as its display face, anchors a 3-tier pricing comparison (Free / Flex / Dedicated), and presents extensive course catalogs in card grids with colored category tags. Coverage spans homepage, Atlas product page, Community Edition, MongoDB University, AI use cases, and pricing.
## 1. Visual Theme & Atmosphere colors:
primary: "#00ed64"
primary-deep: "#00b545"
primary-pressed: "#008c34"
on-primary: "#001e2b"
brand-green: "#00ed64"
brand-green-dark: "#00684a"
brand-green-mid: "#00a35c"
brand-green-soft: "#c3f0d2"
brand-teal-deep: "#001e2b"
brand-teal: "#003d4f"
brand-teal-mid: "#00684a"
accent-purple: "#7b3ff2"
accent-orange: "#fa6e39"
accent-pink: "#f06bb8"
accent-blue: "#3d4f9f"
semantic-warning-bg: "#fff8e0"
semantic-warning-text: "#946f3f"
canvas: "#ffffff"
canvas-dark: "#001e2b"
surface: "#f9fbfa"
surface-soft: "#f4f7f6"
surface-feature: "#e3fcef"
hairline: "#e1e5e8"
hairline-soft: "#eceff1"
hairline-strong: "#c1ccd6"
hairline-dark: "#1c2d38"
ink: "#001e2b"
charcoal: "#1c2d38"
slate: "#3d4f5b"
steel: "#5c6c7a"
stone: "#7c8c9a"
muted: "#a8b3bc"
on-dark: "#ffffff"
on-dark-muted: "#a8b3bc"
MongoDB's website is a deep-forest-meets-terminal experience — a design system rooted in the darkest teal-black (`#001e2b`) that evokes both the density of a database and the depth of a forest canopy. Against this near-black canvas, a striking neon green (`#00ed64`) pulses as the brand accent — bright enough to feel electric, organic enough to feel alive. This isn't the cold neon of cyberpunk; it's the bioluminescent green of something growing in the dark. typography:
hero-display:
fontFamily: Euclid Circular A
fontSize: 72px
fontWeight: 500
lineHeight: 1.10
letterSpacing: -1.5px
display-lg:
fontFamily: Euclid Circular A
fontSize: 56px
fontWeight: 500
lineHeight: 1.15
letterSpacing: -1px
heading-1:
fontFamily: Euclid Circular A
fontSize: 48px
fontWeight: 500
lineHeight: 1.20
letterSpacing: -0.5px
heading-2:
fontFamily: Euclid Circular A
fontSize: 36px
fontWeight: 500
lineHeight: 1.25
letterSpacing: -0.5px
heading-3:
fontFamily: Euclid Circular A
fontSize: 28px
fontWeight: 500
lineHeight: 1.30
heading-4:
fontFamily: Euclid Circular A
fontSize: 22px
fontWeight: 500
lineHeight: 1.35
heading-5:
fontFamily: Euclid Circular A
fontSize: 18px
fontWeight: 600
lineHeight: 1.40
subtitle:
fontFamily: Euclid Circular A
fontSize: 18px
fontWeight: 400
lineHeight: 1.50
body-md:
fontFamily: Euclid Circular A
fontSize: 16px
fontWeight: 400
lineHeight: 1.55
body-md-medium:
fontFamily: Euclid Circular A
fontSize: 16px
fontWeight: 500
lineHeight: 1.55
body-sm:
fontFamily: Euclid Circular A
fontSize: 14px
fontWeight: 400
lineHeight: 1.50
body-sm-medium:
fontFamily: Euclid Circular A
fontSize: 14px
fontWeight: 500
lineHeight: 1.50
caption:
fontFamily: Euclid Circular A
fontSize: 13px
fontWeight: 400
lineHeight: 1.40
caption-bold:
fontFamily: Euclid Circular A
fontSize: 13px
fontWeight: 600
lineHeight: 1.40
micro:
fontFamily: Euclid Circular A
fontSize: 12px
fontWeight: 500
lineHeight: 1.40
micro-uppercase:
fontFamily: Euclid Circular A
fontSize: 11px
fontWeight: 600
lineHeight: 1.40
letterSpacing: 1px
button-md:
fontFamily: Euclid Circular A
fontSize: 14px
fontWeight: 600
lineHeight: 1.30
code-md:
fontFamily: Source Code Pro
fontSize: 14px
fontWeight: 400
lineHeight: 1.55
The typography system is architecturally ambitious: MongoDB Value Serif for massive hero headlines (96px) creates an editorial, authoritative presence — serif type at database-company scale is a bold choice that says "we're not just another tech company." Euclid Circular A handles the heavy lifting of body and UI text with an unusually wide weight range (300–700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px–3px). This three-font system creates a hierarchy that spans editorial elegance → geometric professionalism → engineering precision. rounded:
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
xxl: 24px
full: 9999px
What makes MongoDB distinctive is its dual-mode design: a dark hero/feature section world (`#001e2b` with neon green accents) and a light content world (white with teal-gray borders `#b8c4c2`). The transition between these modes creates dramatic contrast. The shadow system uses teal-tinted dark shadows (`rgba(0, 30, 43, 0.12)`) that maintain the forest-dark atmosphere even on light surfaces. Buttons use pill shapes (100px–999px radius) with MongoDB Green borders (`#00684a`), and the entire component system references the LeafyGreen design system. spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section-sm: 48px
section: 64px
section-lg: 96px
hero: 120px
components:
button-primary:
backgroundColor: "{colors.brand-green}"
textColor: "{colors.on-primary}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "10px 22px"
button-primary-pressed:
backgroundColor: "{colors.primary-pressed}"
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: "10px 22px"
border: "1px solid {colors.hairline-strong}"
button-on-dark:
backgroundColor: "{colors.brand-green}"
textColor: "{colors.on-primary}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "10px 22px"
button-secondary-on-dark:
backgroundColor: "transparent"
textColor: "{colors.on-dark}"
typography: "{typography.button-md}"
rounded: "{rounded.full}"
padding: "10px 22px"
border: "1px solid {colors.hairline-dark}"
button-ghost:
backgroundColor: "transparent"
textColor: "{colors.ink}"
typography: "{typography.button-md}"
rounded: "{rounded.md}"
padding: "8px 12px"
button-link:
backgroundColor: "transparent"
textColor: "{colors.brand-green-dark}"
typography: "{typography.body-sm-medium}"
padding: "0"
card-base:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline}"
card-feature:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline}"
card-product-deploy:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline}"
card-feature-dark:
backgroundColor: "{colors.brand-teal-deep}"
textColor: "{colors.on-dark}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
card-course:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline}"
card-cert:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline}"
pricing-card:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline}"
pricing-card-featured:
backgroundColor: "{colors.surface-feature}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "2px solid {colors.brand-green}"
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-strong}"
height: 44px
text-input-focused:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
border: "2px solid {colors.brand-green-dark}"
search-pill:
backgroundColor: "{colors.surface}"
textColor: "{colors.steel}"
typography: "{typography.body-md}"
rounded: "{rounded.md}"
padding: "{spacing.sm} {spacing.md}"
height: 44px
border: "1px solid {colors.hairline-strong}"
search-pill-large:
backgroundColor: "{colors.canvas}"
textColor: "{colors.steel}"
typography: "{typography.body-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
height: 56px
border: "1px solid {colors.hairline-strong}"
pill-tab:
backgroundColor: "transparent"
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.ink}"
textColor: "{colors.on-dark}"
rounded: "{rounded.full}"
border: "1px solid {colors.ink}"
segmented-tab:
backgroundColor: "transparent"
textColor: "{colors.steel}"
typography: "{typography.body-sm-medium}"
padding: "{spacing.sm} {spacing.md}"
border: "0 0 2px transparent solid"
segmented-tab-active:
backgroundColor: "transparent"
textColor: "{colors.brand-green-dark}"
typography: "{typography.body-sm-medium}"
border: "0 0 2px {colors.brand-green-dark} solid"
badge-green:
backgroundColor: "{colors.brand-green}"
textColor: "{colors.on-primary}"
typography: "{typography.caption-bold}"
rounded: "{rounded.sm}"
padding: "2px 8px"
badge-green-soft:
backgroundColor: "{colors.brand-green-soft}"
textColor: "{colors.brand-green-dark}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
badge-purple:
backgroundColor: "{colors.accent-purple}"
textColor: "{colors.on-dark}"
typography: "{typography.caption-bold}"
rounded: "{rounded.sm}"
padding: "2px 8px"
badge-orange:
backgroundColor: "{colors.accent-orange}"
textColor: "{colors.on-dark}"
typography: "{typography.caption-bold}"
rounded: "{rounded.sm}"
padding: "2px 8px"
badge-popular:
backgroundColor: "{colors.brand-teal-deep}"
textColor: "{colors.brand-green}"
typography: "{typography.caption-bold}"
rounded: "{rounded.full}"
padding: "4px 10px"
promo-banner:
backgroundColor: "{colors.brand-teal-deep}"
textColor: "{colors.on-dark}"
typography: "{typography.body-sm-medium}"
padding: "{spacing.sm} {spacing.md}"
hero-band-dark:
backgroundColor: "{colors.brand-teal-deep}"
textColor: "{colors.on-dark}"
rounded: "0"
padding: "{spacing.hero}"
hero-platform-card:
backgroundColor: "{colors.brand-teal-mid}"
textColor: "{colors.on-dark}"
rounded: "{rounded.xl}"
padding: "{spacing.xxl}"
cta-banner-dark:
backgroundColor: "{colors.brand-teal-deep}"
textColor: "{colors.on-dark}"
rounded: "{rounded.lg}"
padding: "{spacing.section}"
code-block:
backgroundColor: "{colors.canvas-dark}"
textColor: "{colors.on-dark}"
typography: "{typography.code-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
code-mockup-card:
backgroundColor: "{colors.canvas-dark}"
textColor: "{colors.on-dark}"
rounded: "{rounded.lg}"
padding: "{spacing.lg}"
comparison-table:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
rounded: "{rounded.md}"
border: "1px solid {colors.hairline}"
comparison-row:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
padding: "{spacing.md} {spacing.lg}"
border: "0 0 1px {colors.hairline-soft} solid"
service-tile:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xl}"
border: "1px solid {colors.hairline}"
why-card:
backgroundColor: "{colors.surface}"
rounded: "{rounded.lg}"
padding: "{spacing.xl}"
customer-testimonial-card:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.lg}"
padding: "{spacing.xxl}"
border: "1px solid {colors.hairline}"
logo-wall-item:
backgroundColor: "transparent"
textColor: "{colors.steel}"
typography: "{typography.body-md-medium}"
padding: "{spacing.lg}"
faq-accordion-item:
backgroundColor: "{colors.canvas}"
rounded: "{rounded.md}"
padding: "{spacing.xl}"
border: "0 0 1px {colors.hairline} solid"
footer-region:
backgroundColor: "{colors.brand-teal-deep}"
textColor: "{colors.on-dark}"
typography: "{typography.body-sm}"
padding: "{spacing.section} {spacing.xxl}"
footer-link:
backgroundColor: "transparent"
textColor: "{colors.on-dark-muted}"
typography: "{typography.body-sm}"
padding: "{spacing.xxs} 0"
---
## Overview
MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with the unmistakable bright MongoDB green ({colors.brand-green}) CTA pill paired with stark white documentation and pricing surfaces. The homepage opens with "One data platform. Unlimited AI potential." headline over a deep navy hero, the green pill sitting at the visual center as the primary CTA. Lower on the page, embedded code mockup cards (terminal-aesthetic) sit on the dark hero band, breaking out into white feature cards below. The pricing page renders a 3-tier comparison (Free / Flex / Dedicated) with a featured tier highlighted in soft mint background and bright green border. The MongoDB University page presents a course catalog grid where each tile carries a colored category tag (orange, purple, green, teal) — these are MongoDB's category-encoding accent colors and are the only place outside the brand green where saturated color appears.
The system uses Euclid Circular A as its display face. The face is contemporary geometric — confident but not overly playful — and pairs naturally with both the developer-tool aesthetic of the database product and the educational positioning of the learning surfaces. Cards use `{rounded.lg}` (12px) corners; buttons use `{rounded.full}` pills universally. The brand-teal palette ({colors.brand-teal-deep}) anchors hero bands, footer, code mockups, and the dark CTA banners.
**Key Characteristics:** **Key Characteristics:**
- Deep teal-black backgrounds (`#001e2b`) — forest-dark, not space-dark - Deep navy/teal hero bands ({colors.brand-teal-deep}) with bright MongoDB green ({colors.brand-green}) CTA pills
- Neon MongoDB Green (`#00ed64`) as the singular brand accent — electric and organic - Stark white pricing/documentation surfaces with colored category tags for course tiles (purple, orange, green, teal)
- MongoDB Value Serif for hero headlines — editorial authority at tech scale - Euclid Circular A across every UI surface
- Euclid Circular A for body with weight 300 (light) as a distinctive body weight - Pill-shaped buttons ({rounded.full}) and 12px-rounded cards
- Source Code Pro with wide uppercase letter-spacing (1px–3px) for technical labels - 3-tier pricing comparison (Free / Flex / Dedicated) with featured-mint highlight tier
- Teal-tinted shadows: `rgba(0, 30, 43, 0.12)` — shadows carry the forest color - Code mockup cards with terminal-aesthetic dark canvas
- Dual-mode: dark teal hero sections + light white content sections
- Pill buttons (100px radius) with green borders (`#00684a`)
- Link Blue (`#006cfa`) and hover transition to `#3860be`
## 2. Color Palette & Roles ## Colors
### Primary Brand > Source pages: mongodb.com/ (homepage), /products/platform/atlas-database (Atlas product), /products/self-managed/community-edition, learn.mongodb.com/ (MongoDB University), /solutions/use-cases/artificial-intelligence (AI), /pricing (3-tier comparison). Token coverage was identical across all six pages.
- **Forest Black** (`#001e2b`): Primary dark background — the deepest teal-black
- **MongoDB Green** (`#00ed64`): Primary brand accent — neon green for highlights, underlines, gradients
- **Dark Green** (`#00684a`): Button borders, link text on light — muted green for functional use
### Interactive ### Brand & Accent
- **Action Blue** (`#006cfa`): Secondary accent — links, interactive highlights - **MongoDB Green** ({colors.brand-green}): The brand's most recognizable signal — bright pill-CTA color
- **Hover Blue** (`#3860be`): All link hover states transition to this blue - **Green Dark** ({colors.brand-green-dark}): Inline link color, secondary green
- **Teal Active** (`#1eaedb`): Button hover background — bright teal - **Green Mid** ({colors.brand-green-mid}): Mid-spectrum green for atmospheric tints
- **Green Soft** ({colors.brand-green-soft}): Pale-mint background tint for success badges and featured pricing tier
- **Brand Teal Deep** ({colors.brand-teal-deep}): Deep navy-teal for hero bands, footer
- **Brand Teal** ({colors.brand-teal}): Mid-spectrum teal
- **Brand Teal Mid** ({colors.brand-teal-mid}): Lighter teal for hero platform cards
### Neutral Scale ### Category Accent (Course Tags)
- **Deep Teal** (`#1c2d38`): Dark button backgrounds, secondary dark surfaces - **Accent Purple** ({colors.accent-purple}): Course tag for "Database & Security"
- **Teal Gray** (`#3d4f58`): Dark borders on dark surfaces - **Accent Orange** ({colors.accent-orange}): Course tag for "Search"
- **Dark Slate** (`#21313c`): Dark link text variant - **Accent Pink** ({colors.accent-pink}): Course tag variant
- **Cool Gray** (`#5c6c75`): Muted text on dark, secondary button text - **Accent Blue** ({colors.accent-blue}): Course tag variant for atlas/cloud topics
- **Silver Teal** (`#b8c4c2`): Borders on light surfaces, dividers
- **Light Input** (`#e8edeb`): Input text on dark surfaces
- **Pure White** (`#ffffff`): Light section background, button text on dark
- **Black** (`#000000`): Text on light surfaces, darkest elements
### Shadows ### Surface
- **Forest Shadow** (`rgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px`): Primary card elevation — teal-tinted - **Canvas White** ({colors.canvas}): Page background and primary card surface
- **Standard Shadow** (`rgba(0, 0, 0, 0.15) 0px 3px 20px`): General elevation - **Canvas Dark** ({colors.canvas-dark}): Code-block backgrounds, dark mockup canvas
- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 2px 4px`): Light card lift - **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest
- **Surface Soft** ({colors.surface-soft}): Quieter section divisions
- **Surface Feature** ({colors.surface-feature}): Pale mint background for featured pricing tier
- **Hairline** ({colors.hairline}): 1px borders and primary dividers
- **Hairline Soft** ({colors.hairline-soft}): Quieter dividers
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs
- **Hairline Dark** ({colors.hairline-dark}): Border on dark surfaces
## 3. Typography Rules ### Text
- **Ink** ({colors.ink}): Primary headlines and body text (deep navy-teal)
- **Charcoal** ({colors.charcoal}): Body emphasis
- **Slate** ({colors.slate}): Secondary text
- **Steel** ({colors.steel}): Tertiary text, captions
- **Stone** ({colors.stone}): Muted labels
- **Muted** ({colors.muted}): Disabled, placeholders
- **On Dark** ({colors.on-dark}): White text on dark surfaces
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white
### Font Families ### Semantic
- **Display Serif**: `MongoDB Value Serif` — editorial hero headlines - **Warning Background** ({colors.semantic-warning-bg}): Pale yellow callout bg
- **Body / UI**: `Euclid Circular A` — geometric sans-serif workhorse - **Warning Text** ({colors.semantic-warning-text}): Warning state copy color
- **Code / Labels**: `Source Code Pro` — monospace with uppercase label treatments
- **Fallbacks**: `Akzidenz-Grotesk Std` (with CJK: Noto Sans KR/SC/JP), `Times`, `Arial`, `system-ui` ## Typography
### Font Family
**Euclid Circular A** (primary): MongoDB's geometric sans-serif. Fallbacks: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif.
**Source Code Pro** (code): Monospace for code mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.
### Hierarchy ### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | | Token | Size | Weight | Line Height | Letter Spacing | Use |
|------|------|------|--------|-------------|----------------|-------| |---|---|---|---|---|---|
| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (tight) | normal | Serif authority | | `{typography.hero-display}` | 72px | 500 | 1.10 | -1.5px | Hero ("One data platform") |
| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (tight) | normal | Serif sub-hero | | `{typography.display-lg}` | 56px | 500 | 1.15 | -1px | Major section openers |
| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | Geometric precision | | `{typography.heading-1}` | 48px | 500 | 1.20 | -0.5px | Page-level headlines |
| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | Feature titles | | `{typography.heading-2}` | 36px | 500 | 1.25 | -0.5px | Subsection headlines |
| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Introductions | | `{typography.heading-3}` | 28px | 500 | 1.30 | 0 | Card titles |
| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | Standard body | | `{typography.heading-4}` | 22px | 500 | 1.35 | 0 | Feature tile titles |
| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50–2.00 | normal | Light-weight reading text | | `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | Smaller card titles, FAQ questions |
| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.88 | 0.16px | Navigation, emphasized | | `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle, lead body |
| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | Strong emphasis | | `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Primary body text |
| Button | Euclid Circular A | 13.5px–16px | 500–700 | 1.00 | 0.135px–0.9px | CTA labels | | `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells |
| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (relaxed) | normal | Metadata | | `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels |
| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (relaxed) | 0.2px | Tags, annotations | | `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels |
| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (relaxed) | normal | Code showcase titles | | `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Section eyebrows, course category tags |
| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks | | `{typography.button-md}` | 14px | 600 | 1.30 | 0 | Pill button labels |
| Code Label | Source Code Pro | 14px (0.88rem) | 400–500 | 1.14 (tight) | 1px–2px | `text-transform: uppercase` | | `{typography.code-md}` | 14px | 400 | 1.55 | 0 | Code mockups |
| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (relaxed) | 2.5px | `text-transform: uppercase` |
### Principles ### Principles
- **Serif for authority**: MongoDB Value Serif at hero scale creates an editorial presence unusual in tech — it communicates that MongoDB is an institution, not a startup. - Tight hero leading (1.10) on 72px display
- **Weight 300 as body default**: Euclid Circular A uses light (300) for body text, creating an airy reading experience that contrasts with the dense, dark backgrounds. - Negative letter-spacing on display sizes (-1.5px to -0.5px)
- **Wide-tracked monospace labels**: Source Code Pro uppercase at 1px–3px letter-spacing creates technical signposts that feel like database field labels — systematic, structured, classified. - 600 weight reserved for buttons and small emphasis (FAQ headings, badges)
- **Four-weight range**: 300 (light body) → 400 (standard) → 500 (UI/nav) → 700 (bold CTA) — a wider range than most systems, enabling fine-grained hierarchy. - Generous body leading (1.55) for technical documentation readability
## 4. Component Stylings ## Layout
### Spacing System
- **Base unit**: 4px (8px primary increment)
- **Tokens**: `{spacing.xxs}` (4px) through `{spacing.hero}` (120px)
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing tightens to `{spacing.section}` (64px)
### Grid & Container
- 1280px max-width with 32px gutters
- Pricing: 3-tier card row, dense feature comparison table below
- Learn catalog: 3-up course tile grid, 4-up certification grid
- AI use cases: 2-column hero with atmospheric illustration
### Whitespace Philosophy
Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding for deep teal bands. Pricing/learn surfaces tighten dramatically.
## Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows |
| 1 (subtle) | `rgba(0, 30, 43, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |
| 2 (card) | `rgba(0, 30, 43, 0.08) 0px 4px 12px 0px` | Feature cards |
| 3 (mockup) | `rgba(0, 30, 43, 0.12) 0px 12px 24px -4px` | Code mockup over hero |
| 4 (modal) | `rgba(0, 30, 43, 0.16) 0px 16px 48px -8px` | Modals, dropdowns |
### Decorative Depth
- Dark teal hero bands carry atmospheric gradient depth
- Code mockup cards on hero use canvas-dark surface with terminal aesthetic
- Pale-mint pricing-feature tier uses brand-tinted shadow
## Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Course category tags |
| `{rounded.sm}` | 6px | Type badges, code chips |
| `{rounded.md}` | 8px | Inputs, search-pill, code blocks |
| `{rounded.lg}` | 12px | Cards, pricing tiers, course tiles |
| `{rounded.xl}` | 16px | Larger feature panels |
| `{rounded.xxl}` | 24px | Featured product showcases |
| `{rounded.full}` | 9999px | All buttons, status badges |
### Photography Geometry
- Hero illustrations sit on full-bleed dark backgrounds
- Course tile thumbnails use `{rounded.lg}` corners
- Customer logos wall: wordmarks at consistent 60–80px height
## Components
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
### Buttons ### Buttons
**Primary Green (Dark Surface)** **`button-primary`** — Bright MongoDB green pill primary CTA, the dominant action.
- Background: `#00684a` (muted MongoDB green) - Background `{colors.brand-green}`, text `{colors.on-primary}` (deep navy), typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
- Text: `#000000` - Pressed state `button-primary-pressed` deepens to `{colors.primary-pressed}`.
- Radius: 50% (circular) or 100px (pill) - Disabled state `button-primary-disabled` uses `{colors.hairline}` background.
- Border: `1px solid #00684a`
- Shadow: `rgba(0,0,0,0.06) 0px 1px 6px`
- Hover: scale 1.1
- Active: scale 0.85
**Dark Teal Button** **`button-secondary`** — Outlined pill for secondary actions.
- Background: `#1c2d38` - Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
- Text: `#5c6c75`
- Radius: 100px (pill)
- Border: `1px solid #3d4f58`
- Hover: background `#1eaedb`, text white, translateX(5px)
**Outlined Button (Light Surface)** **`button-on-dark`** — Bright green pill on dark hero bands.
- Background: transparent - Background `{colors.brand-green}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
- Text: `#001e2b`
- Border: `1px solid #b8c4c2` **`button-secondary-on-dark`** — Outlined pill on dark backgrounds.
- Radius: 4px–8px - Background transparent, text `{colors.on-dark}`, border `1px solid {colors.hairline-dark}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
- Hover: background tint
**`button-ghost`** — Quieter rectangular ghost button.
- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`.
**`button-link`** — Inline green text link.
- Background transparent, text `{colors.brand-green-dark}`, typography `{typography.body-sm-medium}`, padding `0`.
### Cards & Containers ### Cards & Containers
- Light mode: white background with `1px solid #b8c4c2` border
- Dark mode: `#001e2b` or `#1c2d38` background with `1px solid #3d4f58` **`card-base`** — Standard content card.
- Radius: 16px (standard), 24px (medium), 48px (large/hero) - Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
- Shadow: `rgba(0,30,43,0.12) 0px 26px 44px` (forest-tinted)
- Image containers: 30px–32px radius **`card-feature`** — Feature card with larger padding.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
**`card-product-deploy`** — Product deployment card ("MongoDB Atlas / Community").
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
**`card-feature-dark`** — Dark teal feature card on hero band.
- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
**`card-course`** — MongoDB University course tile.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
- Top: colored category tag. Below: title `{typography.heading-5}`, description `{typography.body-sm}`, "Get Started →" link.
**`card-cert`** — Certification card.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
**`pricing-card`** — Standard pricing tier card.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
**`pricing-card-featured`** — Featured pricing tier (Flex tier, mint background + green border).
- Background `{colors.surface-feature}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.brand-green}`.
### Inputs & Forms ### Inputs & Forms
- Textarea: text `#e8edeb`, padding 12px 12px 12px 8px
- Borders: `1px solid #b8c4c2` on light, `1px solid #3d4f58` on dark **`text-input`** — Standard text field.
- Input radius: 4px - Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.
**`text-input-focused`** — Activated state.
- Border switches to `2px solid {colors.brand-green-dark}`.
**`search-pill`** — Standard 44px search bar.
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 44px, border `1px solid {colors.hairline-strong}`.
**`search-pill-large`** — Large 56px search bar (top of MongoDB University catalog).
- Background `{colors.canvas}`, text `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 56px, border `1px solid {colors.hairline-strong}`.
### Tabs
**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (top of pricing: "MongoDB Atlas / Enterprise Advanced").
- Inactive: text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active: background `{colors.ink}`, text `{colors.on-dark}`.
**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.
- Inactive: text `{colors.steel}`, no border. Active: text `{colors.brand-green-dark}`, 2px bottom border in `{colors.brand-green-dark}`.
### Badges & Status
**`badge-green`** — Bright green badge for new product highlights.
- Background `{colors.brand-green}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
**`badge-green-soft`** — Pale-mint pill for success/free indicators.
- Background `{colors.brand-green-soft}`, text `{colors.brand-green-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-purple`** — Purple course category tag.
- Background `{colors.accent-purple}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
**`badge-orange`** — Orange course category tag.
- Background `{colors.accent-orange}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
**`badge-popular`** — "Most Popular" tier indicator (dark teal pill with green text).
- Background `{colors.brand-teal-deep}`, text `{colors.brand-green}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`promo-banner`** — Dark teal sticky promo strip ABOVE the top nav.
- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`.
### Code
**`code-block`** — Code container.
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, typography `{typography.code-md}`, rounded `{rounded.md}`, padding `{spacing.md}`.
**`code-mockup-card`** — Embedded code mockup on hero band.
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.lg}`. Carries terminal-aesthetic code snippet.
### Tables
**`comparison-table`** — Pricing feature comparison table.
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
**`comparison-row`** — Individual feature row.
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.
### Documentation Components
**`service-tile`** — Tile in "Customize your deployment" 6-up grid.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
**`why-card`** — "Loved by builders" feature card.
- Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xl}`.
**`customer-testimonial-card`** — Customer quote card.
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
**`logo-wall-item`** — Customer logo wordmark cell.
- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
**`faq-accordion-item`** — FAQ panel.
- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.
### Navigation ### Navigation
- Dark header on forest-black background
- Euclid Circular A 16px weight 500 for nav links
- MongoDB logo (leaf icon + wordmark) left-aligned
- Green CTA pill buttons right-aligned
- Mega-menu dropdowns with product categories
### Image Treatment **Top Navigation (Marketing)** — Sticky white bar.
- Dashboard screenshots on dark backgrounds - Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline}`.
- Green-accented UI elements in screenshots - Left: MongoDB leaf logo + "Solutions / Resources / Company / Pricing" links.
- 30px–32px radius on image containers - Right: "Sign In" link + bright-green pill "Try Free" CTA.
- Full-width dark sections for product showcases
### Distinctive Components ### Signature Components
**Neon Green Accent Underlines** **`hero-band-dark`** — Deep teal hero band with embedded code mockup.
- `0px 2px 2px 0px solid #00ed64` — bottom + right border creating accent underlines - Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, padding `{spacing.hero}`.
- Used on feature headings and highlighted text - Layout: centered headline `{typography.hero-display}`, subtitle, button row, `code-mockup-card` below.
- Also appears as `#006cfa` (blue) variant
**Source Code Label System** **`hero-platform-card`** — Lighter-teal platform showcase card on dark hero.
- 14px uppercase Source Code Pro with 1px–2px letter-spacing - Background `{colors.brand-teal-mid}`, text `{colors.on-dark}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.
- Used as section category markers above headings
- Creates a "database field label" aesthetic
## 5. Layout Principles **`cta-banner-dark`** — Dark CTA banner at the bottom of feature pages.
- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.section}`.
### Spacing System **`footer-region`** — Dark teal multi-column footer.
- Base unit: 8px - Background `{colors.brand-teal-deep}`, padding `{spacing.section} {spacing.xxl}`.
- Scale: 1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px - 6-column link grid.
- Section headings in `{typography.body-sm-medium}` `{colors.on-dark}`.
### Grid & Container **`footer-link`** — Individual footer link.
- Max content width centered - Background transparent, text `{colors.on-dark-muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
- Dark hero section with contained content
- Light content sections below
- Card grids: 2–3 columns
- Full-width dark footer
### Whitespace Philosophy ## Do's and Don'ts
- **Dramatic mode transitions**: The shift from dark teal sections to white content creates built-in visual breathing through contrast, not just space.
- **Generous dark sections**: Dark hero and feature areas use extra vertical padding (80px+) to let the forest-dark background breathe.
- **Compact light sections**: White content areas are denser, with tighter card grids and less vertical spacing.
### Border Radius Scale
- Minimal (1px–2px): Small spans, badges
- Subtle (4px): Inputs, small buttons
- Standard (8px): Cards, links
- Card (16px): Standard cards, containers
- Toggle (20px): Switch elements
- Large (24px): Large panels
- Image (30px–32px): Image containers
- Hero (48px): Hero cards
- Pill (100px–999px): Buttons, navigation pills
- Full (9999px): Maximum pill
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Default surfaces |
| Subtle (Level 1) | `rgba(0,0,0,0.1) 0px 2px 4px` | Light card lift |
| Standard (Level 2) | `rgba(0,0,0,0.15) 0px 3px 9px` | Standard cards |
| Prominent (Level 3) | `rgba(0,0,0,0.15) 0px 3px 20px` | Elevated panels |
| Forest (Level 4) | `rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px` | Hero cards — teal-tinted |
**Shadow Philosophy**: MongoDB's shadow system is unique in that the primary elevation shadow uses `rgba(0, 30, 43, 0.12)` — a teal-tinted shadow that carries the forest-dark brand color into the depth system. This means even on white surfaces, shadows feel like they belong to the MongoDB color world rather than being generic neutral black.
## 7. Do's and Don'ts
### Do ### Do
- Use `#001e2b` (forest-black) for dark sections — not pure black - Use `{colors.brand-green}` (bright MongoDB green) for primary CTAs everywhere
- Apply MongoDB Green (`#00ed64`) sparingly for maximum electric impact - Pair dark-teal hero bands with bright green CTA pills
- Use MongoDB Value Serif ONLY for hero/display headings — Euclid Circular A for everything else - Apply `{rounded.full}` to every button, every status badge
- Apply Source Code Pro uppercase with wide tracking (1px–3px) for technical labels - Apply `{rounded.lg}` (12px) to cards consistently
- Use teal-tinted shadows (`rgba(0,30,43,0.12)`) for primary card elevation - Use category accent colors (purple, orange, green, teal) ONLY for course tags
- Maintain the dark/light section duality — dramatic contrast between modes - Maintain Euclid Circular A across every UI surface
- Use weight 300 for body text — the light weight is the readable voice - Use code mockup cards with terminal-aesthetic content for product showcases
- Apply pill radius (100px) to primary action buttons
### Don't ### Don't
- Don't use pure black (`#000000`) for dark backgrounds — always use teal-black (`#001e2b`) - Don't use the bright green for body text or large surfaces
- Don't use MongoDB Green (`#00ed64`) on backgrounds — it's an accent for text, underlines, and small highlights - Don't introduce additional accent colors beyond the brand green and category-encoding palette
- Don't use standard gray shadows — always use teal-tinted (`rgba(0,30,43,...)`) - Don't soften corners on buttons; the pill is a brand signature
- Don't apply serif font to body text — MongoDB Value Serif is hero-only - Don't replace deep teal hero bands with white hero bands
- Don't use narrow letter-spacing on Source Code Pro labels — the wide tracking IS the identity - Don't apply heavy shadows on flat documentation cards; reserve elevation for code mockups
- Don't mix dark and light section treatments within the same section - Don't use Source Code Pro for prose
- Don't use warm colors — the palette is strictly cool (teal, green, blue)
- Don't forget the green accent underlines — they're the signature decorative element
## 8. Responsive Behavior ## Responsive Behavior
### Breakpoints ### Breakpoints
| Name | Width | Key Changes | | Name | Width | Key Changes |
|------|-------|-------------| |---|---|---|
| Mobile Small | <425px | Tight single column | | Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. Course catalog 1-up. |
| Mobile | 425–768px | Standard mobile | | Mobile (large) | 480 – 767px | Course tiles 2-up. Hero 48px. |
| Tablet | 768–1024px | 2-column grids begin | | Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. |
| Desktop | 1024–1280px | Standard layout | | Desktop | 1024 – 1279px | 3-tier pricing card row. 3-up course catalog. Hero 64px. |
| Large Desktop | 1280–1440px | Expanded layout | | Wide Desktop | ≥ 1280px | Full 72px hero presentation. |
| Ultra-wide | >1440px | Maximum width, generous margins |
### Touch Targets ### Touch Targets
- Pill buttons with generous padding - Pill buttons render at 40–44px effective height
- Navigation links at 16px with adequate spacing - Form inputs render at 44px height
- Card surfaces as full-area touch targets - Search pill (large) renders at 56px
- Pill tabs ~32px → 44px on mobile
### Collapsing Strategy ### Collapsing Strategy
- Hero: MongoDB Value Serif 96px → 64px → scales further - **Promo banner** stays full-width; truncates at < 480px
- Navigation: horizontal mega-menu → hamburger - **Top nav** below 1024px collapses to hamburger
- Feature cards: multi-column → stacked - **Hero band**: code mockup card moves below text on mobile
- Dark/light sections maintain their mode at all sizes - **Pricing tiers**: 3-column → 2-column tablet → 1-column mobile
- Source Code Pro labels maintain uppercase treatment - **Course catalog**: 3-up → 2-up tablet → 1-up mobile
- **Hero typography**: 72px → 56px → 48px → 36px
- **Footer**: 6-column desktop → 3-column tablet → accordion mobile
### Image Behavior ### Image Behavior
- Dashboard screenshots scale proportionally - Atmospheric AI imagery uses 16:9 ratio with full-bleed scaling
- Dark section backgrounds maintained full-width - Code mockup card content remains readable across breakpoints
- Image radius maintained across breakpoints - Customer logo wall: wordmarks at consistent 60–80px height
## 9. Agent Prompt Guide ## Iteration Guide
### Quick Color Reference 1. Focus on ONE component at a time
- Dark background: Forest Black (`#001e2b`) 2. Reference component names and tokens directly
- Brand accent: MongoDB Green (`#00ed64`) 3. Run `npx @google/design.md lint DESIGN.md` after edits
- Functional green: Dark Green (`#00684a`) 4. Add new variants as separate `components:` entries
- Link blue: Action Blue (`#006cfa`) 5. Default to `{typography.body-md}` for body
- Text on light: Black (`#000000`) 6. Keep `{colors.brand-green}` as the primary CTA across all surfaces
- Text on dark: White (`#ffffff`) or Light Input (`#e8edeb`) 7. Pill-shaped buttons (`{rounded.full}`) always
- Border light: Silver Teal (`#b8c4c2`) 8. Dark-teal hero bands frame primary CTAs
- Border dark: Teal Gray (`#3d4f58`)
### Example Component Prompts ## Known Gaps
- "Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with 'potential' highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot."
- "Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing."
- "Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid."
- "Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background."
- "Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px)."
### Iteration Guide - Specific dark-mode token values for canvas/surface beyond hero bands not surfaced
1. Start with the mode decision: dark (#001e2b) for hero/features, white for content - Animation/transition timings not extracted; recommend 150–200ms ease
2. MongoDB Green (#00ed64) is electric — use once per section for maximum impact - Form validation success state not explicitly captured
3. Serif headlines (MongoDB Value Serif) create the editorial authority — never use for body - Course-tile category color mappings are observation-based
4. Weight 300 body text creates the airy reading experience — don't default to 400
5. Source Code Pro uppercase with wide tracking for technical labels — the database voice
6. Teal-tinted shadows keep everything in the MongoDB color world

1018
design-md/notion/DESIGN.md
View File

File diff suppressed because it is too large Load Diff