The docs-platform landing that reads like a published field manual — warm stone palette, pure black ink, zero gradients, and a single sharp orange accent used like a highlighter margin note. GitBook demonstrates a rare 2026 discipline: three typographic voices from three different foundries (General Sans Variable for display, Inter for body, Geist Mono for code), each holding a strict register, paired with a radically minimal elevation grammar — only three drop shadows, all soft. Preserved native #0000ee hyperlink blue signals editorial credibility from the OSS docs-tooling cohort.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in GitBook’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Light-first editorial docs-platform canvas. Pure white #ffffff primary background with pure #000 primary ink (freq 3165) — the decisive rejection of near-black for maximum editorial contrast. Secondary text descends through a warm stone ladder: #57534d (muted) → #79716b (captions) — NOT cool slate, leans paper-adjacent. Dark regions use warm charcoal #000000 and light-on-dark surfaces use warm cream #ffffff. Typography is a strict three-foundry trinity: General Sans Variable (display voice), Inter (body reading), Geist Mono (code / tabular) — each foundry holds one register. Accent is a single signature orange #fe551b used below 1% surface area as a visual highlighter. Preserved native #0000ee hyperlink blue for inline anchors — editorial credibility signal. Elevation is minimal: three drop shadows only (shadow-xs / sm / md), no inner shadows, no rings. Zero gradients. Motion is moderate via Framer Motion.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (light-first #ffffff canvas + pure #000 primary ink + warm stone descender ladder #57534d / #79716b + warm charcoal #000000 for dark regions + warm cream #ffffff for light surfaces + signature orange #fe551b used below 1% surface + preserved native #0000ee hyperlink blue), typographic trinity (General Sans Variable for display voice paired with Inter for body and Geist Mono for code / tabular, each foundry holding exactly one register), 2px-base spacing scale with unusual 10px dominant peak, two-tier container ladder 332px narrow reading rail inside 1160px main rail, minimal three-shadow grammar (xs 0 1 2 drop, sm 0 4 12 drop, md 0 1 5 soft drop — no rings, no inner shadows), ZERO gradients, border-radius peaks at 8px (interactive) / 16px (cards) with unusual 88px 'extra' tier for large blob frames, moderate Framer Motion with color transitions only, custom md=810 breakpoint and xl=1200 breakpoint. Treat this as my project's constitution — every new component should pass as if crafted in the same studio. Apply the language, not the source brand's copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Layout
Grid
Content width
Bounded
Framing
Flat
Grid strength
Moderate
Light-first canvas — pure white #ffffff (freq 94) primary surface paired with pure #000 primary ink (freq 3165 — the editorial signature). Warm stone descender ladder: #57534d (muted text) → #79716b (captions / tertiary). Dark region backgrounds use warm charcoal #000000 with warm cream #ffffff for light-on-dark contrast. Single signature accent is orange #fe551b (freq 26 — under 1% of surface). Preserved native hyperlink blue #0000ee (freq 898) for inline anchors — editorial credibility signal inherited from the OSS docs-tooling cohort.
Mode strategylight-first
Primary reading pair: pure #000 text on #ffffff background (measured 3165 + 94 occurrences — dominant surface)
Warm stone descender: #57534d for muted body text, #79716b for captions / tertiary labels / metadata
Dark region surface: warm charcoal (cluster-merged into #000000 in current extract) for alternate-tone sections, paired with white foreground
Light cream #ffffff used as alternate light surface (reduces glare vs pure white on long-form blocks)
Signature accent orange #fe551b for single-moment emphasis (brand CTAs, highlight badges, marginal notes) — surface area stays below 1%
Preserved link colour #0000ee for inline anchors — do not substitute a branded blue
Gradients (paste-ready)
No gradients observed — radical editorial austerity. Depth is delivered through typography weight, spacing and soft drop shadow only.
Display family: General Sans Variable — Bold axis carries hero display (70/70 -1.4px letter-spacing), medium display (20/26 -0.4px), and compact headlines (16/16 -0.48px). A small-foundry variable grotesque with editorial weight; delivered via @font-face from framerusercontent.com.
Body family: Inter — 16/19.2 for standard body, 11/12.99 for fine print and metadata. Always paired with General Sans, never substituted.
Code / tabular family: Geist Mono — 14/18.2 with -0.28px letter-spacing. Reserved for code, kbd, inline snippets, version numbers, hashes. Do not substitute a generic monospace.
Three-foundry rule: General Sans / Inter / Geist Mono. Each foundry holds exactly one register. Mixing (e.g. using General Sans for body) breaks the trinity identity.
Observed size ladder: 11 / 12 / 14 / 16 / 18 / 20 / 70 px. Hero display jumps directly from sub-display (20px) to heroic (70px) — this gap is intentional editorial rhythm.
Letter-spacing in px, not em: -1.4px at 70px display, -0.48px at 16px tight UI, -0.18px at 18px body-lead, -0.28px on Geist Mono for optical alignment.
Paragraph max ~55-65 ch at body 16-18px to echo the 332px narrow reading rail.
2px base unit. Observed scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 32 / 40 px. DOMINANT usage at unusual 10px peak (freq 429 — counter-intuitive vs typical 8 or 12 grids), followed by 6 (165) / 8 (117) / 24 (75) / 14 (74).
The 10px rhythm centres the spatial identity. Keep gaps and gutters in multiples of 2 but prefer 10 as the natural beat wherever possible (e.g. 10px between icon and label, 20px between related items, 40px between sections).
Two-tier container ladder: 332px narrow reading rail (dominant content column for body copy and testimonials), 1160px main rail (product-forward feature sections, hero canvas).
Card padding: 16 / 20 / 24 / 32 px, aligned to the scale.
Section vertical rhythm: 40 / 64 / 96 px desktop, 24 / 40 / 64 mobile — multiples of 8 and 40 for major breaks.
Surface styleSoft
Default inline separation: shadow-xs drop — 'rgba(0, 0, 0, 0.25) 0px 1px 2px 0px'. Tight, used for subtle element definition against the warm surface.
Elevated cards: shadow-sm soft drop — 'rgba(0, 0, 0, 0.15) 0px 4px 12px 0px'. Use for callouts, feature cards, hover states.
Floating overlays / modals: shadow-md very soft drop — 'rgba(0, 0, 0, 0.05) 0px 1px 5px 0px'. Reserve for tooltips, dropdowns.
Do not use inner shadows, ring shadows, or asymmetric double-layer shadows — the grammar is three drop shadows and nothing else.
Do not stack shadows on a single element. Pick one per context.
Techniques
Three-shadow austerity
Only three shadow values exist in the system: shadow-xs (tight 0 1 2 @ 0.25 opacity), shadow-sm (soft 0 4 12 @ 0.15), shadow-md (diffuse 0 1 5 @ 0.05). No compounded or layered shadows. Depth is signalled primarily through typography weight and spacing, with shadow used only as a quiet separator.
Warm-surface shadow tuning
Shadow opacities (0.05 - 0.25) are tuned for the warm stone canvas — on cooler greys the same opacities would read as dirty. The warm neutrals absorb the shadow cleanly, yielding the 'printed on paper' feel central to the brand.
Full pill: 30px radius (freq 4) for status badges and tag indicators.
Exceptional 'extra' radius: 88px (freq 4) — reserved for large blob feature frames (hero-scale rounded containers). Use sparingly; the 88px blob is a signature shape, not a default.
Avoid radii between 28 and 88 — the jump is intentional; fill values dilute the blob effect.
Icons stroke-forward at 1.5-2px weight. No filled or duotone variants.
Links: preserved #0000ee for inline anchors — editorial mark, do not re-colour.
Code blocks use #000000 charcoal background with #ffffff cream foreground (Geist Mono) — warm inversion pair.
Focus rings use 2px solid #fe551b (orange) with 2px offset — visible on warm palette but respects brand.
Approachdesktop-first
Desktop-first because docs platforms are consulted most often from wide productivity displays. Custom md=810 (Framer default, matches Lightdash) and xl=1200 (tighter than Tailwind 1280) form the primary breakpoints. Narrow 332px reading rail holds across all sizes; main 1160px rail flexes with viewport.
Breakpoints: sm 640 / md 810 / lg 1024 / xl 1200 / 2xl 1536 — note custom md=810 and xl=1200.
Two-tier container: 332 narrow (reading forward) and 1160 main (product forward). Pick based on content density.
Below md 810, collapse to single column; display type scales from 70/70 down to 48/52 to 32/36.
Tap targets minimum 44×44 on touch, 40×40 on pointer.
Hide-on-mobile banned — controls reflow to drawers, not disappear.
Primary reading pair pure #000 on #ffffff = 21:1 (AAA). Secondary #57534d on white = ~7.5:1 (AAA). Caption #79716b on white = ~4.8:1 (AA for normal, AAA for large).
Orange accent #fe551b on white = ~3.4:1 — FAILS AA for normal text. Use orange as BACKGROUND with white foreground (5.7:1 AA) or on 18px+ bold text, never as body link colour.
Preserved #0000ee on white = ~8.6:1 (AAA) — the classic reason native link colour survives editorial tests.
Focus rings mandatory: 2px solid #fe551b with 2px offset for interactive elements.
Do not rely on orange alone to signal state — pair with icon + label.
prefers-reduced-motion must disable Framer Motion whileInView reveals.
Tap targets minimum 44×44 touch, 40×40 pointer.
Framer (hosting)Framer Motion@font-face delivery
GitBook ships on Framer — images served via framerusercontent.com CDN, 303 @font-face declarations in the CSSOM point to Framer's font pipeline (zero <link rel='preload'>), motion handled by Framer Motion at moderate level. No runtime Rive or Lottie observed. No CSS custom properties in the cascade; palette lives in compiled classes.
Preload General Sans Variable + Inter + Geist Mono woff2 via <link rel='preload'> for LCP optimisation
Use Framer Motion at moderate level — whileInView opacity reveals only, no translate
Adopt Tailwind custom breakpoints md=810 and xl=1200 to match the density rhythm
Enable tabular-nums on Geist Mono containers for aligned numerics
No CSS custom properties required — compiled utility classes are the token surface
Icons stroke-based at 1.5-2px weight; no filled variants
Use General Sans Variable + Inter + Geist Mono as the only three typographic voices, each holding one register.
Keep primary text pure #000 on a pure #ffffff or warm #ffffff surface — commit to the decisive contrast.
Preserve native #0000ee for inline anchors when the editorial tone demands credibility.
Use the three-shadow austerity (xs / sm / md drop shadows only).
Reserve orange #fe551b for emphasis below 1% of the viewport — single-hue discipline.
Centre the spatial rhythm on the unusual 10px peak — softer than 8, tighter than 12.
Reach for warm stone neutrals (#000000, #57534d, #79716b, #ffffff) over cool slate.
Use the 88px 'extra' radius only for large blob feature frames — sparingly, with intent.
Do not ship General Sans Variable Trial in production without commercial licensing — source delivers it via Framer CDN.
Do not add a fourth foundry. The General Sans / Inter / Geist Mono trinity is the identity.
Do not introduce gradients — GitBook's zero-gradient commitment is a signature restraint.
Do not fill surfaces with orange — under 1% is the rule.
Do not substitute cool slate for the warm stone palette — tone leans paper-adjacent intentionally.
Do not add inner or ring shadows — three drop shadows only.
Do not use translate transforms on hover — GitBook's brand stays grounded.
Typography must render with variable-weight General Sans + Inter + Geist Mono — static substitutes break the trinity.
All shadows must honour the measured rgba values exactly.
Orange accent must pass AA contrast on its surface — promote to orange-background + white text when used at body size.
Custom breakpoints md=810 and xl=1200 must be documented in the Tailwind config.
Zero-gradient rule is strict — if a gradient is needed, rebuild the layout to remove it.
Does primary body text render in pure #000 against white or warm cream, never a near-black?
Do all cards use one of the three allowed shadows (xs / sm / md drop) and nothing else?
Is the typography split across exactly three foundries (General Sans display / Inter body / Geist Mono code), each in its single register?
Is accent orange #fe551b kept below 1% of the viewport surface, always paired with an icon or label?
Does the layout pick between the 332px narrow reading rail or the 1160px main rail based on content density?
Are there ZERO gradients anywhere in the page?
Do radii follow the 4 / 8 / 16 / 88 grammar (with 28 / 30 / 88 for specialised cases)?
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 3 nodes across 2 levels, shallow to deep by color.
body2
div
button
Accessibility
Contrast matrix
26 combinations - 10 pass AA - 6 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox9.40
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0000EE
bg
#FFFFFF
APCA Lc
+88
Use
brand on background
AaThe quick brown fox9.40
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#0000EE
APCA Lc
-93
Use
background on brand
AaThe quick brown fox7.64
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#57534D
bg
#FFFFFF
APCA Lc
+87
Use
foreground on background
AaThe quick brown fox7.64
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#57534D
APCA Lc
-91
Use
background on foreground
AaThe quick brown fox6.53
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#000000
bg
#FE551B
APCA Lc
+46
Use
foreground on accent
AaThe quick brown fox6.53
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#FE551B
bg
#000000
APCA Lc
-44
Use
accent on foreground
AaThe quick brown fox4.79
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#79716B
bg
#FFFFFF
APCA Lc
+73
Use
foreground on background
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
