Mintlify

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:**

• 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

Colors

> Source pages: mintlify.com/ (homepage), /startups (program page), /pricing (comparison), /docs/components/tabs (live documentation). Token coverage was identical across all four pages.

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 `<Tabs>` 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.

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.

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.

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.

Semantic

• Error tones derive from `{colors.brand-error}` for input borders, required-field labels, and validation messaging.

Typography

Font Family

**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

| 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 `<Tabs>` references in body |

Principles

• **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

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

**`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.

**`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}`.

**`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}`.

**`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

**`card-base`** — Standard documentation/feature card.

• Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

**`card-feature`** — Feature panel on light gray surface.

• Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.

**`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

**`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. `<Tabs>` 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 `<Tabs>` 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

**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".

**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.

Signature Components

**`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.

**`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.

**`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).

**`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.

**`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.

**`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}`.

**`footer-link`** — Individual link entry in the footer.

• Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.

Do's and Don'ts

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

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

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| 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

• 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

• **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

• 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

Iteration Guide

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.

Known Gaps

• 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

개요

Mintlify는 세련된 마케팅 프리젠테이션과 개발자급 문서 밀도의 교차점에 자리잡고 있습니다. 홈 및 스타트업 페이지는 영화 같은 분위기의 영웅으로 열립니다. 홈페이지에는 구름 일러스트레이션이 포함된 부드러운 하늘 그라데이션 배경, 스타트업 페이지에는 로켓 발사가 포함된 어두운 청록색에서 민트색 그라데이션이 있으며 개발자 도구라기보다는 SaaS 랜딩 미학에 더 가깝습니다. 그런 다음 더 깊은 표면(가격 비교, 실시간 문서 페이지)은 Inter 본문 유형이 긴 형식의 산문, 구문 강조 코드 블록 및 3열 문서 그리드 전체에 걸쳐 14~16px 사본을 전달하는 조밀하고 정보가 많은 레이아웃으로 축소됩니다.

브랜드의 시그니처 민트 그린({colors.brand-green})은 영웅 "시작하기" 알약 버튼, 기능 목록 내부의 녹색 확인 표시 아이콘, "추천" 가격 책정 계층 테두리 및 문서 UI 내부의 활성 상태 표시기에 드물지만 결정적으로 나타납니다. 검은 알약 기본 버튼이 마케팅 흐름을 지배합니다. 어두운 영웅 밴드에는 흰색 바탕에 어두운 반전이 나타납니다. Inter(본문, 제목)와 Geist Mono(코드 블록, 인라인 참조, 유형 서명)의 시그니처 쌍은 세 번째 서체를 요구하지 않고도 개발자 도구 DNA를 강화합니다.

**주요 특성:**

• 분위기 있는 그라데이션 히어로 밴드(홈페이지에서는 하늘색에서 크림색까지, 스타트업에서는 청록색에서 민트색까지)가 영화 같은 마케팅 프레젠테이션을 제공합니다
• 악센트 CTA, 활성 상태 및 기능 확인용으로 예약된 서명 Mintlify 민트 그린({colors.brand-green})
• 마케팅 CTA를 위한 블랙필 기본 버튼({colors.primary} + ``)
• 모든 UI 산문을 위한 Inter; 코드 블록, 인라인 코드 및 유형/속성 서명을 위한 Geist Mono
• 장문의 개발자 읽기를 위한 조밀한 14픽셀 본문 유형을 갖춘 3열 문서 레이아웃(사이드바/문문/목차)
• 엄격하게 제어되는 반경 규모: 마케팅 용도 ``(12px), 알약 버튼 사용 `` — 중간 모서리 부드럽게 처리 없음
• 활기찬 추천 카드(``)는 감정적 영향을 위해 의도적으로 색상 리듬을 깨뜨립니다

색상

> 소스 페이지: mintlify.com/(홈페이지), /startups(프로그램 페이지), /pricing(비교), /docs/comComponents/tabs(라이브 문서). 토큰 적용 범위는 4개 페이지 모두에서 동일했습니다.

브랜드 및 액센트

• **Mintlify Mint**({colors.brand-green}): 시그니처 악센트 — 영웅 "시작하기" 알약 버튼에 사용됨, 기능 목록의 녹색 확인 표시, 주요 가격 책정 계층 테두리 악센트, 사이드바 활성 표시 점.
• **딥 민트** ({colors.brand-green-deep}): 민트 악센트의 프레스/액티브 변형입니다.
• **소프트 민트**({colors.brand-green-soft}): 성공 상태 및 확인 표면을 위한 미묘한 배경 색조.
• **브랜드 태그**({colors.brand-tag}): 문서 태그 및 참조 색상(`` JSX 스타일 주석 및 코드 태그 칩에 사용됨)
• **브랜드 주석**({colors.brand-annotate}): 인라인 코드 주석 녹색(두 개의 슬래시 코드 주석 시스템에 사용됨).
• **브랜드 경고**({colors.brand-warn}): 코드 경고 강조 표시(더 이상 사용되지 않음, 주의).
• **브랜드 오류**({colors.brand-error}): 필수 필드 라벨 및 오류 강조표시에 빨간색이 사용됩니다.
• **평가 오렌지**({colors.testimonial-orange}): "커서" 추천 카드와 따뜻한 설명선 표면에 사용되는 따뜻한 산호색 오렌지색입니다.

표면

• **캔버스 화이트**({colors.canvas}): 기본 페이지 및 카드 배경.
• **캔버스 다크**({colors.canvas-dark}): 프로모션 배너, 어두운 반전 표면, 코드 편집기 래퍼.
• **표면** ({colors.surface}): 미묘한 섹션 배경, 검색 알약 나머지, 코드 인라인 배경, 사이드바 활성 상태.
• **Surface Soft** ({colors.surface-soft}): 더 조용한 섹션 배경과 FAQ 아코디언.
• **표면 코드**({colors.surface-code}): 어두운 코드 블록 래퍼 배경.
• **가는 선** ({colors.hairline}): 1px 테두리 및 기본 구분선.
• **가는 선 소프트**({colors.hairline-soft}): 더 조용한 표 행 구분선 및 보조 섹션 나누기.

히어로 분위기

• **Hero Sky From/To** ({colors.hero-sky-from}, {colors.hero-sky-to}): 홈페이지 영웅의 분위기 있는 하늘색에서 부드러운 크림색 그라데이션까지.
• **Hero Dark From / To** ({colors.hero-dark-from}, {colors.hero-dark-to}): 스타트업 영웅의 어두운 청록색에서 민트색 그라데이션.

텍스트

• **잉크**({colors.ink}): 기본 헤드라인 및 CTA 텍스트.
• **차콜**({colors.charcoal}): 본문 텍스트, 코드 인라인 전경.
• **슬레이트**({colors.slate}): 보조 텍스트 및 메타데이터.
• **스틸**({colors.steel}): 3차 텍스트, 표 헤더, 사이드바 비활성 항목, 바닥글 링크.
• **스톤** ({colors.stone}): 캡션, 슬래시 2개 커서 색상, 음소거 라벨.
• **음소거**({colors.muted}): 라벨이 덜 강조되고 텍스트가 비활성화되었습니다.
• **어두운 곳**({colors.on-dark}): 어두운 표면(히어로 밴드, 코드 블록, 프로모션 배너)에 흰색 텍스트가 있습니다.
• **어두운 음소거 시**({colors.on-dark-muted}): 코드 블록 헤더 및 어두운 메타데이터에 대한 불투명도가 감소된 흰색입니다.

의미

• 입력 테두리, 필수 필드 레이블 및 유효성 검사 메시지에 대한 오류 신호음은 ``에서 파생됩니다.

타이포그래피

글꼴군

**Inter**(기본): UI 가독성을 위해 최적화된 가변 서체입니다. 본문, 제목, 탐색, 버튼 레이블, 캡션 등 모든 UI 표면에서 사용됩니다. 대체: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif.

**Geist Mono**(코드): 코드 블록, 인라인 코드 참조, 유형 서명(예: `string`, `number`, `boolean`) 및 API 문서의 속성 이름 내부에 사용되는 고정 폭 서체입니다. 대체: 'SF Mono', Menlo, Consolas, 'Geist Mono Fallback', monospace.

브랜드는 두 얼굴 모두에 이탤릭체 변형을 사용하지 않습니다. 무게(500/600), 색상 변화 또는 배경 강조(코드 참조에서)를 강조합니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 72px | 600 | 1.05 | -2px | 마케팅 히어로 디스플레이("지능형 지식 플랫폼") |

| _`` | 56px | 600 | 1.10 | -1.5px | 주요 섹션 시작 부분("지능 시대에 맞춰 제작됨") |

| _`` | 48px | 600 | 1.10 | -1픽셀 | 페이지 수준 헤드라인("원하는 조건에 따른 가격 책정") |

| _`` | 36px | 600 | 1.20 | -0.5px | 섹션 헤드라인("Mintlify 시작 프로그램에 적용") |

| _`` | 28px | 600 | 1.25 | 0 | 하위 섹션 헤더, "탭" 문서 페이지 제목 |

| _`` | 22px | 600 | 1.30 | 0 | 카드 제목, 더 큰 기능 헤더 |

| _`` | 18px | 600 | 1.40 | 0 | 더 작은 기능 헤더, FAQ 질문 제목 |

| _`` | 18px | 400 | 1.50 | 0 | 영웅 자막, 본문 |

| _`` | 16px | 400 | 1.50 | 0 | 기본 본문 텍스트 |

| _`` | 16px | 500 | 1.50 | 0 | 본문 강조 |

| _`` | 14px | 400 | 1.50 | 0 | 보조 본문, 표 셀, 탐색 |

| _`` | 14px | 500 | 1.50 | 0 | 활성 사이드바 탐색, 버튼 라벨, 탭 라벨 |

| _`` | 13px | 400 | 1.40 | 0 | 도우미 텍스트, 작은 글씨, 코드 블록 헤더 |

| _`` | 13px | 600 | 1.40 | 0 | 배지 라벨 |

| _`` | 12px | 500 | 1.40 | 0 | 바닥글 마이크로카피, 라벨 칩 |

| _`` | 11px | 600 | 1.40 | 0.5픽셀 | 사이드바 섹션 헤더, "필수" 라벨 |

| _`` | 14px | 500 | 1.30 | 0 | 알약 버튼 라벨 |

| _`` | 14px | 400 | 1.50 | 0 | 코드 블록 내용 |

| _`` | 13px | 400 | 1.40 | 0 | 더 작은 코드, 유형 서명 |

| _`` | 13px | 500 | 1.30 | 0 | 인라인 `` 본문 참조 |

원칙

• **단단한 영웅 선도**(1.05)는 72px 영웅에 잡지급 디스플레이 헤드라인을 생성합니다
• **음수 문자 간격**은 크기와 반대로 진행됩니다. 디스플레이 크기는 -2px에서 -1.5px를 사용합니다. 작은 제목은 0
로 완화됩니다.
• **문서급 본문**(14~16px에서 1.50 줄 높이)은 조밀한 문서 표면에서 편안하게 긴 형식의 읽기를 보장합니다
• **Inter / Geist Mono 페어링** — 다른 모든 경우에는 Inter, 코드 참조를 위해서는 외과적으로 Geist Mono; 둘 사이의 대조는 브랜드의 개발자 존중 신호입니다
• **글자 간격이 0.5px 이상인 대문자 마이크로 라벨**에는 사이드바 섹션 헤더와 "필수" 주석 태그가 포함됩니다.

레이아웃

간격 시스템

• **기본 단위**: 4px(8px 기본 증분)
• **토큰**: ``(4px) · ``(8px) · ``(12px) · ``(16px) · ``(20px) · ``(24px) · ``(32px) · ``(40px) · ``(48px) · ``(64px) · ``(96px) · `` (120px)
• **섹션 리듬**: 마케팅 페이지는 주요 밴드 간에 ``(96px)을 사용합니다. 가격 비교가 ``(64px)로 강화되었습니다. 문서 표면에서는 하위 섹션
사이에 ``(32px)을 사용합니다.
• **카드 내부 패딩**: 컴팩트 카드의 경우 표준 ``(24px); 가격 카드 및 기능 패널의 경우 _``(32px) 영웅에 대한 추천 카드는 ``(64px)로 푸시됩니다. 카드 유무

그리드 및 컨테이너

• 마케팅 페이지는 32픽셀 여백과 함께 1280픽셀의 최대 너비를 사용합니다
• 히어로 및 기능 밴드는 종종 2열 분할을 사용합니다(왼쪽 텍스트, 오른쪽 그림/모형)
• 가격 페이지는 데스크탑에서 3계층 카드(무료/리프트 오프/맞춤형)를 연속적으로 렌더링한 다음 아래의 포괄적인 기능 비교 표를 제공합니다
• 문서 페이지는 엄격한 3열 그리드를 사용합니다: 왼쪽 사이드바 탐색(~240px), 중앙 문장(최대 너비~720px), 오른쪽 목차(~200px)
• 로고 벽은 높이가 각각 80~100픽셀인 6업 고객 로고 행을 사용합니다

공백 철학

마케팅 표면은 콘텐츠에 넉넉한 호흡 공간을 제공합니다. — 스크롤 없이 볼 수 있는 부분의 ``(120px)은 분위기 있는 그라데이션 배경을 명확하게 읽을 수 있는 공간을 만듭니다. 문서가 대폭 강화되었습니다. 섹션 간격이 ``(32px)으로 줄어들고, 테이블 행이 ``(16px)로 압축되고, 사이드바 탐색이 ``(8px) 수직 리듬으로 압축됩니다.

고도 및 깊이

시스템은 전략적인 대기 깊이와 함께 주로 평평하게 실행됩니다.

| 레벨 | 치료 | |

사용

|---|---|---|

| 0(플랫) | 그림자가 없습니다. _`` 테두리 | 기본 카드, 테이블 행, 양식 입력 |

| 1(미묘함) | _`rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | 마우스 오버 타일, 미묘한 하이라이트 |

