diff --git a/design-md/meta/DESIGN.md b/design-md/meta/DESIGN.md index 3331b9b..64a7e28 100644 --- a/design-md/meta/DESIGN.md +++ b/design-md/meta/DESIGN.md @@ -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:** -- Photography-first retail design where products are the visual heroes, not UI -- Binary surface strategy: pure white for information, deep dark for immersive product moments -- Pill-shaped CTAs in saturated blue create unmistakable action points -- Optimistic VF typeface with OpenType ss01/ss02 features brings geometric warmth -- Generous whitespace frames products like gallery exhibits -- 8px spacing grid with disciplined vertical rhythm -- Alternating light/dark sections create a "walkthrough" retail cadence +- Stark white canvas ({colors.canvas}) carrying full-bleed product photography with `{rounded.xxxl}` (32px) corner softening on showcase tiles +- Two-tier primary button system: marketing CTAs use {colors.ink-button} pills; commerce CTAs use {colors.primary} cobalt pills inside buy-now panels +- Optimistic VF as the universal display + body face with consistent `ss01, ss02` OpenType features +- Pill-shaped buttons ({rounded.full}) and `{rounded.xxxl}`/`{rounded.feature}` cards as the dominant geometric signature +- Saturated promotional banners (yellow {colors.warning}, dark {colors.ink-deep}) used sparingly above the nav for time-bound offers +- Photographic feature cards with no card chrome (no border, no shadow) — the product imagery IS the surface treatment -## 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 -- **Meta Blue Hover** (`#0143B5`): Darkened blue for hover states on primary buttons -- **Meta Blue Pressed** (`#004BB9`): Deepest blue for active/pressed button states -- **Meta Blue Light** (`#47A5FA`): Lighter blue variant used on dark backgrounds for CTAs -- **Facebook Blue** (`#1877F2`): Legacy accent inherited from FDS, used for deemphasized button text and badges +### Brand & Accent +- **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. +- **Deep Cobalt** ({colors.primary-deep}): Pressed-state and dark-surface variant of the cobalt primary; also the active link color. +- **Soft Cobalt** ({colors.primary-soft}): Translucent background tint for informational callouts (`{colors.primary-soft}` at 15% alpha). +- **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 -- **Oculus Purple** (`#A121CE`): Quest/Oculus product accent for VR content -- **Work Purple** (`#6441D2`): Accent for Meta for Work/enterprise content -- **Portal Blue** (`#1B365D`): Deep navy accent for Portal product line -- **Portal Hero Blue** (`#C8E4E8`): Soft teal-blue for Portal hero backgrounds -- **Portal Light Blue** (`#ADD4E0`): Secondary Portal surface tint +### Text +- **Deep Ink** ({colors.ink-deep}): Primary headline and body text on light surfaces. +- **Ink** ({colors.ink}): Standard body and secondary headline text. +- **Charcoal** ({colors.charcoal}): Tertiary body text and form-button labels. +- **Slate** ({colors.slate}): Section-header copy and supporting microcopy. +- **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 -- **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 +## Typography ### 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) -- 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) +A secondary Helvetica fallback chain is used for technical microcopy (12px) inside spec sheets and footer fine print. ### Hierarchy -| Role | Size | Weight | Line Height | Letter Spacing | Notes | -|------|------|--------|-------------|----------------|-------| -| Display 1 | 64px | 500 (Medium) | 1.16 | — | Hero headlines on desktop, ss01+ss02 | -| Display 2 | 48px | 500 (Medium) | 1.17 | — | Section heroes, product titles | -| Heading 1 | 36px | 500 (Medium) | 1.28 | — | Major section headings | -| Heading 2 | 28px | 300 (Light) | 1.21 | — | Subheadings, lighter feel | -| Heading 3 | 18px | 700 (Bold) | 1.44 | — | Card titles, bold callouts, ss01+ss02 | -| Body | 18px | 400 (Regular) | 1.44 | — | Product descriptions, body copy | -| Body Compact | 16px | 500 (Medium) | 1.50 | -0.16px | Navigation links, UI labels | -| Caption Bold | 14px | 700 (Bold) | 1.43 | — | Emphasized labels, price text | -| Caption | 14px | 400 (Regular) | 1.43 | -0.14px | Secondary labels, metadata | -| Small | 12px | 400 (Regular) | 1.33 | — | Footer links, legal text, timestamps | -| Button | 14px | 400 (Regular) | 1.43 | -0.14px | Button label text | +| Token | Size | Weight | Line Height | Letter Spacing | OpenType | Use | +|---|---|---|---|---|---|---| +| `{typography.hero-display}` | 64px | 500 | 1.16 | 0 | ss01, ss02 | Homepage hero ("Get 25% off…", category opener) | +| `{typography.display-lg}` | 48px | 500 | 1.17 | 0 | ss01, ss02 | Section-opener display ("Made for prescriptions. Built for comfort.") | +| `{typography.heading-lg}` | 36px | 500 | 1.28 | 0 | ss01, ss02 | Subsection headlines ("Why buy from Meta", "Tech specs") | +| `{typography.heading-md}` | 28px | 300 | 1.21 | 0 | ss01, ss02 | Editorial subheads in lighter weight ("Look forward", "Built for prescriptions") | +| `{typography.heading-sm}` | 24px | 500 | 1.25 | 0 | ss01, ss02 | Card titles, feature-tile headers | +| `{typography.subtitle-lg}` | 18px | 700 | 1.44 | 0 | — | Bold callouts, FAQ question titles | +| `{typography.subtitle-md}` | 18px | 400 | 1.44 | 0 | — | Body lead and longer-line subtitles | +| `{typography.body-md}` | 16px | 400 | 1.50 | -0.16px | — | Primary body text | +| `{typography.body-md-bold}` | 16px | 700 | 1.50 | -0.16px | — | Body emphasis and link-md | +| `{typography.body-sm}` | 14px | 400 | 1.43 | -0.14px | — | Secondary body, helper 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 +- 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. - -## 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 +## Layout ### Spacing System - -Base unit: 8px - -| Token | Value | Use | -|-------|-------|-----| -| 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 | +- **Base unit**: 4px increment with 8px as the dominant primary step. +- **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). +- **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. ### Grid & Container - -- Max container width: ~1440px, centered with auto margins -- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile -- 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 +- Marketing page max-width sits around 1280px with 32–48px gutters. +- The PDP layout uses a 2-column split: hero gallery (~58% width) + sticky purchase rail (~42%, with `max-width: 380px` on the rail). +- 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. ### 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 -| Value | Context | -|-------|---------| -| 8px | Inputs, small UI elements, glimmer placeholders | -| 20px | Cards (--card-corner-radius) | -| 24px | Feature cards, product highlight areas, ghost buttons | -| 100px | Pill buttons, tags, badges (fully rounded) | +| Token | Value | Use | +|---|---|---| +| `{rounded.xs}` | 2px | Inline checkbox marks, fine UI corners | +| `{rounded.sm}` | 4px | Tags, micro-controls | +| `{rounded.md}` | 6px | Square thumbnail rounding | +| `{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 | -|-------|-----------|-----| -| 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 | +## Components -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 -- **Dark section gradient**: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` overlay on product photography for text legibility -- **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 +**`button-primary`** — Black pill primary CTA for marketing surfaces ("Shop", "Pre-order"). +- Background `{colors.ink-button}`, text `{colors.on-ink-button}`, typography `{typography.button-md}`, padding `14px 30px`, rounded `{rounded.full}`. +- 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 - -- Use pill-shaped (100px radius) buttons for all primary and secondary CTAs -- Let product photography dominate — make images the visual hero of every section -- Alternate between light and dark surface sections to create visual rhythm -- Use Optimistic VF with ss01 and ss02 features for all display text -- Keep body copy brief and scannable — this is retail, not editorial -- 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 +- Reserve `{colors.primary}` (cobalt) for buy-now CTAs only — its visual weight is meaningful precisely because it doesn't appear on marketing pages. +- Use `{colors.ink-button}` (black) for marketing-surface primary CTAs. Pair with `{colors.button-secondary}` ghost outline for the secondary action. +- Apply `{rounded.full}` to every button, every category pill, every badge, every chip — buttons are NEVER squared in Meta's system. +- Apply `{rounded.xxxl}` to photographic product cards and `{rounded.xl}` to icon-feature tiles to maintain the visible card-hierarchy contrast. +- Switch on `ss01, ss02` together for any Optimistic VF heading. Never one stylistic set without the other. +- Use the 300-weight `{typography.heading-md}` for editorial subheads — it creates the brand's signature visual rhythm against the 500-weight displays. ### 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 -- 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 +## Responsive Behavior ### Breakpoints - | Name | Width | Key Changes | -|------|-------|-------------| -| Mobile | <768px | Single column, hamburger nav, hero text shrinks to 36px, full-width product cards, 48px section padding | -| Tablet | 768-1024px | 2-column product grid, compact nav, hero text at 48px | -| Desktop | 1024-1440px | 3-column product grid, full horizontal nav, hero text at 64px, 80px section padding | -| Large Desktop | >1440px | Max-width container (1440px) centered, increased horizontal margins | +|---|---|---| +| 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. | +| Mobile (large) | 480 – 767px | Same as small but feature tiles render two-up. | +| Tablet | 768 – 1023px | Two-column feature grids. Pill-tab nav returns. PDP gallery + purchase rail render side-by-side at compressed proportions (~60/40). | +| 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 - -- Minimum touch target: 44x44px (WCAG AAA compliant) -- Mobile button height: minimum 44px with 10px vertical padding -- Nav hamburger icon: 48x48px touch area -- Product card tappable area: full card surface +- Pill buttons render at 40–44px effective height (with the 14px button text + `14px 30px` padding). Above the WCAG AAA 44px floor. +- Circular icon buttons are 40×40px — at the AA floor; bumps to 44×44px on mobile via override. +- Color swatch circles are 32×32px. To hit AAA, the swatch carries a 12px clear hit zone around it (effective hit target ~56px). +- Form inputs render at 44px height to align with primary button height. ### Collapsing Strategy - -- **Navigation**: Horizontal links collapse to hamburger menu below 768px; CTA button remains visible -- **Product grids**: 3-col → 2-col at 1024px → 1-col at 768px -- **Hero sections**: Display text scales from 64px → 48px → 36px; CTA buttons stack vertically on mobile -- **Feature sections**: 2-column (image + text) → full-width stacked below 768px, image on top -- **Section padding**: 80px → 64px → 48px → 32px as viewport narrows -- **Card radius**: Remains consistent at 20-24px across all breakpoints +- **Promo banner** stays full-width on all breakpoints; truncates with ellipsis on small mobile, retains the inline link affordance. +- **Pill-tab nav** below 768px collapses into a hamburger drawer; the active tab is rendered as a label inside the closed nav. +- **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. +- **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. +- **Hero typography**: `{typography.hero-display}` (64px) drops to `{typography.heading-lg}` (36px) at < 768px and `{typography.heading-sm}` (24px) at < 480px. +- **Footer**: 6-column desktop layout reflows to 2-column at tablet and accordion-collapsed groups at mobile. ### 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 -- 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 +## Iteration Guide -## 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`) -- Background: White (`#FFFFFF`) -- Heading text: Dark Charcoal (`#1C2B33`) -- Body text: Slate Gray (`#5D6C7B`) -- 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 +- 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`. +- Animation/transition timings are not extracted; recommend 150–250ms ease-out for primary surface transitions and 300ms ease-in-out for accordion expand/collapse. +- 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. +- 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. diff --git a/design-md/minimax/DESIGN.md b/design-md/minimax/DESIGN.md index 342fd00..2138de3 100644 --- a/design-md/minimax/DESIGN.md +++ b/design-md/minimax/DESIGN.md @@ -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:** -- White-dominant layout with colorful product card accents -- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data) -- Pill buttons (9999px radius) for primary navigation and CTAs -- Generous rounded cards (20px–24px radius) for product showcases -- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light) -- Brand pink (`#ea5ec1`) as secondary accent -- Near-black text (`#222222`, `#18181b`) on white backgrounds -- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth -- Dark footer section (`#181e25`) with product/company links +- Stark monochrome palette — black ({colors.primary}) and white ({colors.canvas}) — broken open by saturated brand-color gradient cards +- Distinct product-color encoding: each model line has its own vibrant brand color (coral M2.7, magenta Music 2.6, blue Hailuo, orange Speech 2.8) +- DM Sans across the entire system; Inter as fallback +- Pill-shaped buttons ({rounded.full}) and pill-shaped tabs everywhere; rectangular forms only inside data tables and dense docs +- Hero typography uses tight 1.10 line-height with -2px letter-spacing for impact +- Documentation surfaces use a 3-column layout: left sidebar nav, center prose body, right table-of-contents +- Black promo banners ({colors.primary}) above the nav for time-bound brand moments -## 2. Color Palette & Roles +## Colors -### Brand Primary -- **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 +> 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. -### Blue Scale (Primary) -- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds -- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights -- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions -- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states -- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed/active states -- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis +### Brand & Accent +- **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. +- **Brand Magenta** ({colors.brand-magenta}): Secondary product-card identity (Music 2.6); used for music/audio product encoding. +- **Brand Blue** ({colors.brand-blue}): Hailuo video product identity; primary blue accent across the system. +- **Brand Blue Deep** ({colors.brand-blue-deep}): Form-control activation, link emphasis. +- **Brand Blue 700** ({colors.brand-blue-700}): Documentation tag and reference text color. +- **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 -- **Near Black** (`#222222`): `--col-text00`, primary text -- **Dark** (`#18181b`): Button text, headings -- **Charcoal** (`#181e25`): Dark surface text, footer background -- **Dark Gray** (`#45515e`): `--col-text04`, secondary text -- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels -- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text +### Surface +- **Canvas White** ({colors.canvas}): Primary page background and card surface. +- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, sidebar-nav active state. +- **Surface Soft** ({colors.surface-soft}): Quieter section divisions. +- **Hairline** ({colors.hairline}): 1px input border and primary divider. +- **Hairline Soft** ({colors.hairline-soft}): Quieter table-row divider and secondary section break. -### Surface & Background -- **Pure White** (`#ffffff`): `--col-bg13`, primary background -- **Light Gray** (`#f0f0f0`): Secondary button backgrounds -- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay -- **Border Light** (`#f2f3f5`): Subtle section dividers -- **Border Gray** (`#e5e7eb`): Component borders +### Text +- **Ink** ({colors.ink}): Primary headline and CTA text — the brand's near-black anchor. +- **Ink Strong** ({colors.ink-strong}): Pure black used in promo banners and hero displays for maximum contrast. +- **Charcoal** ({colors.charcoal}): Body text on light surfaces. +- **Slate** ({colors.slate}): Secondary text, metadata. +- **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 -- **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 -- **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 +## Typography -## 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 -- **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` +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. ### Hierarchy -| Role | Font | Size | Weight | Line Height | Notes | -|------|------|------|--------|-------------|-------| -| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines | -| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles | -| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers | -| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings | -| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings | -| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names | -| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body | -| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text | -| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis | -| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links | -| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons | -| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata | -| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges | -| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations | +| Token | Size | Weight | Line Height | Letter Spacing | Use | +|---|---|---|---|---|---| +| `{typography.hero-display}` | 80px | 600 | 1.10 | -2px | Homepage hero ("MiniMax Music 2.6") | +| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.5px | Section openers, major page heroes | +| `{typography.heading-lg}` | 40px | 600 | 1.20 | -1px | Sub-page headlines ("Token Plan", "Models Overview") | +| `{typography.heading-md}` | 32px | 600 | 1.25 | -0.5px | Subsection headers ("Full-Stack Model Matrix") | +| `{typography.heading-sm}` | 24px | 600 | 1.30 | 0 | Card titles, feature headers | +| `{typography.card-title}` | 20px | 600 | 1.40 | 0 | Product-card titles, feature-tile headers | +| `{typography.subtitle}` | 18px | 500 | 1.50 | 0 | Section subtitles, lead body | +| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text | +| `{typography.body-md-bold}` | 16px | 700 | 1.50 | 0 | Body emphasis | +| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells, navigation | +| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar nav, button labels | +| `{typography.caption}` | 13px | 400 | 1.70 | 0 | Documentation captions, fine print | +| `{typography.caption-bold}` | 13px | 600 | 1.50 | 0 | Badge labels, table-header text | +| `{typography.micro}` | 12px | 400 | 1.50 | 0 | Footer microcopy, chip labels | +| `{typography.button-md}` | 14px | 600 | 1.40 | 0 | Pill button labels | ### 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. -- **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). -- **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. -- **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. +- **Tight hero leading** (1.10) and aggressive negative letter-spacing on display sizes create a magazine-quality typographic display unique to MiniMax. +- **Generous body leading** (1.50) keeps long-form documentation comfortable; captions push to 1.70 for scientific-paper-grade clarity. +- **Weight discipline:** 400 (body), 500 (medium emphasis), 600 (headings/buttons), 700 (strong inline emphasis). Heavier weights are not used. +- **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 -**Pill Primary Dark** -- Background: `#181e25` -- Text: `#ffffff` -- Padding: 11px 20px -- Radius: 8px -- Use: Primary CTA ("Get Started", "Learn More") +**`button-primary`** — Black pill primary CTA, the dominant action across all surfaces. +- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `11px 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. -**Pill Nav** -- Background: `rgba(0, 0, 0, 0.05)` (subtle tint) -- Text: `#18181b` -- Radius: 9999px (full pill) -- Use: Navigation tabs, filter toggles +**`button-secondary`** — Outlined pill secondary action, paired with primary in dual-CTA hero patterns. +- Background transparent, text `{colors.ink}`, border `1px solid {colors.ink}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`. -**Pill White** -- Background: `#ffffff` -- Text: `rgba(24, 30, 37, 0.8)` -- Radius: 9999px -- Opacity: 0.5 (default state) -- Use: Secondary nav, inactive tabs +**`button-tertiary`** — White-fill quieter pill, used for tertiary nav and informational CTAs. +- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`. -**Secondary Light** -- Background: `#f0f0f0` -- Text: `#333333` -- Padding: 11px 20px -- Radius: 8px -- Use: Secondary actions +**`button-link`** — Inline text link styled as a subtle button. +- Background transparent, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `8px 0`. Underline appears on activation. -### Product Cards -- Background: Vibrant gradients (pink/purple/orange/blue) -- 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 +**`button-icon-circular`** — 36×36px circular utility button (carousel arrows, share, copy). +- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`. -### AI Product Cards (Matrix) -- 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 +### Vibrant Product Cards -### Links -- **Primary**: `#18181b` or `#181e25`, underline on dark text -- **Secondary**: `#8e8e93`, muted for less emphasis -- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections +**`product-card-coral`** — M2.7 / Token Plan signature card. +- Background `{colors.brand-coral}`, text `{colors.on-dark}`, rounded `{rounded.hero}` (32px), padding `{spacing.xxl}`. +- Hosts the M2.7 wordmark in massive `{typography.display-lg}` with white tagline. + +**`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 -- 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 -- Base unit: 8px -- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px +**Top Navigation (Documentation/Platform)** — Compressed nav with center search-pill and right-side account/upgrade CTAs. +- Background `{colors.canvas}`, height ~56px, with search-pill at center and "Documentation / Account / Subscribe" links + black-pill "Sign Up" right. -### Grid & Container -- Max content width centered on page -- Product card grids: horizontal scroll or 3–4 column layout -- Full-width white sections with contained content -- Dark footer at full-width +**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — Documentation left rail link entries. +- Inactive: background transparent, text `{colors.charcoal}`, typography `{typography.body-sm}`, rounded `{rounded.sm}`, padding `{spacing.xs} {spacing.md}`. +- Active: background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`. -### Breakpoints -| Name | Width | Key Changes | -|------|-------|-------------| -| Mobile | <768px | Single column, stacked cards | -| Tablet | 768–1024px | 2-column grids | -| Desktop | >1024px | Full layout, horizontal card scrolls | +**`doc-toc-item`** — Right-rail table-of-contents links. +- Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xs} 0`. Active item color shifts to `{colors.ink}`. -### Whitespace Philosophy -- **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. +### Signature Components -### Border Radius Scale -- Minimal (4px): Small tags, micro badges -- 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 +**`hero-band-marketing`** — Centered hero with massive 80px display + dual-CTA pair. +- Layout: centered headline in `{typography.hero-display}` ({colors.ink}), centered subtitle in `{typography.subtitle}` ({colors.steel}), centered button row (`button-primary` + `button-secondary`). -## 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 | -|-------|-----------|-----| -| Flat (Level 0) | No shadow | White background, text blocks | -| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers | -| 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 | +**`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. +- Top: 100px-tall illustration zone (often line-art icon or 3D mark). +- Below: title in `{typography.card-title}`, description in `{typography.body-sm}` `{colors.steel}`. -**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 -- Use white as the dominant background — let product cards provide the color -- Apply pill radius (9999px) for navigation tabs and toggle buttons -- Use generous border radius (20px–24px) for product showcase cards -- Employ the purple-tinted shadow for featured/hero product cards -- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only -- Use Outfit for display headings, DM Sans for everything functional -- Maintain the universal 1.50 line-height across body text -- Let colorful product illustrations/gradients serve as the primary visual interest +- Use `{colors.primary}` (black) as the dominant CTA — it's the brand's most recognizable interactive element. +- 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. +- Pair `{rounded.hero}` (32px) gradient cards with `{rounded.xl}` (16px) white cards in the same viewport — the radius contrast is the visual signature. +- Apply `{rounded.full}` to every button, every pill tab, every badge. +- Use `{typography.hero-display}` (80px) with -2px letter-spacing for hero displays — never compromise the leading or letter-spacing. +- 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. ### Don't -- Don't add colored backgrounds to main content sections — white is structural -- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core -- Don't apply the brand pink (`#ea5ec1`) to text or buttons — it's for logo and decorative accents only -- Don't mix more than one display font per section (Outfit OR Poppins, not both) -- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text -- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint -- Don't use Roboto for headings — it's the data/technical context font only +- Don't use brand-coral or brand-magenta on body text or large surfaces — they lose meaning when overused. +- Don't soften corners on buttons (anything less than `{rounded.full}`); the pill is a brand signature. +- Don't introduce a second display typeface; DM Sans handles every role. +- Don't reduce hero leading below 1.10 — the brand needs that breathing room on the 80px display. +- Don't apply heavy shadows on white cards; flat-with-borders is the documentation default. +- Don't put gradient backgrounds on standard buttons; gradients are reserved for product-card identity moments. -## 8. Responsive Behavior +## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | -|------|-------|-------------| -| Mobile | <768px | Single column, stacked product cards, hamburger nav | -| Tablet | 768–1024px | 2-column product grids, condensed spacing | -| Desktop | >1024px | Full horizontal card layouts, expanded spacing | +|---|---|---| +| Mobile (small) | < 480px | Single column. Hero drops to 40px. Pill nav collapses to hamburger. Product matrix horizontal-scroll. Footer 1-column accordion. | +| Mobile (large) | 480 – 767px | Same as small but AI product matrix renders 2-up. | +| 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 -- Hero: 80px → responsive scaling to ~40px on mobile -- Product card grid: horizontal scroll → 2-column → single column stacked -- Navigation: horizontal → hamburger menu -- Footer: multi-column → stacked sections -- Spacing: 64–80px gaps → 32–40px on mobile +- **Promo banner** stays full-width; collapses to single line at < 480px with truncation. +- **Top nav** below 1024px collapses to hamburger; horizontal links move into drawer. +- **Documentation grid**: 3-column desktop → sidebar-drawer at < 1024px → single-column with collapsible sidebar at < 768px. +- **Product matrix**: 4-column desktop → horizontal-scroll at < 1024px (carousel-style with snap points). +- **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 -- 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` +## Iteration Guide -### Example Component Prompts -- "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)." -- "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." -- "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." -- "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." -- "Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout." +1. Focus on ONE component at a time. The system has high internal consistency. +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 and contrast issues. +4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-active`). +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`. +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 -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 -3. Purple-tinted shadows for featured cards, neutral shadows for everything else -4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only -5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable -6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements +## Known Gaps + +- 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. +- Animation/transition timings are not extracted; recommend 150–200ms ease for hover/focus state transitions. +- Form validation success state is not explicitly captured beyond defaults — implement following standard green-border + success badge patterns. +- Code syntax highlighting palette inside docs is not formalized; documentation samples appear with system-default monospace and minimal coloring. diff --git a/design-md/mintlify/DESIGN.md b/design-md/mintlify/DESIGN.md index 6b2a4e0..b2544b8 100644 --- a/design-md/mintlify/DESIGN.md +++ b/design-md/mintlify/DESIGN.md @@ -1,326 +1,852 @@ -# Design System Inspired by Mintlify +--- +version: alpha +name: Mintlify +description: Mintlify presents documentation infrastructure with a dual-mode aesthetic — atmospheric sky-gradient marketing heroes (cloud illustration backdrops, soft cream-to-blue washes) paired with dense developer-grade documentation surfaces. The system uses Inter for UI prose, Geist Mono for code, and a signature Mintlify green ({colors.brand-green}) reserved for accent CTAs and active states. Black-pill primary buttons dominate marketing, white-on-dark inversions appear on dark hero bands, and a 3-column documentation layout (sidebar / prose / TOC) anchors the developer experience. Coverage spans homepage, startups program, pricing comparison, and the live tabs documentation page. -## 1. Visual Theme & Atmosphere +colors: + primary: "#0a0a0a" + on-primary: "#ffffff" + brand-green: "#00d4a4" + brand-green-deep: "#00b48a" + brand-green-soft: "#7cebcb" + brand-tag: "#3772cf" + brand-warn: "#c37d0d" + brand-annotate: "#1ba673" + brand-error: "#d45656" + brand-cursor: "#888888" + hero-sky-from: "#87a8c8" + hero-sky-to: "#f5e9d8" + hero-dark-from: "#1a3d4a" + hero-dark-to: "#2d5a4f" + testimonial-orange: "#f55a3c" + testimonial-orange-deep: "#cc3a1f" + canvas: "#ffffff" + canvas-dark: "#0a0a0a" + surface: "#f7f7f7" + surface-soft: "#fafafa" + surface-code: "#1c1c1e" + hairline: "#e5e5e5" + hairline-soft: "#ededed" + hairline-dark: "#1f1f1f" + ink: "#0a0a0a" + charcoal: "#1c1c1e" + slate: "#3a3a3c" + steel: "#5a5a5c" + stone: "#888888" + muted: "#a8a8aa" + on-dark: "#ffffff" + on-dark-muted: "#b3b3b3" -Mintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (`#ffffff`) background, near-black (`#0d0d0d`) text, and a signature green brand accent (`#18E299`) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility — a design system that whispers "we care about your developer experience" in every pixel. +typography: + hero-display: + fontFamily: Inter + fontSize: 72px + fontWeight: 600 + lineHeight: 1.05 + letterSpacing: -2px + display-lg: + fontFamily: Inter + fontSize: 56px + fontWeight: 600 + lineHeight: 1.10 + letterSpacing: -1.5px + heading-1: + fontFamily: Inter + fontSize: 48px + fontWeight: 600 + lineHeight: 1.10 + letterSpacing: -1px + heading-2: + fontFamily: Inter + fontSize: 36px + fontWeight: 600 + lineHeight: 1.20 + letterSpacing: -0.5px + heading-3: + fontFamily: Inter + fontSize: 28px + fontWeight: 600 + lineHeight: 1.25 + heading-4: + fontFamily: Inter + fontSize: 22px + fontWeight: 600 + lineHeight: 1.30 + heading-5: + fontFamily: Inter + fontSize: 18px + fontWeight: 600 + lineHeight: 1.40 + subtitle: + fontFamily: Inter + fontSize: 18px + fontWeight: 400 + lineHeight: 1.50 + body-md: + fontFamily: Inter + fontSize: 16px + fontWeight: 400 + lineHeight: 1.50 + body-md-medium: + fontFamily: Inter + fontSize: 16px + fontWeight: 500 + lineHeight: 1.50 + 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: 0.5px + button-md: + fontFamily: Inter + fontSize: 14px + fontWeight: 500 + lineHeight: 1.30 + code-md: + fontFamily: Geist Mono + fontSize: 14px + fontWeight: 400 + lineHeight: 1.50 + code-sm: + fontFamily: Geist Mono + fontSize: 13px + fontWeight: 400 + lineHeight: 1.40 + code-inline: + fontFamily: Geist Mono + fontSize: 13px + fontWeight: 500 + lineHeight: 1.30 -The Inter font family carries the entire typographic load. At display sizes (40–64px), it uses tight negative letter-spacing (-0.8px to -1.28px) and semibold weight (600), creating headlines that feel focused and compressed like well-written documentation headers. Body text at 16–18px with 150% line-height provides generous reading comfort. Geist Mono appears exclusively for code and technical labels — uppercase, tracked-out, small — the voice of the terminal inside the marketing page. +rounded: + xs: 4px + sm: 6px + md: 8px + lg: 12px + xl: 16px + xxl: 24px + full: 9999px -What distinguishes Mintlify from other documentation platforms is its atmospheric gradient hero. A soft, cloud-like green-to-white gradient wash behind the hero content creates a sense of ethereal intelligence — documentation that floats above the noise. Below the hero, the page settles into a disciplined alternation of white sections separated by subtle 5% opacity borders. Cards use generous padding (24px+) with large radii (16px–24px) and whisper-thin borders, creating containers that feel open rather than boxed. +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: "10px 20px" + button-primary-pressed: + backgroundColor: "{colors.charcoal}" + textColor: "{colors.on-primary}" + button-primary-disabled: + backgroundColor: "{colors.hairline}" + textColor: "{colors.muted}" + button-accent-green: + backgroundColor: "{colors.brand-green}" + textColor: "{colors.primary}" + typography: "{typography.button-md}" + rounded: "{rounded.full}" + padding: "10px 20px" + button-on-dark: + backgroundColor: "{colors.on-dark}" + textColor: "{colors.primary}" + typography: "{typography.button-md}" + rounded: "{rounded.full}" + padding: "10px 20px" + button-secondary: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.button-md}" + rounded: "{rounded.full}" + padding: "10px 20px" + border: "1px solid {colors.hairline}" + button-ghost: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.button-md}" + rounded: "{rounded.md}" + padding: "8px 12px" + button-link: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.body-sm-medium}" + padding: "0" + button-icon-circular: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.full}" + size: 32px + border: "1px solid {colors.hairline}" + card-base: + backgroundColor: "{colors.canvas}" + rounded: "{rounded.lg}" + padding: "{spacing.xl}" + border: "1px solid {colors.hairline}" + card-feature: + backgroundColor: "{colors.surface}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-help: + backgroundColor: "{colors.canvas}" + rounded: "{rounded.lg}" + padding: "{spacing.xl}" + border: "1px solid {colors.hairline}" + card-startup-perk: + 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.canvas}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + border: "2px solid {colors.brand-green}" + shadow: "rgba(0, 212, 164, 0.08) 0px 8px 24px" + testimonial-card-feature: + backgroundColor: "{colors.testimonial-orange}" + textColor: "{colors.on-dark}" + rounded: "{rounded.lg}" + padding: "{spacing.section}" + testimonial-card-quote: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + border: "1px solid {colors.hairline}" + 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-green}" + 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.body-sm-medium}" + padding: "{spacing.sm} {spacing.md}" + border: "0 0 2px transparent solid" + segmented-tab-active: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.body-sm-medium}" + border: "0 0 2px {colors.ink} solid" + pill-tab: + backgroundColor: "{colors.canvas}" + textColor: "{colors.steel}" + typography: "{typography.body-sm-medium}" + rounded: "{rounded.full}" + padding: "8px 16px" + 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-discount: + backgroundColor: "{colors.brand-green}" + textColor: "{colors.primary}" + typography: "{typography.caption-bold}" + rounded: "{rounded.full}" + padding: "2px 8px" + badge-required: + backgroundColor: "{colors.brand-error}" + textColor: "{colors.on-dark}" + typography: "{typography.micro-uppercase}" + rounded: "{rounded.sm}" + padding: "2px 6px" + badge-type: + backgroundColor: "{colors.surface}" + textColor: "{colors.steel}" + typography: "{typography.code-sm}" + rounded: "{rounded.sm}" + padding: "2px 6px" + badge-tag: + backgroundColor: "rgba(55, 114, 207, 0.15)" + textColor: "{colors.brand-tag}" + typography: "{typography.caption-bold}" + rounded: "{rounded.sm}" + padding: "2px 8px" + promo-banner: + backgroundColor: "{colors.canvas-dark}" + textColor: "{colors.on-dark}" + typography: "{typography.body-sm-medium}" + padding: "{spacing.sm} {spacing.md}" + 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 {colors.hairline-dark} solid" + code-inline: + backgroundColor: "{colors.surface}" + textColor: "{colors.charcoal}" + typography: "{typography.code-inline}" + rounded: "{rounded.xs}" + padding: "2px 6px" + border: "1px solid {colors.hairline}" + property-row: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.body-sm}" + padding: "{spacing.md} 0" + border: "0 0 1px {colors.hairline-soft} solid" + feature-comparison-table: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + typography: "{typography.body-sm}" + rounded: "{rounded.md}" + border: "1px solid {colors.hairline}" + feature-comparison-row: + backgroundColor: "{colors.canvas}" + textColor: "{colors.ink}" + padding: "{spacing.md} {spacing.lg}" + border: "0 0 1px {colors.hairline-soft} solid" + sidebar-nav-item: + backgroundColor: "transparent" + textColor: "{colors.steel}" + 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}" + sidebar-section-header: + backgroundColor: "transparent" + textColor: "{colors.steel}" + typography: "{typography.micro-uppercase}" + padding: "{spacing.md} {spacing.md} {spacing.xs}" + doc-toc-item: + backgroundColor: "transparent" + textColor: "{colors.steel}" + typography: "{typography.body-sm}" + padding: "{spacing.xxs} 0" + doc-toc-item-active: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.body-sm-medium}" + copy-code-button: + backgroundColor: "transparent" + textColor: "{colors.on-dark-muted}" + typography: "{typography.caption}" + rounded: "{rounded.sm}" + padding: "{spacing.xxs} {spacing.xs}" + border: "1px solid {colors.hairline-dark}" + hero-band-sky: + backgroundColor: "{colors.hero-sky-from}" + textColor: "{colors.on-dark}" + rounded: "0" + padding: "{spacing.hero}" + hero-band-dark: + backgroundColor: "{colors.hero-dark-from}" + textColor: "{colors.on-dark}" + rounded: "0" + padding: "{spacing.hero}" + hero-product-mockup: + backgroundColor: "{colors.canvas}" + rounded: "{rounded.lg}" + padding: "0" + border: "1px solid {colors.hairline-soft}" + shadow: "rgba(0, 0, 0, 0.12) 0px 24px 48px -8px" + 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: "1px solid {colors.hairline-soft}" + footer-region: + backgroundColor: "{colors.canvas}" + textColor: "{colors.steel}" + typography: "{typography.body-sm}" + padding: "{spacing.section} {spacing.xxl}" + border: "1px solid {colors.hairline}" + footer-link: + backgroundColor: "transparent" + textColor: "{colors.steel}" + typography: "{typography.body-sm}" + padding: "{spacing.xxs} 0" + startup-program-card: + backgroundColor: "{colors.canvas}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + border: "1px solid {colors.hairline}" + founder-quote-card: + backgroundColor: "{colors.testimonial-orange}" + textColor: "{colors.on-dark}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" +--- + +## Overview + +Mintlify positions itself at the intersection of polished marketing presentation and developer-grade documentation density. The home and startups pages open with cinematic atmospheric heroes — soft sky-gradient backdrops with cloud illustrations on the homepage, dark teal-to-mint gradients with a rocket launch on the startups page — that feel more like a SaaS landing aesthetic than a developer tool. Then the deeper surfaces (pricing comparison, live documentation pages) collapse into dense, high-information layouts where Inter body type carries 14–16px copy across long-form prose, syntax-highlighted code blocks, and 3-column documentation grids. + +The brand's signature mint green ({colors.brand-green}) appears sparingly but decisively — on the hero "Get started" pill button, the green checkmark icons inside feature lists, the "Featured" pricing tier border, and active state indicators inside docs UI. Black-pill primary buttons dominate the marketing flow; white-on-dark inversions appear on dark hero bands. The signature pairing of Inter (body, headings) with Geist Mono (code blocks, inline references, type signatures) reinforces the developer-tool DNA without requiring a third typeface. **Key Characteristics:** -- Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable -- Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice -- Brand green (`#18E299`) used sparingly — CTAs, hover states, focus rings, and accent touches -- Atmospheric gradient hero with cloud-like green-white wash -- Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills -- Subtle 5% opacity borders (`rgba(0,0,0,0.05)`) creating barely-there separation -- 8px base spacing system with generous section padding (48px–96px) -- Clean white canvas — no gray backgrounds, no color sections, depth through borders and whitespace alone +- Atmospheric gradient hero bands (sky-blue to cream on homepage; teal-to-mint on startups) provide cinematic marketing presentation +- Signature Mintlify mint green ({colors.brand-green}) reserved for accent CTAs, active states, and feature confirmations +- Black-pill primary buttons ({colors.primary} + `{rounded.full}`) for marketing CTAs +- Inter for all UI prose; Geist Mono for code blocks, inline code, and type/property signatures +- 3-column documentation layout (sidebar / prose / TOC) with dense 14px body type for long-form developer reading +- Tightly-controlled radius scale: marketing uses `{rounded.lg}` (12px), pill buttons use `{rounded.full}` — no in-between corner softening +- Vibrant testimonial card (`{colors.testimonial-orange}`) breaks color rhythm intentionally for emotional impact -## 2. Color Palette & Roles +## Colors -### Primary -- **Near Black** (`#0d0d0d`): Primary text, headings, dark surfaces. Not pure black — the micro-softness improves reading comfort. -- **Pure White** (`#ffffff`): Page background, card surfaces, input backgrounds. -- **Brand Green** (`#18E299`): The signature accent — CTAs, links on hover, focus rings, brand identity. +> Source pages: mintlify.com/ (homepage), /startups (program page), /pricing (comparison), /docs/components/tabs (live documentation). Token coverage was identical across all four pages. -### Secondary Accents -- **Brand Green Light** (`#d4fae8`): Tinted green surface for badges, hover states, subtle backgrounds. -- **Brand Green Deep** (`#0fa76e`): Darker green for text on light-green badges, hover states on brand elements. -- **Warm Amber** (`#c37d0d`): Warning states, caution badges — `--twoslash-warn-bg`. -- **Soft Blue** (`#3772cf`): Tag backgrounds, informational annotations — `--twoslash-tag-bg`. -- **Error Red** (`#d45656`): Error states, destructive actions — `--twoslash-error-bg`. +### Brand & Accent +- **Mintlify Mint** ({colors.brand-green}): Signature accent — used on hero "Get started" pill button, green checkmarks in feature lists, featured pricing tier border accent, sidebar active indicator dots. +- **Deep Mint** ({colors.brand-green-deep}): Pressed/active variant of the mint accent. +- **Soft Mint** ({colors.brand-green-soft}): Subtle background tint for success states and confirmation surfaces. +- **Brand Tag** ({colors.brand-tag}): Documentation tag and reference color (used in `` JSX-style annotations and code-tag chips). +- **Brand Annotate** ({colors.brand-annotate}): Inline code annotation green (used in twoslash code annotation system). +- **Brand Warn** ({colors.brand-warn}): Code warning highlight (deprecated, caution). +- **Brand Error** ({colors.brand-error}): Red used for required-field labels and error highlight. +- **Testimonial Orange** ({colors.testimonial-orange}): Warm coral-orange used on the "Cursor" testimonial card and warm callout surfaces. -### Neutral Scale -- **Gray 900** (`#0d0d0d`): Primary heading text, nav links. -- **Gray 700** (`#333333`): Secondary text, descriptions, body copy. -- **Gray 500** (`#666666`): Tertiary text, muted labels. -- **Gray 400** (`#888888`): Placeholder text, disabled states, code annotations. -- **Gray 200** (`#e5e5e5`): Borders, dividers, card outlines. -- **Gray 100** (`#f5f5f5`): Subtle surface backgrounds, hover states. -- **Gray 50** (`#fafafa`): Near-white surface tint. +### Surface +- **Canvas White** ({colors.canvas}): Primary page and card background. +- **Canvas Dark** ({colors.canvas-dark}): Promo banner, dark inversion surfaces, code editor wrapper. +- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, code-inline background, sidebar active state. +- **Surface Soft** ({colors.surface-soft}): Quieter section backgrounds and FAQ accordion. +- **Surface Code** ({colors.surface-code}): Dark code-block wrapper background. +- **Hairline** ({colors.hairline}): 1px borders and primary dividers. +- **Hairline Soft** ({colors.hairline-soft}): Quieter table-row dividers and secondary section breaks. -### Interactive -- **Link Default** (`#0d0d0d`): Links match text color, relying on underline/context. -- **Link Hover** (`#18E299`): Brand green on hover — `var(--color-brand)`. -- **Focus Ring** (`#18E299`): Brand green focus outline for inputs and interactive elements. +### Hero Atmospheric +- **Hero Sky From / To** ({colors.hero-sky-from}, {colors.hero-sky-to}): Atmospheric sky-blue to soft cream gradient on the homepage hero. +- **Hero Dark From / To** ({colors.hero-dark-from}, {colors.hero-dark-to}): Dark teal to mint gradient on the startups hero. -### Surface & Overlay -- **Card Background** (`#ffffff`): White cards on white background, separated by borders. -- **Border Subtle** (`rgba(0,0,0,0.05)`): 5% black opacity borders — the primary separation mechanism. -- **Border Medium** (`rgba(0,0,0,0.08)`): Slightly stronger borders for interactive elements. -- **Input Border Focus** (`var(--color-brand)`): Green ring on focused inputs. +### Text +- **Ink** ({colors.ink}): Primary headlines and CTA text. +- **Charcoal** ({colors.charcoal}): Body text, code-inline foreground. +- **Slate** ({colors.slate}): Secondary text and metadata. +- **Steel** ({colors.steel}): Tertiary text, table headers, sidebar inactive items, footer links. +- **Stone** ({colors.stone}): Captions, twoslash cursor color, muted labels. +- **Muted** ({colors.muted}): De-emphasized labels and disabled text. +- **On Dark** ({colors.on-dark}): White text on dark surfaces (hero bands, code blocks, promo banner). +- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white for code-block headers and metadata on dark. -### Shadows & Depth -- **Card Shadow** (`rgba(0,0,0,0.03) 0px 2px 4px`): Barely-there ambient shadow for subtle lift. -- **Button Shadow** (`rgba(0,0,0,0.06) 0px 1px 2px`): Micro-shadow for button depth. -- **No heavy shadows**: Mintlify relies on borders, not shadows, for depth. +### Semantic +- Error tones derive from `{colors.brand-error}` for input borders, required-field labels, and validation messaging. -## 3. Typography Rules +## Typography ### Font Family -- **Primary**: `Inter`, with fallback: `Inter Fallback, system-ui, -apple-system, sans-serif` -- **Monospace**: `Geist Mono`, with fallback: `Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace` +**Inter** (primary): Variable typeface optimized for UI legibility. Used across every UI surface — body, headings, navigation, button labels, captions. Fallbacks: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif. + +**Geist Mono** (code): Monospace typeface used inside code blocks, inline code references, type signatures (e.g. `string`, `number`, `boolean`), and property names in API documentation. Fallbacks: 'SF Mono', Menlo, Consolas, 'Geist Mono Fallback', monospace. + +The brand uses no italic variants of either face — emphasis comes from weight (500/600), color shift, or background highlighting (in code references). ### Hierarchy -| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | -|------|------|------|--------|-------------|----------------|-------| -| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (tight) | -1.28px | Maximum impact, hero headlines | -| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (tight) | -0.8px | Feature section titles | -| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (tight) | -0.24px | Card headings, sub-sections | -| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (tight) | -0.2px | Feature card titles | -| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (tight) | -0.2px | Secondary card headings | -| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero descriptions, introductions | -| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text | -| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text | -| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | Button labels | -| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | Navigation links, small CTAs | -| Caption | Inter | 14px (0.88rem) | 400–500 | 1.50–1.71 | normal | Metadata, descriptions | -| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | `text-transform: uppercase`, section labels | -| Small | Inter | 13px (0.81rem) | 400–500 | 1.50 | -0.26px | Small body text | -| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | `text-transform: uppercase`, technical labels | -| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | `text-transform: uppercase`, status badges | -| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | `text-transform: uppercase`, tiny labels | +| Token | Size | Weight | Line Height | Letter Spacing | Use | +|---|---|---|---|---|---| +| `{typography.hero-display}` | 72px | 600 | 1.05 | -2px | Marketing hero display ("The intelligent Knowledge Platform") | +| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.5px | Major section opener ("Built for the intelligence age") | +| `{typography.heading-1}` | 48px | 600 | 1.10 | -1px | Page-level headlines ("Pricing on your terms") | +| `{typography.heading-2}` | 36px | 600 | 1.20 | -0.5px | Section headlines ("Apply to the Mintlify startup program") | +| `{typography.heading-3}` | 28px | 600 | 1.25 | 0 | Subsection headers, "Tabs" docs page title | +| `{typography.heading-4}` | 22px | 600 | 1.30 | 0 | Card titles, larger feature headers | +| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | Smaller feature headers, FAQ question titles | +| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle, lead body | +| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text | +| `{typography.body-md-medium}` | 16px | 500 | 1.50 | 0 | Body emphasis | +| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells, navigation | +| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar nav, button labels, tab labels | +| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Helper text, fine print, code-block headers | +| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels | +| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Footer microcopy, label chips | +| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 0.5px | Sidebar section headers, "REQUIRED" labels | +| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Pill button labels | +| `{typography.code-md}` | 14px | 400 | 1.50 | 0 | Code block content | +| `{typography.code-sm}` | 13px | 400 | 1.40 | 0 | Smaller code, type signatures | +| `{typography.code-inline}` | 13px | 500 | 1.30 | 0 | Inline `` references in body | ### Principles -- **Tight tracking at display sizes**: Inter at 40–64px uses -0.8px to -1.28px letter-spacing. This compression creates headlines that feel deliberate and space-efficient — documentation headings, not billboard copy. -- **Relaxed reading at body sizes**: 16–18px body text uses normal tracking with 150% line-height, creating generous reading lanes. Documentation demands comfort. -- **Two-font system**: Inter for all human-readable content, Geist Mono exclusively for technical/code contexts. The boundary is strict — no mixing. -- **Uppercase as hierarchy signal**: Section labels and technical tags use uppercase + positive tracking (0.6px–0.65px) as a clear visual delimiter between content types. -- **Three weights**: 400 (body/reading), 500 (UI/navigation/emphasis), 600 (headings/titles). No bold (700) in the system. +- **Tight hero leading** (1.05) creates magazine-grade display headlines on the 72px hero +- **Negative letter-spacing** progresses inversely with size — display sizes use -2px to -1.5px; smaller headings relax to 0 +- **Documentation-grade body** (1.50 line-height on 14–16px) ensures comfortable long-form reading in dense docs surfaces +- **Inter / Geist Mono pairing** — Inter for everything else, Geist Mono surgically for code references; the contrast between the two is the brand's developer-respect signal +- **Uppercase micro labels** with +0.5px letter-spacing carry sidebar section headers and "REQUIRED" annotation tags -## 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) between major bands; pricing comparison tightens to `{spacing.section}` (64px); documentation surfaces use `{spacing.xxl}` (32px) between subsections +- **Card internal padding**: Standard `{spacing.xl}` (24px) for compact cards; `{spacing.xxl}` (32px) for pricing cards and feature panels; testimonial card pushes to `{spacing.section}` (64px) for hero-card presence + +### Grid & Container +- Marketing pages use a 1280px max-width with 32px gutters +- Hero and feature bands often use 2-column splits (text left, illustration/mockup right) +- Pricing page renders 3 tier cards in a row at desktop (FREE / Lift Off / Custom), then a comprehensive feature comparison table below +- Documentation pages use a strict 3-column grid: left sidebar nav (~240px), center prose (~720px max-width), right TOC (~200px) +- Logo walls use 6-up rows of customer logos at 80–100px height each + +### Whitespace Philosophy +Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) above-the-fold creates space for atmospheric gradient backdrops to read clearly. Documentation tightens dramatically: section gaps drop to `{spacing.xxl}` (32px), table rows pack to `{spacing.md}` (16px), sidebar nav compresses to `{spacing.xs}` (8px) vertical rhythm. + +## Elevation & Depth + +The system runs predominantly flat with strategic atmospheric depth. + +| 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` | Hover-elevated tiles, subtle highlights | +| 2 (card) | `rgba(0, 0, 0, 0.08) 0px 4px 12px 0px` | Standard feature cards | +| 3 (mockup) | `rgba(0, 0, 0, 0.12) 0px 24px 48px -8px` | Hero product mockup framing — the deep diffuse drop on the homepage hero docs preview | +| 4 (brand-tinted) | `rgba(0, 212, 164, 0.08) 0px 8px 24px` | Featured pricing tier glow | + +### Decorative Depth +- The homepage hero uses an atmospheric photographic backdrop (cloud illustration on sky-gradient) for depth — no shadow needed; the imagery does the work +- The startups hero uses a similar treatment with a rocket-launch illustration cutting across the dark teal gradient +- Code blocks carry their own internal depth via syntax-highlighting color hierarchy on the dark surface; no shadow used + +## Shapes + +### Border Radius Scale + +| Token | Value | Use | +|---|---|---| +| `{rounded.xs}` | 4px | Inline code chips, micro tags | +| `{rounded.sm}` | 6px | Sidebar nav items, type badges | +| `{rounded.md}` | 8px | Inputs, search pill, code blocks, secondary cards | +| `{rounded.lg}` | 12px | Standard cards, pricing tiers, hero mockup, FAQ items | +| `{rounded.xl}` | 16px | Larger feature panels | +| `{rounded.xxl}` | 24px | Featured product showcase tiles | +| `{rounded.full}` | 9999px | All buttons, pill tabs, badges | + +The radius scale is tightly disciplined — the brand never uses a corner softening between `{rounded.md}` (8px) and `{rounded.lg}` (12px) for the same component family. Pill buttons (`{rounded.full}`) are used universally; rectangular cards use `{rounded.lg}` (12px) consistently. + +### Photography Geometry +- Hero illustrations (cloud, rocket) sit on full-bleed gradient backdrops with no internal framing +- Customer logo walls use 1:1 ratio cells without rounding (logos are presented inline as wordmarks) +- Testimonial photos use 1:1 aspect with `{rounded.md}` (8px) softening +- Code editor mockup hero image uses `{rounded.lg}` (12px) corners on a hairline-bordered card with a deep diffuse drop shadow + +## Components + +> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only. ### Buttons -**Primary Brand (Full-round)** -- Background: `#0d0d0d` (near-black) -- Text: `#ffffff` -- Padding: 8px 24px -- Radius: 9999px (full pill) -- Font: Inter 15px weight 500 -- Shadow: `rgba(0,0,0,0.06) 0px 1px 2px` -- Hover: opacity 0.9 -- Use: Primary CTA ("Get Started", "Start Building") +**`button-primary`** — Black pill primary CTA, the dominant action across all surfaces. +- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 20px`, 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. -**Secondary / Ghost (Full-round)** -- Background: `#ffffff` -- Text: `#0d0d0d` -- Padding: 4.5px 12px -- Radius: 9999px (full pill) -- Border: `1px solid rgba(0,0,0,0.08)` -- Font: Inter 15px weight 500 -- Hover: opacity 0.9 -- Use: Secondary actions ("Request Demo", "View Docs") +**`button-accent-green`** — Mint green pill for brand-emphasis CTAs (hero "Get started", featured pricing CTA). +- Background `{colors.brand-green}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.full}`. -**Transparent / Nav Button** -- Background: transparent -- Text: `#0d0d0d` -- Padding: 5px 6px -- Radius: 8px -- Border: none or `1px solid rgba(0,0,0,0.05)` -- Use: Navigation items, icon buttons +**`button-on-dark`** — White pill for use on dark hero bands (startups page "Get started"). +- Background `{colors.on-dark}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.full}`. -**Brand Accent Button** -- Background: `#18E299` -- Text: `#0d0d0d` -- Padding: 8px 24px -- Radius: 9999px -- Use: Special promotional CTAs +**`button-secondary`** — Outlined pill for secondary actions. +- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.full}`. + +**`button-ghost`** — Quieter rectangular ghost button (sidebar action, tertiary nav). +- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`. + +**`button-link`** — Inline text link styled as a subtle button. +- Background transparent, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `0`. Underline appears on activation. + +**`button-icon-circular`** — 32×32px circular utility button (close, copy, arrow). +- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`. ### Cards & Containers -**Standard Card** -- Background: `#ffffff` -- Border: `1px solid rgba(0,0,0,0.05)` -- Radius: 16px -- Padding: 24px -- Shadow: `rgba(0,0,0,0.03) 0px 2px 4px` -- Hover: subtle border darkening to `rgba(0,0,0,0.08)` +**`card-base`** — Standard documentation/feature card. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. -**Featured Card** -- Background: `#ffffff` -- Border: `1px solid rgba(0,0,0,0.05)` -- Radius: 24px -- Padding: 32px -- Inner content areas may have their own 16px radius containers +**`card-feature`** — Feature panel on light gray surface. +- Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`. -**Logo/Trust Card** -- Background: `#fafafa` or `#ffffff` -- Border: `1px solid rgba(0,0,0,0.05)` -- Radius: 16px -- Centered logo/icon with consistent sizing +**`card-help`** — "Need help?" CTA cards below the pricing comparison ("Quickstart guide", "Guide to technical writing", "Founder", "Sales"). +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. + +**`card-startup-perk`** — Startup-program perk grid item ("Discounts and credits", "Priority support", "Startup pack", "Founder community"). +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. Carries an icon at top, heading `{typography.heading-5}`, description `{typography.body-sm}` `{colors.steel}`. + +**`pricing-card`** — Standard pricing tier card. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`. +- Title `{typography.heading-3}`, price `{typography.display-lg}`, feature list `{typography.body-sm}` with green checkmark icons. + +**`pricing-card-featured`** — Highlighted pricing tier (Lift Off / featured plan). +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.brand-green}`, soft brand-tinted shadow `rgba(0, 212, 164, 0.08) 0px 8px 24px`. + +**`testimonial-card-feature`** — Bright orange large testimonial card with photo + quote ("Cursor — Every YC batch we consistently see the top performing startups use Mintlify to build their docs."). +- Background `{colors.testimonial-orange}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.section}`. Photo on right, large quote in `{typography.heading-3}` left, attribution below in `{typography.body-sm-medium}`. + +**`testimonial-card-quote`** — Smaller white testimonial card on the startups page. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`. + +**`founder-quote-card`** — Cursor founder testimonial card variant on the orange surface. +- Background `{colors.testimonial-orange}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`. Carries the specific founder portrait + quote treatment. + +**`startup-program-card`** — Larger application/program card containing perks grid + apply CTA. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`. ### Inputs & Forms -**Email Input** -- Background: transparent or `#ffffff` -- Text: `#0d0d0d` -- Padding: 0px 12px (height controlled by line-height) -- Border: `1px solid rgba(0,0,0,0.08)` -- Radius: 9999px (full pill, matching buttons) -- Focus: `1px solid var(--color-brand)` + `outline: 1px solid var(--color-brand)` -- Placeholder: `#888888` +**`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-green}` — focus uses the brand mint as the activation signal. + +**`search-pill`** — Documentation top-bar search. +- 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 (used inside docs Tabs component for "First tab / Second tab / Third tab"). +- Inactive: text `{colors.steel}`, transparent background, padding `{spacing.sm} {spacing.md}`. Active: text `{colors.ink}`, 2px bottom border in `{colors.ink}`. + +**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (top of pricing page: "Pricing / Roadmap"). +- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `8px 16px`, rounded `{rounded.full}`. +- Active: background `{colors.primary}`, text `{colors.on-primary}`, no border. + +**`toggle-monthly-yearly`** — Two-state pill toggle (Monthly / Annual on pricing page). +- Background `{colors.surface}`, rounded `{rounded.full}`, padding `4px`. Active state moves a white pill thumb to the selected position. + +### Badges & Status + +**`badge-discount`** — Small green "Save 20%" badge attached to annual toggle. +- Background `{colors.brand-green}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `2px 8px`. + +**`badge-required`** — Red "REQUIRED" label on documentation property rows. +- Background `{colors.brand-error}`, text `{colors.on-dark}`, typography `{typography.micro-uppercase}`, rounded `{rounded.sm}`, padding `2px 6px`. + +**`badge-type`** — Type signature chip in documentation (e.g. `string`, `number`, `boolean`). +- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.code-sm}`, rounded `{rounded.sm}`, padding `2px 6px`. + +**`badge-tag`** — Documentation tag chip (e.g. `` reference highlighted in body text). +- Background `rgba(55, 114, 207, 0.15)`, text `{colors.brand-tag}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`. + +**`promo-banner`** — Sticky black promo strip ABOVE the top nav (when present). +- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. + +### Code + +**`code-block`** — Syntax-highlighted code container. +- 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 with language label + copy button. +- Background `{colors.surface-code}`, text `{colors.on-dark-muted}`, typography `{typography.caption}`, padding `{spacing.xs} {spacing.md}`, bottom border `1px solid {colors.hairline-dark}`. + +**`code-inline`** — Inline `` reference in body prose. +- Background `{colors.surface}`, text `{colors.charcoal}`, typography `{typography.code-inline}`, rounded `{rounded.xs}`, padding `2px 6px`, border `1px solid {colors.hairline}`. + +**`copy-code-button`** — "Copy code" button in code-block header. +- Background transparent, text `{colors.on-dark-muted}`, typography `{typography.caption}`, rounded `{rounded.sm}`, padding `{spacing.xxs} {spacing.xs}`, border `1px solid {colors.hairline-dark}`. + +### Documentation Components + +**`property-row`** — API property documentation row (e.g. `defaultIndex` on the Tabs page). +- Background transparent, text `{colors.ink}`, typography `{typography.body-sm}`, padding `{spacing.md} 0`, bottom border `1px solid {colors.hairline-soft}`. +- Layout: property name in `{typography.code-inline}` + type badge + optional REQUIRED badge + description below in `{typography.body-sm}` `{colors.steel}`. + +**`feature-comparison-table`** — Detailed pricing-page feature comparison table. +- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`. + +**`feature-comparison-row`** — Individual row inside the comparison table. +- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`. Section dividers in `{typography.micro-uppercase}` `{colors.steel}`. + +**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — Documentation left rail link entries. +- Inactive: background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.sm}`, padding `{spacing.xs} {spacing.md}`. +- Active: background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`. + +**`sidebar-section-header`** — Uppercase section header inside sidebar (e.g. "COMPONENTS", "PRIMITIVES"). +- Background transparent, text `{colors.steel}`, typography `{typography.micro-uppercase}`, padding `{spacing.md} {spacing.md} {spacing.xs}`. + +**`doc-toc-item`** + **`doc-toc-item-active`** — Right-rail table-of-contents links. +- Inactive: background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. +- Active: text `{colors.ink}`, typography `{typography.body-sm-medium}`, optional left-border accent in `{colors.brand-green}`. ### Navigation -- Clean horizontal nav on white, sticky with backdrop blur -- Brand logotype left-aligned -- Links: Inter 14–15px weight 500, `#0d0d0d` text -- Hover: color shifts to brand green `var(--color-brand)` -- CTA: dark pill button right-aligned ("Get Started") -- Mobile: hamburger menu collapse at 768px -### Image Treatment -- Product screenshots with subtle 1px borders -- Rounded containers: 16px–24px radius -- Atmospheric gradient backgrounds behind hero images -- Cloud/sky imagery with soft green tinting +**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: Mintlify wordmark + horizontal link list (Solutions, Pricing, Customers, Documentation, Changelog). +- Right: secondary "Talk to sales" + black-pill "Get Started". -### Distinctive Components +**Top Navigation (Documentation)** — Compressed nav with center search-pill and right-side account/upgrade CTAs. +- Background `{colors.canvas}`, height ~56px. Search-pill at center, "Documentation / Guides / API Reference / Changelog" links + "Talk to us" + green "Get started" right. -**Atmospheric Hero** -- Full-width gradient wash: soft green-to-white cloud-like gradient -- Centered headline with tight tracking -- Subtitle in muted gray -- Dual CTA buttons (dark primary + ghost secondary) -- The gradient creates a sense of elevation and intelligence +### Signature Components -**Trust Bar / Logo Grid** -- "Loved by your favorite companies" section -- Company logos in muted grayscale -- Grid or horizontal layout with consistent sizing -- Subtle border separation between logos +**`hero-band-sky`** — Homepage hero with atmospheric sky-blue to cream gradient and cloud illustrations. +- Background gradient `linear-gradient(180deg, {colors.hero-sky-from} 0%, {colors.hero-sky-to} 100%)`, text `{colors.on-dark}` (early portion of gradient) shifting to `{colors.ink}` further down, padding `{spacing.hero}`. +- Layout: centered hero headline in `{typography.hero-display}`, centered subtitle in `{typography.subtitle}`, centered button row (`button-accent-green` "Get started" + `button-secondary` "Talk to us"), product mockup below the buttons. -**Feature Cards with Icons** -- Icon or illustration at top -- Title at 20px weight 600 -- Description at 14–16px in gray -- Consistent padding and border treatment -- Grid layout: 2–3 columns on desktop +**`hero-band-dark`** — Startups hero with dark teal-to-mint gradient and rocket launch illustration. +- Background gradient `linear-gradient(135deg, {colors.hero-dark-from} 0%, {colors.hero-dark-to} 100%)`, text `{colors.on-dark}`, padding `{spacing.hero}`. +- Layout: hero headline left in `{typography.hero-display}` `{colors.on-dark}`, illustration right (rocket cutting across the gradient), button row uses `button-on-dark` (white pill) + ghost link. -**CTA Footer Section** -- Dark or gradient background -- Large headline: "Make documentation your winning advantage" -- Email input with pill styling -- Brand green accent on CTAs +**`hero-product-mockup`** — Code-editor mockup framed inside the homepage hero. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, border `1px solid {colors.hairline-soft}`, deep shadow `rgba(0, 0, 0, 0.12) 0px 24px 48px -8px`. +- Carries a documentation page preview inside (sidebar on left, prose body, mock UI controls). -## 5. Layout Principles +**`logo-wall-item`** — Customer logo cell in 6-up trust-row grids ("Anthropic / Cognition / Mintlify / Vercel / react / Lovable", "Stripe / Block / PayPal / Compound / Auth"). +- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`. +- Logos rendered as wordmarks with consistent vertical centering. -### Spacing System -- Base unit: 8px -- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px -- Section padding: 48px–96px vertical -- Card padding: 24px–32px -- Component gaps: 8px–16px +**`faq-accordion-item`** — Frequently-asked-questions panel item (visible on pricing page). +- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`. +- Question in `{typography.heading-5}`, expanded answer in `{typography.body-md}` `{colors.steel}`, chevron icon in `{colors.steel}` 16px. -### Grid & Container -- Max content width: approximately 1200px -- Hero: centered single-column with generous top padding (96px+) -- Feature sections: 2–3 column CSS Grid for cards -- Full-width sections with contained content -- Consistent horizontal padding: 24px (mobile) to 32px (desktop) +**`footer-region`** — Multi-column site footer. +- Background `{colors.canvas}`, top border `1px solid {colors.hairline}`, padding `{spacing.section} {spacing.xxl}`. +- 5 column groups (Explore / Resources / Company / Legal + brand mark column). +- Section headers in `{typography.body-sm-medium}` `{colors.ink}`, link items in `{typography.body-sm}` `{colors.steel}`. -### Whitespace Philosophy -- **Documentation-grade breathing room**: Every element has generous surrounding whitespace. Mintlify sells documentation, so the marketing page itself demonstrates reading comfort. -- **Sections as chapters**: Each feature section is a self-contained unit with 48px–96px vertical padding, creating clear "chapter breaks." -- **Content density is low**: Unlike developer tools that pack the page, Mintlify uses 1–2 key messages per section with supporting imagery. +**`footer-link`** — Individual link entry in the footer. +- Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. -### Border Radius Scale -- Small (4px): Inline code, small tags, tooltips -- Medium (8px): Nav buttons, transparent buttons, small containers -- Standard (16px): Cards, content containers, image wrappers -- Large (24px): Featured cards, hero containers, section panels -- Full Pill (9999px): Buttons, inputs, badges, pills — the signature shape +## Do's and Don'ts -## 6. Depth & Elevation +### Do +- Reserve `{colors.brand-green}` (Mintlify mint) for accent CTAs and active state indicators only — even one accent button per viewport carries weight +- Use `{colors.primary}` (black) as the dominant CTA on light backgrounds; switch to `button-on-dark` (white pill) on dark hero bands +- Apply `{rounded.full}` to every button and pill; never soften pill corners +- Pair Inter (UI prose) with Geist Mono (code) — never introduce a third typeface +- Use atmospheric gradient hero bands sparingly (only the homepage and startups page); keep deeper surfaces flat and dense +- Apply `{rounded.lg}` (12px) consistently on cards; use `{rounded.md}` (8px) only on compact UI like search pills and code blocks +- Keep documentation prose at `{typography.body-md}` (16px) with 1.50 line-height — never compress -| Level | Treatment | Use | -|-------|-----------|-----| -| Flat (Level 0) | No shadow, no border | Page background, text blocks | -| Subtle Border (Level 1) | `1px solid rgba(0,0,0,0.05)` | Standard card borders, dividers | -| Medium Border (Level 1b) | `1px solid rgba(0,0,0,0.08)` | Interactive elements, input borders | -| Ambient Shadow (Level 2) | `rgba(0,0,0,0.03) 0px 2px 4px` | Cards with subtle lift | -| Button Shadow (Level 2b) | `rgba(0,0,0,0.06) 0px 1px 2px` | Button micro-depth | -| Focus Ring (Accessibility) | `1px solid #18E299` outline | Focused inputs, active interactive elements | +### Don't +- Don't use `{colors.brand-green}` on body text or large surfaces — it loses signal +- Don't introduce additional accent colors beyond mint, tag-blue, error-red, and the testimonial orange +- Don't apply heavy shadows on flat documentation cards; reserve elevation for the hero product mockup +- Don't reduce documentation line-height below 1.50 — long-form readability suffers +- Don't combine atmospheric gradients with multiple competing color accents in the same hero — the sky/dark gradient is the brand mood; let it breathe +- Don't use Inter for code or Geist Mono for prose — the typeface assignment IS the brand voice -**Shadow Philosophy**: Mintlify barely uses shadows. The depth system is almost entirely border-driven — ultra-subtle 5% opacity borders create separation without visual weight. When shadows appear, they're atmospheric whispers (`0.03 opacity, 2px blur, 4px spread`) that add the barest sense of lift. This restraint keeps the page feeling flat and paper-like — appropriate for a documentation company whose product is about clarity and readability. - -### Decorative Depth -- Hero gradient: atmospheric green-white cloud gradient behind hero content -- No background color alternation — white on white throughout -- Depth comes from border opacity variation (5% → 8%) and whitespace - -## 7. Dark Mode - -### Color Inversions -- **Background**: `#0d0d0d` (near-black) -- **Text Primary**: `#ededed` (near-white) -- **Text Secondary**: `#a0a0a0` (muted gray) -- **Brand Green**: `#18E299` (unchanged — the green works on both backgrounds) -- **Border**: `rgba(255,255,255,0.08)` (white at 8% opacity) -- **Card Background**: `#141414` (slightly lighter than page) -- **Shadow**: `rgba(0,0,0,0.4) 0px 2px 4px` (stronger shadow for contrast) - -### Key Adjustments -- Buttons invert: white background dark text becomes dark background light text -- Badge backgrounds shift to deeper tones with lighter text -- Focus ring remains brand green -- Hero gradient shifts to dark-tinted green atmospheric wash - -## 8. Responsive Behavior +## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | -|------|-------|-------------| -| Mobile | <768px | Single column, stacked layout, hamburger nav | -| Tablet | 768–1024px | Two-column grids begin, expanded padding | -| Desktop | >1024px | Full layout, 3-column grids, maximum content width | +|---|---|---| +| Mobile (small) | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. Footer 1-column accordion. | +| Mobile (large) | 480 – 767px | Same as small but feature tiles render 2-up. Hero scales to 44px. | +| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Documentation sidebar collapses to drawer. Hero scales to 56px. | +| Desktop | 1024 – 1279px | Full 3-column docs grid (sidebar / body / TOC). 3-tier pricing card row. Hero at 72px. | +| Wide Desktop | ≥ 1280px | Wider hero gutters, larger product mockup, fixed 240px sidebar. | ### Touch Targets -- Buttons with full-pill shape have comfortable 8px+ vertical padding -- Navigation links spaced with adequate 16px+ gaps -- Mobile menu provides full-width tap targets +- Pill buttons render at 36–40px effective height — bumps to 44px on mobile via padding override +- Circular icon buttons: 32×32px desktop → 44×44px mobile +- Form inputs render at 40px height; bumps to 44px mobile +- Sidebar nav items render at ~32px tall — bump to 44px mobile drawers ### Collapsing Strategy -- Hero: 64px → 40px headline, maintains tight tracking proportionally -- Navigation: horizontal links + CTA → hamburger menu at 768px -- Feature cards: 3-column → 2-column → single column stacked -- Section spacing: 96px → 48px on mobile -- Footer: multi-column → stacked single column -- Trust bar: grid → horizontal scroll or stacked +- **Promo banner** stays full-width; truncates at < 480px +- **Top nav** below 1024px collapses to hamburger; horizontal links move into drawer +- **Hero band**: 2-column hero (text + mockup) collapses to stacked at < 1024px; mockup rendered below text on mobile +- **Documentation grid**: 3-column desktop → sidebar-drawer at < 1024px → single-column at < 768px +- **Pricing comparison**: 3-column tiers → 1-column stacked at < 768px; comparison table becomes horizontal-scroll +- **Hero typography**: `{typography.hero-display}` (72px) → 56px tablet → 44px mobile-large → 36px mobile-small +- **Customer logo wall**: 6-up → 3-up at tablet → 2-up at mobile +- **Footer**: 5-column desktop → 2-column tablet → accordion at mobile ### Image Behavior -- Product screenshots maintain aspect ratio with responsive containers -- Hero gradient simplifies on mobile -- Full-width sections maintain edge-to-edge treatment +- Hero illustrations (cloud, rocket) lazy-load with the hero band; remain crisp at all breakpoints (SVG-based) +- Product mockup retains its aspect ratio across breakpoints; scales proportionally +- Customer logos use SVG wordmarks; remain crisp on retina displays -## 9. Agent Prompt Guide +## Iteration Guide -### Quick Color Reference -- Primary CTA: Near Black (`#0d0d0d`) -- Background: Pure White (`#ffffff`) -- Heading text: Near Black (`#0d0d0d`) -- Body text: Gray 700 (`#333333`) -- Border: `rgba(0,0,0,0.05)` (5% opacity) -- Brand accent: Green (`#18E299`) -- Link hover: Brand Green (`#18E299`) -- Focus ring: Brand Green (`#18E299`) +1. Focus on ONE component at a time. The system has high internal consistency. +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 and contrast issues. +4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-focused`, `-active`). +5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Headlines step down `hero-display → display-lg → heading-1 → heading-2 → heading-3 → heading-4 → heading-5`. +6. Keep `{colors.brand-green}` confined to accent moments. If it appears on a generic surface, ask whether it earned that role. +7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this language. +8. Documentation prose belongs in `{typography.body-md}` 16px with 1.50 line-height — anything denser breaks the reading experience. -### Example Component Prompts -- "Create a hero section on white background with atmospheric green-white gradient wash. Headline at 64px Inter weight 600, line-height 1.15, letter-spacing -1.28px, color #0d0d0d. Subtitle at 18px Inter weight 400, line-height 1.50, color #666666. Dark pill CTA (#0d0d0d, 9999px radius, 8px 24px padding) and ghost pill button (white, 1px solid rgba(0,0,0,0.08), 9999px radius)." -- "Design a card: white background, 1px solid rgba(0,0,0,0.05) border, 16px radius, 24px padding, shadow rgba(0,0,0,0.03) 0px 2px 4px. Title at 20px Inter weight 600, letter-spacing -0.2px. Body at 14px weight 400, #666666." -- "Build a pill badge: #d4fae8 background, #0fa76e text, 9999px radius, 4px 12px padding, 13px Inter weight 500, uppercase." -- "Create navigation: white sticky header with backdrop-filter blur(12px). Inter 15px weight 500 for links, #0d0d0d text. Dark pill CTA 'Get Started' right-aligned, 9999px radius. Bottom border: 1px solid rgba(0,0,0,0.05)." -- "Design a trust section showing company logos in muted gray. Grid layout with 16px radius containers, 1px border at 5% opacity. Label above: 'Loved by your favorite companies' at 13px Inter weight 500, uppercase, tracking 0.65px." +## Known Gaps -### Iteration Guide -1. Always use full-pill radius (9999px) for buttons and inputs — this is Mintlify's signature shape -2. Keep borders at 5% opacity (`rgba(0,0,0,0.05)`) — stronger borders break the airy feeling -3. Letter-spacing scales with font size: -1.28px at 64px, -0.8px at 40px, -0.24px at 24px, normal at 16px -4. Three weights only: 400 (read), 500 (interact), 600 (announce) -5. Brand green (`#18E299`) is used sparingly — CTAs and hover states only, never for decorative fills -6. Geist Mono uppercase for technical labels, Inter for everything else -7. Section padding is generous: 64px–96px on desktop, 48px on mobile -8. No gray background sections — white throughout, separation through borders and whitespace +- Specific dark-mode token values for canvas, surface, ink, and hairline are not surfaced on these pages; the brand has not yet shipped a published dark-mode palette +- Animation/transition timings are not extracted; recommend 150–200ms ease for hover/focus state transitions +- Form validation success state is not explicitly captured beyond defaults — implement following standard green-border + success badge patterns +- Code syntax highlighting palette inside docs is not formalized; documentation samples carry their own twoslash-style annotation system tokens (e.g. `{colors.brand-tag}`, `{colors.brand-annotate}`, `{colors.brand-warn}`) but the full highlight scheme is not enumerated diff --git a/design-md/miro/DESIGN.md b/design-md/miro/DESIGN.md index b90196e..16dcaf9 100644 --- a/design-md/miro/DESIGN.md +++ b/design-md/miro/DESIGN.md @@ -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:** -- White canvas with near-black (`#1c1c1e`) text -- Roobert PRO Medium with multiple OpenType character variants -- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs) -- Blue 450 (`#5b76fe`) as primary interactive color -- Success green (`#00b473`) for positive states -- Generous border-radius: 8px–50px range -- Framer-built with smooth motion patterns -- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px` +- Stark white canvas + Miro wordmark in canary yellow ({colors.brand-yellow}) as the recognizable opening signature +- Black-pill primary CTAs ({colors.primary} + `{rounded.full}`) as the dominant interactive element +- Pastel feature cards (yellow, rose, coral, teal, mint) that echo the actual sticky-note palette +- Roobert PRO across every UI surface; geometric, slightly rounded character +- Real Miro-board mockup imagery used as feature illustrations +- 4-tier pricing card grid + dense feature comparison table +- Massive dark footer ({colors.footer-bg}) with multi-column links + app-store badges -## 2. Color Palette & Roles +## Colors -### Primary -- **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` +> 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. -### Pastel Accents (Light/Dark pairs) -- **Coral**: Light `#ffc6c6` / Dark `#600000` -- **Rose**: Light `#ffd8f4` / Dark (implied) -- **Teal**: Light `#c3faf5` / Dark `#187574` -- **Orange**: Light `#ffe6cd` -- **Yellow**: Dark `#746019` -- **Moss**: Dark `#187574` -- **Pink** (`#fde0f0`): Soft pink surface -- **Red** (`#fbd4d4`): Light red surface -- **Dark Red** (`#e3c5c5`): Muted red +### Brand & Accent +- **Miro Yellow** ({colors.brand-yellow}): The brand's recognizable canary yellow — wordmark color, top promo banner, "yellow tag" pills +- **Yellow Deep** ({colors.brand-yellow-deep}): Darker variant for hover states and emphasis +- **Yellow Light** ({colors.yellow-light}): Pale yellow background tint for tag chips +- **Yellow Dark** ({colors.yellow-dark}): Yellow-tag text color (dark olive) for chip foreground +- **Brand Blue** ({colors.brand-blue}): Action blue for inline links and featured-pricing-tier border +- **Blue Pressed** ({colors.blue-pressed}): Pressed-state blue +- **Brand Coral** ({colors.brand-coral}): Coral accent for warm callouts +- **Coral Light** ({colors.coral-light}): Pale coral for feature card backgrounds +- **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 -- **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 -- **Slate** (`#555a6a`): Secondary text -- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder` -- **Border** (`#c7cad5`): Button borders -- **Ring** (`rgb(224,226,232)`): Shadow-as-border +## Typography -## 3. Typography Rules - -### 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"` +### 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. ### Hierarchy -| Role | Font | Size | Weight | Line Height | Letter Spacing | -|------|------|------|--------|-------------|----------------| -| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px | -| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px | -| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px | -| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px | -| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal | -| Body | Noto Sans | 18px | 400 | 1.45 | normal | -| Body Standard | Noto Sans | 16px | 400–600 | 1.50 | -0.16px | -| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px | -| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal | -| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px | -| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase | +| Token | Size | Weight | Line Height | Letter Spacing | Use | +|---|---|---|---|---|---| +| `{typography.hero-display}` | 80px | 500 | 1.05 | -2px | Marketing hero ("See how teams get great done with Miro") | +| `{typography.display-lg}` | 60px | 500 | 1.10 | -1.5px | Major section openers | +| `{typography.heading-1}` | 48px | 500 | 1.15 | -1px | Page-level headlines | +| `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Subsection headlines | +| `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Card titles | +| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Feature tile titles | +| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | FAQ questions, smaller cards | +| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle | +| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text | +| `{typography.body-md-medium}` | 16px | 500 | 1.50 | 0 | Logo wall labels | +| `{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 -- 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 -### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding +**`button-primary`** — Black pill primary CTA, the dominant action ("Get started free"). +- 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 -- Spacing: 1–24px base scale -- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers) -- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px` +**`button-yellow`** — Brand-yellow pill for moments of brand emphasis. +- Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`. -## 6. Depth & Elevation -Minimal — ring shadow + pastel surface contrast +**`button-blue`** — Brand-blue pill for inline action callouts. +- 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 -- Use pastel light/dark pairs for feature sections -- Apply Roobert PRO with OpenType character variants -- Use Blue 450 (#5b76fe) for interactive elements +- Reserve `{colors.brand-yellow}` for the wordmark, top promo banner, and "yellow tag" chips +- Use `{colors.primary}` (black) as the dominant CTA on all surfaces +- 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 use heavy shadows -- Don't mix more than 2 pastel accents per section +- Don't use `{colors.brand-yellow}` on standard CTAs or large background surfaces +- 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 -Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px +## Responsive Behavior -## 9. Agent Prompt Guide -### Quick Color Reference -- Text: Near Black (`#1c1c1e`) -- Background: White (`#ffffff`) -- Interactive: Blue 450 (`#5b76fe`) -- Success: `#00b473` -- Border: `#c7cad5` -### Example Component Prompts -- "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)." +### Breakpoints +| Name | Width | Key Changes | +|---|---|---| +| Mobile (small) | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. | +| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 48px. | +| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. | +| Desktop | 1024 – 1279px | 4-tier pricing card row. Customer story grid 2-up. Hero at 64px. | +| Wide Desktop | ≥ 1280px | Full hero presentation, 80px hero display. | + +### 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 diff --git a/design-md/mistral.ai/DESIGN.md b/design-md/mistral.ai/DESIGN.md index cfe563a..18f91bb 100644 --- a/design-md/mistral.ai/DESIGN.md +++ b/design-md/mistral.ai/DESIGN.md @@ -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:** -- Golden-amber color universe: every tone from pale cream (#fffaeb) to burnt orange (#fa520f) -- Massive display typography (82px) with aggressive negative letter-spacing (-2.05px) -- Warm golden shadow system using amber-tinted rgba values -- The Mistral "M" block identity — a gradient from yellow to orange -- Dramatic landscape photography in warm golden tones -- Uppercase typography used strategically for section labels and CTAs -- Near-zero border-radius — sharp, architectural geometry -- French-European confidence: bold, warm, declarative +- Atmospheric mountain-sunset hero photography (orange-red-yellow gradient sky) +- Horizontal "sunset stripe" band ({colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream}) at every page bottom +- Cream-yellow surfaces ({colors.cream}, {colors.cream-soft}) for form panels and feature cards +- PP Editorial Old (or similar near-serif) for hero displays; Inter for everything else +- `{rounded.md}` (8px) buttons and `{rounded.lg}` (12px) cards — less playful, more editorial geometry +- Saturated orange primary CTA ({colors.primary}) carries every action call -## 2. Color Palette & Roles +## Colors -### Primary -- **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. +> 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. -### Secondary & Accent -- **Sunshine 900** (`#ff8a00`): Deep golden amber — the darkest sunshine tone, used for strong accent moments. -- **Sunshine 700** (`#ffa110`): Warm amber-gold — the core sunshine accent for backgrounds and interactive elements. -- **Sunshine 500** (`#ffb83e`): Medium golden — balanced warmth for mid-level emphasis. -- **Sunshine 300** (`#ffd06a`): Light golden — for subtle warm tints and secondary backgrounds. -- **Block Gold** (`#ffe295`): Pale gold — soft background accents and gentle warmth. -- **Bright Yellow** (`#ffd900`): The brightest tone in the gradient — used at the "top" of the block identity. +### Brand & Accent +- **Mistral Orange** ({colors.primary}): Primary CTA color, brand orange +- **Orange Deep** ({colors.primary-deep}): Pressed-state and emphasis variant +- **Sunshine 300** ({colors.sunshine-300}): Atmospheric light orange-yellow +- **Sunshine 500** ({colors.sunshine-500}): Mid-spectrum sunset orange +- **Sunshine 700** ({colors.sunshine-700}): Saturated mid sunset gradient stop +- **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 -- **Warm Ivory** (`#fffaeb`): The lightest page background — barely tinted with warmth, the foundation canvas. -- **Cream** (`#fff0c2`): The primary warm surface and secondary button background — noticeably golden. -- **Pure White** (`#ffffff`): Used for maximum contrast elements and popover surfaces. -- **Mistral Black** (`#1f1f1f`): The primary dark surface for buttons, text, and dark sections. -- **Accent Orange** (defined as `hsl(17, 96%, 52%)`): The functional accent color for interactive states. +### Cream / Neutral Warm +- **Cream** ({colors.cream}): Warm yellow-cream surface for form panels, feature cards, footer +- **Cream Soft** ({colors.cream-soft}): Lighter cream variant +- **Cream Deeper** ({colors.cream-deeper}): More-saturated cream for badge/tag chips +- **Beige Deep** ({colors.beige-deep}): Cream surface 1px border color -### Neutrals & Text -- **Mistral Black** (`#1f1f1f`): Primary text color and dark button backgrounds — a near-black that's warmer than pure #000. -- **Black Tint** (defined as `hsl(0, 0%, 24%)`): A medium dark gray for secondary text on light backgrounds. -- **Pure White** (`#ffffff`): Text on dark surfaces and CTA labels. +### Surface +- **Canvas White** ({colors.canvas}): Page background and card surface +- **Surface** ({colors.surface}): Subtle quieter background +- **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 -- **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. -- **White Overlay** (`oklab(1, 0, 0 / 0.088–0.1)`): Semi-transparent white for frosted glass effects and button overlays. +### Text +- **Ink** ({colors.ink}): Primary headlines and body text +- **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 -- **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. -- **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. +### Semantic +- **Link** ({colors.link}): Inline link color (matches primary orange) -## 3. Typography Rules +## Typography ### 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 -| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | -|------|------|------|--------|-------------|----------------|-------| -| Display / Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | Maximum impact, billboard scale | -| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | Feature section anchors | -| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | Secondary section titles | -| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | Card headings, feature names | -| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Mid-level headings | -| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | Small headings | -| Body / Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text | -| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Uppercase CTA labels | -| Caption / Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, secondary links | +| Token | Size | Weight | Line Height | Letter Spacing | Family | Use | +|---|---|---|---|---|---|---| +| `{typography.hero-display}` | 84px | 400 | 1.05 | -1.5px | PP Editorial Old | Hero ("Frontier AI. In your hands.") | +| `{typography.display-lg}` | 64px | 400 | 1.10 | -1px | PP Editorial Old | Section openers | +| `{typography.heading-1}` | 52px | 400 | 1.15 | -0.5px | PP Editorial Old | Page headlines ("Get in touch with the team.") | +| `{typography.stat-display}` | 56px | 400 | 1.10 | -1px | PP Editorial Old | Stat callouts ("75%") | +| `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Inter | Subsection headlines | +| `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Inter | Card titles | +| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Inter | Feature tile titles | +| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | Inter | Smaller card titles | +| `{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 -- **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. -- **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. -- **Aggressive tracking on display**: -2.05px letter-spacing at 82px compresses the hero text into a monolithic block. -- **Uppercase as emphasis**: Strategic `text-transform: uppercase` on button labels and section markers creates a formal, European signage quality. -- **No weight variation**: Unlike most systems that use 300–700 weight range, Mistral uses 400 everywhere. Hierarchy comes from size and color, never 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. +- **Generous body leading** (1.55 on body-md) for editorial readability across long-form pages +- **Tight hero leading** (1.05 on 84px display) creates magazine-grade typographic display +- **Negative letter-spacing** progresses with size — display sizes use -1.5px to -0.5px; smaller heads relax to 0 +- **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 -**Cream Surface** -- Background: Cream (`#fff0c2`) -- Text: Mistral Black (`#1f1f1f`) -- No visible border -- The warm, inviting secondary CTA +**`button-primary`** — Saturated-orange primary CTA, the dominant action. +- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`. +- Pressed state `button-primary-pressed` deepens to `{colors.primary-deep}`. +- Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text. -**Dark Solid** -- Background: Mistral Black (`#1f1f1f`) -- Text: Pure White (`#ffffff`) -- Padding: 12px (all sides) -- No visible border -- The primary action button — dark on warm +**`button-cream`** — Warm cream-yellow secondary action, common on cream-surface sections. +- Background `{colors.cream}`, text `{colors.ink}`, border `1px solid {colors.beige-deep}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`. -**Ghost / Transparent** -- Background: transparent with slight dark overlay (`oklab(0, 0, 0 / 0.1)`) -- Text: Mistral Black (`#1f1f1f`) -- Opacity: 0.4 -- For secondary/de-emphasized actions +**`button-dark`** — Dark/black primary CTA on cream surfaces. +- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`. -**Text / Underline** -- Background: transparent -- Text: Mistral Black (`#1f1f1f`) -- Padding: 8px 0px 0px (top-only) -- Minimal styling — text link as button -- For tertiary navigation actions +**`button-secondary`** — Outlined secondary action. +- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`. + +**`button-on-cream`** — White button on cream-tinted backgrounds. +- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.beige-deep}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`. + +**`button-link`** — Inline orange text link. +- Background transparent, text `{colors.primary}`, typography `{typography.body-sm-medium}`, padding `0`. Underline on activation. ### Cards & Containers -- Background: Warm Ivory (`#fffaeb`), Cream (`#fff0c2`), or Pure White -- Border: minimal to none — containers defined by background color -- Radius: near-zero — sharp, architectural corners -- 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-base`** — Standard content card. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`. + +**`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 -- Border: `hsl(240, 5.9%, 90%)` — the sole cool-toned element -- Focus: accent color ring -- Minimal styling consistent with sparse aesthetic + +**`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.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 -- 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 -- Dramatic landscape photography in warm golden tones -- The winding road through golden hills — a recurring visual motif -- The Mistral "M" rendered at large scale on golden backgrounds -- Warm color grading on all photography -- Full-bleed sections with photography +**Top Navigation (Marketing)** — Sticky white bar. +- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`. +- Left: Mistral M-mark logo + "MISTRAL AI_" wordmark + horizontal link list (Products, Solutions, Research, Blog, Customers, Company). +- Right: "Contact Sales" link + black-pill "Try Studio" CTA. -### Distinctive Components +### Signature Components -**Mistral Block Identity** -- A row of colored blocks forming the gradient: yellow → amber → orange → burnt orange -- Each block gets progressively more orange/red -- The visual DNA of the brand — recognizable at any size +**`hero-band-sunset`** — Atmospheric sunset hero band. +- Background gradient `linear-gradient(135deg, {colors.sunshine-700} 0%, {colors.sunshine-900} 60%, {colors.primary} 100%)` overlaid on photographic mountain landscape. +- 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. -**Golden Shadow Cards** -- Cards elevated with warm amber multi-layered shadows -- 5 layers of shadow from 16px to 400px offset -- Creates a "floating in golden light" effect unique to Mistral +**`sunset-stripe-band`** — Horizontal closing band at the foot of every page. +- Multi-stop gradient: `{colors.primary}` → `{colors.sunshine-700}` → `{colors.sunshine-500}` → `{colors.yellow-saturated}` → `{colors.cream}`. +- Padding `{spacing.lg} 0`. Spans full width, sits above the footer. THIS IS THE BRAND'S MOST RECOGNIZABLE SIGNATURE ELEMENT. -**Dark Footer Gradient** -- Footer transitions from warm amber to dark through a dramatic gradient -- Creates a "sunset" effect as the page ends +**`cta-banner-cream`** — Page-bottom CTA band on cream surface. +- 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. -## 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 -- Base unit: 8px -- 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) +**`footer-link`** — Individual footer link. +- Background transparent, text `{colors.primary}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. -### Grid & Container -- 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's and Don'ts ### Do -- Use the warm color spectrum exclusively: ivory, cream, amber, gold, orange -- Keep display typography at 82px+ with -2.05px letter-spacing for hero sections -- Use the Mistral block gradient (yellow → amber → orange) for brand moments -- Apply warm golden shadows (amber-tinted rgba) for elevated elements -- Use Mistral Black (#1f1f1f) for text — never pure #000000 -- Keep font weight at 400 throughout — let size and color carry hierarchy -- Use sharp, architectural corners — near-zero border-radius -- Apply uppercase on button labels and section markers for European formality -- Use warm landscape photography with golden color grading +- Reserve `{colors.primary}` (saturated orange) for primary CTAs and active states only +- Use the **sunset stripe band** at the foot of every page — it's the brand's most recognizable signature +- Pair PP Editorial Old (display) with Inter (UI) — never substitute either with a generic alternative +- Apply `{rounded.md}` (8px) to buttons and `{rounded.lg}` (12px) to cards consistently +- Use cream-yellow surfaces ({colors.cream}) for form panels, feature cards, and footer +- Anchor heroes with photographic mountain-sunset imagery (or its visual equivalent — atmospheric gradient sky) +- Use stat-display token (PP Editorial 56px) for stat callouts to maintain editorial character ### Don't -- Don't introduce cool colors (blue, green, purple) — the palette is exclusively warm -- Don't use bold (700+) weight — 400 is the only weight -- Don't round corners — the sharp geometry is intentional -- Don't use cool-toned shadows — shadows must carry amber warmth -- Don't use pure white as a page background — always warm-tinted (#fffaeb minimum) -- Don't reduce hero text below 48px on desktop — the billboard scale is core -- 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 +- Don't use pill-shaped buttons (`{rounded.full}`) — Mistral's geometry is sober and editorial, not playful +- Don't introduce additional accent colors beyond the orange/yellow/cream sunset palette +- Don't reduce hero leading below 1.05 — the editorial display needs that magazine-grade tightness +- Don't replace PP Editorial Old hero displays with Inter — the editorial / sans contrast IS the brand +- Don't apply heavy shadows on flat documentation cards; reserve elevation for IDE mockups +- Don't drop the sunset stripe band from any page bottom — it's the brand's continuity element -## 8. Responsive Behavior +## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | -|------|-------|-------------| -| Mobile | <640px | Single column, stacked everything, hero text reduces to ~32px | -| Tablet | 640–768px | Minor layout adjustments | -| Small Desktop | 768–1024px | 2-column layouts begin | -| Desktop | 1024–1280px | Full layout with maximum typography scale | +|---|---|---| +| Mobile (small) | < 480px | Single column. Hero scales to 40px (PP Editorial). Pill nav collapses to hamburger. Pricing tiers stack 1-up. | +| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 52px. | +| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 64px. | +| Desktop | 1024 – 1279px | Multi-column layouts. Hero 76px. Stat row at full width. | +| Wide Desktop | ≥ 1280px | Full 84px hero presentation. | ### Touch Targets -- Buttons use generous padding (12px minimum) -- Navigation elements adequately spaced -- Cards serve as large touch targets +- Buttons render at 40–44px effective height — at WCAG AAA floor with `10px 20px` padding +- Form inputs render at 44px height +- Pill tabs render at ~32px tall — bumps to 44px on mobile ### Collapsing Strategy -- **Navigation**: Collapses to hamburger on mobile -- **Hero text**: 82px → 56px → 48px → 32px progressive scaling -- **Feature sections**: Multi-column → stacked -- **Photography**: Scales proportionally, may crop on mobile -- **Block identity**: Scales down proportionally +- **Promo banner** stays full-width; truncates at < 480px +- **Top nav** below 1024px collapses to hamburger +- **Hero band**: 2-column hero (text + photography) collapses to stacked at < 1024px +- **Pricing tiers**: 4-column desktop → 2-column tablet → 1-column mobile +- **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 -- Landscape photography scales proportionally -- Warm color grading maintained at all sizes -- Block gradient elements resize fluidly -- No art direction changes — same warm composition at all sizes +- Mountain-sunset photography uses 16:9 ratio with full-bleed scaling +- IDE mockup images maintain aspect ratio across breakpoints +- Customer logo wall presents wordmarks at consistent 60–80px height -## 9. Agent Prompt Guide +## Iteration Guide -### Quick Color Reference -- Brand Orange: "Mistral Orange (#fa520f)" -- Page Background: "Warm Ivory (#fffaeb)" -- Warm Surface: "Cream (#fff0c2)" -- Primary Text: "Mistral Black (#1f1f1f)" -- Sunshine Amber: "Sunshine 700 (#ffa110)" -- Bright Gold: "Bright Yellow (#ffd900)" -- Text on Dark: "Pure White (#ffffff)" +1. Focus on ONE component at a time +2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`) +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. Hero displays use `{typography.hero-display}` (PP Editorial Old). +6. Keep `{colors.primary}` confined to primary CTAs, active states, and the sunset stripe band +7. Cards use `{rounded.lg}` (12px), buttons use `{rounded.md}` (8px). Pills (`{rounded.full}`) reserved for badges only. +8. Always include the sunset-stripe-band component at the foot of every page mockup. -### Example Component Prompts -- "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." +## Known Gaps -### Iteration Guide -1. Keep the warm temperature — "shift toward amber" not "shift toward gray" -2. Use size for hierarchy — 82px → 56px → 48px → 32px → 24px → 16px -3. Never add border-radius — sharp corners only -4. Shadows are always warm: "golden shadow with amber tones" -5. Font weight is always 400 — describe emphasis through size and color +- Specific dark-mode token values not surfaced; the brand has not shipped a published dark-mode palette +- Animation/transition timings not extracted; recommend 150–200ms ease for hover/focus state transitions +- Form validation success state not explicitly captured beyond defaults +- Sunset stripe band gradient stops are approximations — the actual values may vary slightly across pages but the visual rhythm is consistent diff --git a/design-md/mongodb/DESIGN.md b/design-md/mongodb/DESIGN.md index 5e634be..97d2a1b 100644 --- a/design-md/mongodb/DESIGN.md +++ b/design-md/mongodb/DESIGN.md @@ -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:** -- Deep teal-black backgrounds (`#001e2b`) — forest-dark, not space-dark -- Neon MongoDB Green (`#00ed64`) as the singular brand accent — electric and organic -- MongoDB Value Serif for hero headlines — editorial authority at tech scale -- Euclid Circular A for body with weight 300 (light) as a distinctive body weight -- Source Code Pro with wide uppercase letter-spacing (1px–3px) for technical labels -- Teal-tinted shadows: `rgba(0, 30, 43, 0.12)` — shadows carry the forest color -- 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` +- Deep navy/teal hero bands ({colors.brand-teal-deep}) with bright MongoDB green ({colors.brand-green}) CTA pills +- Stark white pricing/documentation surfaces with colored category tags for course tiles (purple, orange, green, teal) +- Euclid Circular A across every UI surface +- Pill-shaped buttons ({rounded.full}) and 12px-rounded cards +- 3-tier pricing comparison (Free / Flex / Dedicated) with featured-mint highlight tier +- Code mockup cards with terminal-aesthetic dark canvas -## 2. Color Palette & Roles +## Colors -### Primary Brand -- **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 +> 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. -### Interactive -- **Action Blue** (`#006cfa`): Secondary accent — links, interactive highlights -- **Hover Blue** (`#3860be`): All link hover states transition to this blue -- **Teal Active** (`#1eaedb`): Button hover background — bright teal +### Brand & Accent +- **MongoDB Green** ({colors.brand-green}): The brand's most recognizable signal — bright pill-CTA color +- **Green Dark** ({colors.brand-green-dark}): Inline link color, secondary green +- **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 -- **Deep Teal** (`#1c2d38`): Dark button backgrounds, secondary dark surfaces -- **Teal Gray** (`#3d4f58`): Dark borders on dark surfaces -- **Dark Slate** (`#21313c`): Dark link text variant -- **Cool Gray** (`#5c6c75`): Muted text on dark, secondary button text -- **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 +### Category Accent (Course Tags) +- **Accent Purple** ({colors.accent-purple}): Course tag for "Database & Security" +- **Accent Orange** ({colors.accent-orange}): Course tag for "Search" +- **Accent Pink** ({colors.accent-pink}): Course tag variant +- **Accent Blue** ({colors.accent-blue}): Course tag variant for atlas/cloud topics -### Shadows -- **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 -- **Standard Shadow** (`rgba(0, 0, 0, 0.15) 0px 3px 20px`): General elevation -- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 2px 4px`): Light card lift +### Surface +- **Canvas White** ({colors.canvas}): Page background and primary card surface +- **Canvas Dark** ({colors.canvas-dark}): Code-block backgrounds, dark mockup canvas +- **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 -- **Display Serif**: `MongoDB Value Serif` — editorial hero headlines -- **Body / UI**: `Euclid Circular A` — geometric sans-serif workhorse -- **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` +### Semantic +- **Warning Background** ({colors.semantic-warning-bg}): Pale yellow callout bg +- **Warning Text** ({colors.semantic-warning-text}): Warning state copy color + +## 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 -| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | -|------|------|------|--------|-------------|----------------|-------| -| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (tight) | normal | Serif authority | -| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (tight) | normal | Serif sub-hero | -| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | Geometric precision | -| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | Feature titles | -| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Introductions | -| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | Standard body | -| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50–2.00 | normal | Light-weight reading text | -| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.88 | 0.16px | Navigation, emphasized | -| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | Strong emphasis | -| Button | Euclid Circular A | 13.5px–16px | 500–700 | 1.00 | 0.135px–0.9px | CTA labels | -| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (relaxed) | normal | Metadata | -| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (relaxed) | 0.2px | Tags, annotations | -| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (relaxed) | normal | Code showcase titles | -| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks | -| Code Label | Source Code Pro | 14px (0.88rem) | 400–500 | 1.14 (tight) | 1px–2px | `text-transform: uppercase` | -| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (relaxed) | 2.5px | `text-transform: uppercase` | +| Token | Size | Weight | Line Height | Letter Spacing | Use | +|---|---|---|---|---|---| +| `{typography.hero-display}` | 72px | 500 | 1.10 | -1.5px | Hero ("One data platform") | +| `{typography.display-lg}` | 56px | 500 | 1.15 | -1px | Major section openers | +| `{typography.heading-1}` | 48px | 500 | 1.20 | -0.5px | Page-level headlines | +| `{typography.heading-2}` | 36px | 500 | 1.25 | -0.5px | Subsection headlines | +| `{typography.heading-3}` | 28px | 500 | 1.30 | 0 | Card titles | +| `{typography.heading-4}` | 22px | 500 | 1.35 | 0 | Feature tile titles | +| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | Smaller card titles, FAQ questions | +| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle, lead body | +| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Primary body text | +| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells | +| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels | +| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels | +| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Section eyebrows, course category tags | +| `{typography.button-md}` | 14px | 600 | 1.30 | 0 | Pill button labels | +| `{typography.code-md}` | 14px | 400 | 1.55 | 0 | Code mockups | ### 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. -- **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. -- **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. -- **Four-weight range**: 300 (light body) → 400 (standard) → 500 (UI/nav) → 700 (bold CTA) — a wider range than most systems, enabling fine-grained hierarchy. +- Tight hero leading (1.10) on 72px display +- Negative letter-spacing on display sizes (-1.5px to -0.5px) +- 600 weight reserved for buttons and small emphasis (FAQ headings, badges) +- 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 -**Primary Green (Dark Surface)** -- Background: `#00684a` (muted MongoDB green) -- Text: `#000000` -- Radius: 50% (circular) or 100px (pill) -- Border: `1px solid #00684a` -- Shadow: `rgba(0,0,0,0.06) 0px 1px 6px` -- Hover: scale 1.1 -- Active: scale 0.85 +**`button-primary`** — Bright MongoDB green pill primary CTA, the dominant action. +- Background `{colors.brand-green}`, text `{colors.on-primary}` (deep navy), typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`. +- Pressed state `button-primary-pressed` deepens to `{colors.primary-pressed}`. +- Disabled state `button-primary-disabled` uses `{colors.hairline}` background. -**Dark Teal Button** -- Background: `#1c2d38` -- Text: `#5c6c75` -- Radius: 100px (pill) -- Border: `1px solid #3d4f58` -- Hover: background `#1eaedb`, text white, translateX(5px) +**`button-secondary`** — Outlined pill for secondary actions. +- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`. -**Outlined Button (Light Surface)** -- Background: transparent -- Text: `#001e2b` -- Border: `1px solid #b8c4c2` -- Radius: 4px–8px -- Hover: background tint +**`button-on-dark`** — Bright green pill on dark hero bands. +- Background `{colors.brand-green}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`. + +**`button-secondary-on-dark`** — Outlined pill on dark backgrounds. +- Background transparent, text `{colors.on-dark}`, border `1px solid {colors.hairline-dark}`, typography `{typography.button-md}`, padding `10px 22px`, 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 green text link. +- Background transparent, text `{colors.brand-green-dark}`, typography `{typography.body-sm-medium}`, padding `0`. ### Cards & Containers -- Light mode: white background with `1px solid #b8c4c2` border -- Dark mode: `#001e2b` or `#1c2d38` background with `1px solid #3d4f58` -- Radius: 16px (standard), 24px (medium), 48px (large/hero) -- Shadow: `rgba(0,30,43,0.12) 0px 26px 44px` (forest-tinted) -- Image containers: 30px–32px radius + +**`card-base`** — Standard content card. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. + +**`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 -- Textarea: text `#e8edeb`, padding 12px 12px 12px 8px -- Borders: `1px solid #b8c4c2` on light, `1px solid #3d4f58` on dark -- Input radius: 4px + +**`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-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 -- 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 -- Dashboard screenshots on dark backgrounds -- Green-accented UI elements in screenshots -- 30px–32px radius on image containers -- Full-width dark sections for product showcases +**Top Navigation (Marketing)** — Sticky white bar. +- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline}`. +- Left: MongoDB leaf logo + "Solutions / Resources / Company / Pricing" links. +- Right: "Sign In" link + bright-green pill "Try Free" CTA. -### Distinctive Components +### Signature Components -**Neon Green Accent Underlines** -- `0px 2px 2px 0px solid #00ed64` — bottom + right border creating accent underlines -- Used on feature headings and highlighted text -- Also appears as `#006cfa` (blue) variant +**`hero-band-dark`** — Deep teal hero band with embedded code mockup. +- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, padding `{spacing.hero}`. +- Layout: centered headline `{typography.hero-display}`, subtitle, button row, `code-mockup-card` below. -**Source Code Label System** -- 14px uppercase Source Code Pro with 1px–2px letter-spacing -- Used as section category markers above headings -- Creates a "database field label" aesthetic +**`hero-platform-card`** — Lighter-teal platform showcase card on dark hero. +- Background `{colors.brand-teal-mid}`, text `{colors.on-dark}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`. -## 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 -- Base unit: 8px -- Scale: 1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px +**`footer-region`** — Dark teal multi-column footer. +- Background `{colors.brand-teal-deep}`, padding `{spacing.section} {spacing.xxl}`. +- 6-column link grid. +- Section headings in `{typography.body-sm-medium}` `{colors.on-dark}`. -### Grid & Container -- Max content width centered -- Dark hero section with contained content -- Light content sections below -- Card grids: 2–3 columns -- Full-width dark footer +**`footer-link`** — Individual footer link. +- Background transparent, text `{colors.on-dark-muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. -### Whitespace Philosophy -- **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's and Don'ts ### Do -- Use `#001e2b` (forest-black) for dark sections — not pure black -- Apply MongoDB Green (`#00ed64`) sparingly for maximum electric impact -- Use MongoDB Value Serif ONLY for hero/display headings — Euclid Circular A for everything else -- Apply Source Code Pro uppercase with wide tracking (1px–3px) for technical labels -- Use teal-tinted shadows (`rgba(0,30,43,0.12)`) for primary card elevation -- Maintain the dark/light section duality — dramatic contrast between modes -- Use weight 300 for body text — the light weight is the readable voice -- Apply pill radius (100px) to primary action buttons +- Use `{colors.brand-green}` (bright MongoDB green) for primary CTAs everywhere +- Pair dark-teal hero bands with bright green CTA pills +- Apply `{rounded.full}` to every button, every status badge +- Apply `{rounded.lg}` (12px) to cards consistently +- Use category accent colors (purple, orange, green, teal) ONLY for course tags +- Maintain Euclid Circular A across every UI surface +- Use code mockup cards with terminal-aesthetic content for product showcases ### Don't -- Don't use pure black (`#000000`) for dark backgrounds — always use teal-black (`#001e2b`) -- Don't use MongoDB Green (`#00ed64`) on backgrounds — it's an accent for text, underlines, and small highlights -- Don't use standard gray shadows — always use teal-tinted (`rgba(0,30,43,...)`) -- Don't apply serif font to body text — MongoDB Value Serif is hero-only -- Don't use narrow letter-spacing on Source Code Pro labels — the wide tracking IS the identity -- Don't mix dark and light section treatments within the same section -- 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 +- Don't use the bright green for body text or large surfaces +- Don't introduce additional accent colors beyond the brand green and category-encoding palette +- Don't soften corners on buttons; the pill is a brand signature +- Don't replace deep teal hero bands with white hero bands +- Don't apply heavy shadows on flat documentation cards; reserve elevation for code mockups +- Don't use Source Code Pro for prose -## 8. Responsive Behavior +## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | -|------|-------|-------------| -| Mobile Small | <425px | Tight single column | -| Mobile | 425–768px | Standard mobile | -| Tablet | 768–1024px | 2-column grids begin | -| Desktop | 1024–1280px | Standard layout | -| Large Desktop | 1280–1440px | Expanded layout | -| Ultra-wide | >1440px | Maximum width, generous margins | +|---|---|---| +| Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. Course catalog 1-up. | +| Mobile (large) | 480 – 767px | Course tiles 2-up. Hero 48px. | +| Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. | +| Desktop | 1024 – 1279px | 3-tier pricing card row. 3-up course catalog. Hero 64px. | +| Wide Desktop | ≥ 1280px | Full 72px hero presentation. | ### Touch Targets -- Pill buttons with generous padding -- Navigation links at 16px with adequate spacing -- Card surfaces as full-area touch targets +- Pill buttons render at 40–44px effective height +- Form inputs render at 44px height +- Search pill (large) renders at 56px +- Pill tabs ~32px → 44px on mobile ### Collapsing Strategy -- Hero: MongoDB Value Serif 96px → 64px → scales further -- Navigation: horizontal mega-menu → hamburger -- Feature cards: multi-column → stacked -- Dark/light sections maintain their mode at all sizes -- Source Code Pro labels maintain uppercase treatment +- **Promo banner** stays full-width; truncates at < 480px +- **Top nav** below 1024px collapses to hamburger +- **Hero band**: code mockup card moves below text on mobile +- **Pricing tiers**: 3-column → 2-column tablet → 1-column mobile +- **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 -- Dashboard screenshots scale proportionally -- Dark section backgrounds maintained full-width -- Image radius maintained across breakpoints +- Atmospheric AI imagery uses 16:9 ratio with full-bleed scaling +- Code mockup card content remains readable across breakpoints +- Customer logo wall: wordmarks at consistent 60–80px height -## 9. Agent Prompt Guide +## Iteration Guide -### Quick Color Reference -- Dark background: Forest Black (`#001e2b`) -- Brand accent: MongoDB Green (`#00ed64`) -- Functional green: Dark Green (`#00684a`) -- Link blue: Action Blue (`#006cfa`) -- Text on light: Black (`#000000`) -- Text on dark: White (`#ffffff`) or Light Input (`#e8edeb`) -- Border light: Silver Teal (`#b8c4c2`) -- Border dark: Teal Gray (`#3d4f58`) +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 +6. Keep `{colors.brand-green}` as the primary CTA across all surfaces +7. Pill-shaped buttons (`{rounded.full}`) always +8. Dark-teal hero bands frame primary CTAs -### Example Component Prompts -- "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)." +## Known Gaps -### Iteration Guide -1. Start with the mode decision: dark (#001e2b) for hero/features, white for content -2. MongoDB Green (#00ed64) is electric — use once per section for maximum impact -3. Serif headlines (MongoDB Value Serif) create the editorial authority — never use for body -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 +- Specific dark-mode token values for canvas/surface beyond hero bands not surfaced +- Animation/transition timings not extracted; recommend 150–200ms ease +- Form validation success state not explicitly captured +- Course-tile category color mappings are observation-based diff --git a/design-md/notion/DESIGN.md b/design-md/notion/DESIGN.md index 206b5f4..8752d57 100644 --- a/design-md/notion/DESIGN.md +++ b/design-md/notion/DESIGN.md @@ -1,309 +1,821 @@ -# Design System Inspired by Notion +--- +version: alpha +name: Notion +description: Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a signature purple pill primary CTA ({colors.primary}), and a rich palette of pastel-tinted feature cards that echo the colorful database properties of the live product. The system uses a Notion-Sans (Inter-based) typeface across every UI surface, anchors a 4-tier pricing comparison (Free / Plus / Business / Enterprise), and presents the live workspace UI mockup directly inside the hero band. Coverage spans homepage, Enterprise, Product AI, Product Agents, Startups, and Pricing surfaces. -## 1. Visual Theme & Atmosphere +colors: + primary: "#5645d4" + primary-pressed: "#4534b3" + primary-deep: "#3a2a99" + on-primary: "#ffffff" + brand-navy: "#0a1530" + brand-navy-deep: "#070f24" + brand-navy-mid: "#1a2a52" + link-blue: "#0075de" + link-blue-pressed: "#005bab" + brand-orange: "#dd5b00" + brand-orange-deep: "#793400" + brand-pink: "#ff64c8" + brand-pink-deep: "#a02e6d" + brand-purple: "#7b3ff2" + brand-purple-300: "#d6b6f6" + brand-purple-800: "#391c57" + brand-teal: "#2a9d99" + brand-green: "#1aae39" + brand-yellow: "#f5d75e" + brand-brown: "#523410" + card-tint-peach: "#ffe8d4" + card-tint-rose: "#fde0ec" + card-tint-mint: "#d9f3e1" + card-tint-lavender: "#e6e0f5" + card-tint-sky: "#dcecfa" + card-tint-yellow: "#fef7d6" + card-tint-yellow-bold: "#f9e79f" + card-tint-cream: "#f8f5e8" + card-tint-gray: "#f0eeec" + canvas: "#ffffff" + surface: "#f6f5f4" + surface-soft: "#fafaf9" + hairline: "#e5e3df" + hairline-soft: "#ede9e4" + hairline-strong: "#c8c4be" + ink-deep: "#000000" + ink: "#1a1a1a" + charcoal: "#37352f" + slate: "#5d5b54" + steel: "#787671" + stone: "#a4a097" + muted: "#bbb8b1" + on-dark: "#ffffff" + on-dark-muted: "#a4a097" + semantic-success: "#1aae39" + semantic-warning: "#dd5b00" + semantic-error: "#e03131" -Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (`#ffffff`) but the text isn't pure black -- it's a warm near-black (`rgba(0,0,0,0.95)`) that softens the reading experience imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth. +typography: + hero-display: + fontFamily: Notion Sans + fontSize: 80px + fontWeight: 600 + lineHeight: 1.05 + letterSpacing: -2px + display-lg: + fontFamily: Notion Sans + fontSize: 56px + fontWeight: 600 + lineHeight: 1.10 + letterSpacing: -1px + heading-1: + fontFamily: Notion Sans + fontSize: 48px + fontWeight: 600 + lineHeight: 1.15 + letterSpacing: -0.5px + heading-2: + fontFamily: Notion Sans + fontSize: 36px + fontWeight: 600 + lineHeight: 1.20 + letterSpacing: -0.5px + heading-3: + fontFamily: Notion Sans + fontSize: 28px + fontWeight: 600 + lineHeight: 1.25 + heading-4: + fontFamily: Notion Sans + fontSize: 22px + fontWeight: 600 + lineHeight: 1.30 + heading-5: + fontFamily: Notion Sans + fontSize: 18px + fontWeight: 600 + lineHeight: 1.40 + subtitle: + fontFamily: Notion Sans + fontSize: 18px + fontWeight: 400 + lineHeight: 1.50 + body-md: + fontFamily: Notion Sans + fontSize: 16px + fontWeight: 400 + lineHeight: 1.55 + body-md-medium: + fontFamily: Notion Sans + fontSize: 16px + fontWeight: 500 + lineHeight: 1.55 + body-sm: + fontFamily: Notion Sans + fontSize: 14px + fontWeight: 400 + lineHeight: 1.50 + body-sm-medium: + fontFamily: Notion Sans + fontSize: 14px + fontWeight: 500 + lineHeight: 1.50 + caption: + fontFamily: Notion Sans + fontSize: 13px + fontWeight: 400 + lineHeight: 1.40 + caption-bold: + fontFamily: Notion Sans + fontSize: 13px + fontWeight: 600 + lineHeight: 1.40 + micro: + fontFamily: Notion Sans + fontSize: 12px + fontWeight: 500 + lineHeight: 1.40 + micro-uppercase: + fontFamily: Notion Sans + fontSize: 11px + fontWeight: 600 + lineHeight: 1.40 + letterSpacing: 1px + button-md: + fontFamily: Notion Sans + fontSize: 14px + fontWeight: 500 + lineHeight: 1.30 -The custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features `"lnum"` (lining numerals) and `"locl"` (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading. +rounded: + xs: 4px + sm: 6px + md: 8px + lg: 12px + xl: 16px + xxl: 20px + xxxl: 24px + full: 9999px -What makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin `1px solid rgba(0,0,0,0.1)` borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen. +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 18px" + button-primary-pressed: + backgroundColor: "{colors.primary-pressed}" + textColor: "{colors.on-primary}" + button-primary-disabled: + backgroundColor: "{colors.hairline}" + textColor: "{colors.muted}" + button-dark: + backgroundColor: "{colors.ink-deep}" + textColor: "{colors.on-dark}" + typography: "{typography.button-md}" + rounded: "{rounded.md}" + padding: "10px 18px" + button-secondary: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.button-md}" + rounded: "{rounded.md}" + padding: "10px 18px" + border: "1px solid {colors.hairline-strong}" + button-on-dark: + backgroundColor: "{colors.on-dark}" + textColor: "{colors.ink}" + typography: "{typography.button-md}" + rounded: "{rounded.md}" + padding: "10px 18px" + button-secondary-on-dark: + backgroundColor: "transparent" + textColor: "{colors.on-dark}" + typography: "{typography.button-md}" + rounded: "{rounded.md}" + padding: "10px 18px" + border: "1px solid {colors.on-dark-muted}" + button-ghost: + backgroundColor: "transparent" + textColor: "{colors.ink}" + typography: "{typography.button-md}" + rounded: "{rounded.sm}" + padding: "8px 12px" + button-link: + backgroundColor: "transparent" + textColor: "{colors.link-blue}" + 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-feature-yellow-bold: + backgroundColor: "{colors.card-tint-yellow-bold}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-feature-peach: + backgroundColor: "{colors.card-tint-peach}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-feature-rose: + backgroundColor: "{colors.card-tint-rose}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-feature-mint: + backgroundColor: "{colors.card-tint-mint}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-feature-sky: + backgroundColor: "{colors.card-tint-sky}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-feature-lavender: + backgroundColor: "{colors.card-tint-lavender}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-feature-yellow: + backgroundColor: "{colors.card-tint-yellow}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-feature-cream: + backgroundColor: "{colors.card-tint-cream}" + textColor: "{colors.charcoal}" + rounded: "{rounded.lg}" + padding: "{spacing.xxl}" + card-agent-tile: + backgroundColor: "{colors.canvas}" + rounded: "{rounded.lg}" + padding: "{spacing.xl}" + border: "1px solid {colors.hairline}" + card-template: + backgroundColor: "{colors.canvas}" + rounded: "{rounded.lg}" + padding: "{spacing.lg}" + border: "1px solid {colors.hairline}" + card-startup-perk: + 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}" + 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}" + 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}" + 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-deep}" + textColor: "{colors.on-dark}" + rounded: "{rounded.full}" + border: "1px solid {colors.ink-deep}" + 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.ink}" + typography: "{typography.body-sm-medium}" + border: "0 0 2px {colors.ink} solid" + badge-purple: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.caption-bold}" + rounded: "{rounded.full}" + padding: "4px 10px" + badge-pink: + backgroundColor: "{colors.brand-pink}" + textColor: "{colors.on-primary}" + typography: "{typography.caption-bold}" + rounded: "{rounded.full}" + padding: "4px 10px" + badge-orange: + backgroundColor: "{colors.brand-orange}" + textColor: "{colors.on-primary}" + typography: "{typography.caption-bold}" + rounded: "{rounded.full}" + padding: "4px 10px" + badge-tag-purple: + backgroundColor: "{colors.card-tint-lavender}" + textColor: "{colors.brand-purple-800}" + typography: "{typography.caption-bold}" + rounded: "{rounded.sm}" + padding: "2px 8px" + badge-tag-orange: + backgroundColor: "{colors.card-tint-peach}" + textColor: "{colors.brand-orange-deep}" + typography: "{typography.caption-bold}" + rounded: "{rounded.sm}" + padding: "2px 8px" + badge-tag-green: + backgroundColor: "{colors.card-tint-mint}" + textColor: "{colors.brand-green}" + typography: "{typography.caption-bold}" + rounded: "{rounded.sm}" + padding: "2px 8px" + badge-popular: + backgroundColor: "{colors.primary}" + textColor: "{colors.on-primary}" + typography: "{typography.caption-bold}" + rounded: "{rounded.full}" + padding: "4px 10px" + promo-banner: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + typography: "{typography.body-sm-medium}" + padding: "{spacing.sm} {spacing.md}" + hero-band-dark: + backgroundColor: "{colors.brand-navy}" + textColor: "{colors.on-dark}" + rounded: "0" + padding: "{spacing.hero}" + workspace-mockup-card: + backgroundColor: "{colors.canvas}" + rounded: "{rounded.lg}" + padding: "0" + border: "1px solid {colors.hairline}" + shadow: "rgba(15, 15, 15, 0.2) 0px 24px 48px -8px" + cta-banner-light: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + rounded: "{rounded.lg}" + padding: "{spacing.section}" + 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" + 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" + stat-row: + backgroundColor: "{colors.surface}" + textColor: "{colors.ink}" + rounded: "{rounded.lg}" + padding: "{spacing.section-sm}" + footer-region: + backgroundColor: "{colors.canvas}" + textColor: "{colors.charcoal}" + typography: "{typography.body-sm}" + padding: "{spacing.section} {spacing.xxl}" + border: "1px solid {colors.hairline}" + footer-link: + backgroundColor: "transparent" + textColor: "{colors.steel}" + typography: "{typography.body-sm}" + padding: "{spacing.xxs} 0" +--- + +## Overview + +Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice. The homepage opens with **"Meet the night shift."** rendered centered over a deep navy hero band ({colors.brand-navy}), decorated with brand-colored sticky-note dots and mesh wire illustrations scattered around the headline. The signature **purple pill primary CTA** ({colors.primary}) "Get Notion free" sits at the visual center, paired with an outlined "Request a demo" secondary. Below the buttons, a real Notion workspace UI mockup card (the "Ramp HQ" kanban board) breaks out of the hero band with a deep diffuse drop shadow. + +Below the hero, the page cycles through a distinctive sequence of feature sections: a dense sticky-note "Keep work moving 24/7" panel with red/blue/green/purple/teal status icons; a **bold yellow** ({colors.card-tint-yellow-bold}) "Ask your on-demand assistants" banner card flanked by orange/rose/mint pastel feature tiles showing assistant UI mockups; and a "Bring all your work together" 3-column grid with brand-colored mockups (sky-blue tutorial card, light Notion calendar, brown/rust testimonial slate). The pricing page renders 4 tiers (Free / Plus / Business / Enterprise) horizontally with one tier featured (purple-bordered) and a dense feature comparison table running below. + +The system uses a Notion-Sans typeface (Inter-based) across every UI surface — humanist-geometric character that pairs naturally with the colorful illustrations. Buttons are `{rounded.md}` (8px) rectangles, NOT pills — distinguishing Notion's sober rectangular geometry from competitors that use pills universally. Cards use `{rounded.lg}` (12px) consistently. **Key Characteristics:** -- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px) -- Warm neutral palette: grays carry yellow-brown undertones (`#f6f5f4` warm white, `#31302e` warm dark) -- Near-black text via `rgba(0,0,0,0.95)` -- not pure black, creating micro-warmth -- Ultra-thin borders: `1px solid rgba(0,0,0,0.1)` throughout -- whisper-weight division -- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth -- Notion Blue (`#0075de`) as the singular accent color for CTAs and interactive elements -- Pill badges (9999px radius) with tinted blue backgrounds for status indicators -- 8px base spacing unit with an organic, non-rigid scale +- Deep navy hero band ({colors.brand-navy}) with scattered sticky-note dots + mesh wire decorative illustrations +- **Signature purple pill** ({colors.primary}) primary CTA — Notion's recognizable "Get Notion free" button color +- Real Notion workspace UI mockup card embedded in the hero with deep drop shadow +- Bold yellow feature banner ({colors.card-tint-yellow-bold}) for high-emphasis content sections +- Pastel feature card palette (peach, rose, mint, lavender, sky, yellow) echoing the live product database properties +- Notion-Sans (Inter-based) across every UI surface +- 8px-rounded buttons (NOT pills), 12px-rounded cards — sober editorial geometry +- 4-tier pricing comparison with dense feature table +- Centered hero layout (different from the left-aligned norm of most B2B SaaS) -## 2. Color Palette & Roles +## Colors -### Primary -- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability. -- **Pure White** (`#ffffff`): Page background, card surfaces, button text on blue. -- **Notion Blue** (`#0075de`): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome. +> Source pages: notion.com/ (homepage), /enterprise, /product/ai, /product/agents, /startups, /pricing. Token coverage was identical across all six pages. -### Brand Secondary -- **Deep Navy** (`#213183`): Secondary brand color, used sparingly for emphasis and dark feature sections. -- **Active Blue** (`#005bab`): Button active/pressed state -- darker variant of Notion Blue. +### Brand & Primary +- **Notion Purple** ({colors.primary}): Signature primary CTA color — the unmistakable "Get Notion free" pill button. Reserved for the dominant CTA only. +- **Purple Pressed** ({colors.primary-pressed}): Pressed-state variant +- **Purple Deep** ({colors.primary-deep}): Deeper variant for emphasis +- **Brand Navy** ({colors.brand-navy}): Hero band background — deep navy +- **Brand Navy Deep** ({colors.brand-navy-deep}): Deeper navy for promo banner +- **Brand Navy Mid** ({colors.brand-navy-mid}): Mid-spectrum navy +- **Link Blue** ({colors.link-blue}): Inline text link blue (NOT primary CTA) +- **Link Blue Pressed** ({colors.link-blue-pressed}): Pressed-state link blue -### Warm Neutral Scale -- **Warm White** (`#f6f5f4`): Background surface tint, section alternation, subtle card fill. The yellow undertone is key. -- **Warm Dark** (`#31302e`): Dark surface background, dark section text. Warmer than standard grays. -- **Warm Gray 500** (`#615d59`): Secondary text, descriptions, muted labels. -- **Warm Gray 300** (`#a39e98`): Placeholder text, disabled states, caption text. +### Brand Color Spectrum (echoes live product database properties) +- **Brand Pink** ({colors.brand-pink}): Pink accent +- **Brand Pink Deep** ({colors.brand-pink-deep}): Deeper pink +- **Brand Orange** ({colors.brand-orange}): Orange accent +- **Brand Orange Deep** ({colors.brand-orange-deep}): Deeper orange-rust +- **Brand Purple** ({colors.brand-purple}): Purple accent variant +- **Brand Purple 300** ({colors.brand-purple-300}): Light purple +- **Brand Purple 800** ({colors.brand-purple-800}): Deep purple for tag text +- **Brand Teal** ({colors.brand-teal}): Teal accent +- **Brand Green** ({colors.brand-green}): Bright green +- **Brand Yellow** ({colors.brand-yellow}): Soft yellow +- **Brand Brown** ({colors.brand-brown}): Brand brown for "earthy" tints -### Semantic Accent Colors -- **Teal** (`#2a9d99`): Success states, positive indicators. -- **Green** (`#1aae39`): Confirmation, completion badges. -- **Orange** (`#dd5b00`): Warning states, attention indicators. -- **Pink** (`#ff64c8`): Decorative accent, feature highlights. -- **Purple** (`#391c57`): Premium features, deep accents. -- **Brown** (`#523410`): Earthy accent, warm feature sections. +### Card Tints (Pastel Feature Card Backgrounds) +- **Tint Peach** ({colors.card-tint-peach}): Pale peach +- **Tint Rose** ({colors.card-tint-rose}): Pale rose-pink +- **Tint Mint** ({colors.card-tint-mint}): Pale mint-green +- **Tint Lavender** ({colors.card-tint-lavender}): Pale lavender +- **Tint Sky** ({colors.card-tint-sky}): Pale sky-blue +- **Tint Yellow** ({colors.card-tint-yellow}): Pale yellow +- **Tint Yellow Bold** ({colors.card-tint-yellow-bold}): Bold yellow for high-emphasis feature banners ("Ask your on-demand assistants") +- **Tint Cream** ({colors.card-tint-cream}): Cream tint +- **Tint Gray** ({colors.card-tint-gray}): Neutral surface -### Interactive -- **Link Blue** (`#0075de`): Primary link color with underline-on-hover. -- **Link Light Blue** (`#62aef0`): Lighter link variant for dark backgrounds. -- **Focus Blue** (`#097fe8`): Focus ring on interactive elements. -- **Badge Blue Bg** (`#f2f9ff`): Pill badge background, tinted blue surface. -- **Badge Blue Text** (`#097fe8`): Pill badge text, darker blue for readability. +### Surface +- **Canvas White** ({colors.canvas}): Page background and primary card surface +- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, featured pricing tier +- **Surface Soft** ({colors.surface-soft}): Quieter section divisions +- **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 -### Shadows & Depth -- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Multi-layer card elevation. -- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): Five-layer deep elevation for modals and featured content. -- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`): Standard division border -- cards, dividers, sections. +### Text +- **Ink Deep** ({colors.ink-deep}): Pure black for emphasis +- **Ink** ({colors.ink}): Primary headlines and body text +- **Charcoal** ({colors.charcoal}): Body emphasis (Notion's signature warm-charcoal) +- **Slate** ({colors.slate}): Secondary text +- **Steel** ({colors.steel}): Tertiary, footer links +- **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 -## 3. Typography Rules +### Semantic +- **Success** ({colors.semantic-success}): Confirmation green +- **Warning** ({colors.semantic-warning}): Mid-priority alerts (orange) +- **Error** ({colors.semantic-error}): Validation errors (red) + +## Typography ### Font Family -- **Primary**: `NotionInter`, with fallbacks: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol` -- **OpenType Features**: `"lnum"` (lining numerals) and `"locl"` (localized forms) enabled on display and heading text. +**Notion Sans** (primary): Notion's custom Inter-based variable typeface. Fallbacks: Inter, -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif. Humanist-geometric character used across every UI surface. ### Hierarchy -| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | -|------|------|------|--------|-------------|----------------|-------| -| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines | -| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines | -| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with `"lnum"` | -| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections | -| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers | -| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles | -| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions | -| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text | -| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text | -| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states | -| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size | -| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text | -| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels | -| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions | -| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels | -| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps | +| Token | Size | Weight | Line Height | Letter Spacing | Use | +|---|---|---|---|---|---| +| `{typography.hero-display}` | 80px | 600 | 1.05 | -2px | Hero ("Meet the night shift") | +| `{typography.display-lg}` | 56px | 600 | 1.10 | -1px | Section openers | +| `{typography.heading-1}` | 48px | 600 | 1.15 | -0.5px | Page-level headlines ("Try for free") | +| `{typography.heading-2}` | 36px | 600 | 1.20 | -0.5px | Subsection headlines ("Keep work moving 24/7") | +| `{typography.heading-3}` | 28px | 600 | 1.25 | 0 | Card titles | +| `{typography.heading-4}` | 22px | 600 | 1.30 | 0 | Feature tile titles | +| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | FAQ questions | +| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle | +| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Primary body text | +| `{typography.body-md-medium}` | 16px | 500 | 1.55 | 0 | Body emphasis | +| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body | +| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels | +| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels | +| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Button labels | ### Principles -- **Compression at scale**: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px. The compression creates density at headlines while maintaining readability at body sizes. -- **Four-weight system**: 400 (body/reading), 500 (UI/interactive), 600 (emphasis/navigation), 700 (headings/display). The broader weight range compared to most systems allows nuanced hierarchy. -- **Warm scaling**: Line height tightens as size increases -- 1.50 at body (16px), 1.23-1.27 at sub-headings, 1.00-1.04 at display. This creates denser, more impactful headlines. -- **Badge micro-tracking**: The 12px badge text uses positive letter-spacing (0.125px) -- the only positive tracking in the system, creating wider, more legible small text. +- Tight hero leading (1.05) on 80px display +- Negative letter-spacing on display sizes (-2px to -0.5px) +- Generous body leading (1.55) for documentation readability +- 600 weight for headlines + 500 for buttons; 400 body -## 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: 4-tier card row at desktop with dense comparison table +- Homepage: centered hero with workspace mockup below buttons; alternating colorful feature card sections + +### Whitespace Philosophy +Marketing surfaces use generous breathing room between feature card bands. Workspace mockup card on hero gets full-width treatment with deep drop shadow. + +## Elevation & Depth + +| Level | Treatment | Use | +|---|---|---| +| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows | +| 1 (subtle) | `rgba(15, 15, 15, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles | +| 2 (card) | `rgba(15, 15, 15, 0.08) 0px 4px 12px 0px` | Feature cards | +| 3 (mockup) | `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px` | Hero workspace mockup card | +| 4 (modal) | `rgba(15, 15, 15, 0.16) 0px 16px 48px -8px` | Modals, dropdowns | + +### Decorative Depth +- Hero workspace mockup card uses deep diffuse drop shadow (Level 3) — significant elevation against the navy band +- Pastel feature cards carry their own visual weight via tint backgrounds +- Sticky-note dot illustrations and mesh wires add atmospheric decoration to navy hero + +## Shapes + +### Border Radius Scale + +| Token | Value | Use | +|---|---|---| +| `{rounded.xs}` | 4px | Tag chips | +| `{rounded.sm}` | 6px | Type badges | +| `{rounded.md}` | 8px | Buttons, inputs, search-pill | +| `{rounded.lg}` | 12px | Cards, pricing tiers, agent tiles, workspace mockup | +| `{rounded.xl}` | 16px | Larger feature panels | +| `{rounded.xxl}` | 20px | Featured product showcases | +| `{rounded.xxxl}` | 24px | Larger feature cards | +| `{rounded.full}` | 9999px | Status badges, pill tabs (NOT regular buttons) | + +Notion's geometry is sober-editorial — `{rounded.md}` (8px) buttons distinguish it from pill-button-everywhere brands. + +## Components + +> Per the no-hover policy, hover states are NOT documented. ### Buttons -**Primary Blue** -- Background: `#0075de` (Notion Blue) -- Text: `#ffffff` -- Padding: 8px 16px -- Radius: 4px (subtle) -- Border: `1px solid transparent` -- Hover: background darkens to `#005bab` -- Active: scale(0.9) transform -- Focus: `2px solid` focus outline, `var(--shadow-level-200)` shadow -- Use: Primary CTA ("Get Notion free", "Try it") +**`button-primary`** — Signature purple rectangular primary CTA, the dominant action. +- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`. +- Pressed state `button-primary-pressed` deepens to `{colors.primary-pressed}`. +- Disabled state uses `{colors.hairline}` background. -**Secondary / Tertiary** -- Background: `rgba(0,0,0,0.05)` (translucent warm gray) -- Text: `#000000` (near-black) -- Padding: 8px 16px -- Radius: 4px -- Hover: text color shifts, scale(1.05) -- Active: scale(0.9) transform -- Use: Secondary actions, form submissions +**`button-dark`** — Black rectangular CTA on light backgrounds. +- Background `{colors.ink-deep}`, text `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`. -**Ghost / Link Button** -- Background: transparent -- Text: `rgba(0,0,0,0.95)` -- Decoration: underline on hover -- Use: Tertiary actions, inline links +**`button-secondary`** — Outlined rectangular for secondary actions ("Request a demo"). +- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`. -**Pill Badge Button** -- Background: `#f2f9ff` (tinted blue) -- Text: `#097fe8` -- Padding: 4px 8px -- Radius: 9999px (full pill) -- Font: 12px weight 600 -- Use: Status badges, feature labels, "New" tags +**`button-on-dark`** — White button on dark hero bands. +- Background `{colors.on-dark}`, text `{colors.ink}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`. + +**`button-secondary-on-dark`** — Outlined button on dark. +- Background transparent, text `{colors.on-dark}`, border `1px solid {colors.on-dark-muted}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`. + +**`button-ghost`** — Quieter ghost button. +- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.sm}`. + +**`button-link`** — Inline blue text link (NOT primary purple). +- Background transparent, text `{colors.link-blue}`, typography `{typography.body-sm-medium}`, padding `0`. ### Cards & Containers -- Background: `#ffffff` -- Border: `1px solid rgba(0,0,0,0.1)` (whisper border) -- Radius: 12px (standard cards), 16px (featured/hero cards) -- Shadow: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px` -- Hover: subtle shadow intensification -- Image cards: 12px top radius, image fills top half + +**`card-base`** — Standard content card. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. + +**`card-feature`** — Feature card with larger padding. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`. + +**`card-feature-yellow-bold`** — Bold yellow feature banner for high-emphasis content ("Ask your on-demand assistants"). +- Background `{colors.card-tint-yellow-bold}`, text `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`. + +**`card-feature-peach`** + **`card-feature-rose`** + **`card-feature-mint`** + **`card-feature-sky`** + **`card-feature-lavender`** + **`card-feature-yellow`** + **`card-feature-cream`** — Pastel-tinted feature cards. +- Each variant uses its corresponding `card-tint-*` color as background, text `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`. + +**`card-agent-tile`** — Agent assistant tile. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. + +**`card-template`** — Template thumbnail card. +- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`. + +**`card-startup-perk`** — Startup-program perk grid item. +- 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 (Plus or Business — purple-bordered). +- Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.primary}`. ### Inputs & Forms -- Background: `#ffffff` -- Text: `rgba(0,0,0,0.9)` -- Border: `1px solid #dddddd` -- Padding: 6px -- Radius: 4px -- Focus: blue outline ring -- Placeholder: warm gray `#a39e98` + +**`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.primary}` (purple). + +**`search-pill`** — Search bar. +- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 44px, border `1px solid {colors.hairline}`. + +### Tabs + +**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav for top-level switching. +- Inactive: text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`. +- Active: background `{colors.ink-deep}`, text `{colors.on-dark}`. + +**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation. +- Inactive: text `{colors.steel}`, no border. Active: text `{colors.ink}`, 2px bottom border in `{colors.ink}`. + +### Badges & Status + +**`badge-purple`** — Purple status badge (matches primary CTA). +- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`. + +**`badge-pink`** — Pink accent badge. +- Background `{colors.brand-pink}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`. + +**`badge-orange`** — Orange accent badge. +- Background `{colors.brand-orange}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`. + +**`badge-tag-purple`** — Soft-purple feature tag chip. +- Background `{colors.card-tint-lavender}`, text `{colors.brand-purple-800}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`. + +**`badge-tag-orange`** — Soft-orange feature tag. +- Background `{colors.card-tint-peach}`, text `{colors.brand-orange-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`. + +**`badge-tag-green`** — Soft-mint feature tag. +- Background `{colors.card-tint-mint}`, text `{colors.brand-green}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`. + +**`badge-popular`** — "Most Popular" tier indicator. +- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`. + +**`promo-banner`** — Light surface promo strip ABOVE the top nav. +- Background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. ("Developers: Get a first look at our new Developer Platform on May 13.") + +### 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 + +**`workspace-mockup-card`** — Embedded Notion workspace UI mockup on hero band ("Ramp HQ" kanban board). +- Background `{colors.canvas}`, rounded `{rounded.lg}`, border `1px solid {colors.hairline}`, deep shadow `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px`. Carries actual Notion product UI mock. + +**`testimonial-card`** — Customer testimonial 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}`. + +**`stat-row`** — Stats strip with bar chart visualization ("More productivity. Fewer tools."). +- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section-sm}`. + +**`cta-banner-light`** — Light surface CTA banner. +- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section}`. ### Navigation -- Clean horizontal nav on white, not sticky -- Brand logo left-aligned (33x34px icon + wordmark) -- Links: NotionInter 15px weight 500-600, near-black text -- Hover: color shift to `var(--color-link-primary-text-hover)` -- CTA: blue pill button ("Get Notion free") right-aligned -- Mobile: hamburger menu collapse -- Product dropdowns with multi-level categorized menus -### Image Treatment -- Product screenshots with `1px solid rgba(0,0,0,0.1)` border -- Top-rounded images: `12px 12px 0px 0px` radius -- Dashboard/workspace preview screenshots dominate feature sections -- Warm gradient backgrounds behind hero illustrations (decorative character illustrations) +**Top Navigation (Marketing)** — Sticky white bar. +- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline}`. +- Left: Notion "N" logo + "Product / AI / Solutions / Resources / Enterprise / Pricing / Request a demo" links. +- Right: "Get Notion free" purple button + "Log in" link. -### Distinctive Components +### Signature Components -**Feature Cards with Illustrations** -- Large illustrative headers (The Great Wave, product UI screenshots) -- 12px radius card with whisper border -- Title at 22px weight 700, description at 16px weight 400 -- Warm white (`#f6f5f4`) background variant for alternating sections +**`hero-band-dark`** — Deep navy hero band with embedded workspace mockup and decorative dots/wires. +- Background `{colors.brand-navy}`, text `{colors.on-dark}`, padding `{spacing.hero}`. +- Layout: centered headline `{typography.hero-display}`, subtitle, button row (`button-primary` purple + `button-secondary-on-dark`), `workspace-mockup-card` below. +- Atmospheric decoration: scattered colorful sticky-note dots and mesh wire illustrations around the hero content (NOT a literal pattern fill — handled per-page via SVG/illustration). -**Trust Bar / Logo Grid** -- Company logos (trusted teams section) in their brand colors -- Horizontal scroll or grid layout with team counts -- Metric display: large number + description pattern +**`footer-region`** — Multi-column light footer. +- Background `{colors.canvas}`, padding `{spacing.section} {spacing.xxl}`, top border `1px solid {colors.hairline}`. +- 6-column link grid (Product / Download / Resources / Notion for / Company / Legal). -**Metric Cards** -- Large number display (e.g., "$4,200 ROI") -- NotionInter 40px+ weight 700 for the metric -- Description below in warm gray body text -- Whisper-bordered card container +**`footer-link`** — Individual footer link. +- Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. -## 5. Layout Principles +## Do's and Don'ts -### Spacing System -- Base unit: 8px -- Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px -- Non-rigid organic scale with fractional values (5.6px, 6.4px) for micro-adjustments +### Do +- Use `{colors.primary}` (purple) as the dominant CTA across all surfaces — it's the brand's recognizable signal +- Pair deep navy hero bands ({colors.brand-navy}) with the purple button + decorative sticky-note dots +- Use pastel feature card tints (peach, rose, mint, lavender, sky, yellow) generously +- Use `{colors.card-tint-yellow-bold}` for high-emphasis "Ask the assistant"-style banner cards +- Apply `{rounded.md}` (8px) to buttons consistently — Notion uses rectangles, not pills +- Apply `{rounded.lg}` (12px) to all card families +- Maintain Notion-Sans across every UI surface +- Use the workspace mockup card on hero bands to show actual product UI -### Grid & Container -- Max content width: approximately 1200px -- Hero: centered single-column with generous top padding (80-120px) -- Feature sections: 2-3 column grids for cards -- Full-width warm white (`#f6f5f4`) section backgrounds for alternation -- Code/dashboard screenshots as contained with whisper border +### Don't +- Don't use the purple for body text or large background surfaces +- Don't use pill-shaped buttons; Notion's geometry is rectangular-sober +- Don't mix link-blue ({colors.link-blue}) with primary-purple ({colors.primary}) — they have distinct roles +- Don't apply heavy shadows on flat documentation cards +- Don't replace Notion-Sans with a generic Inter -### Whitespace Philosophy -- **Generous vertical rhythm**: 64-120px between major sections. Notion lets content breathe with vast vertical padding. -- **Warm alternation**: White sections alternate with warm white (`#f6f5f4`) sections, creating gentle visual rhythm without harsh color breaks. -- **Content-first density**: Body text blocks are compact (line-height 1.50) but surrounded by ample margin, creating islands of readable content in a sea of white space. - -### Border Radius Scale -- Micro (4px): Buttons, inputs, functional interactive elements -- Subtle (5px): Links, list items, menu items -- Standard (8px): Small cards, containers, inline elements -- Comfortable (12px): Standard cards, feature containers, image tops -- Large (16px): Hero cards, featured content, promotional blocks -- Full Pill (9999px): Badges, pills, status indicators -- Circle (100%): Tab indicators, avatars - -## 6. Depth & Elevation - -| Level | Treatment | Use | -|-------|-----------|-----| -| Flat (Level 0) | No shadow, no border | Page background, text blocks | -| Whisper (Level 1) | `1px solid rgba(0,0,0,0.1)` | Standard borders, card outlines, dividers | -| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks | -| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements | -| Focus (Accessibility) | `2px solid var(--focus-color)` outline | Keyboard focus on all interactive elements | - -**Shadow Philosophy**: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it. - -### Decorative Depth -- Hero section: decorative character illustrations (playful, hand-drawn style) -- Section alternation: white to warm white (`#f6f5f4`) background shifts -- No hard section borders -- separation comes from background color changes and spacing - -## 7. Responsive Behavior +## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | -|------|-------|-------------| -| Mobile Small | <400px | Tight single column, minimal padding | -| Mobile | 400-600px | Standard mobile, stacked layout | -| Tablet Small | 600-768px | 2-column grids begin | -| Tablet | 768-1080px | Full card grids, expanded padding | -| Desktop Small | 1080-1200px | Standard desktop layout | -| Desktop | 1200-1440px | Full layout, maximum content width | -| Large Desktop | >1440px | Centered, generous margins | +|---|---|---| +| Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. | +| Mobile (large) | 480 – 767px | Feature cards 2-up. Hero 48px. | +| Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. | +| Desktop | 1024 – 1279px | 4-tier pricing card row. Hero 72px. | +| Wide Desktop | ≥ 1280px | Full 80px hero presentation. | ### Touch Targets -- Buttons use comfortable padding (8px-16px vertical) -- Navigation links at 15px with adequate spacing -- Pill badges have 8px horizontal padding for tap targets -- Mobile menu toggle uses standard hamburger button +- Buttons render at 40–44px effective height +- Form inputs render at 44px height +- Pill tabs ~32px → 44px on mobile ### Collapsing Strategy -- Hero: 64px display -> scales to 40px -> 26px on mobile, maintains proportional letter-spacing -- Navigation: horizontal links + blue CTA -> hamburger menu -- Feature cards: 3-column -> 2-column -> single column stacked -- Product screenshots: maintain aspect ratio with responsive images -- Trust bar logos: grid -> horizontal scroll on mobile -- Footer: multi-column -> stacked single column -- Section spacing: 80px+ -> 48px on mobile +- **Promo banner** stays full-width; truncates at < 480px +- **Top nav** below 1024px collapses to hamburger +- **Hero band**: workspace mockup card moves below text/buttons on mobile +- **Pricing tiers**: 4-column → 2-column tablet → 1-column mobile +- **Feature cards**: 3-up desktop → 2-up tablet → 1-up mobile +- **Hero typography**: 80px → 56px → 48px → 36px +- **Footer**: 6-column desktop → 3-column tablet → accordion mobile ### Image Behavior -- Workspace screenshots maintain whisper border at all sizes -- Hero illustrations scale proportionally -- Product screenshots use responsive images with consistent border radius -- Full-width warm white sections maintain edge-to-edge treatment +- Workspace mockup card maintains aspect ratio +- Pastel illustrations inside feature cards scale proportionally +- Customer logo wall: wordmarks at consistent 60–80px height -## 8. Accessibility & States +## Iteration Guide -### Focus System -- All interactive elements receive visible focus indicators -- Focus outline: `2px solid` with focus color + shadow level 200 -- Tab navigation supported throughout all interactive components -- High contrast text: near-black on white exceeds WCAG AAA (>14:1 ratio) +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 +6. Keep `{colors.primary}` (purple) as the primary CTA — distinct from `{colors.link-blue}` for inline links +7. Use `{rounded.md}` for buttons (rectangles), `{rounded.lg}` for cards, `{rounded.full}` for pill tabs/badges only -### Interactive States -- **Default**: Standard appearance with whisper borders -- **Hover**: Color shift on text, scale(1.05) on buttons, underline on links -- **Active/Pressed**: scale(0.9) transform, darker background variant -- **Focus**: Blue outline ring with shadow reinforcement -- **Disabled**: Warm gray (`#a39e98`) text, reduced opacity +## Known Gaps -### Color Contrast -- Primary text (rgba(0,0,0,0.95)) on white: ~18:1 ratio -- Secondary text (#615d59) on white: ~5.5:1 ratio (WCAG AA) -- Blue CTA (#0075de) on white: ~4.6:1 ratio (WCAG AA for large text) -- Badge text (#097fe8) on badge bg (#f2f9ff): ~4.5:1 ratio (WCAG AA for large text) - -## 9. Agent Prompt Guide - -### Quick Color Reference -- Primary CTA: Notion Blue (`#0075de`) -- Background: Pure White (`#ffffff`) -- Alt Background: Warm White (`#f6f5f4`) -- Heading text: Near-Black (`rgba(0,0,0,0.95)`) -- Body text: Near-Black (`rgba(0,0,0,0.95)`) -- Secondary text: Warm Gray 500 (`#615d59`) -- Muted text: Warm Gray 300 (`#a39e98`) -- Border: `1px solid rgba(0,0,0,0.1)` -- Link: Notion Blue (`#0075de`) -- Focus ring: Focus Blue (`#097fe8`) - -### Example Component Prompts -- "Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover)." -- "Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59." -- "Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px." -- "Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius)." -- "Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px." - -### Iteration Guide -1. Always use warm neutrals -- Notion's grays have yellow-brown undertones (#f6f5f4, #31302e, #615d59, #a39e98), never blue-gray -2. Letter-spacing scales with font size: -2.125px at 64px, -1.875px at 54px, -0.625px at 26px, normal at 16px -3. Four weights: 400 (read), 500 (interact), 600 (emphasize), 700 (announce) -4. Borders are whispers: 1px solid rgba(0,0,0,0.1) -- never heavier -5. Shadows use 4-5 layers with individual opacity never exceeding 0.05 -6. The warm white (#f6f5f4) section background is essential for visual rhythm -7. Pill badges (9999px) for status/tags, 4px radius for buttons and inputs -8. Notion Blue (#0075de) is the only saturated color in core UI -- use it sparingly for CTAs and links +- Specific dark-mode token values not surfaced beyond hero bands +- Animation/transition timings not extracted; recommend 150–200ms ease +- Form validation success state not explicitly captured +- Pastel-tint mapping (which feature uses which tint) is observation-based — the actual brand library may have more entries