Untitled Design System
Mintlify positions itself at the intersection of polished marketing presentation and developer-grade documentation density...
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Mintlify positions itself at the intersection of polished marketing presentation and developer-grade documentation density...
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Elevation & Depth
Do's & Don'ts
Do
Don't
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.
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
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
Use with MCP
Don't have the MCP? Install it here