Mintlify — Design Reference
warm paper ledger for agents
Source: https://www.mintlify.com
Theme: light
Category: Docs
Mood: light, warm, editorial, minimal, precise, airy
Captured: 2026-10-25
Overview
A calm, very editorial docs-platform marketing site. Pages sit on warm off-white paper and are fenced by hairline vertical rules into a 1088px column. A literary serif display face sits on top of crisp Inter UI copy. Colour is held back hard: black buttons, grey-green text, and one minty green kept for live signals like the 'Agent traffic' ticker, active filters and check icons. Saturated colour only shows up inside customer story tiles and the glowing green line-mesh behind the hero.
The headings use Arizona Flare at weight 400 with tight negative tracking (50px/52px, -2px). Body, UI and stats use Inter at 400/500. Paper Mono covers numbers and tickers. Surfaces step through #ffffff → #fefdfb → #faf8f5 → #f9f6f3 and are split by 1px #f1f0ee or rgba(0,0,0,.04) borders, not shadows. Corners stay small: 2px tags, 4px buttons, 6px cards, 12px feature panels. Spacing runs on a 4px base with 12–20px component padding and 160–192px section padding. Imagery is product UI drawn in pale mint, fine spirograph line-meshes, and full-bleed brand-colour customer cards.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Paper |
#faf8f5 |
--color-surface |
Dominant warm off-white ground for sections, logo grids and small cards |
| Bleached White |
#ffffff |
--color-background |
Body background and the hero ground behind the line-mesh |
| Linen |
#f9f6f3 |
--color-surface-raised |
Large 12px-radius feature panels and bento tiles |
| Cream |
#fefdfb |
--color-surface-button |
Fill for secondary buttons, accordions, tabs and the mobile menu sheet |
| Hairline |
#f1f0ee |
--color-border |
Nav bottom border, column rules, filter-chip and tag outlines |
| Ink |
#121715 |
--color-text |
Primary text and headings; a green-tinted near-black |
| Pitch |
#000000 |
--color-primary |
Primary CTA fill (Get started, Contact sales, pricing buttons) and nav link colour |
| Slate Moss |
#485450 |
--color-text-secondary |
Secondary UI text, inactive chips, accordion content, icons |
| Sage Grey |
#717d79 |
--color-text-muted |
Muted body copy, captions, blog category tabs, stat labels |
| Lichen |
#969e9b |
--color-text-faint |
Faintest meta text such as seat counts and dates |
| Mint |
#0c8c5e |
--color-accent |
Brand green: active filter chip text, ticker numbers, focus rings, active tab underline |
| Spring |
#1fa77a |
--color-success |
Positive check icons and live-status dots |
| Mint Wash |
#f0fdf4 |
--color-accent-surface |
Pale green tint behind selected sidebar items and mock UI tiles |
| Midnight Navy |
#000d2c |
--color-story-dark |
Deep ground for dark customer story panels (e.g. Coinbase) |
Semantic roles
| Role |
Value |
| background |
#ffffff |
| surface |
#faf8f5 |
| surface raised |
#f9f6f3 |
| border |
#f1f0ee |
| text |
#121715 |
| text muted |
#717d79 |
| primary |
#000000 |
| primary text |
#ffffff |
| accent |
#0c8c5e |
| success |
#1fa77a |
| warning |
#c37d0d |
| danger |
#d45656 |
Tokens — Typography
- Display: Arizona Flare (400, 500) — fallbacks: Newsreader, Source Serif 4, Georgia, serif. Literary serif for H1s, some H2s and pricing figures. Always weight 400 with tight negative tracking. Gives the site its editorial voice.
- Body: Inter (400, 500) — fallbacks: system-ui, -apple-system, Segoe UI, sans-serif. Everything else: UI, body, nav, buttons, section H2s at 500, big stats at 400. No bold heavier than 500.
- Mono: Paper Mono (400, 500) — fallbacks: IBM Plex Mono, JetBrains Mono, ui-monospace, monospace. Live numbers and tickers (e.g. 'Agent traffic 78.3247%'), code snippets and small technical labels, often in Mint on a Mint Wash pill.
- Accent: IBM Plex Sans (400, 500, 600) — fallbacks: Inter, system-ui, sans-serif. Only inside the docs/guides product surface (headings 36px/500, -0.9px). Keep it out of marketing pages.
| Role |
Size |
Line height |
Weight |
Letter spacing |
Family |
| Display |
50px |
52px |
400 |
-2px |
display |
| H1 page |
44px |
48px |
400 |
-0.8px |
display |
| Stat |
44px |
1.09 |
400 |
-0.88px |
body |
| H2 section |
36px |
1.11 |
500 |
-0.72px |
body |
| H3 story |
30px |
1.2 |
500 |
-0.75px |
body |
| H4 |
24px |
1.17 |
500 |
-0.24px |
body |
| Lead |
18px |
1.33 |
400 |
normal |
body |
| Body |
16px |
1.5 |
400 |
normal |
body |
| Small / UI |
14px |
20px |
500 |
normal |
body |
| Mono tag |
12px |
16px |
500 |
normal |
mono |
Tokens — Spacing & Layout
- Base unit: 4px
- Density: comfortable
- Container max width: 1088px
- Section gap: 160px
- Card padding: 16px (small cards) / 32px (feature panels)
- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 160px, 192px
Tokens — Radius
| Element |
Value |
| Tags, filter chips, segmented toggle |
2px |
| Buttons, inputs |
4px |
| Small cards, logo tiles |
6px |
| Accordions |
8px |
| Feature panels, story cards |
12px |
| Avatars, status dots |
9999px |
Tokens — Shadows
| Name |
Value |
Usage |
| Inset hairline |
inset 0 0 0 1px rgba(0,0,0,0.06) |
Outlines secondary buttons and tiles in place of a border |
| Ring + lift |
0 0 0 1px rgba(170,175,173,0.3), 0 1px 2px rgba(0,0,0,0.05) |
Floating 'Ask assistant' pill and the outlined Google sign-up button |
| Focus ring |
0 0 0 2px #0c8c5e |
Keyboard focus on buttons, tabs and accordions |
| Popover |
0 8px 24px hsla(0,0%,0%,0.12) |
Consent banner and dropdown menus only |
Components
Primary button (button)
| Property |
Value |
| background |
#000000 |
| color |
#ffffff |
| border |
none |
| radius |
4px |
| padding |
12px 20px |
| font size |
14px |
| font weight |
500 |
| shadow |
none |
| hover |
background #121715 at 85% opacity |
Black, compact, often with a trailing 12px chevron (›). Goes full width at the bottom of pricing cards.
Secondary button (button)
| Property |
Value |
| background |
#fefdfb |
| color |
#121715 |
| border |
1px solid rgba(0,0,0,0.06) |
| radius |
4px |
| padding |
12px 20px |
| font size |
14px |
| font weight |
500 |
| shadow |
0 1px 2px rgba(0,0,0,0.05) |
| hover |
background rgba(18,23,21,0.03) |
Cream with a hairline, for 'Sign in', 'Talk to sales' and 'Sign up with Google' (with a logo glyph).
Filter chip (badge)
| Property |
Value |
| background |
transparent |
| color |
#485450 |
| border |
1px solid #f1f0ee |
| radius |
2px |
| padding |
6px 12px |
| font size |
14px |
| font weight |
500 |
| shadow |
none |
| hover |
color #121715 |
Active state: background rgba(12,140,94,0.08), color #0c8c5e, no border. The Monthly/Annual toggle uses the same tint at 12px with 4px 8px padding.
Ticker pill (badge)
| Property |
Value |
| background |
#ffffff |
| color |
#121715 |
| border |
1px solid #f1f0ee |
| radius |
2px |
| padding |
4px 4px 4px 10px |
| font size |
12px |
| font weight |
500 |
| shadow |
none |
| hover |
chevron nudges right |
Eyebrow above the hero: Inter label plus a Paper Mono value in #0c8c5e on a rgba(12,140,94,0.08) inner pill.
Card (card)
| Property |
Value |
| background |
#faf8f5 |
| color |
#121715 |
| border |
1px solid rgba(0,0,0,0.04) |
| radius |
6px |
| padding |
16px |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
| hover |
border rgba(0,0,0,0.08) |
Pricing tiers and logo tiles. Inside: icon + 16px/500 title, a serif price, a hairline divider, then a checklist with grey check icons (green for 'Everything in…').
Feature panel (card)
| Property |
Value |
| background |
#f9f6f3 |
| color |
#121715 |
| border |
none |
| radius |
12px |
| padding |
32px |
| font size |
16px |
| font weight |
500 |
| shadow |
none |
| hover |
none |
Bento tiles holding pale mint product mock-ups, with the caption pinned bottom-left.
Ask input (input)
| Property |
Value |
| background |
transparent |
| color |
#171b1a |
| border |
none |
| radius |
0px |
| padding |
10px 14px |
| font size |
14px |
| font weight |
400 |
| shadow |
inset 0 0 0 1px rgba(0,0,0,0.06) |
| hover |
focus ring 0 0 0 2px #0c8c5e |
'Ask a question...' field with a leading sparkle icon and a trailing arrow, set inside a white tile.
Top nav (nav)
| Property |
Value |
| background |
#ffffff |
| color |
#000000 |
| border |
border-bottom 1px solid #f1f0ee |
| radius |
0px |
| padding |
0 16px; height 65px |
| font size |
14px |
| font weight |
500 |
| shadow |
none |
| hover |
link color #485450, dropdown chevron rotates |
Sticky. Wordmark on the left, centred Products/Solutions/Resources dropdowns plus Pricing, then 'Sign in' (secondary) and 'Contact sales' (primary) on the right.
Layout
A 1088px centred column framed by 1px #f1f0ee vertical rules running the full page height, so every section reads as a ruled ledger page. Section heads sit left-aligned with a short 2px #0c8c5e vertical tick on the left. The pattern is a two-tone heading (Ink first line, Sage Grey second) with a small black CTA pinned right. Content then drops into hairline-divided grids: a 4×2 logo tile grid, bento feature panels, 3-column pricing, and a horizontally scrolling carousel of story cards. Sections are separated by about 160–192px of empty paper, not by colour bands. The footer is a quiet multi-column link list.
Imagery
Product UI recreated in pale mint and grey with low-contrast icons, not screenshots. Fine spirograph line-meshes in lime-to-teal gradients (#a3e635 → #1fa77a) sweep behind the hero. Customer stories are full-bleed saturated brand tiles (#c44120 Anthropic orange, #0052ff Coinbase blue, #0077a6 AT&T, deep #000d2c / #002602 / #471100 grounds) carrying white wordmarks and the same line-mesh motif. Blog covers mix dark green UI illustrations with occasional event photography. Small round avatars appear on testimonials.
Motion
Restrained. Colours ease over 280ms cubic-bezier(0.4,0,0.2,1). Chevrons nudge on hover, accordions expand smoothly, the agent-traffic ticker counts up live, and testimonial and story carousels auto-scroll with a pause control. The hero line-mesh drifts slowly. No bouncy or scale-heavy effects.
Responsive
On phones the nav shrinks to the wordmark plus a 40px outlined square hamburger (cream, 1px hairline, 4px radius). Tapping it opens a full-screen cream (#fefdfb) sheet with Products/Solutions/Resources as 24px accordion rows split by hairlines, Pricing as a plain row, and a sticky bottom bar of two half-width buttons: 'Sign in' (secondary) and 'Contact sales ›' (black). The hero stacks into a single column: ticker pill, the serif headline at about 3 lines, then lead copy. The two CTAs stay side by side at roughly 64px tall, and the product mock-up drops below, cropped off the right edge with the line-mesh still behind it. Grids collapse to one column, carousels become swipeable, and the floating 'Ask assistant' pill grows and stays bottom-centred.
Do
- Set display headlines in Arizona Flare at weight 400 with negative tracking (-2px at 50px, -0.72px at 36px).
- Write two-tone section headings: the first sentence in #121715, the follow-up in #717d79, both at the same 36px/500 Inter size.
- Separate everything with 1px #f1f0ee or rgba(0,0,0,0.04) hairlines and warm surface steps (#ffffff → #faf8f5 → #f9f6f3), not shadows.
- Keep primary CTAs black (#000000) with white 14px/500 labels and a small trailing chevron.
- Save #0c8c5e for live or active signals: selected chips on an 8% green tint, mono ticker values, focus rings, active tab underlines.
- Frame the content column with full-height vertical hairlines and mark section heads with a short 2px green tick.
- Use Paper Mono for live numbers and technical values, and Inter for big stats like '300M+' at weight 400.
Don't
- Don't make the green a button fill or a big background; it is an accent, not the CTA colour.
- Don't use radii above 12px on containers or pill-shaped buttons; keep the 2/4/6/12px ladder.
- Don't bold anything past weight 500, and never set the serif display face in bold.
- Don't use cool greys or pure #f5f5f5 surfaces; neutrals here are warm (#faf8f5) or green-tinted (#485450, #717d79).
- Don't add drop shadows to cards; depth comes from tone steps and hairlines.
- Don't scatter saturated colour across UI chrome; keep it inside customer story tiles and illustrations.
- Don't use IBM Plex Sans on marketing pages; it belongs to the docs product surface only.
Agent prompt
Build a warm, editorial light-mode docs/devtool marketing site. Ground #ffffff, with sections and cards on warm paper #faf8f5 and big bento panels on #f9f6f3 (12px radius, 32px padding). Secondary buttons, accordions and the mobile sheet use cream #fefdfb. Everything sits in a 1088px column framed by full-height 1px #f1f0ee vertical rules, with 160–192px of space between sections. Headlines use Arizona Flare (fallback Newsreader/Georgia) at weight 400: 50px/52px with -2px tracking for the hero, 44px for page H1s. Body and UI use Inter 400/500 at 16px/1.5 and 14px/500. Section H2s are Inter 36px/500 at -0.72px, two-tone: #121715 then #717d79. Live numbers use Paper Mono (fallback IBM Plex Mono). Text colours are #121715 ink, #485450 secondary, #717d79 muted, #969e9b faint. Primary buttons are black #000000 with white 14px/500 text, 4px radius, 12px 20px padding and a trailing chevron. Secondary buttons are #fefdfb with a 1px rgba(0,0,0,0.06) border. Chips and tags take a 2px radius and a #f1f0ee outline; active chips get color #0c8c5e on rgba(12,140,94,0.08). Small cards are #faf8f5 with a 1px rgba(0,0,0,0.04) border and 6px radius, no shadows. Brand green #0c8c5e (success #1fa77a, tint #f0fdf4) appears only on active states, ticker values, check icons, focus rings (0 0 0 2px #0c8c5e) and a 2px tick beside section heads. Imagery is pale mint product mock-ups, lime-to-teal spirograph line-meshes behind the hero, and saturated full-bleed customer tiles (#c44120, #0052ff, #0077a6, #000d2c) with white logos. Keep it quiet, precise and airy.
CSS custom properties
/* Mintlify — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-surface: #faf8f5; /* Dominant warm off-white ground for sections, logo grids and small cards */
--color-background: #ffffff; /* Body background and the hero ground behind the line-mesh */
--color-surface-raised: #f9f6f3; /* Large 12px-radius feature panels and bento tiles */
--color-surface-button: #fefdfb; /* Fill for secondary buttons, accordions, tabs and the mobile menu sheet */
--color-border: #f1f0ee; /* Nav bottom border, column rules, filter-chip and tag outlines */
--color-text: #121715; /* Primary text and headings; a green-tinted near-black */
--color-primary: #000000; /* Primary CTA fill (Get started, Contact sales, pricing buttons) and nav link colour */
--color-text-secondary: #485450; /* Secondary UI text, inactive chips, accordion content, icons */
--color-text-muted: #717d79; /* Muted body copy, captions, blog category tabs, stat labels */
--color-text-faint: #969e9b; /* Faintest meta text such as seat counts and dates */
--color-accent: #0c8c5e; /* Brand green: active filter chip text, ticker numbers, focus rings, active tab underline */
--color-success: #1fa77a; /* Positive check icons and live-status dots */
--color-accent-surface: #f0fdf4; /* Pale green tint behind selected sidebar items and mock UI tiles */
--color-story-dark: #000d2c; /* Deep ground for dark customer story panels (e.g. Coinbase) */
/* Semantic roles */
--background: #ffffff;
--surface: #faf8f5;
--surface-raised: #f9f6f3;
--border: #f1f0ee;
--text: #121715;
--text-muted: #717d79;
--primary: #000000;
--primary-text: #ffffff;
--accent: #0c8c5e;
--success: #1fa77a;
--warning: #c37d0d;
--danger: #d45656;
/* Typography */
--font-display: 'Arizona Flare', Newsreader, 'Source Serif 4', Georgia, serif;
--font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Paper Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--font-accent: 'IBM Plex Sans', Inter, system-ui, sans-serif;
--text-display: 50px;
--text-display--line-height: 52px;
--text-display--letter-spacing: -2px;
--text-display--font-weight: 400;
--text-h1-page: 44px;
--text-h1-page--line-height: 48px;
--text-h1-page--letter-spacing: -0.8px;
--text-h1-page--font-weight: 400;
--text-stat: 44px;
--text-stat--line-height: 1.09;
--text-stat--letter-spacing: -0.88px;
--text-stat--font-weight: 400;
--text-h2-section: 36px;
--text-h2-section--line-height: 1.11;
--text-h2-section--letter-spacing: -0.72px;
--text-h2-section--font-weight: 500;
--text-h3-story: 30px;
--text-h3-story--line-height: 1.2;
--text-h3-story--letter-spacing: -0.75px;
--text-h3-story--font-weight: 500;
--text-h4: 24px;
--text-h4--line-height: 1.17;
--text-h4--letter-spacing: -0.24px;
--text-h4--font-weight: 500;
--text-lead: 18px;
--text-lead--line-height: 1.33;
--text-lead--letter-spacing: normal;
--text-lead--font-weight: 400;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-small-ui: 14px;
--text-small-ui--line-height: 20px;
--text-small-ui--letter-spacing: normal;
--text-small-ui--font-weight: 500;
--text-mono-tag: 12px;
--text-mono-tag--line-height: 16px;
--text-mono-tag--letter-spacing: normal;
--text-mono-tag--font-weight: 500;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 64px;
--space-11: 160px;
--space-12: 192px;
--container: 1088px;
--section-gap: 160px;
/* Radius */
--radius-tags-filter-chips-segmented-toggle: 2px;
--radius-buttons-inputs: 4px;
--radius-small-cards-logo-tiles: 6px;
--radius-accordions: 8px;
--radius-feature-panels-story-cards: 12px;
--radius-avatars-status-dots: 9999px;
/* Shadows */
--shadow-inset-hairline: inset 0 0 0 1px rgba(0,0,0,0.06);
--shadow-ring-lift: 0 0 0 1px rgba(170,175,173,0.3), 0 1px 2px rgba(0,0,0,0.05);
--shadow-focus-ring: 0 0 0 2px #0c8c5e;
--shadow-popover: 0 8px 24px hsla(0,0%,0%,0.12);
}
Tailwind v4 theme
/* Mintlify — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
--color-surface: #faf8f5;
--color-background: #ffffff;
--color-surface-raised: #f9f6f3;
--color-surface-button: #fefdfb;
--color-border: #f1f0ee;
--color-text: #121715;
--color-primary: #000000;
--color-text-secondary: #485450;
--color-text-muted: #717d79;
--color-text-faint: #969e9b;
--color-accent: #0c8c5e;
--color-success: #1fa77a;
--color-accent-surface: #f0fdf4;
--color-story-dark: #000d2c;
--color-background: #ffffff;
--color-surface: #faf8f5;
--color-surface-raised: #f9f6f3;
--color-border: #f1f0ee;
--color-text: #121715;
--color-text-muted: #717d79;
--color-primary: #000000;
--color-primary-text: #ffffff;
--color-accent: #0c8c5e;
--color-success: #1fa77a;
--color-warning: #c37d0d;
--color-danger: #d45656;
--font-display: 'Arizona Flare', Newsreader, 'Source Serif 4', Georgia, serif;
--font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Paper Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--font-accent: 'IBM Plex Sans', Inter, system-ui, sans-serif;
--text-display: 50px;
--text-display--line-height: 52px;
--text-display--letter-spacing: -2px;
--text-display--font-weight: 400;
--text-h1-page: 44px;
--text-h1-page--line-height: 48px;
--text-h1-page--letter-spacing: -0.8px;
--text-h1-page--font-weight: 400;
--text-stat: 44px;
--text-stat--line-height: 1.09;
--text-stat--letter-spacing: -0.88px;
--text-stat--font-weight: 400;
--text-h2-section: 36px;
--text-h2-section--line-height: 1.11;
--text-h2-section--letter-spacing: -0.72px;
--text-h2-section--font-weight: 500;
--text-h3-story: 30px;
--text-h3-story--line-height: 1.2;
--text-h3-story--letter-spacing: -0.75px;
--text-h3-story--font-weight: 500;
--text-h4: 24px;
--text-h4--line-height: 1.17;
--text-h4--letter-spacing: -0.24px;
--text-h4--font-weight: 500;
--text-lead: 18px;
--text-lead--line-height: 1.33;
--text-lead--letter-spacing: normal;
--text-lead--font-weight: 400;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-small-ui: 14px;
--text-small-ui--line-height: 20px;
--text-small-ui--letter-spacing: normal;
--text-small-ui--font-weight: 500;
--text-mono-tag: 12px;
--text-mono-tag--line-height: 16px;
--text-mono-tag--letter-spacing: normal;
--text-mono-tag--font-weight: 500;
--radius-tags-filter-chips-segmented-toggle: 2px;
--radius-buttons-inputs: 4px;
--radius-small-cards-logo-tiles: 6px;
--radius-accordions: 8px;
--radius-feature-panels-story-cards: 12px;
--radius-avatars-status-dots: 9999px;
--shadow-inset-hairline: inset 0 0 0 1px rgba(0,0,0,0.06);
--shadow-ring-lift: 0 0 0 1px rgba(170,175,173,0.3), 0 1px 2px rgba(0,0,0,0.05);
--shadow-focus-ring: 0 0 0 2px #0c8c5e;
--shadow-popover: 0 8px 24px hsla(0,0%,0%,0.12);
--container-site: 1088px;
}
Theme tokens — light + dark
The shadcn-named layer DevDojo Sites speaks (bg-background, text-foreground, bg-primary, rounded-medium…). Paste into site.css after @import "tailwindcss" to restyle any site in this look.
/* Mintlify — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: estimated — the site has no dark scheme, so the .dark half is a plausible twin of its palette. */
@custom-variant dark (&:where(.dark, .dark *));
:root {
color-scheme: light;
--background: #ffffff;
--foreground: #121715;
--card: #faf8f5;
--card-foreground: #121715;
--popover: #fefdfb; /* estimated */
--popover-foreground: #121715; /* estimated */
--primary: #000000;
--primary-foreground: #ffffff; /* estimated */
--secondary: #fefdfb;
--secondary-foreground: #121715;
--muted: #f9f6f3;
--muted-foreground: #717d79;
--accent: #f0fdf4;
--accent-foreground: #0c8c5e;
--destructive: #d45656;
--destructive-foreground: #ffffff; /* estimated */
--border: #f1f0ee;
--input: rgba(0,0,0,0.06);
--ring: #0c8c5e;
--radius-small: 2px;
--radius-medium: 6px;
--radius-large: 12px;
--radius: var(--radius-medium);
--font-display: 'Arizona Flare', Newsreader, 'Source Serif 4', Georgia, serif;
--font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Paper Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}
.dark {
color-scheme: dark;
/* estimated from the light palette */
--background: #0a0e0d;
--foreground: #f3f7f6;
--card: #121715;
--card-foreground: #f3f7f6;
--popover: #171b1a;
--popover-foreground: #f3f7f6;
--primary: #fefdfb;
--primary-foreground: #121715;
--secondary: #171b1a;
--secondary-foreground: #eef2f1;
--muted: #252928;
--muted-foreground: #9ea3a2;
--accent: rgba(24,226,153,0.12);
--accent-foreground: #18e299;
--destructive: #d45656;
--destructive-foreground: #ffffff;
--border: rgba(255,255,255,0.08);
--input: rgba(255,255,255,0.10);
--ring: #18e299;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-small: var(--radius-small);
--radius-medium: var(--radius-medium);
--radius-large: var(--radius-large);
--font-display: var(--font-display);
--font-body: var(--font-body);
--font-mono: var(--font-mono);
}
Mintlify — Style Reference
warm paper ledger for agents
Theme: light · Mood: light, warm, editorial, minimal, precise, airy
A calm, very editorial docs-platform marketing site. Pages sit on warm off-white paper and are fenced by hairline vertical rules into a 1088px column. A literary serif display face sits on top of crisp Inter UI copy. Colour is held back hard: black buttons, grey-green text, and one minty green kept for live signals like the 'Agent traffic' ticker, active filters and check icons. Saturated colour only shows up inside customer story tiles and the glowing green line-mesh behind the hero.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Paper |
#faf8f5 |
--surface |
Dominant warm off-white ground for sections, logo grids and small cards |
| Bleached White |
#ffffff |
--background |
Body background and the hero ground behind the line-mesh |
| Linen |
#f9f6f3 |
--surface-raised |
Large 12px-radius feature panels and bento tiles |
| Cream |
#fefdfb |
--surface-button |
Fill for secondary buttons, accordions, tabs and the mobile menu sheet |
| Hairline |
#f1f0ee |
--border |
Nav bottom border, column rules, filter-chip and tag outlines |
| Ink |
#121715 |
--text |
Primary text and headings; a green-tinted near-black |
| Pitch |
#000000 |
--primary |
Primary CTA fill (Get started, Contact sales, pricing buttons) and nav link colour |
| Slate Moss |
#485450 |
--text-secondary |
Secondary UI text, inactive chips, accordion content, icons |
| Sage Grey |
#717d79 |
--text-muted |
Muted body copy, captions, blog category tabs, stat labels |
| Lichen |
#969e9b |
--text-faint |
Faintest meta text such as seat counts and dates |
| Mint |
#0c8c5e |
--accent |
Brand green: active filter chip text, ticker numbers, focus rings, active tab underline |
| Spring |
#1fa77a |
--success |
Positive check icons and live-status dots |
| Mint Wash |
#f0fdf4 |
--accent-surface |
Pale green tint behind selected sidebar items and mock UI tiles |
| Midnight Navy |
#000d2c |
--story-dark |
Deep ground for dark customer story panels (e.g. Coinbase) |
Tokens — Typography
- Display: Arizona Flare (Newsreader, Source Serif 4, Georgia, serif) — weights 400/500
- Body: Inter (system-ui, -apple-system, Segoe UI, sans-serif) — weights 400/500
- Mono: Paper Mono (IBM Plex Mono, JetBrains Mono, ui-monospace, monospace) — weights 400/500
- Accent: IBM Plex Sans (Inter, system-ui, sans-serif) — weights 400/500/600
Tokens — Radius
| Element |
Value |
| Tags, filter chips, segmented toggle |
2px |
| Buttons, inputs |
4px |
| Small cards, logo tiles |
6px |
| Accordions |
8px |
| Feature panels, story cards |
12px |
| Avatars, status dots |
9999px |
Do
- Set display headlines in Arizona Flare at weight 400 with negative tracking (-2px at 50px, -0.72px at 36px).
- Write two-tone section headings: the first sentence in #121715, the follow-up in #717d79, both at the same 36px/500 Inter size.
- Separate everything with 1px #f1f0ee or rgba(0,0,0,0.04) hairlines and warm surface steps (#ffffff → #faf8f5 → #f9f6f3), not shadows.
- Keep primary CTAs black (#000000) with white 14px/500 labels and a small trailing chevron.
- Save #0c8c5e for live or active signals: selected chips on an 8% green tint, mono ticker values, focus rings, active tab underlines.
- Frame the content column with full-height vertical hairlines and mark section heads with a short 2px green tick.
- Use Paper Mono for live numbers and technical values, and Inter for big stats like '300M+' at weight 400.
Don't
- Don't make the green a button fill or a big background; it is an accent, not the CTA colour.
- Don't use radii above 12px on containers or pill-shaped buttons; keep the 2/4/6/12px ladder.
- Don't bold anything past weight 500, and never set the serif display face in bold.
- Don't use cool greys or pure #f5f5f5 surfaces; neutrals here are warm (#faf8f5) or green-tinted (#485450, #717d79).
- Don't add drop shadows to cards; depth comes from tone steps and hairlines.
- Don't scatter saturated colour across UI chrome; keep it inside customer story tiles and illustrations.
- Don't use IBM Plex Sans on marketing pages; it belongs to the docs product surface only.
{
"$name": "Mintlify",
"$source": "https://www.mintlify.com",
"$theme": "light",
"$generated": "inspiration library",
"color": {
"surface": {
"$type": "color",
"$value": "#faf8f5",
"$description": "Dominant warm off-white ground for sections, logo grids and small cards"
},
"background": {
"$type": "color",
"$value": "#ffffff",
"$description": "Body background and the hero ground behind the line-mesh"
},
"surface-raised": {
"$type": "color",
"$value": "#f9f6f3",
"$description": "Large 12px-radius feature panels and bento tiles"
},
"surface-button": {
"$type": "color",
"$value": "#fefdfb",
"$description": "Fill for secondary buttons, accordions, tabs and the mobile menu sheet"
},
"border": {
"$type": "color",
"$value": "#f1f0ee",
"$description": "Nav bottom border, column rules, filter-chip and tag outlines"
},
"text": {
"$type": "color",
"$value": "#121715",
"$description": "Primary text and headings; a green-tinted near-black"
},
"primary": {
"$type": "color",
"$value": "#000000",
"$description": "Primary CTA fill (Get started, Contact sales, pricing buttons) and nav link colour"
},
"text-secondary": {
"$type": "color",
"$value": "#485450",
"$description": "Secondary UI text, inactive chips, accordion content, icons"
},
"text-muted": {
"$type": "color",
"$value": "#717d79",
"$description": "Muted body copy, captions, blog category tabs, stat labels"
},
"text-faint": {
"$type": "color",
"$value": "#969e9b",
"$description": "Faintest meta text such as seat counts and dates"
},
"accent": {
"$type": "color",
"$value": "#0c8c5e",
"$description": "Brand green: active filter chip text, ticker numbers, focus rings, active tab underline"
},
"success": {
"$type": "color",
"$value": "#1fa77a",
"$description": "Positive check icons and live-status dots"
},
"accent-surface": {
"$type": "color",
"$value": "#f0fdf4",
"$description": "Pale green tint behind selected sidebar items and mock UI tiles"
},
"story-dark": {
"$type": "color",
"$value": "#000d2c",
"$description": "Deep ground for dark customer story panels (e.g. Coinbase)"
}
},
"role": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"surface": {
"$type": "color",
"$value": "#faf8f5"
},
"surface_raised": {
"$type": "color",
"$value": "#f9f6f3"
},
"border": {
"$type": "color",
"$value": "#f1f0ee"
},
"text": {
"$type": "color",
"$value": "#121715"
},
"text_muted": {
"$type": "color",
"$value": "#717d79"
},
"primary": {
"$type": "color",
"$value": "#000000"
},
"primary_text": {
"$type": "color",
"$value": "#ffffff"
},
"accent": {
"$type": "color",
"$value": "#0c8c5e"
},
"success": {
"$type": "color",
"$value": "#1fa77a"
},
"warning": {
"$type": "color",
"$value": "#c37d0d"
},
"danger": {
"$type": "color",
"$value": "#d45656"
}
},
"fontFamily": {
"display": {
"$type": "fontFamily",
"$value": [
"Arizona Flare",
"Newsreader",
"Source Serif 4",
"Georgia",
"serif"
],
"$description": "Literary serif for H1s, some H2s and pricing figures. Always weight 400 with tight negative tracking. Gives the site its editorial voice."
},
"body": {
"$type": "fontFamily",
"$value": [
"Inter",
"system-ui",
"-apple-system",
"Segoe UI",
"sans-serif"
],
"$description": "Everything else: UI, body, nav, buttons, section H2s at 500, big stats at 400. No bold heavier than 500."
},
"mono": {
"$type": "fontFamily",
"$value": [
"Paper Mono",
"IBM Plex Mono",
"JetBrains Mono",
"ui-monospace",
"monospace"
],
"$description": "Live numbers and tickers (e.g. 'Agent traffic 78.3247%'), code snippets and small technical labels, often in Mint on a Mint Wash pill."
},
"accent": {
"$type": "fontFamily",
"$value": [
"IBM Plex Sans",
"Inter",
"system-ui",
"sans-serif"
],
"$description": "Only inside the docs/guides product surface (headings 36px/500, -0.9px). Keep it out of marketing pages."
}
},
"typography": {
"display": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "50px",
"lineHeight": "52px",
"fontWeight": 400,
"letterSpacing": "-2px"
}
},
"h1-page": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "44px",
"lineHeight": "48px",
"fontWeight": 400,
"letterSpacing": "-0.8px"
}
},
"stat": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "44px",
"lineHeight": "1.09",
"fontWeight": 400,
"letterSpacing": "-0.88px"
}
},
"h2-section": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "36px",
"lineHeight": "1.11",
"fontWeight": 500,
"letterSpacing": "-0.72px"
}
},
"h3-story": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "30px",
"lineHeight": "1.2",
"fontWeight": 500,
"letterSpacing": "-0.75px"
}
},
"h4": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "24px",
"lineHeight": "1.17",
"fontWeight": 500,
"letterSpacing": "-0.24px"
}
},
"lead": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "18px",
"lineHeight": "1.33",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"body": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"small-ui": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "14px",
"lineHeight": "20px",
"fontWeight": 500,
"letterSpacing": "normal"
}
},
"mono-tag": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.mono}",
"fontSize": "12px",
"lineHeight": "16px",
"fontWeight": 500,
"letterSpacing": "normal"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "4px"
},
"2": {
"$type": "dimension",
"$value": "8px"
},
"3": {
"$type": "dimension",
"$value": "12px"
},
"4": {
"$type": "dimension",
"$value": "16px"
},
"5": {
"$type": "dimension",
"$value": "20px"
},
"6": {
"$type": "dimension",
"$value": "24px"
},
"7": {
"$type": "dimension",
"$value": "32px"
},
"8": {
"$type": "dimension",
"$value": "40px"
},
"9": {
"$type": "dimension",
"$value": "48px"
},
"10": {
"$type": "dimension",
"$value": "64px"
},
"11": {
"$type": "dimension",
"$value": "160px"
},
"12": {
"$type": "dimension",
"$value": "192px"
}
},
"radius": {
"tags-filter-chips-segmented-toggle": {
"$type": "dimension",
"$value": "2px"
},
"buttons-inputs": {
"$type": "dimension",
"$value": "4px"
},
"small-cards-logo-tiles": {
"$type": "dimension",
"$value": "6px"
},
"accordions": {
"$type": "dimension",
"$value": "8px"
},
"feature-panels-story-cards": {
"$type": "dimension",
"$value": "12px"
},
"avatars-status-dots": {
"$type": "dimension",
"$value": "9999px"
}
},
"shadow": {
"inset-hairline": {
"$type": "shadow",
"$value": "inset 0 0 0 1px rgba(0,0,0,0.06)",
"$description": "Outlines secondary buttons and tiles in place of a border"
},
"ring-lift": {
"$type": "shadow",
"$value": "0 0 0 1px rgba(170,175,173,0.3), 0 1px 2px rgba(0,0,0,0.05)",
"$description": "Floating 'Ask assistant' pill and the outlined Google sign-up button"
},
"focus-ring": {
"$type": "shadow",
"$value": "0 0 0 2px #0c8c5e",
"$description": "Keyboard focus on buttons, tabs and accordions"
},
"popover": {
"$type": "shadow",
"$value": "0 8px 24px hsla(0,0%,0%,0.12)",
"$description": "Consent banner and dropdown menus only"
}
},
"component": {
"primary-button": {
"kind": "button",
"background": "#000000",
"color": "#ffffff",
"border": "none",
"radius": "4px",
"padding": "12px 20px",
"font_size": "14px",
"font_weight": 500,
"shadow": "none",
"hover": "background #121715 at 85% opacity",
"notes": "Black, compact, often with a trailing 12px chevron (›). Goes full width at the bottom of pricing cards."
},
"secondary-button": {
"kind": "button",
"background": "#fefdfb",
"color": "#121715",
"border": "1px solid rgba(0,0,0,0.06)",
"radius": "4px",
"padding": "12px 20px",
"font_size": "14px",
"font_weight": 500,
"shadow": "0 1px 2px rgba(0,0,0,0.05)",
"hover": "background rgba(18,23,21,0.03)",
"notes": "Cream with a hairline, for 'Sign in', 'Talk to sales' and 'Sign up with Google' (with a logo glyph)."
},
"filter-chip": {
"kind": "badge",
"background": "transparent",
"color": "#485450",
"border": "1px solid #f1f0ee",
"radius": "2px",
"padding": "6px 12px",
"font_size": "14px",
"font_weight": 500,
"shadow": "none",
"hover": "color #121715",
"notes": "Active state: background rgba(12,140,94,0.08), color #0c8c5e, no border. The Monthly/Annual toggle uses the same tint at 12px with 4px 8px padding."
},
"ticker-pill": {
"kind": "badge",
"background": "#ffffff",
"color": "#121715",
"border": "1px solid #f1f0ee",
"radius": "2px",
"padding": "4px 4px 4px 10px",
"font_size": "12px",
"font_weight": 500,
"shadow": "none",
"hover": "chevron nudges right",
"notes": "Eyebrow above the hero: Inter label plus a Paper Mono value in #0c8c5e on a rgba(12,140,94,0.08) inner pill."
},
"card": {
"kind": "card",
"background": "#faf8f5",
"color": "#121715",
"border": "1px solid rgba(0,0,0,0.04)",
"radius": "6px",
"padding": "16px",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"hover": "border rgba(0,0,0,0.08)",
"notes": "Pricing tiers and logo tiles. Inside: icon + 16px/500 title, a serif price, a hairline divider, then a checklist with grey check icons (green for 'Everything in…')."
},
"feature-panel": {
"kind": "card",
"background": "#f9f6f3",
"color": "#121715",
"border": "none",
"radius": "12px",
"padding": "32px",
"font_size": "16px",
"font_weight": 500,
"shadow": "none",
"hover": "none",
"notes": "Bento tiles holding pale mint product mock-ups, with the caption pinned bottom-left."
},
"ask-input": {
"kind": "input",
"background": "transparent",
"color": "#171b1a",
"border": "none",
"radius": "0px",
"padding": "10px 14px",
"font_size": "14px",
"font_weight": 400,
"shadow": "inset 0 0 0 1px rgba(0,0,0,0.06)",
"hover": "focus ring 0 0 0 2px #0c8c5e",
"notes": "'Ask a question...' field with a leading sparkle icon and a trailing arrow, set inside a white tile."
},
"top-nav": {
"kind": "nav",
"background": "#ffffff",
"color": "#000000",
"border": "border-bottom 1px solid #f1f0ee",
"radius": "0px",
"padding": "0 16px; height 65px",
"font_size": "14px",
"font_weight": 500,
"shadow": "none",
"hover": "link color #485450, dropdown chevron rotates",
"notes": "Sticky. Wordmark on the left, centred Products/Solutions/Resources dropdowns plus Pricing, then 'Sign in' (secondary) and 'Contact sales' (primary) on the right."
}
}
}
New
