Documentation site: design recipe

DesktopTabletPhone

Full screen New tab ↗

A starter page built from this recipe's tokens: plain HTML and CSS, no build step, code under MIT. Copy it, or let your agent port it to your stack. Demo names and numbers are made up.

Design tokens

Files: tokens.css (CSS variables, light and dark) · tailwind.css (Tailwind v4 @theme) · tokens.json · Google Fonts CSS

Pairings, scales and ratios are AgentGid editors' choices; color values are copied from Radix Colors (MIT).

Fonts (text and code)

Also fits: Fira Code, IBM Plex, Hack, Bunny Fonts.

Icons

Also fits: Tabler Icons, Bootstrap Icons, Phosphor Icons, Remix Icon.

Color scale

Also fits: Coolors, Colormind, uiGradients, Realtime Colors.

UI components

Also fits: Flowbite, HeroUI, Preline UI, HyperUI.

Logos of integrations

Also fits: SVGL, Brandfetch (Logo API, Brand API), Logo.dev, SVG Logos (gilbarbara/logos, svgporn).

Favicon and social preview image

Also fits: RealFaviconGenerator.

Libraries

Agent Skills for the design work

Before you call it done

• Add credits for every source whose license asks for them (the brief lists each credit line).
• Check accessibility and contrast with axe-core, for example through Playwright, and fix what it reports.
• Run Lighthouse on the built page and check the layout at phone width and on desktop.

Playwright (JavaScript) npm install @playwright/test · axe-core npm install axe-core · Lighthouse npm install lighthouse

The brief

# Design recipe: Documentation site (AgentGid)

For product or API docs: readable type, code, navigation, search. Look: minimal, monochrome, outline, flat.
Use these sources; each was checked on its official pages and its license allows commercial use. Follow each source's license line and credit line. Prefer the first pick in each slot.

## Design tokens (AgentGid editors' choice; values from Radix Colors and Google Fonts)
- Fonts: headings IBM Plex Sans 600, body IBM Plex Sans, code JetBrains Mono (Google Fonts, SIL OFL; in Next.js load them with next/font/google). CSS: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap
- Colors (light): background #fdfdfc, surface #f9f9f8, border #dad9d6, text #21201c, muted #63635e, accent #12a594 (hover #0d9b8a, soft #e0f8f3). Scales: Radix sand + teal; dark values in tokens.json.
- Type scale: 16px base, ratio 1.2: xs 11.0px, sm 13.5px, base 16.0px, lg 19.0px, xl 23.0px, 2xl 27.5px, 3xl 33.0px, 4xl 40.0px, 5xl 48.0px
- Radius 6px (sm 3, lg 9); spacing on a 4px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- Text on accent buttons: white. Keep body text at least 4.5:1 against its background (WCAG 2.2 AA).
- Starter page built from these tokens (HTML + CSS, MIT): https://agentgid.com/assets/recipes/docs-site/starter/ · tokens: https://agentgid.com/assets/recipes/docs-site/starter/tokens.css, https://agentgid.com/assets/recipes/docs-site/starter/tailwind.css, https://agentgid.com/assets/recipes/docs-site/starter/tokens.json
- Same starter as a Next.js project (App Router, Tailwind CSS v4, lucide-react, next/font; builds with Next 16.4.0, checked 2026-10-21 16:33 UTC): https://agentgid.com/assets/recipes/docs-site/docs-site-next.zip. Unzip, `npm install`, `npm run dev`; AGENTS.md inside is this brief.

## Libraries
- npm install next  # Next.js (MIT)
- npm install tailwindcss  # Tailwind CSS (MIT)
- npm install shiki  # Shiki (MIT)
- npm install fuse.js  # Fuse.js (Apache-2.0)

## Content sources
### Fonts (text and code)
- Google Fonts (Fonts). Open-source font catalog with a Developer API for metadata, a CSS API and the Google Design MCP. Price: free; commercial use OK; no credit needed; ship inside your app with conditions.
  Connect: official MCP server https://design.googleapis.com/mcp; API docs https://developers.google.com/fonts/docs/developer_api (API key needed). Limits: API key required; quota not stated.
  Get files: Developer API: GET https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY returns a files map of TTF URLs on fonts.gstatic.com (add capability=WOFF2 for woff2). CSS API: https://fonts.googleapis.com/css?family=.. . Whole collection: https://github.com/google/fonts/archive/main.zip (needs no key) (ttf, woff2).
  Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0; each family folder has its own license file.
  Not allowed: OFL fonts cannot be sold by themselves, only bundled with software.
  Not allowed: Modified OFL fonts cannot use the Reserved Font Name.
  Rule: Keep the license file with font files you bundle in an app.
  Rule: Respect Reserved Font Names when you modify a font.
  License: https://github.com/google/fonts (checked 2026-10-10; details: https://agentgid.com/assets/google-fonts/)
  Next.js: see https://agentgid.com/assets/google-fonts/agent.md (official example: https://nextjs.org/docs/app/getting-started/fonts)