| 2 (카드) | _`rgba(0, 0, 0, 0.08) 0px 4px 12px 0px` | 표준 기능 카드 |

| 3 (모형) | _`rgba(0, 0, 0, 0.12) 0px 24px 48px -8px` | Hero 제품 모형 프레임 — 홈페이지 Hero 문서 미리보기의 깊은 확산 드롭 |

| 4(브랜드 틴트) | _`rgba(0, 212, 164, 0.08) 0px 8px 24px` | 주요 가격 등급 글로우 |

장식적 깊이

• 홈페이지 히어로는 깊이를 위해 대기 사진 배경(하늘 그라데이션의 구름 그림)을 사용합니다. 그림자가 필요하지 않습니다. 이미지가 작동합니다
• 스타트업 영웅은 어두운 청록색 그라데이션을 가로지르는 로켓 발사 일러스트레이션으로 유사한 처리를 사용합니다
• 코드 블록은 어두운 표면의 구문 강조 색상 계층을 통해 자체적인 내부 깊이를 전달합니다. 그림자가 사용되지 않았습니다

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 4픽셀 | 인라인 코드 칩, 마이크로 태그 |

| _`` | 6픽셀 | 사이드바 탐색 항목, 유형 배지 |

| _`` | 8픽셀 | 입력, 검색 알약, 코드 블록, 보조 카드 |

| _`` | 12px | 표준 카드, 가격 책정 계층, 영웅 모형, FAQ 항목 |

| _`` | 16px | 더 큰 기능 패널 |

| _`` | 24px | 주요 제품 쇼케이스 타일 |

| _`` | 9999px | 모든 버튼, 알약 탭, 배지 |

반경 규모는 엄격하게 규율되어 있습니다. 브랜드는 동일한 구성 요소 제품군에 대해 ``(8px)과 ``(12px) 사이의 코너 소프트닝을 사용하지 않습니다. 알약 버튼(``)은 보편적으로 사용됩니다. 직사각형 카드는 ``(12px)을 일관되게 사용합니다.

사진 기하학

• 영웅 일러스트레이션(구름, 로켓)은 내부 프레임 없이 풀 블리드 그라데이션 배경에 위치합니다.
• 고객 로고 벽은 반올림 없이 1:1 비율의 셀을 사용합니다(로고는 워드마크로 인라인으로 표시됨)
• 평가 사진은 ``(8px) 부드럽게 처리된 1:1 비율을 사용합니다
• 코드 편집기 모형 히어로 이미지는 깊은 확산 그림자가 있는 헤어라인 테두리 카드의 ``(12px) 모서리를 사용합니다

구성요소

> 마우스오버 금지 정책에 따라 마우스오버 상태는 문서화되지 않습니다. 기본 및 누름/활성 상태만 해당됩니다.

버튼

**`button-primary`** — 검은 알약 기본 CTA, 모든 표면에서 지배적인 작업입니다.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 20px`, 반올림 ``.
• 누른 상태 `button-primary-pressed` 리프트를 ``.
• 비활성화 상태 `button-primary-disabled`는 `` 배경과 `` 텍스트를 사용합니다.

**`button-accent-green`** — 브랜드 강조 CTA를 위한 민트 그린 알약(히어로 "시작하기", 주요 가격 CTA).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 20px`, 반올림 ``.

_**`button-on-dark`** — 다크 히어로 밴드에 사용하기 위한 흰색 알약(스타트업 페이지 "시작하기").

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 20px`, 반올림 ``.

**`button-secondary`** — 보조 작업에 대해 설명된 알약.

• 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 20px`, 둥근 ``.

**`button-ghost`** — 더 조용해진 직사각형 고스트 버튼(사이드바 작업, 3차 탐색).

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `8px 12px`, 반올림 ``.

**`button-link`** — 미묘한 버튼 스타일의 인라인 텍스트 링크.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `0`. 활성화 시 밑줄이 나타납니다.

**`button-icon-circular`** — 32×32px 원형 유틸리티 버튼(닫기, 복사, 화살표).

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 반올림 ``.

카드 및 용기

