SaaS analytics site and app: design recipe

DesktopTabletPhone

SiteApp

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).

UI kit, page and dashboard blocks

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

Fonts

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

Icons

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

Color scales for the site, charts and states

Also fits: Colormind, uiGradients, Realtime Colors, ColorBox (Lyft).

Subtle backgrounds

Also fits: Hero Patterns, Pattern Craft, MagicPattern, fffuel.

Illustrations

Also fits: React Kawaii, DrawKit, IRA Design, Shapefest.

Logos for 'works with' and integrations

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

App screenshots in device frames

Also fits: Mockuuups Studio, Shots, MockUPhone.

Fake data while building

Also fits: Lorem Picsum, Mockaroo.

Favicon and social preview image

Also fits: Takumi, 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: SaaS analytics site and app (AgentGid)

For an analytics product: the marketing site (hero, features, pricing, FAQ) and the signed-in app (KPIs, charts, tables). Look: minimal, flat, corporate, monochrome.
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 Geist 600, body Geist, code Geist Mono (Google Fonts, SIL OFL; in Next.js load them with next/font/google). CSS: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400&display=swap
- Colors (light): background #fcfcfd, surface #f9f9fb, border #d9d9e0, text #1c2024, muted #60646c, accent #3e63dd (hover #3358d4, soft #edf2fe). Scales: Radix slate + indigo; dark values in tokens.json.
- Type scale: 16px base, ratio 1.25: xs 10.0px, sm 13.0px, base 16.0px, lg 20.0px, xl 25.0px, 2xl 31.0px, 3xl 39.0px, 4xl 49.0px, 5xl 61.0px
- Radius 10px (sm 5, lg 15); 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/saas-analytics/starter/ · tokens: https://agentgid.com/assets/recipes/saas-analytics/starter/tokens.css, https://agentgid.com/assets/recipes/saas-analytics/starter/tailwind.css, https://agentgid.com/assets/recipes/saas-analytics/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:38 UTC): https://agentgid.com/assets/recipes/saas-analytics/saas-analytics-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 motion  # Motion (MIT)
- npm install recharts  # Recharts (MIT)
- npm install @tanstack/react-table  # TanStack Table (MIT)
- npm install clsx  # clsx (MIT)
- npm install tailwind-merge  # Tailwind Merge (MIT)
- npm install next-themes  # next-themes (MIT)

## Content sources
### UI kit, page and dashboard blocks
- 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)
- Flowbite (UI kits and website templates). Open-source Tailwind CSS component library (MIT) with copy-paste HTML components, plugin JS and framework guides; a paid Flowbite Pro adds blocks and templates. Price: free tier; commercial use OK; no credit needed. Style: minimal, flat, corporate.
  Connect: official MCP server https://flowbite.com/docs/getting-started/mcp/; npm flowbite.
  Get files: npm install flowbite (Tailwind v4 plugin), or CDN flowbite.min.css and flowbite.min.js from cdn.jsdelivr.net/npm/flowbite; copy component HTML from flowbite.com/docs/components/. Official MCP: npx flowbite-mcp. Repo has llms.txt (html, css).
  Not allowed: MIT covers the open-source library only; Pro is under the EULA
  Not allowed: Docs text is CC BY 3.0 (not the code)
  Rule: Keep the MIT copyright and permission notice in copies of the library code.
  Rule: Flowbite Pro is not MIT; its EULA applies. Do not copy Pro blocks into a site without a Pro licence.
  Rule: The Flowbite name and logos are trademarks of Bergside Inc.
  License: https://flowbite.com/docs/getting-started/license/ (checked 2026-10-21; details: https://agentgid.com/assets/flowbite/)
  Next.js: see https://agentgid.com/assets/flowbite/agent.md (official example: https://flowbite.com/docs/getting-started/next-js/)
### Fonts
- 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)
### 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 scales for the site, charts and states
- 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)
- Coolors (Color palettes and gradients). Online palette generator and palette library; build, save and export color palettes. Price: free tier; commercial use OK; no credit needed; no AI training on its content.
  Connect: download from https://coolors.co (no API).
  Get files: Manual: generate a palette at coolors.co, then use Export (copy hex codes, CSS, etc.). No public bulk download (css, json, svg, png).
  Not allowed: No redistribution of palettes stand-alone or as a compilation
  Not allowed: No scraping beyond reasonable use; no AI training
  Rule: Do not redistribute Coolors palettes on a stand-alone basis or as a compilation.
  Rule: Do not bulk download/parse the site or use it to train ML or AI models.
  License: https://coolors.co/terms-of-service (checked 2026-10-21; details: https://agentgid.com/assets/coolors/)
### Subtle backgrounds
- Pattern Monster (Backgrounds, patterns and shapes). Seamless SVG pattern generator (320+ patterns): customize colors, stroke and angle, then copy CSS/SVG or download tileable SVG/PNG; also a REST API and MCP server. Price: free tier; commercial use OK; no credit needed. Style: geometric, minimal, monochrome, abstract.
  Connect: official MCP server https://mcp.pattern.monster/mcp; API docs https://pro.pattern.monster/api (API key needed). Limits: Free key 500 req/month; Pro 50,000 req/month; 60 req/min and 10 req/10 s for all keys.
  Get files: API: GET https://api.pattern.monster/v1/patterns/{slug}/svg?colors=..&tile=true with x-api-key header; or copy CSS/SVG in the web generator; or MCP at https://mcp.pattern.monster/mcp (svg, png, css, json).
  Not allowed: Free API key limited to 500 requests per month
  Not allowed: Premium patterns need the Pro key
  Rule: A link back to pattern.monster is appreciated but not required.
  Rule: Cache API responses instead of calling per page view; stay within 60 requests per minute.
  License: https://github.com/catchspider2002/svelte-svg-patterns/blob/master/README.md (checked 2026-10-21; details: https://agentgid.com/assets/pattern-monster/)
  Node.js: see https://agentgid.com/assets/pattern-monster/agent.md (official example: https://pro.pattern.monster/api)