- Fontsource (Fonts). Open-source fonts packaged as individual npm packages for self-hosting. Price: free; commercial use with conditions; credit depends on the item; ship inside your app with conditions.
  Connect: npm @fontsource/<font>.
  Get files: npm install @fontsource/<font> (static) or @fontsource-variable/<font>, then import the CSS. CDN: https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}. Metadata API: api.fontsource.org/v1/fonts (woff2).
  Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0.
  Not allowed: API hard limit is 2500 requests per 10 seconds; constant use at that rate can bring a temporary ban.
  Rule: Follow each font's own license (OFL, Apache and others).
  React: see https://agentgid.com/assets/fontsource/agent.md (official example: https://fontsource.org/docs/getting-started/install)
- JetBrains Mono (Fonts). A free, open-source monospaced typeface for developers, with code ligatures, 8 weights with italics, and a no-ligature NL variant. Price: free; commercial use OK; no credit needed.
  Connect: download from https://jetbrains.com/mono (no API).
  Get files: Download the font files from https://github.com/JetBrains/JetBrainsMono/releases/latest (also on jetbrains.com/mono) (ttf, otf, woff2).
  Not allowed: Do not sell the font files by themselves.
  Not allowed: Keep the copyright notice and OFL license text in each copy you bundle or redistribute.
  Not allowed: Derivatives must stay under the OFL.
  Rule: Keep the OFL copyright notice and license text with any font files you bundle or redistribute.
  Rule: Do not sell the font files by themselves.
  Rule: Do not use the name 'JetBrains Mono' for a modified version of the font.
  Rule: Distribute the font and any derivatives under the OFL only.
  License: https://github.com/JetBrains/JetBrainsMono/blob/HEAD/OFL.txt (checked 2026-10-14; details: https://agentgid.com/assets/jetbrains-mono/)
### Icons
- Lucide (Icons). ISC-licensed icon set (Feather fork) with packages for React, Vue, Svelte, Angular and more. Price: free; commercial use OK; no credit needed. Style: minimal, outline.
  Connect: community MCP server github.com/SeeYangZhi/lucide-icons-mcp; npm lucide-react.
  Get files: npm packages (lucide-react, @lucide/vue, @lucide/svelte, lucide-solid, @lucide/angular, lucide-static, core lucide) or static SVG/sprite/icon font; docs for LLMs at lucide.dev/llms.txt (svg).
  Not allowed: Keep the copyright and permission notice in all copies
  Rule: Keep the copyright and permission notice in all copies.
  License: https://lucide.dev/license (checked 2026-10-10; details: https://agentgid.com/assets/lucide/)
  React: see https://agentgid.com/assets/lucide/agent.md (official example: https://lucide.dev/guide/react/getting-started)
- Heroicons (Icons). MIT-licensed SVG icons from Tailwind Labs with React and Vue packages. Price: free; commercial use OK; no credit needed. Style: outline, filled.
  Connect: npm @heroicons/react.
  Get files: npm install @heroicons/react or @heroicons/vue, or copy the SVG source from heroicons.com (svg).
  Not allowed: Keep the MIT copyright and permission notice in all copies or substantial portions
  Rule: Keep the MIT copyright and permission notice in copies.
  License: https://github.com/tailwindlabs/heroicons/blob/master/LICENSE (checked 2026-10-10; details: https://agentgid.com/assets/heroicons/)
  React: see https://agentgid.com/assets/heroicons/agent.md (official example: https://raw.githubusercontent.com/tailwindlabs/heroicons/master/README.md)
### Color scale
- Radix Colors (Color palettes and gradients). Open-source color system: 12-step accessible scales with alpha, dark mode and P3 variants, shipped as CSS/JS via npm. Price: free; commercial use OK; no credit needed.
  Connect: npm @radix-ui/colors.
  Get files: npm install @radix-ui/colors (also yarn/pnpm); CDN files exist for prototyping only; docs: radix-ui.com/colors/docs/overview/installation (css, json).
  Not allowed: Keep the MIT copyright notice
  Not allowed: CDN import not recommended in production by the docs
  Rule: Keep the MIT copyright and permission notice in copies or substantial portions of the software.
  Rule: Keep the MIT copyright and permission notice.
  License: https://github.com/radix-ui/colors/blob/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/radix-colors/)
  HTML/CSS: see https://agentgid.com/assets/radix-colors/agent.md (official example: https://www.radix-ui.com/colors/docs/overview/usage)
### UI components
- shadcn/ui (UI kits and website templates). Open-source set of accessible React components and blocks that you copy into your own codebase through a CLI and registries. Price: free; commercial use OK; no credit needed. Style: minimal, monochrome, flat.
  Connect: official MCP server https://ui.shadcn.com/docs/mcp; npm shadcn.
  Get files: npx shadcn@latest init, then npx shadcn@latest add <component or block>; official MCP: pnpm dlx shadcn@latest mcp init --client claude (html, css, json).
  Not allowed: Needs React and Tailwind CSS
  Not allowed: Third-party registry items carry their own licences
  Rule: Keep the MIT notice if you redistribute the code.
  Rule: Third-party registries listed in the directory have their own licences; check each.
  License: https://raw.githubusercontent.com/shadcn-ui/ui/main/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/shadcn-ui/)
  Next.js: see https://agentgid.com/assets/shadcn-ui/agent.md (official example: https://ui.shadcn.com/docs/installation/next)