**`card-base`** — 표준 문서/기능 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature`** — 밝은 회색 표면의 기능 패널.

• 배경 ``, 둥근 ``, 패딩 ``.

**`card-help`** — "도움이 필요하신가요?" 가격 비교 아래의 CTA 카드("빠른 시작 가이드", "기술 문서 작성 가이드", "창립자", "판매").

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-startup-perk`** — 스타트업 프로그램 혜택 그리드 항목("할인 및 크레딧", "우선순위 지원", "스타트업 팩", "창립자 커뮤니티").

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `. 상단에 아이콘이 있으며 제목은 ``, 설명은 `` ``.
입니다.

**`pricing-card`** — 표준 가격 등급 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.
• 제목 ``, 가격 ``, 기능 목록 `` 녹색 확인 표시 아이콘이 있습니다.

**`pricing-card-featured`** — 강조된 가격 책정 계층(Lift Off/추천 계획).

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `2px solid `, 부드러운 브랜드 색조 그림자 `rgba(0, 212, 164, 0.08) 0px 8px 24px`.

**`testimonial-card-feature`** — 사진 + 인용문이 포함된 밝은 주황색 대형 추천 카드("커서 — 우리가 지속적으로 목격한 최고의 성과를 내는 스타트업이 Mintlify를 사용하여 문서를 작성하는 것을 볼 수 있는 모든 YC 배치.").

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``. 오른쪽 사진, 왼쪽 ``의 큰 인용문, 아래 ``.
의 저작자 표시

**`testimonial-card-quote`** — 시작 페이지에 있는 더 작은 흰색 추천 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`founder-quote-card`** — 주황색 표면에 커서 창립자 추천 카드 변형이 있습니다.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``. 특정 창립자 초상화 + 인용문 처리를 수행합니다.

**`startup-program-card`** — 혜택 그리드가 포함된 더 큰 애플리케이션/프로그램 카드 + CTA 적용.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

입력 및 양식

**`text-input`** — 표준 텍스트 필드.

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 둥근 ``, 패딩 ` `, 높이 40px.

**`text-input-focused`** — 활성화된 상태.

• 경계가 `2px solid `로 전환 — 포커스는 브랜드 민트를 활성화 신호로 사용합니다.

**`search-pill`** — 문서 상단 표시줄 검색.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 높이 36px, 테두리 `1px solid `.

탭

**`segmented-tab`** + **`segmented-tab-active`** — 밑줄 스타일 탭 탐색("첫 번째 탭/두 번째 탭/세 번째 탭"에 대한 문서 탭 구성 요소 내부에서 사용됨)

• 비활성: 텍스트 ``, 투명한 배경, 패딩 ` `. 활성: 텍스트 ``, ``.
의 2px 하단 테두리

**`pill-tab`** + **`pill-tab-active`** — 알약 스타일 탭 탐색(가격 페이지 상단: "가격/로드맵").

• 비활성: 배경 ``, 텍스트 ``, 테두리 `1px solid `, 패딩 `8px 16px`, 반올림 ``.
• 활성: 배경 ``, 텍스트 ``, 테두리 없음.

**`toggle-monthly-yearly`** — 2가지 상태 알약 토글(가격 페이지의 월별/연간).

• 배경 ``, 둥근 ``, 패딩 `4px`. 활성 상태에서는 흰색 알약 엄지손가락이 선택한 위치로 이동합니다.

배지 및 상태

**`badge-discount`** — 연간 토글에 부착된 작은 녹색 "20% 할인" 배지.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`badge-required`** — 문서 속성 행의 빨간색 "필수" 레이블입니다.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 6px`.

**`badge-type`** — 문서에 서명 칩을 입력하세요(예: `string`, `number`, `boolean`).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 6px`.

**`badge-tag`** — 문서 태그 칩(예: 본문 텍스트에 강조 표시된 `` 참조).

• 배경 `rgba(55, 114, 207, 0.15)`, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`promo-banner`** — 상단 탐색 메뉴 위의 끈적끈적한 검정색 프로모션 스트립(있는 경우).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ` `.

코드

**`code-block`** — 구문 강조 코드 컨테이너.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 ``.

**`code-block-header`** — 언어 라벨 + 복사 버튼이 있는 코드 위의 헤더 표시줄.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ` `, 하단 테두리 `1px solid `.

**`code-inline`** — 본문 산문의 인라인 `` 참조

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 6px`, 테두리 `1px solid `.

_**`copy-code-button`** — 코드 블록 헤더의 "코드 복사" 버튼.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 둥근 ``, 패딩 ` `, 테두리 `1px solid `.

문서 구성요소

_**`property-row`** — API 속성 문서 행(예: 탭 페이지의 `defaultIndex`).

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`, 하단 테두리 `1px solid `.
• 레이아웃: ``의 속성 이름 + 유형 배지 + 선택적 필수 배지 + `` ``.
의 아래 설명

**`feature-comparison-table`** — 자세한 가격 페이지 기능 비교표.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 테두리 `1px solid `.

**`feature-comparison-row`** — 비교 테이블 내의 개별 행.

• 배경 ``, 텍스트 ``, 패딩 ` `, 하단 테두리 `1px solid `. `` ``.
의 섹션 구분선

**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — 문서 왼쪽 레일 링크 항목.

• 비활성: 배경 투명, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 ` `.
• 활성: 배경 ``, 텍스트 ``, 타이포그래피 ``.

**`sidebar-section-header`** — 사이드바 내부의 대문자 섹션 헤더(예: "COMPONENTS", "PRIMITIVES").

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` `.

**`doc-toc-item`** + **`doc-toc-item-active`** — 오른쪽 목차 링크.

• 비활성: 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`.
• 활성: 텍스트 ``, 활자체 ``, ``의 선택적인 왼쪽 테두리 악센트.

탐색

**상단 탐색(마케팅)** — 로고, 링크 목록 및 오른쪽 CTA가 포함된 고정 흰색 막대.

• 배경 ``, 높이 ~64px, 하단 테두리 `1px solid `.
• 왼쪽: Mintlify 워드마크 + 수평 링크 목록(솔루션, 가격, 고객, 문서, 변경 로그).
• 오른쪽: 보조 "영업 담당자에게 문의" + 블랙필 "시작하기".

**상위 탐색(문서)** — 중앙 검색 알약과 오른쪽 계정/업그레이드 CTA가 포함된 압축 탐색.

• 배경 ``, 높이 ~56px. 중앙의 검색 알약, "문서/가이드/API 참조/변경 로그" 링크 + "Talk to us" + 녹색 "시작하기" 오른쪽.

서명 구성 요소

_**`hero-band-sky`** — 분위기 있는 하늘색부터 크림색까지의 그라데이션과 구름 일러스트레이션이 포함된 홈페이지 히어로.

• 배경 그라데이션 `linear-gradient(180deg, 0%, 100%)`, 텍스트 ``(그라데이션의 초기 부분) `` 아래로 이동, 패딩 ``.
• 레이아웃: ``의 중앙 영웅 헤드라인, ``의 중앙 부제, 중앙 버튼 행(`button-accent-green` "시작하기" + `button-secondary` "대화하기"), 버튼 아래 제품 모형.

**`hero-band-dark`** — 어두운 청록색에서 민트색까지의 그라데이션과 로켓 발사 일러스트레이션을 갖춘 스타트업 영웅.

• 배경 그라데이션 `linear-gradient(135deg, 0%, 100%)`, 텍스트 ``, 패딩 ``.
• 레이아웃: `` ``의 왼쪽 영웅 헤드라인, 오른쪽 그림(그라디언트를 가로지르는 로켓 절단), 버튼 행은 `button-on-dark`(흰색 알약) + 고스트 링크를 사용합니다.

**`hero-product-mockup`** — 홈페이지 히어로 내부에 프레임된 코드 편집기 모형.

• 배경 ``, 둥근 ``, 테두리 `1px solid `, 깊은 그림자 `rgba(0, 0, 0, 0.12) 0px 24px 48px -8px`.
• 문서 페이지 미리보기를 내부에 전달합니다(왼쪽 사이드바, 본문, 모의 UI 컨트롤).

**`logo-wall-item`** — 6개 신뢰 행 그리드의 고객 로고 셀("Anthropic/Cognition/Mintlify/Vercel/react/Lovable", "Stripe/Block/PayPal/Compound/Auth").

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ``.
• 일관적인 수직 중앙 정렬을 사용하여 워드마크로 렌더링된 로고.

**`faq-accordion-item`** — 자주 묻는 질문(FAQ) 패널 항목(가격 페이지에 표시).

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.
• ``의 질문, `` ``의 확장된 답변, `` 16px의 갈매기 아이콘.

**`footer-region`** — 다중 열 사이트 바닥글.

• 배경 ``, 상단 테두리 `1px solid `, 패딩 ` `.
• 5개 열 그룹(탐색/리소스/회사/법률 + 브랜드 마크 열).
• `` ``의 섹션 헤더, `` ``.
의 링크 항목

