Mintlify - The documentation platform for agents

Design Specification — Mintlify - The documentation platform for agents

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#18E299). Display headings use a distinct face (ui-serif, Georgia, serif) over the body stack (Geist Mono). Detected font weights: 100, 400, 500, 600, 700, 800, 900. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://mintlify.com/favicon.ico?favicon.d9fa433b.ico

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(#fff,#fff)
• linear-gradient(to right,transparent 0%,71%)
• linear-gradient(to right,0%,transparent 71%)

Typography

Primary typeface: Geist Mono — stack: Geist Mono

Display / heading typeface: ui-serif, Georgia, serif (used for large headings; body uses the primary stack)

Font stacks (most used first)

• Geist Mono
• var(--font-inter)
• inherit
• var(--c15t-font-family)
• system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"
• Geist Mono Fallback
• inter
• inter Fallback
• paperMono
• paperMono Fallback

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• inset 0 0 0 1px
• 0 0 0 1px rgb(/10%),0 3px 0 rgb(/10%)

Layout

Container max-width: 1088px

Grid columns (largest detected grid): 5

Breakpoints

• 40rem
• 48rem
• 64rem
• 1120px

Animation & Motion

Transitions

• opacity .2s
• opacity 280mscubic-bezier(0.4, 0, 0.2, 1),transform 280mscubic-bezier(0.4, 0, 0.2, 1)
• text-decoration .2s ease
• clip-path .8scubic-bezier(.25,.46,.45,.94)
• none

Easing curves

• cubic-bezier(0.4, 0, 0.2, 1)
• cubic-bezier(0.215, 0.61, 0.355, 1)
• cubic-bezier(0.645, 0.045, 0.355, 1)
• cubic-bezier(0.34, 1.56, 0.64, 1)
• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)

Keyframes

@keyframes c15t-ui-enter-EoZFn { 0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)} }
@keyframes c15t-ui-exit-Z4gI_ { 0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)} }
@keyframes c15t-ui-enter-oqaf_ { 0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)} }
@keyframes c15t-ui-exit-Yh5ig { 0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)} }
@keyframes c15t-ui-fadeIn-moBzd { to{opacity:1} }
@keyframes enterFromRight { 0%{opacity:0;transform:translate(200px)}to{opacity:1;transform:translate(0)} }
@keyframes enterFromLeft { 0%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(0)} }
@keyframes exitToRight { 0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(200px)} }
@keyframes exitToLeft { 0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-200px)} }
@keyframes scaleIn { 0%{opacity:0;transform:rotateX(-10deg)scale(.96)}to{opacity:1;transform:rotateX(0)scale(1)} }
@keyframes scaleOut { 0%{opacity:1;transform:rotateX(0)scale(1)}to{opacity:0;transform:rotateX(-10deg)scale(.96)} }
@keyframes navContentIn { 0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
@keyframes loader-spin { to{transform:rotate(1turn)} }
@keyframes digit-in { 0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)} }
@keyframes stats-scroll { 0%{transform:translate(0)}to{transform:translate(-50%)} }
@keyframes carousel-card-dim { 0%,to{opacity:.4}40%,60%{opacity:1} }
@keyframes dither-toggle { 0%{opacity:0}6%{opacity:1}25%{opacity:1}31%{opacity:0}to{opacity:0} }
@keyframes signal-ping { 0%{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(3.2)} }

Animations

• linear both carousel-card-dim
• 1.05s ease-in-out infinite signal-flicker
• 1.05s cubic-bezier(0,0,.2,1) infinite signal-ping
• c15t-ui-enter-EoZFn var(--c15t-duration-fast)var(--c15t-easing)
• c15t-ui-exit-Z4gI_ var(--c15t-duration-fast)var(--c15t-easing)
• c15t-ui-enter-oqaf_ var(--c15t-duration-fast)var(--c15t-easing)
• c15t-ui-exit-Yh5ig var(--c15t-duration-fast)var(--c15t-easing)
• c15t-ui-fadeIn-moBzd .15s cubic-bezier(.165,.84,.44,1)forwards
• none

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Products”