- Tremor (UI kits and website templates). Open-source React and Tailwind components for charts and dashboards (copy-paste or @tremor/react), plus blocks and templates at blocks.tremor.so. Price: free; commercial use OK. Style: minimal, corporate, flat.
  Connect: npm @tremor/react.
  Get files: Copy-paste components from tremor.so, or npm i @tremor/react; see the installation guide on tremor.so (html, css).
  Not allowed: Blocks and templates at blocks.tremor.so not checked
  Rule: Keep the Apache-2.0 licence text and any NOTICE if you redistribute the source.
  Rule: Check the licence of blocks and templates at blocks.tremor.so separately.
  License: https://raw.githubusercontent.com/tremorlabs/tremor/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/tremor/)
  Next.js: see https://agentgid.com/assets/tremor/agent.md (official example: https://www.tremor.so/docs/getting-started/installation/next)
### Logos of integrations
- Devicon (Company and technology logos). Icon set of programming languages and development tools, usable as icon font or SVG files (npm, jsDelivr). Price: free; commercial use with conditions; credit depends on the item; ship inside your app with conditions.
  Connect: npm devicon.
  Get files: npm install devicon, or <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"> for the icon font, or copy SVG files from the GitHub repo (svg, css).
  Not allowed: Follow each brand's own logo policy
  Not allowed: Usage does not imply endorsement
  Rule: Each logo stays the trademark of its owner; follow the company's brand policy.
  Rule: Do not imply endorsement by the brands or Devicon.
  Rule: Keep the MIT copyright notice when redistributing the package.
  Rule: The code is MIT; each logo stays its owner's trademark: use it only to refer to that product, unaltered.
  License: https://github.com/devicons/devicon/blob/master/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/devicon/)
### Favicon and social preview image
- Satori (Favicons and social preview images). Library that converts HTML/JSX and CSS to SVG (lays out with flexbox); commonly used to generate Open Graph and social card images, PNG via Sharp or Resvg. Price: free; commercial use OK.
  Connect: npm satori.
  Get files: npm i satori; call satori(element, {width, height, fonts}) to get an SVG string; convert to PNG with Sharp or Resvg (svg, png).
  Not allowed: Flexbox and a subset of CSS only
  Not allowed: You must supply font data
  Rule: MPL-2.0: modifications to Satori's own files must be shared under MPL; your own code can stay under your terms.
  Rule: Fonts must be passed as ArrayBuffer/Buffer; text will not render without a font.
  License: https://raw.githubusercontent.com/vercel/satori/main/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/satori/)
  Node.js: see https://agentgid.com/assets/satori/agent.md (official example: https://github.com/vercel/satori)
- Takumi (Favicons and social preview images). Rust layout engine that renders JSX, HTML and CSS to images (PNG, JPEG, WebP, ICO, SVG, animated), mainly for OG images, and to PDF, without a headless browser. Price: free; commercial use OK.
  Connect: npm takumi-js.
  Get files: bun i takumi-js (or npm); packages: takumi-js (images/SVG/animation), takumi-pdf, @takumi-rs/core and @takumi-rs/wasm; docs at takumi.kane.tw/docs (png, svg).
  Not allowed: Choose MIT or Apache-2.0
  Rule: Keep the copyright and permission notice (MIT) or the Apache-2.0 notices in copies.
  License: https://github.com/kane50613/takumi (checked 2026-10-21; details: https://agentgid.com/assets/takumi/)

## Agent Skills (optional, read before installing: skills can run scripts)
- npx skills add Leonxlnx/taste-skill --skill design-taste-frontend  # design-taste-frontend
- npx skills add huytieu/COG-second-brain --skill product-ui-taste  # product-ui-taste
- npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling  # ui-styling
- npx skills add openai/skills --skill figma-create-design-system-rules  # figma-create-design-system-rules
- npx skills add android/skills --skill styles  # styles
- npx skills add fengshao1227/ccg-workflow --skill frontend-design  # frontend-design

## Before you call it done
- Add a credits section or file for every source whose license asks for credit.
- Check accessibility and contrast with axe-core (e.g. through @playwright/test) and fix what it reports.
- Run Lighthouse on the built page; check the layout at phone width (375px) and desktop.
- npm install @playwright/test  # Playwright (JavaScript)
- npm install axe-core  # axe-core
- npm install lighthouse  # Lighthouse

Recipe page: https://agentgid.com/assets/recipes/docs-site/ · all recipes: https://agentgid.com/assets/recipes/

Other recipes

Minimal SaaS landing page Playful consumer app site SaaS analytics site and app Dashboard or admin app Creative portfolio or agency site Everything for web design