**`footer-link`** — 바닥글의 개별 링크 항목.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`.

해야 할 일과 하지 말아야 할 일

하라

• 악센트 CTA 및 활성 상태 표시기에 대해서만 ``(Mintlify mint)를 예약합니다. 뷰포트당 하나의 악센트 버튼이라도 가중치를 전달합니다
• 밝은 배경에서는 ``(검은색)을 주요 CTA로 사용하세요. 다크 히어로 밴드의 경우 `button-on-dark`(흰색 알약)으로 전환
• 모든 버튼과 알약에 ``을 적용합니다. 알약 모서리를 부드럽게 하지 마십시오
• Inter(UI 구문)를 Geist Mono(코드)와 페어링 — 세 번째 서체를 도입하지 마세요
• 대기적인 그래디언트 히어로 밴드를 아껴서 사용하세요(홈페이지와 스타트업 페이지만). 더 깊은 표면을 평평하고 조밀하게 유지
• _``(12px)을 카드에 일관되게 적용합니다. 검색 알약 및 코드 블록과 같은 컴팩트 UI에서만 __CODEBCK_1424___(8px)을 사용하세요
• 문서 내용을 ``(16px), 줄 높이 1.50으로 유지 — 압축하지 않음

하지 마세요

• 본문 또는 la에는 ``을 사용하지 마세요. rge 표면 — 신호가 손실됩니다
• 민트, 태그 블루, 에러 레드, 추천 오렌지 외에 추가 강조 색상을 도입하지 마세요
• 평평한 문서 카드에 무거운 그림자를 적용하지 마십시오. 히어로 제품 모형에 대한 예약 고도
• 문서 줄 높이를 1.50 미만으로 줄이지 마십시오. 긴 형식의 가독성이 저하됩니다
• 같은 영웅에 분위기 있는 그라데이션을 여러 경쟁적인 색상 액센트와 결합하지 마세요. 하늘/어두운 그라데이션은 브랜드 분위기입니다. 숨 쉬게 해주세요
• 코드에는 Inter를, 산문에는 Geist Mono를 사용하지 마세요. 서체 할당은 브랜드 목소리입니다

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일(소형) | _< 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. Footer 1-column accordion. |

| 모바일(대형) | 480 – 767px | 작은 것과 동일하지만 기능 타일은 2-up을 렌더링합니다. 영웅의 크기는 44px로 조정됩니다. |_

| 태블릿 | 768 – 1023px | 2열 특성 그리드. 알약 탭 탐색이 반환됩니다. 문서 사이드바가 서랍으로 축소됩니다. 영웅의 크기는 56px로 조정됩니다. |

| 데스크탑 | 1024 – 1279px | 전체 3열 문서 그리드(사이드바/본문/TOC). 3계층 가격 카드 행. 72px의 영웅. |

| 와이드 데스크탑 | ≥ 1280px | 더 넓어진 영웅 거터, 더 큰 제품 모형, 고정 240px 사이드바. |

터치 대상

• 알약 버튼은 36~40픽셀의 유효 높이로 렌더링됩니다. 모바일에서는 패딩 재정의를 통해 44픽셀로 증가합니다.
• 원형 아이콘 버튼: 데스크톱 32×32픽셀 → 모바일 44×44픽셀
• 양식 입력은 40px 높이로 렌더링됩니다. 44px mobile
으로 범프
• 사이드바 탐색 항목은 높이가 ~32px로 렌더링됩니다. — 모바일 서랍은 44px로 늘어납니다.

축소 전략

• **프로모션 배너**는 전체 너비로 유지됩니다. < 480px
에서 잘립니다.
• **1024px 미만의 상단 탐색**은 햄버거로 축소됩니다. 수평 링크가 서랍으로 이동
• **히어로 밴드**: 2열 영웅(텍스트 + 모형)이 접혀서 < 1024px; mockup rendered below text on mobile
에 쌓임
• **문서 그리드**: 3열 데스크탑 → < 1024px → single-column at < 768px
의 사이드바 서랍
• **가격 비교**: 3열 계층 → < 768px; comparison table becomes horizontal-scroll
에 1열 스택
• **히어로 타이포그래피**: ``(72px) → 56px 태블릿 → 44px 모바일-대형 → 36px 모바일-소형
• **고객 로고 벽**: 6-up → 태블릿에서 3-up → 모바일에서 2-up
• **바닥글**: 데스크톱 5열 → 태블릿 2열 → 모바일 아코디언

이미지 동작

• 영웅 일러스트(구름, 로켓) 영웅 밴드와 함께 지연 로드; 모든 중단점에서 선명하게 유지(SVG 기반)
• 제품 모형은 중단점 전체에서 가로세로 비율을 유지합니다. 비례적으로 확장됩니다
• 고객 로고는 SVG 워드마크를 사용합니다. 레티나 디스플레이에서 선명하게 유지

반복 가이드

1. 한 번에 하나의 구성 요소에만 집중하세요. 시스템의 내부 일관성이 높습니다.

2. 구성 요소 이름 및 토큰을 직접 참조하십시오(``, `-pressed`, ``). 다른 말로 표현하지 마세요.

3. 깨진 참조 및 대비 문제를 파악하려면 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행하세요.

4. 새 변형을 별도의 `components:` 항목(`-pressed`, `-disabled`, `-focused`, `-active`)으로 추가합니다.

5. 기본값은 본문의 경우 ``, 강조의 경우 ``입니다. 헤드라인이 하향 조정되었습니다 `hero-display → display-lg → heading-1 → heading-2 → heading-3 → heading-4 → heading-5`.

6. ``을 악센트 순간에만 국한하세요. 일반적인 표면에 나타나는 경우 해당 역할을 얻었는지 물어보세요.

7. 알약 모양의 버튼(``)은 항상; 사각형 버튼은 이 언어에서 '타사 위젯'을 나타냅니다.

8. 문서 산문은 `` 16픽셀, 줄 높이 1.50에 속합니다. 밀도가 더 높으면 읽기 환경이 손상됩니다.

알려진 격차

• 캔버스, 표면, 잉크 및 가는선에 대한 특정 다크 모드 토큰 값은 이 페이지에 표시되지 않습니다. 해당 브랜드는 아직 게시된 다크 모드 팔레트를 출시하지 않았습니다
• 애니메이션/전환 타이밍은 추출되지 않습니다. 호버/포커스 상태 전환을 위해 150~200ms의 용이성을 권장합니다
• 양식 유효성 검사 성공 상태는 기본값 이상으로 명시적으로 캡처되지 않습니다. 표준 녹색 테두리 + 성공 배지 패턴을 다음과 같이 구현합니다.__HTMLTAG_1060___
• 문서 내부의 코드 구문 강조 팔레트가 형식화되지 않았습니다. 문서 샘플에는 자체 두 개의 슬래시 스타일 주석 시스템 토큰(예: ``, ``, ``)이 있지만 전체 강조 표시 체계는 열거되지 않습니다

概要

_Mintlify は、洗練されたマーケティング プレゼンテーションと開発者レベルのドキュメント密度の交差点に位置しています。ホーム ページとスタートアップ ページは、映画のような雰囲気のヒーローで開きます。ホームページでは柔らかい空のグラデーションの背景に雲のイラストが表示され、スタートアップ ページでは暗い青緑からミントのグラデーションでロケットが打ち上げられています。これは、開発者ツールというよりも、SaaS の着陸の美学のように感じられます。次に、より深い部分 (価格比較、ライブ ドキュメント ページ) は、Inter ボディ タイプが長文の散文、構文で強調表示されたコード ブロック、および 3 列のドキュメント グリッド全体にわたって 14 ～ 16 ピクセルのコピーを保持する、高密度で情報量の多いレイアウトに折りたたまれます。

ブランドの特徴であるミント グリーン ({colors.brand-green}) は、ヒーローの「はじめる」ピル ボタン、機能リスト内の緑色のチェックマーク アイコン、「注目」の価格帯の境界線、ドキュメント UI 内のアクティブ状態インジケーターなどに、控えめながらもはっきりと表示されています。黒丸の主ボタンがマーケティング フローを支配します。ダーク ヒーローのバンドには、白と黒の反転が表示されます。 Inter (本文、見出し) と Geist Mono (コード ブロック、インライン参照、型署名) の署名の組み合わせにより、3 番目の書体を必要とせずに開発者ツールの DNA が強化されます。

_**主な特徴:**

• 雰囲気のあるグラデーションのヒーロー バンド (ホームページではスカイブルーからクリーム色、スタートアップではティールからミント) が映画のようなマーケティング プレゼンテーションを提供
• 署名 Mintlify ミント グリーン ({colors.brand-green}) アクセント CTA、アクティブな状態、機能の確認用に予約
• マーケティング CTA 用のブラックピル プライマリ ボタン ({colors.primary} + ``)
• すべての UI 散文については Inter。コード ブロック、インライン コード、型/プロパティ署名用の Geist Mono
• 3 列のドキュメント レイアウト (サイドバー / 散文 / 目次)、開発者が長文を読むための高密度の 14 ピクセルの本文タイプ
• 厳密に制御された半径スケール: マーケティングでは `` (12 ピクセル)、ピル ボタンは `` を使用 — 中間コーナーのソフト化はなし
• 鮮やかなお客様の声カード (``) は、感情的な影響を与えるために意図的に色のリズムを崩しています

色

> ソース ページ: mintlify.com/ (ホームページ)、/startups (プログラム ページ)、/pricing (比較)、/docs/components/tabs (ライブ ドキュメント)。 トークンの適用範囲は 4 ページすべてで同一でした。

ブランドとアクセント

• **Mintlify Mint** ({colors.brand-green}): 署名アクセント — ヒーローの「はじめる」ピル ボタン、機能リストの緑色のチェックマーク、注目の価格帯の境界線のアクセント、サイドバーのアクティブ インジケーター ドットで使用されます。
• **ディープ ミント** ({colors.brand-green-deep}): ミント アクセントのプレス/アクティブ バージョン。
• **ソフト ミント** ({colors.brand-green-soft}): 成功状態と確認面の微妙な背景の色合い。
• **ブランド タグ** ({colors.brand-tag}): ドキュメント タグと参照色 (__CODEBCK_1068___ JSX スタイルの注釈とコードタグ チップで使用されます)。
• **ブランド注釈** ({colors.brand-annotate}): インライン コード注釈 緑色 (ツースラッシュ コード注釈システムで使用)。
• **ブランド警告** ({colors.brand-warn}): コード警告のハイライト (非推奨、注意)。
• **ブランド エラー** ({colors.brand-error}): 必須フィールドのラベルとエラーのハイライトに赤が使用されます。
• **お客様の声のオレンジ** ({colors.testimonial-orange}): 「カーソル」のお客様の声カードと温かみのあるコールアウトの表面に使用されている温かみのあるコーラル オレンジ。

サーフェス

• **キャンバス ホワイト** ({colors.canvas}): プライマリ ページとカードの背景。
• **キャンバス ダーク** ({colors.canvas-dark}): プロモーション バナー、ダーク反転サーフェス、コード エディター ラッパー。
• **表面** ({colors.surface}): 微妙なセクションの背景、検索ピルの残り、コードインラインの背景、サイドバーのアクティブ状態。
• **Surface Soft** ({colors.surface-soft}): より静かなセクションの背景と FAQ アコーディオン。
• **サーフェス コード** ({colors.surface-code}): ダーク コード ブロック ラッパー背景。
• **ヘアライン** ({colors.hairline}): 1 ピクセルの境界線と主分割線。
• **ヘアライン ソフト** ({colors.hairline-soft}): 表と行の区切り線とセカンダリ セクションの区切りが静かになりました。

ヒーローの雰囲気

• **ヒーロー スカイ フロム / トゥ** ({colors.hero-sky-from}、{colors.hero-sky-to}): ホームページ ヒーロー上の雰囲気のあるスカイブルーからソフト クリームのグラデーション。
• **ヒーロー ダーク From / To** ({colors.hero-dark-from}、__TMPLVAR_26___): スタートアップ ヒーローのダーク ティールからミントのグラデーション。

テキスト

• **インク** ({colors.ink}): 主要な見出しと CTA テキスト。
• **Charcoal** ({colors.charcoal}): 本文、コードインライン前景。
• **スレート** ({colors.slate}): 二次テキストとメタデータ。
• **スチール** ({colors.steel}): 三次テキスト、テーブル ヘッダー、サイドバーの非アクティブな項目、フッター リンク。
• **ストーン** ({colors.stone}): キャプション、2 つのスラッシュ カーソルの色、ミュートされたラベル。
• **ミュート** ({colors.muted}): ラベルの強調が解除され、テキストが無効になりました。
• **ダーク上** ({colors.on-dark}): 暗い表面に白いテキスト (ヒーロー バンド、コード ブロック、プロモーション バナー)。
• **ダークでミュート** ({colors.on-dark-muted}): ダークでコードブロックヘッダーとメタデータの不透明度を下げた白。

セマンティック

• エラー トーンは、入力枠、必須フィールドのラベル、および検証メッセージの `` から派生します。

タイポグラフィ

フォント ファミリー

**Inter** (プライマリ): UI の読みやすさのために最適化された可変書体。本文、見出し、ナビゲーション、ボタンのラベル、キャプションなど、あらゆる UI サーフェスにわたって使用されます。フォールバック: -apple-system、BlinkMacSystemFont、'Segoe UI'、sans-serif。

**Geist Mono** (コード): API ドキュメント内のコード ブロック、インライン コード参照、型署名 (例: `string`、`number`、__CODEBCK_1072___)、およびプロパティ名内で使用される等幅書体。 フォールバック: 「SF Mono」、Menlo、Consolas、「Geist Mono Fallback」、モノスペース。

このブランドでは、どちらの文字の斜体も使用していません。強調は、重さ (500/600)、カラー シフト、または背景のハイライト (コード参照内) から来ています。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 72ピクセル | 600 | 1.05 | -2ピクセル |マーケティング ヒーローの表示 (「インテリジェントなナレッジ プラットフォーム」) |

| `` | 56ピクセル | 600 | 1.10 | -1.5ピクセル |主要セクションのオープナー (「インテリジェンス時代に向けて構築された」) |

| `` | 48ピクセル | 600 | 1.10 | -1ピクセル |ページレベルの見出し (「ご希望の価格設定」) |

| `` | 36ピクセル | 600 | 1.20 | -0.5ピクセル |セクション見出し (「Mintlify スタートアップ プログラムへの適用」) |

| `` | 28ピクセル | 600 | 1.25 | 0 |サブセクション ヘッダー、「タブ」ドキュメント ページ タイトル |

| `` | 22ピクセル | 600 | 1.30 | 0 |カード タイトル、大きな機能ヘッダー |

| `` | 18ピクセル | 600 | 1.40 | 0 |小さな機能ヘッダー、FAQ 質問のタイトル |

| `` | 18ピクセル | 400 | 1.50 | 0 |ヒーローのサブタイトル、本文 |

| `` | 16ピクセル | 400 | 1.50 | 0 |主要な本文テキスト |

| `` | 16ピクセル | 500 | 1.50 | 0 |体の強調 |

| `` | 14ピクセル | 400 | 1.50 | 0 |二次本文、表のセル、ナビゲーション |

| `` | 14ピクセル | 500 | 1.50 | 0 |アクティブなサイドバー ナビゲーション、ボタン ラベル、タブ ラベル |

| `` | 13ピクセル | 400 | 1.40 | 0 |ヘルパー テキスト、細字、コード ブロック ヘッダー |

| `` | 13ピクセル | 600 | 1.40 | 0 |バッジのラベル |

| `` | 12ピクセル | 500 | 1.40 | 0 |フッターのマイクロコピー、ラベル チップ |

| `` | 11ピクセル | 600 | 1.40 | 0.5ピクセル |サイドバー セクションのヘッダー、「必須」ラベル |

| `` | 14ピクセル | 500 | 1.30 | 0 |ピル ボタンのラベル |

| `` | 14ピクセル | 400 | 1.50 | 0 |コード ブロックのコンテンツ |

| `` | 13ピクセル | 400 | 1.40 | 0 |より小さなコード、型署名 |

| `` | 13ピクセル | 500 | 1.30 | 0 |本文内のインライン `` 参照 |

原則

• **タイトなヒーロー リーディング** (1.05) は、72 ピクセルのヒーローに雑誌グレードの表示見出しを作成します
• **負の文字間隔**はサイズに反比例して進みます。表示サイズは -2px から -1.5px を使用します。小さい見出しは 0
に緩和されます
• **ドキュメント グレードの本文** (14 ～ 16 ピクセルで行の高さ 1.50) により、高密度のドキュメント サーフェスで快適に長文を読むことができます
• **Inter / Geist Mono の組み合わせ** — その他すべてに Inter、コード参照には Geist Mono を使用します。この 2 つのコントラストは、ブランドの開発者尊重のシグナル
• **文字間隔 +0.5 ピクセルの大文字のマイクロ ラベル**には、サイドバー セクションのヘッダーと「必須」の注釈タグが含まれます

レイアウト

間隔システム_

• **基本単位**: 4px (主増分 8px)
• **トークン**: `` (4px) · `` (8px) · `` (12px) · `` (16px) · `` (20px) · `` (24 ピクセル) · `` (32 ピクセル) · `` (40 ピクセル) · `` (48 ピクセル) · `` (64 ピクセル) · `` (96 ピクセル) · `` (120px)
• **セクションのリズム**: マーケティング ページでは、メジャー バンド間で `` (96 ピクセル) を使用します。価格比較は__CODEBCK_1107___ (64ピクセル)にまで厳しくなります。ドキュメントの表面では、サブセクション
間で `` (32px) が使用されます。
• **カード内部パディング**: コンパクト カードの標準 `` (24 ピクセル)。 `` (32 ピクセル) 価格カードと機能パネル用。英雄の証言カードが `` (64px) にプッシュされます- カードの存在

グリッドとコンテナ

• マーケティング ページでは、最大幅 1280 ピクセル、余白 32 ピクセルを使用します
• ヒーロー バンドやフィーチャー バンドでは 2 列分割がよく使用されます (テキストが左、イラスト/モックアップが右)
• 価格ページでは、デスクトップに 3 層のカードが 1 列に表示され (無料 / リフトオフ / カスタム)、次に包括的な機能比較表が以下に表示されます
• ドキュメント ページでは厳密な 3 列グリッドを使用します: 左側のサイドバー ナビゲーション (~240 ピクセル)、中央の散文 (~720 ピクセルの最大幅)、右側の目次 (~200 ピクセル)
• ロゴ ウォールでは、高さ 80 ～ 100 ピクセルの顧客ロゴを 6 行まで使用します

ホワイトスペースの哲学

マーケティング サーフェスはコンテンツに十分なスペースを与えます — `` (120 ピクセル) のスクロールせずに見える範囲に、大気のグラデーションの背景がはっきりと読めるスペースが作成されます。 ドキュメントは劇的に強化されます。セクションのギャップは `` (32 ピクセル) に減少し、テーブルの行は `` (16 ピクセル) に詰め込まれ、サイドバーのナビゲーションは垂直方向のリズムが `` (8 ピクセル) に圧縮されます。

標高と深さ

システムは戦略的な大気深度で主に平坦に動作します。

|レベル |治療 | |

を使用します

|---|---|---|

| 0 (フラット) |影はありません。 `` 境界線 |デフォルトのカード、テーブル行、フォーム入力 |

| 1 (微妙) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` |ホバーで高くしたタイル、微妙なハイライト |