### Illustrations
- Craftwork (3D and isometric illustrations). Marketplace of design packs by independent designers (3D illustrations and icons, UI kits, mockups) with free packs and a subscription, usable via Figma, Blender, PNG and an MCP server. Price: free tier; commercial use OK; no AI training on its content. Style: 3d, colorful, minimal, gradient.
  Connect: download from https://craftwork.design (no API). Limits: Pro: 1,000 MCP downloads a month.
  Get files: Download packs from https://craftwork.design (free account; Pro for the full library) or use the Craftwork MCP from Claude Code, Cursor or Codex (figma, png).
  Not allowed: Commercial License covers individuals and companies up to 20 people; larger companies need the Extended License.
  Not allowed: Demo files are for previews only.
  Rule: Do not sell, share or give away the asset files themselves.
  Rule: Free packs: no resale, redistribution, use in a product you sell, or as a logo/trademark.
  Rule: Do not train AI models on Craftwork files; products you sell (templates, UI kits) need the Extended License.
  License: https://craftwork.design/license (checked 2026-10-21; details: https://agentgid.com/assets/craftwork/)
### Logos for 'works with' and 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/)
- SVGL (Company and technology logos). Library of SVG logos of companies and technologies, with a free open JSON API and a web gallery. Price: free; commercial use with conditions; credit depends on the item; ship inside your app with conditions.
  Connect: API docs https://svgl.app/docs/api. Limits: Request volume is capped to prevent abuse; docs recommend caching responses.
  Get files: GET https://api.svgl.app (JSON list; ?search=, ?limit=, /category/<name>) and https://api.svgl.app/svg/<file>.svg for raw SVG; or download from svgl.app (svg, json).
  Not allowed: Open API, no key; request volume capped
  Not allowed: Do not clone SVGL with the API
  Not allowed: Check each brand's trademark rules
  Rule: The MIT license covers the repo code, not each brand's trademark; SVGL gives no trademark terms, so follow each brand's own guidelines.
  Rule: Do not use the API to build the same product as SVGL.
  Rule: Cache API responses on your side.
  License: https://github.com/pheralb/svgl (checked 2026-10-21; details: https://agentgid.com/assets/svgl/)
  Node.js: see https://agentgid.com/assets/svgl/agent.md (official example: https://svgl.app/api)
### App screenshots in device frames
- LS Graphics free mockups (Mockups and device frames). Free section of ls.graphics (about 370 items) with Photoshop and Figma mockup files (devices, branding, print) with smart layers, plus an online editor. Price: free tier; commercial use OK. Style: realistic, minimal.
  Connect: download from https://ls.graphics/free-mockups (no API).
  Get files: Manual download of PSD/Figma files from https://ls.graphics/free-mockups; online editing at /mockups/edit-online (figma).
  Not allowed: No redistribution or resale of the files
  Not allowed: Exported images may be used in commercial and client projects
  Rule: Do not redistribute, resell, lease or sublicense the mockup files.
  Rule: Do not modify and resell the files as your own work.
  License: https://ls.graphics/terms-of-service (checked 2026-10-21; details: https://agentgid.com/assets/ls-graphics-free-mockups/)
### Fake data while building
- Faker (faker.js) (Placeholder images, data and text). JavaScript library that generates fake but realistic data (names, addresses, text, numbers, images, 70+ locales) in Node and the browser. Price: free; commercial use OK; no credit needed.
  Connect: npm @faker-js/faker.
  Get files: npm install @faker-js/faker --save-dev, then import { faker } from '@faker-js/faker' (json).
  Not allowed: Keep the MIT notice when redistributing the library
  Rule: Keep the MIT copyright notice with copies of the library.
  Rule: Generated data is fake; do not present it as real.
  License: https://raw.githubusercontent.com/faker-js/faker/next/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/faker-js/)
  Node.js: see https://agentgid.com/assets/faker-js/agent.md (official example: https://fakerjs.dev/guide/usage)
- JSONPlaceholder (Placeholder images, data and text). Free fake REST API with 100 posts, 500 comments, 100 albums, 5000 photos, 200 todos and 10 users, for tests and prototypes. Price: free; commercial use OK; shipping inside an app unclear.
  Connect: API docs https://jsonplaceholder.typicode.com/guide/. Limits: No limit stated.
  Get files: GET https://jsonplaceholder.typicode.com/posts, /comments, /albums, /photos, /todos, /users (json).
  Not allowed: No terms stated
  Not allowed: Intended for testing and prototypes
  Rule: Use for docs, tutorials, code examples, prototypes and local tests; it is not a production backend.
  Rule: Writes are faked and not saved.
  License: https://github.com/typicode/jsonplaceholder (checked 2026-10-21; details: https://agentgid.com/assets/jsonplaceholder/)
### 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)

## Agent Skills (optional, read before installing: skills can run scripts)
- npx skills add wshobson/agents --skill kpi-dashboard-design  # kpi-dashboard-design
- npx skills add openclaw/clawhub --skill building-dashboards  # building-dashboards
- npx skills add nexu-io/html-anything --skill dashboard  # dashboard
- npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard  # react-vite-dashboard
- npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts  # lieflat-charts
- npx skills add zebbern/claude-code-guide --skill chart-image  # chart-image

## 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/saas-analytics/ · all recipes: https://agentgid.com/assets/recipes/

Other recipes

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