Mintlify

Warm light-first canvas — #fefdfb primary background paired with #faf8f5 invert/section panel and #121715 near-black foreground doing the dominant reading work. Secondary text descends through cool grays: #717d79 (tertiary) → #969e9b (muted) → #cfcdca (neutral-300) for progressive de-emphasis. Accent is emerald #0c8c5e (the single brand-tier color, measured 41 occurrences) with amber #ffb100 as a rare secondary highlight — both appearing as small indicators and never as broad fills. Inline links use a measured blue #476cff.

• Near-ivory background pair #fefdfb (body) + #faf8f5 (sections/panels) — never pure #ffffff; the warmth is the brand
• Near-black #121715 foreground (Inter weight 400/500) handling the dominant reading layer at 4.5+ contrast on the paper canvas
• Cool-gray descender #717d79 → #969e9b → #cfcdca for metadata, captions, de-emphasized labels and placeholder text
• Emerald #0c8c5e is the single brand-tier accent — reserved for active states, key links and emphasis; surface area kept under ~2%
• Amber #ffb100 as a rare secondary accent (measured 11 occurrences); inline prose links use blue #476cff. Neither is decorative wallpaper

linear-gradient(106deg, rgba(68, 174, 255, 0.5) 0%, rgba(24, 226, 153, 0.5) 35%, rgba(186, 255, 36, 0.5) 65%, rgba(24, 226, 153, 0.5) 100%)
linear-gradient(rgba(0, 0, 0, 0) 55%, lab(100 0 0) 96%)
linear-gradient(to right, lab(100 0 0) 0%, rgba(0, 0, 0, 0) 71%)

• Three families with strict jobs. Body/UI: Inter Variable (self-hosted, preloaded /_next/static/media/InterVariable.ttf). Display headings: ABC Arizona Flare (serif, .otf) — headings ONLY, never body. Micro-labels: Paper Mono (.woff2) at 12px. Code/kbd: Geist Mono.
• Weight ladder is narrow: 400 (reading) / 500 (UI labels, dense controls, medium emphasis). Mintlify uses no 600/700 in the captured set — do not introduce them.
• Display headings use Arizona Flare at 36px (line-height 40px, tracking -0.72px) and Inter at heading scale: 50px hero (Arizona Flare, line-height 52px, tracking -2px), 35-36px (tracking -0.35 / -0.72px), 24px (tracking -0.24px).
• Body is Inter 16px / line-height 24px / letter-spacing normal. Secondary body 14-18px. Headings tighten tracking as size grows (negative px); body stays at normal tracking.
• Eyebrows, captions and metadata are Paper Mono 12px / weight 500 / line-height 16px with POSITIVE letter-spacing 0.24px — the technical micro-label voice. Never set body in mono.
• No italic for emphasis — shift weight 400→500 instead. The serif (Arizona Flare) carries editorial character at display scale; it is not a substitute for italic.
• Paragraph max ~60-70 ch at body 16px for comfortable docs reading; mono labels stay short (single line) at 12px.

• 4px base unit. Scale (measured): 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32 / 40 px. The 16px step is the workhorse (highest frequency), 4 / 8 / 12 dominate micro-rhythm.
• Container max-widths are tiered: 432px (narrow content clusters) / 664px (prose column) / 1024px (primary page rail). Content-first means the 664px reading column is sacred — do not stretch prose to full width.
• Section vertical rhythm leans on 32 / 40px blocks on desktop; tighten to 20-24px on mobile. Driven by content density, not fixed section count.
• Card/panel padding: 16-24px desktop, 12-16px mobile. Always pick from the scale; no magic numbers.
• Gutter values for flex/grid: 4 / 8 / 12 / 16 / 24 / 32 px (measured). Grid columns commonly gap at 16px; tight flex clusters at 4-8px.

• Primary structure is a 1px solid hairline border (measured 253 occurrences, the only border width) in low-opacity black — reach for the border before any shadow.
• Drop shadows are near-invisible: the single captured shadow is a layered stack at 0.01-0.06 opacity with a 1px spread ring (`rgba(0,0,0,0.06) 0 0 0 1px`) plus barely-there blur layers. Never a bloom or halo.
• Layering depth comes from the background-shift #fefdfb → #faf8f5 plus border weight, not from stacked shadow.
• Section panels and tables are delimited by hairlines on a warm background; popovers (e.g. code tooltips) use a soft `rgba(0,0,0,.08) 0 1px 4px` shadow only.