| 2 (カード) | `rgba(0, 0, 0, 0.08) 0px 4px 12px 0px` |標準機能カード |

| 3 (モックアップ) | `rgba(0, 0, 0, 0.12) 0px 24px 48px -8px` |ヒーロー製品のモックアップ フレーム — ホームページのヒーロー ドキュメント プレビューのディープ ディフューズ ドロップ |

| 4 (ブランド色) | `rgba(0, 212, 164, 0.08) 0px 8px 24px` |注目の価格帯のグロー |

装飾の深さ_

• ホームページのヒーローは、奥行き感を出すために雰囲気のある写真の背景 (空のグラデーションに雲のイラスト) を使用しています。影は必要ありません。画像が役に立ちます
• スタートアップのヒーローは、濃い青緑のグラデーションを横切るロケット発射のイラストで同様の処理を使用しています
• コード ブロックは、暗い表面上で構文を強調表示する色の階層を介して、独自の内部深度を保持します。影は使用されていません

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 4ピクセル |インライン コード チップ、マイクロ タグ |

| `` | 6ピクセル |サイドバーのナビゲーション項目、タイプバッジ |

| `` | 8ピクセル |入力、検索ピル、コード ブロック、セカンダリ カード |

| `` | 12ピクセル |標準カード、価格帯、ヒーローのモックアップ、FAQ 項目 |