button-secondary — sample text: “Pricing”

navigation-link

CTA labels found on page

• Start for free
• Sign up with Google

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --c15t-primary: var(--color-brand-base);
  --c15t-primary-hover: color-mix(in oklab, var(--color-brand-base) 85%, transparent);
  --c15t-surface: var(--color-background-primary);
  --c15t-surface-hover: var(--color-background-soft);
  --c15t-border: var(--color-border-secondary);
  --c15t-border-hover: var(--color-border-tertiary);
  --c15t-text: var(--color-foreground-primary);
  --c15t-text-muted: var(--color-foreground-secondary);
  --c15t-text-on-primary: #ffffff;
  --c15t-overlay: color-mix(in oklab, var(--color-base-black) 50%, transparent);
  --c15t-switch-track: var(--color-background-gray-emphasis);
  --c15t-switch-track-active: var(--color-brand-base);
  --c15t-switch-thumb: #ffffff;
  --c15t-font-family: var(--font-inter);
  --c15t-font-size-sm: 0.875rem;
  --c15t-font-size-base: 1rem;
  --c15t-font-size-lg: 1.125rem;
  --c15t-font-weight-normal: 400;
  --c15t-font-weight-medium: 500;
  --c15t-font-weight-semibold: 600;
  --c15t-line-height-tight: 1.25;
  --c15t-line-height-normal: 1.5;
  --c15t-line-height-relaxed: 1.75;
  --c15t-space-xs: 0.25rem;
  --c15t-space-sm: 0.5rem;
  --c15t-space-md: 1rem;
  --c15t-space-lg: 1.5rem;
  --c15t-space-xl: 2rem;
  --c15t-radius-sm: 4px;
  --c15t-radius-md: 8px;
  --c15t-radius-lg: 12px;
  --c15t-radius-full: 9999px;
  --c15t-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
  --c15t-shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
  --c15t-shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.12);
  --c15t-duration-fast: 280ms;
  --c15t-duration-normal: 150ms;
  --c15t-duration-slow: 200ms;
  --c15t-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --c15t-easing-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --c15t-easing-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --c15t-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-geist-mono: "Geist Mono","Geist Mono Fallback";
  --font-inter: "inter","inter Fallback";
  --font-paper-mono: "paperMono","paperMono Fallback";
  --font-arizona: "arizonaFlare","arizonaFlare Fallback";
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;
  --color-red-600: #e40014;
  --color-green-800: #016630;
  --color-blue-500: #3080ff;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-600: #4a5565;
  --color-gray-800: #1e2939;
  --color-neutral-100: var(--color-neutral-100);
  --color-neutral-200: var(--color-neutral-200);
  --color-neutral-300: var(--color-neutral-300);
  --color-neutral-400: var(--color-neutral-400);
  --color-neutral-500: var(--color-neutral-500);
}

Do's and Don'ts

Do

• Do reserve the accent #18E299 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in ui-serif, Georgia, serif with tight tracking (-.01em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 100, 400, 500, 600, 700, 800, 900.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #0C8C5E;
  --color-accent: #18E299;
  --color-background: #FFFFFF;
  --color-surface: #FAF8F5;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #485450;
  --color-border: #EBE9E6;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAF8F5;
  --color-surface-container: #F9F6F3;
  --color-surface-container-high: #F3F4F6;
  --color-surface-container-highest: #EBE9E6;
  --font-sans: Geist Mono;
  --font-size-display: 50px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 20px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.4px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-pill: 50%;
  --shadow-md: 0 0 0 1px rgb(/10%),0 3px 0 rgb(/10%);
  --space-xs: 5px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --font-display: ui-serif, Georgia, serif;
  --tracking-display: -.01em;
  --tracking-label: .02em;
  --container-max: 1088px;
}