• Radius scale is small and measured: 2 / 4 / 6 / 12 px. The 4px radius is the workhorse (freq 55); 6px for slightly softer cards; 12px reserved for larger panels and top-corner-only treatments (perCorner topLeft/topRight 12, bottom 0).
• Buttons and inputs default to 4-6px radius; larger feature cards to 12px. Avoid full-pill shapes except for small indicator badges.
• Icons are stroke-based at 1.5-2px weight; no filled or duotone variants — matching the clean, line-led docs aesthetic.
• Tap targets minimum 40×40px on desktop, 44×44 on touch.

• button-primary

  backgroundColor

  #0c8c5e

  textColor

  #faf8f5

  radius

  6px

  padding

  8px 14px

  border

  1px solid transparent

  boxShadow

  none

  fontWeight

  500

  fontFamily

  Inter

  fontSize

  14px

  lineHeight

  16px

  Tailwind

  Copy

  inline-flex items-center gap-2 rounded-[6px] bg-[#0c8c5e] px-3.5 py-2 text-[14px] font-medium text-[#faf8f5] transition-colors duration-[150ms] ease-[cubic-bezier(0,0,0.2,1)] hover:bg-[#0a7a52] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0c8c5e] focus-visible:ring-offset-2 focus-visible:ring-offset-[#fefdfb]

• button-secondary

  backgroundColor

  #fefdfb

  textColor

  #121715

  radius

  6px

  padding

  8px 14px

  border

  1px solid #cfcdca

  boxShadow

  none

  fontWeight

  500

  fontFamily

  Inter

  fontSize

  14px

  Tailwind

  Copy

  inline-flex items-center gap-2 rounded-[6px] border border-[#cfcdca] bg-[#fefdfb] px-3.5 py-2 text-[14px] font-medium text-[#121715] transition-colors duration-[150ms] ease-[cubic-bezier(0,0,0.2,1)] hover:bg-[#faf8f5] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0c8c5e] focus-visible:ring-offset-2 focus-visible:ring-offset-[#fefdfb]

• card-surface

  backgroundColor

  #faf8f5

  textColor

  #121715

  radius

  12px

  padding

  24px

  border

  1px solid #cfcdca

  boxShadow

  none

  Tailwind

  Copy

  rounded-[12px] border border-[#cfcdca] bg-[#faf8f5] p-6 text-[#121715] transition-colors duration-[150ms] ease-[cubic-bezier(0,0,0.2,1)] hover:border-[#969e9b]

• input-field

  backgroundColor

  #fefdfb

  textColor

  #121715

  radius

  6px

  padding

  8px 12px

  border

  1px solid #cfcdca

  boxShadow

  none

  fontFamily

  Inter

  fontWeight

  400

  fontSize

  16px

  lineHeight

  24px

  Tailwind

  Copy

  w-full rounded-[6px] border border-[#cfcdca] bg-[#fefdfb] px-3 py-2 text-[16px] leading-[24px] text-[#121715] transition-colors duration-[150ms] ease-[cubic-bezier(0,0,0.2,1)] placeholder:text-[#969e9b] focus-visible:border-[#0c8c5e] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0c8c5e]/30

• eyebrow-label

  color

  #717d79

  fontFamily

  Paper Mono

  fontWeight

  500

  fontSize

  12px

  lineHeight

  16px

  letterSpacing

  0.24px

  textTransform

  uppercase

  Tailwind

  Copy

  font-mono text-[12px] font-medium uppercase leading-[16px] tracking-[0.24px] text-[#717d79]

• link-inline

  color

  #476cff

  textDecoration

  none

  textDecorationThickness

  1px

  textUnderlineOffset

  2px

  transition

  text-decoration 0.2s ease

  Tailwind

  Copy

  text-[#476cff] no-underline underline-offset-2 transition-[text-decoration] duration-[200ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:underline focus-visible:outline-none focus-visible:underline focus-visible:decoration-[#0c8c5e]

• Two primary easings carry interactive work: cubic-bezier(0, 0, 0.2, 1) (ease-out, freq 95) and cubic-bezier(0.4, 0, 0.2, 1) (standard, freq 91). Use these for hovers and color/opacity transitions.
• Reveal signature: cubic-bezier(0.22, 1, 0.36, 1) at 0.7s on transform — the expressive entrance curve. Reserve it for scroll-triggered reveals, not micro-interactions.
• Six durations captured: 0.1 / 0.15 / 0.2 / 0.3 / 0.5 / 0.7s. Most state changes sit at 0.15s; 0.7s is for reveals only. Do not invent durations outside this set.
• color/background-color/border-color is the most-animated property group — keep hover feedback to property-color fades, not layout shifts.
• useReducedMotion mandatory: the extract includes a `(prefers-reduced-motion: reduce)` media query — all transform/opacity reveals collapse to instant or opacity-only.
• Spring animations forbidden — deterministic cubic-bezier or linear only.
• No loop animations except the explicit 40s linear stats marquee and intentional loaders.

• Tabs for switching between code-language or doc-version views — the docs-platform default, with a measured tabs-trigger active state (background + text shift).
• Accordion: single-open for FAQ; multi-open for deeply nested navigation/sidebar groups.
• Tooltips (incl. code twoslash popovers) reveal on hover + focus with a soft `rgba(0,0,0,.08) 0 1px 4px` shadow; dismiss instantly on blur.
• Modals for destructive confirmations; slide-over drawers for mobile nav; never nested modals.
• Search is first-class (AI-native platform) — prominent, keyboard-invokable (Cmd/Ctrl+K) entry into docs search.
• Form validation: inline below field on blur; emerald #0c8c5e for valid/active, no color-only error signaling.
• Empty states: 12px Paper Mono caption + one-line Inter copy + a 500-weight action. No illustrations.
• Loading states: skeleton on warm paper for content; inline spinner for buttons. No full-page overlays.

Desktop-first because the primary surface is documentation read on wide displays, but the reading column is content-first at every tier — the 664px prose rail and 1024px page rail reflow rather than restructure. Mobile collapses the sidebar into a drawer and stacks the same content; it never invents an alternate architecture. Observed media queries include (min-width: 48rem) and (min-width: 64rem) plus (hover: hover) and (prefers-reduced-motion: reduce).

• Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder (confirmed in extract).
• Container tiers: 432 → 664 → 1024 px. The 664px prose column is the reading anchor; never stretch long-form text beyond it.
• Hover-dependent affordances guarded by (hover: hover); touch devices get always-visible controls.
• Tap target minimum 44×44 on touch; 40×40 on pointer.
• Typography scales proportionally: hero 50 → ~36 → ~28; Arizona Flare display tightens tracking at larger sizes only, relaxing as it shrinks.

• focus-visible: 2px emerald (#0c8c5e) ring with a 2px offset on the warm #fefdfb background. Mandatory on every interactive element.
• All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions (hover-only is gated behind (hover: hover)).
• Color contrast: #121715 on #fefdfb ≈ 16:1 (AAA); tertiary #717d79 on #fefdfb ≈ 4.6:1 (AA). Muted #969e9b is decorative/placeholder only — never body text on the paper background.
• ARIA labels on icon-only buttons; aria-expanded on accordions and nav groups; aria-live='polite' on search results and status toasts.
• Motion respects prefers-reduced-motion (present in the extract) — reveals reduce to opacity-only or disable.
• Inline links carry a visible affordance beyond color (underline on hover/focus) — never blue-text-only, to avoid color-only signaling.
• Tap targets minimum 44×44 on touch; 40×40 on pointer.
• Form errors announced via aria-describedby on the associated input; never color-only.

Built on Next.js (assets served from /_next/static/media/, self-hosted fonts preloaded). No explicit animation library name surfaced in the extract (libraries: []), but the motion profile — transform/opacity transitions at 0.15-0.7s on cubic-bezier(0,0,0.2,1) and (0.22,1,0.36,1) — matches a Framer-Motion-style reveal system. Images are predominantly lazy-loaded SVGs (logos, doc previews); only the above-fold hero preview loads eagerly.

• Self-host fonts via next/font or static media: InterVariable.ttf, ABCArizonaFlare_Regular.otf, PaperMono.woff2 — all preloaded with display: swap
• Scroll reveals: transform translate/scale at duration 0.7 on ease [0.22, 1, 0.36, 1]; micro-interactions at 0.15 on [0, 0, 0.2, 1]
• useReducedMotion guard wraps every reveal — honor the (prefers-reduced-motion: reduce) query present in the source
• Next/Image with explicit sizes; loading='lazy' on all logos/previews, priority only on the above-fold hero
• Prefer inline SVG for logos and doc-preview art (the source ships preview-light.svg / preview-dark.svg per theme) — no raster heroes

• Use the warm #fefdfb / #faf8f5 paper pairing for all surfaces — never substitute pure #ffffff.
• Reserve ABC Arizona Flare (serif) for display headings only; keep Inter for body/UI and Paper Mono for 12px micro-labels.
• Draw structure with 1px hairline borders before reaching for any shadow.
• Keep emerald #0c8c5e under ~2% of the surface — active states, key links, emphasis only.
• Set eyebrows/metadata in Paper Mono 12px with positive 0.24px tracking, uppercase.
• Default interactive motion to 0.15s on cubic-bezier(0, 0, 0.2, 1); reserve the 0.7s cubic-bezier(0.22, 1, 0.36, 1) curve for scroll reveals.
• Anchor long-form text to the 664px prose column; pass every page through useReducedMotion before shipping.

• Never set body or UI copy in ABC Arizona Flare — the serif lives at heading scale only.
• Never flatten the background to #ffffff — the warm-paper tone is the brand's reading signature.
• Never escalate emerald #0c8c5e (or amber #ffb100) into broad fills or button-everywhere usage — scarcity is the point.
• Never substitute 600/700 font weights — the captured ladder is 400 / 500 only.
• Never invent durations outside {0.1, 0.15, 0.2, 0.3, 0.5, 0.7}s or easings beyond the captured six.
• Never replace the 1px hairline structure with drop-shadow-floated cards — this is a flat, border-first system.
• Never animate `height: auto`; use measured transforms or opacity for reveals.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
• Spacing base 4px, scale 4/6/8/10/12/14/16/20/24/28/32/40.
• Container tiers 432 / 664 / 1024 px — prose anchored at 664px.
• Three families: Inter Variable (body/UI) + ABC Arizona Flare (display serif, headings only) + Paper Mono (12px labels); Geist Mono for code.
• Weight ladder strictly 400 / 500.
• Motion: six captured durations (0.1 / 0.15 / 0.2 / 0.3 / 0.5 / 0.7s) and six easings (cubic-bezier(0,0,0.2,1) primary, (0.4,0,0.2,1), (0.22,1,0.36,1) reveal, (0,0,0,1), (0.23,1,0.32,1), linear). No springs.
• Radius scale: 2 / 4 / 6 / 12 px. Border width: 1px hairline only.

• Background audit: surfaces use #fefdfb / #faf8f5, never #ffffff.
• Font-family grep: Arizona Flare appears only on heading-scale selectors; body/UI is Inter; 12px labels are Paper Mono.
• Font-weight grep: only 400 and 500 appear — no 600/700.
• Accent audit: emerald #0c8c5e (and amber #ffb100) cover under ~2% of rendered surface; never used as full-section fills.
• Spacing grep: no values outside the 4/6/8/10/12/14/16/20/24/28/32/40 ladder.
• Border audit: structure delimited by 1px solid hairlines; drop shadows only on popovers, ≤ 0.08 opacity.
• Transition grep: timing-functions draw from {cubic-bezier(0,0,0.2,1), (0.4,0,0.2,1), (0.22,1,0.36,1), (0,0,0,1), (0.23,1,0.32,1), linear}; durations from {0.1, 0.15, 0.2, 0.3, 0.5, 0.7}s.
• Container audit: long-form prose never exceeds the 664px reading column; page rail ≤ 1024px.
• Image audit: loading='lazy' on every non-hero image; SVG-first for logos/previews; priority only on the above-fold hero.
• Contrast audit: body text on the paper background ≥ 4.5:1 (WCAG AA); #969e9b restricted to placeholder/decorative use.