| `` | 16ピクセル |大きな機能パネル |

| `` | 24ピクセル |注目の製品ショーケース タイル |

| `` | 9999ピクセル |すべてのボタン、薬タブ、バッジ |

半径スケールは厳しく管理されています。このブランドは、同じコンポーネント ファミリに対して `` (8px) と `` (12px) の間のコーナー ソフトニングを決して使用しません。ピル ボタン (``) は広く使用されています。長方形のカードは__CODEBCK_1131___ (12px) を一貫して使用します。

写真の幾何学

• ヒーローのイラスト (雲、ロケット) は、内部フレームなしのフルブリード グラデーション背景に配置されます
• 顧客のロゴ ウォールでは、四捨五入せずに 1:1 の比率のセルを使用します (ロゴはワードマークとしてインラインで表示されます)
• 証言写真は__CODEBCK_1132___ (8px) ソフト化
を使用した 1:1 アスペクトを使用しています
• コード エディターのモックアップ ヒーロー画像は、ヘアラインで縁取られたカードの__CODEBCK_1133___ (12 ピクセル) コーナーを使用し、深い拡散ドロップ シャドウが付いています

コンポーネント

> ホバー禁止ポリシーに従って、ホバー状態は文書化されません。 デフォルトおよび押下/アクティブ状態のみ。

ボタン

**`button-primary`** — 黒丸薬のプライマリ CTA、すべてのサーフェイスにわたる主要なアクション。

• 背景__CODEBCK_1135___、テキスト__CODEBCK_1136___、タイポグラフィ__CODEBCK_1137___、パディング__CODEBCK_1138___、丸め__CODEBCK_1139___.
• 押された状態__CODEBCK_1140___は__CODEBCK_1141___に上昇します。
• 無効状態__CODEBCK_1142___は__CODEBCK_1143___背景と__CODEBCK_1144___テキストを使用します。

**`button-accent-green`** — ブランドを重視した CTA 用のミント グリーンの錠剤 (ヒーロー「はじめましょう」、注目の価格設定 CTA)。

• 背景__CODEBCK_1146___、テキスト__CODEBCK_1147___、タイポグラフィ__CODEBCK_1148___、パディング__CODEBCK_1149___、丸め__CODEBCK_1150___.

**`button-on-dark`** — ダーク ヒーロー バンドで使用するための白い錠剤 (スタートアップ ページ「はじめに」)。

• 背景__CODEBCK_1152___、テキスト__CODEBCK_1153___、タイポグラフィ__CODEBCK_1154___、パディング__CODEBCK_1155___、丸め__CODEBCK_1156___.

**`button-secondary`** — 二次アクションの概要を示したピル。

• 背景透明、テキスト__CODEBCK_1158___、境界線__CODEBCK_1159___、タイポグラフィ__CODEBCK_1160___、パディング__CODEBCK_1161___、丸め__CODEBCK_1162___.

**`button-ghost`** — 静かな長方形のゴースト ボタン (サイドバー アクション、第 3 のナビゲーション)。

• 背景透明、テキスト__CODEBCK_1164___、タイポグラフィ__CODEBCK_1165___、パディング__CODEBCK_1166___、丸め__CODEBCK_1167___.

**`button-link`** — 微妙なボタンとしてスタイル設定されたインライン テキスト リンク。

• 背景透明、テキスト__CODEBCK_1169___、タイポグラフィ__CODEBCK_1170___、パディング__CODEBCK_1171___。アクティブ化すると下線が表示されます。

_**`button-icon-circular`** — 32×32 ピクセルの円形ユーティリティ ボタン (閉じる、コピー、矢印)。

• 背景__CODEBCK_1173___、テキスト__CODEBCK_1174___、境界線__CODEBCK_1175___、角丸__CODEBCK_1176___.

カードとコンテナ

**`card-base`** — 標準ドキュメント/機能カード。

• 背景__CODEBCK_1178___、角丸__CODEBCK_1179___、パディング__CODEBCK_1180___、境界線__CODEBCK_1181___.

**`card-feature`** — ライトグレーの表面の機能パネル。

• 背景__CODEBCK_1183___、丸め__CODEBCK_1184___、パディング__CODEBCK_1185___.

**`card-help`** — 「助けが必要ですか?」価格比較の下の CTA カード (「クイックスタート ガイド」、「テクニカル ライティング ガイド」、「創設者」、「セールス」)。

• 背景__CODEBCK_1187___、角丸__CODEBCK_1188___、パディング__CODEBCK_1189___、境界線__CODEBCK_1190___.

**`card-startup-perk`** — スタートアップ プログラム特典グリッド項目 (「割引とクレジット」、「優先サポート」、「スタートアップ パック」、「創設者コミュニティ」)。

• 背景__CODEBCK_1192___、角丸__CODEBCK_1193___、パディング__CODEBCK_1194___、境界線__CODEBCK_1195___。 上部にアイコンがあり、見出し ``、説明 `` ``.

_**`pricing-card`** — 標準価格帯カード。

• 背景__CODEBCK_1200___、角丸__CODEBCK_1201___、パディング__CODEBCK_1202___、境界線__CODEBCK_1203___.
• タイトル__CODEBCK_1204___、価格__CODEBCK_1205___、機能リスト__CODEBCK_1206___、緑色のチェックマークアイコン付き。

_**`pricing-card-featured`** — 強調表示された価格帯 (リフトオフ / 目玉プラン)。

• 背景__CODEBCK_1208___、角丸__CODEBCK_1209___、パディング__CODEBCK_1210___、境界線__CODEBCK_1211___、ブランド色がかったソフトシャドウ__CODEBCK_1212___.

**`testimonial-card-feature`** — 写真と引用が記載された明るいオレンジ色の大きな紹介カード (「カーソル — すべての YC バッチで、常にトップパフォーマンスのスタートアップが Mintlify を使用してドキュメントを構築していることがわかります。」)。

• 背景__CODEBCK_1214___、テキスト__CODEBCK_1215___、丸め__CODEBCK_1216___、パディング__CODEBCK_1217___。右に写真、左に大きな引用文が__CODEBCK_1218___、出典が以下に__CODEBCK_1219___.

_**`testimonial-card-quote`** — スタートアップ ページの小さな白い紹介カード。

• 背景__CODEBCK_1221___、角丸__CODEBCK_1222___、パディング__CODEBCK_1223___、境界線__CODEBCK_1224___.

_**`founder-quote-card`** — オレンジ色の表面にあるカーソル創設者の証言カードのバリエーション。

• 背景__CODEBCK_1226___、テキスト__CODEBCK_1227___、丸め__CODEBCK_1228___、パディング__CODEBCK_1229___。特定の創設者の肖像画と引用の扱いを掲載します。

**`startup-program-card`** — 特典グリッドを含む大きなアプリケーション/プログラム カード + CTA の適用。

• 背景__CODEBCK_1231___、角丸__CODEBCK_1232___、パディング__CODEBCK_1233___、境界線__CODEBCK_1234___.

入力とフォーム

**`text-input`** — 標準のテキスト フィールド。

• 背景__CODEBCK_1236___、テキスト__CODEBCK_1237___、境界線__CODEBCK_1238___、角丸__CODEBCK_1239___、パディング__CODEBCK_1240___、高さ40ピクセル

**`text-input-focused`** — アクティブ化された状態。

• 境界線が__CODEBCK_1242___に切り替わります — フォーカスはブランドミントをアクティブ化シグナルとして使用します。

**`search-pill`** — ドキュメントのトップバー検索。

• 背景__CODEBCK_1244___、テキスト__CODEBCK_1245___、タイポグラフィ__CODEBCK_1246___、角丸__CODEBCK_1247___、高さ36ピクセル、境界線__CODEBCK_1248___.

タブ

**`segmented-tab`** + **`segmented-tab-active`** — 下線スタイルのタブ ナビゲーション (「最初のタブ / 2 番目のタブ / 3 番目のタブ」の docs Tabs コンポーネント内で使用されます)。

• 非アクティブ: テキスト__CODEBCK_1251___、透明な背景、パディング__CODEBCK_1252___。アクティブ: テキスト ``、__CODEBCK_1254___ の 2 ピクセルの下枠。

**`pill-tab`** + **`pill-tab-active`** — ピル スタイルのタブ ナビゲーション (価格設定ページの上部: 「価格設定 / ロードマップ」)。

• 非アクティブ: 背景__CODEBCK_1257___、テキスト__CODEBCK_1258___、境界線__CODEBCK_1259___、パディング__CODEBCK_1260___、丸め__CODEBCK_1261___.
• アクティブ: 背景__CODEBCK_1262___、テキスト__CODEBCK_1263___、境界線なし。

**`toggle-monthly-yearly`** — 2 つの状態のピルの切り替え (価格設定ページの月次/年次)。

• 背景__CODEBCK_1265___、丸め__CODEBCK_1266___、パディング__CODEBCK_1267___。 アクティブな状態では、白い錠剤のつまみが選択した位置に移動します。

バッジとステータス

**`badge-discount`** — 年次切り替えに付いている小さな緑色の「20% 節約」バッジ。

• 背景__CODEBCK_1269___、テキスト__CODEBCK_1270___、タイポグラフィ__CODEBCK_1271___、角丸__CODEBCK_1272___、パディング__CODEBCK_1273___.

**`badge-required`** — ドキュメントのプロパティ行に赤い「必須」ラベルが表示されます。

• 背景__CODEBCK_1275___、テキスト__CODEBCK_1276___、タイポグラフィ__CODEBCK_1277___、角丸__CODEBCK_1278___、パディング__CODEBCK_1279___.

**`badge-type`** — ドキュメントに署名チップを入力します (例: `string`、__CODEBCK_1282___、__CODEBCK_1283___)。

• 背景__CODEBCK_1284___、テキスト__CODEBCK_1285___、タイポグラフィ__CODEBCK_1286___、角丸__CODEBCK_1287___、パディング__CODEBCK_1288___.

_**`badge-tag`** — ドキュメント タグ チップ (例: 本文で強調表示されている `` 参照)。

• 背景__CODEBCK_1291___、テキスト__CODEBCK_1292___、タイポグラフィ__CODEBCK_1293___、角丸__CODEBCK_1294___、パディング__CODEBCK_1295___.

**`promo-banner`** — 上部ナビゲーションの上にある粘着性のある黒いプロモーション ストリップ (存在する場合)。

• 背景__CODEBCK_1297___、テキスト__CODEBCK_1298___、タイポグラフィ__CODEBCK_1299___、パディング__CODEBCK_1300___.

コード

_**`code-block`** — 構文が強調表示されたコード コンテナー。

• 背景__CODEBCK_1302___、テキスト__CODEBCK_1303___、タイポグラフィ__CODEBCK_1304___、角丸__CODEBCK_1305___、パディング__CODEBCK_1306___.

**`code-block-header`** — コードの上に言語ラベルとコピー ボタンが付いたヘッダー バー。

• 背景__CODEBCK_1308___、テキスト__CODEBCK_1309___、タイポグラフィ__CODEBCK_1310___、パディング__CODEBCK_1311___、下枠__CODEBCK_1312___.

**`code-inline`** — 本文の散文内のインライン `` 参照。

• 背景__CODEBCK_1315___、テキスト__CODEBCK_1316___、タイポグラフィ__CODEBCK_1317___、角丸__CODEBCK_1318___、パディング__CODEBCK_1319___、境界線__CODEBCK_1320___.

**`copy-code-button`** — コード ブロック ヘッダーの [コードをコピー] ボタン。

• 背景透明、テキスト__CODEBCK_1322___、タイポグラフィ__CODEBCK_1323___、角丸__CODEBCK_1324___、パディング__CODEBCK_1325___、境界線__CODEBCK_1326___.

ドキュメント コンポーネント

**`property-row`** — API プロパティのドキュメント行 (例: タブ ページの `defaultIndex`)。

• 背景透明、テキスト__CODEBCK_1329___、タイポグラフィ__CODEBCK_1330___、パディング__CODEBCK_1331___、下枠__CODEBCK_1332___.
• レイアウト: `` のプロパティ名 + タイプ バッジ + オプションの REQUIRED バッジ + 以下の `` ``.

_**`feature-comparison-table`** — 詳細な価格ページの機能比較表。

• 背景__CODEBCK_1337___、テキスト__CODEBCK_1338___、タイポグラフィ__CODEBCK_1339___、角丸__CODEBCK_1340___、境界線__CODEBCK_1341___.

**`feature-comparison-row`** — 比較テーブル内の個々の行。

• 背景__CODEBCK_1343___、テキスト__CODEBCK_1344___、パディング__CODEBCK_1345___、下枠__CODEBCK_1346___。 `` ``.
のセクション区切り

**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — ドキュメントの左側のレール リンク エントリ。

• 非アクティブ: 背景透明、テキスト__CODEBCK_1351___、タイポグラフィ__CODEBCK_1352___、丸め__CODEBCK_1353___、パディング__CODEBCK_1354___.
• アクティブ: 背景__CODEBCK_1355___、テキスト__CODEBCK_1356___、タイポグラフィ__CODEBCK_1357___.

_**`sidebar-section-header`** — サイドバー内の大文字のセクション ヘッダー (例: "COMPONENTS"、"PRIMITIVES")。

• 背景透明、テキスト__CODEBCK_1359___、タイポグラフィ__CODEBCK_1360___、パディング__CODEBCK_1361___.

_**`doc-toc-item`** + **`doc-toc-item-active`** — 右レールの目次リンク。

• 非アクティブ: 背景透明、テキスト__CODEBCK_1364___、タイポグラフィ__CODEBCK_1365___、パディング__CODEBCK_1366___.
• アクティブ: テキスト__CODEBCK_1367___、タイポグラフィ__CODEBCK_1368___、__CODEBCK_1369___のオプションの左枠アクセント。

ナビゲーション

**トップ ナビゲーション (マーケティング)** — ロゴ、リンク リスト、右側の CTA を含む白いバー。

• 背景__CODEBCK_1370___、高さ~64ピクセル、下枠__CODEBCK_1371___.
• 左: Mintlify ワードマーク + 水平リンク リスト (ソリューション、価格、顧客、ドキュメント、変更ログ)。
• 右: 2 番目の「営業担当者と話す」 + 黒い錠剤「始めましょう」。

**トップ ナビゲーション (ドキュメント)** — 中央の検索ピルと右側のアカウント/アップグレード CTA を備えた圧縮ナビゲーション。

• 背景 ``、高さ ~56 ピクセル。 検索ピルが中央にあり、「ドキュメント / ガイド / API リファレンス / 変更ログ」リンク + 「お問い合わせ」+ 緑色の「開始」右。

署名コンポーネント

**`hero-band-sky`** — 雰囲気のある空色からクリーム色のグラデーションと雲のイラストが入ったホームページのヒーロー。

• 背景グラデーション__CODEBCK_1374___、テキスト__CODEBCK_1375___（グラデーションの前半部分）がさらに下の__CODEBCK_1376___にシフトし、パディング__CODEBCK_1377___.
• レイアウト: ヒーローの見出しが__CODEBCK_1378___の中央に、サブタイトルが__CODEBCK_1379___の中央に、ボタンの行が中央に配置されます(`button-accent-green`「はじめましょう」 + `button-secondary`「話してください」)、ボタンの下に製品モックアップが表示されます。

**`hero-band-dark`** — ダークティールからミントのグラデーションとロケット打ち上げのイラストを使用したスタートアップのヒーロー。

• 背景グラデーション__CODEBCK_1383___、テキスト__CODEBCK_1384___、パディング__CODEBCK_1385___.
• レイアウト: `` `` のヒーロー見出し左、図右 (グラデーションを横切るロケット)、ボタン行は `button-on-dark` (白い丸薬) + ゴースト リンクを使用します。

**`hero-product-mockup`** — ホームページのヒーロー内にフレーム化されたコードエディターのモックアップ。

• 背景__CODEBCK_1390___、角丸__CODEBCK_1391___、境界線__CODEBCK_1392___、濃い影__CODEBCK_1393___.
• 内部にドキュメント ページのプレビューが含まれます (左側のサイドバー、散文本文、模擬 UI コントロール)。

**`logo-wall-item`** — 6 アップの信頼行グリッドの顧客ロゴ セル (「Anthropic / Cognition / Mintlify / Vercel / React / Lovable」、「Stripe / Block / PayPal / Compound / Auth」)。

• 背景透明、テキスト__CODEBCK_1395___、タイポグラフィ__CODEBCK_1396___、パディング__CODEBCK_1397___.
• ロゴは一貫した垂直方向の中央揃えでワードマークとしてレンダリングされます。

_**`faq-accordion-item`** — よくある質問のパネル項目 (価格設定ページに表示されます)。

• 背景__CODEBCK_1399___、角丸__CODEBCK_1400___、パディング__CODEBCK_1401___、境界線__CODEBCK_1402___.
• _`` の質問、__CODEBCK_1404___ の拡張回答 ``、__CODEBCK_1406___ の山形アイコン 16px.

**`footer-region`** — 複数列のサイト フッター。

• 背景__CODEBCK_1408___、上枠__CODEBCK_1409___、パディング__CODEBCK_1410___.
• 5 つの列グループ (探索 / リソース / 会社 / 法務 + ブランド マーク列)。
• __CODEBCK_1411___ `` のセクション ヘッダー、__CODEBCK_1413___ のリンク項目 ``.

**`footer-link`** — フッター内の個別のリンク エントリ。

• 背景透明、テキスト__CODEBCK_1416___、タイポグラフィ__CODEBCK_1417___、パディング__CODEBCK_1418___.

推奨事項と禁止事項

実行

• __CODEBCK_1419___ (Mintlify mint) はアクセント CTA とアクティブ ステート インジケーターのみに予約してください — ビューポートごとに 1 つのアクセント ボタンでも重みがかかります
• 明るい背景の主要な CTA として `` (黒) を使用します。ダーク ヒーロー バンド
の `button-on-dark` (白い錠剤) に切り替えます
• __CODEBCK_1422___ をすべてのボタンと錠剤に適用します。錠剤の角を決して柔らかくしないでください
• Inter (UI 散文) と Geist Mono (コード) をペアにする — 3 番目の書体を導入しない
• 大気のグラデーションのヒーロー バンドは控えめに使用してください (ホームページとスタートアップ ページのみ)。より深い表面を平坦かつ緻密に保つ
• __CODEBCK_1423___ (12 ピクセル) をカードに一貫して適用します。 `` (8px) は、検索ピルやコード ブロックなどのコンパクト UI でのみ使用してください
• ドキュメントの散文を__CODEBCK_1425___ (16ピクセル)、行高1.50に保ちます — 決して圧縮しないでください

しないでください

• 本文またはラで__CODEBCK_1426___を使用しないでください サーフェスが変化します — 信号が失われます
• ミント、タグブルー、エラーレッド、および推薦のオレンジ以外の追加のアクセントカラーを導入しないでください
• 平らなドキュメント カードには濃い影を適用しないでください。ヒーロー製品モックアップの標高を予約
• ドキュメントの行の高さを 1.50 未満にしないでください — 長い形式の読みやすさが損なわれます
• 同じヒーロー内で雰囲気のグラデーションと複数の競合する色のアクセントを組み合わせないでください。空と暗いグラデーションがブランドの雰囲気です。息を吹き込みましょう
• コードには Inter を、散文には Geist Mono を使用しないでください。書体の割り当てはブランドの声です

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル（小） | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. Footer 1-column accordion. |

|モバイル（大） | 480 – 767ピクセル |小さいものと同じですが、フィーチャー タイルは 2 アップでレンダリングされます。 ヒーローは 44 ピクセルにスケールします。 |

|タブレット | 768 – 1023ピクセル | 2 列のフィーチャ グリッド。ピルタブナビが戻ります。ドキュメントのサイドバーは引き出しに折りたたまれます。ヒーローは 56 ピクセルにスケールします。 |

|デスクトップ | 1024 – 1279ピクセル |完全な 3 列のドキュメント グリッド (サイドバー / 本文 / 目次)。 3 層の価格カードの行。 72pxのヒーロー。 |

|ワイドデスクトップ | ≥ 1280 ピクセル |より広いヒーローガター、より大きな製品モックアップ、240ピクセルの固定サイドバー。 |

タッチターゲット

• ピル ボタンは有効高さ 36 ～ 40 ピクセルで表示されます — モバイルではパディング オーバーライドにより 44 ピクセルに増加します
• 円形アイコン ボタン: デスクトップ 32×32 ピクセル → モバイル 44×44 ピクセル
• フォーム入力は 40 ピクセルの高さでレンダリングされます。 mobile
が 44 ピクセルに増加
• サイドバーのナビゲーション項目は最大 32 ピクセルの高さでレンダリングされます — モバイル ドロワーは 44 ピクセルまで増加します

戦略の崩壊

• **プロモーション バナー** は全幅のままです。 < 480px
で切り捨てられます
• **1024 ピクセル未満のトップ ナビゲーション** はハンバーガーに折りたたまれます。水平リンクがドロワー
に移動します
• **ヒーロー バンド**: 2 列のヒーロー (テキスト + モックアップ) が折りたたまれて < 1024px; mockup rendered below text on mobile
に積み重ねられます
• **ドキュメント グリッド**: 3 列のデスクトップ → < 1024px → single-column at < 768px
のサイドバー ドロワー
• **価格比較**: < 768px; comparison table becomes horizontal-scroll
で 3 列階層 → 1 列スタック
• **ヒーローのタイポグラフィ**: `` (72 ピクセル) → 56 ピクセルのタブレット → 44 ピクセルのモバイル (大) → 36 ピクセルのモバイル (小)
• **顧客ロゴ ウォール**: 6 アップ → タブレットで 3 アップ → モバイルで 2 アップ
• **フッター**: デスクトップ 5 列 → タブレット 2 列 → モバイルのアコーディオン

画像の動作

• ヒーローのイラスト (雲、ロケット) をヒーロー バンドとともに遅延読み込みします。すべてのブレークポイントで鮮明なまま (SVG ベース)
• 製品モックアップはブレークポイント間でもアスペクト比を維持します。比例的に拡大縮小
• 顧客のロゴには SVG ワードマークが使用されています。 Retina ディスプレイでも鮮明なまま

反復ガイド

1.一度に 1 つのコンポーネントに焦点を当てます。システムの内部一貫性は高くなります。

2.コンポーネント名とトークンを直接参照します (``、__CODEBCK_1429___、__CODEBCK_1430___) - 言い換えはしないでください。

3.編集後に__CODEBCK_1431___を実行して、破損した参照とコントラストの問題を検出します。

4.新しいバリアントを個別の `components:` エントリとして追加します (`-pressed`、__CODEBCK_1434___、__CODEBCK_1435___、__CODEBCK_1436___)。

5.デフォルトは本文の場合は__CODEBCK_1437___、強調の場合は__CODEBCK_1438___です。見出しが下がります `hero-display → display-lg → heading-1 → heading-2 → heading-3 → heading-4 → heading-5`.

6. `` はアクセントとなる瞬間に限定してください。一般的な表面に表示されている場合は、その役割を獲得したかどうかを尋ねてください。

7。錠剤型ボタン (``) は常に;四角いボタンは、この言語では「サードパーティ ウィジェット」であることを示します。

8.ドキュメントの散文は、__CODEBCK_1442___ 16 ピクセル、行高 1.50 に属します。これ以上密度が高いと、読書体験が損なわれます。

既知のギャップ

• キャンバス、サーフェス、インク、ヘアラインの特定のダークモード トークン値は、これらのページには表示されません。ブランドは公開されたダークモード パレットをまだ出荷していません
• アニメーション/遷移のタイミングは抽出されません。ホバー/フォーカス状態遷移には 150 ～ 200 ミリ秒の容易さを推奨
• フォーム検証の成功状態は、デフォルトを超えると明示的に取得されません — 以下の標準的な緑色の枠線 + 成功バッジ パターンを実装します
• ドキュメント内のコード構文強調表示パレットは形式化されていません。ドキュメントのサンプルには、独自の 2 つのスラッシュ スタイルの注釈システム トークン (例: ``、__CODEBCK_1444___、__CODEBCK_1445___) が含まれていますが、完全なハイライト スキームは列挙されていません

Color Strategy Analysis

With 236 documented color tokens, Mintlify balances brand consistency with functional hierarchy. The primary palette (#0a0a0a) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Mintlify avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 236 documented color tokens, Mintlify balances brand consistency with functional hierarchy. The primary palette (#0a0a0a) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Mintlify avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 236 documented color tokens, Mintlify balances brand consistency with functional hierarchy. The primary palette (#0a0a0a) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Mintlify avoids through careful saturation management and deliberate negative space.

Related Design Systems

Explore similar design languages from the same category:

• Clay Design System
• Posthog Design System
• Replicate Design System
• Sanity Design System