Playful consumer app 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).

UI kit and page blocks

Also fits: Aceternity UI, HeroUI, shadcn/ui, Cruip.

Fonts

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

Icons

Also fits: Tabler Icons, Simple Icons, Bootstrap Icons, Phosphor Icons.

Illustrations

Also fits: Mega Doodles Pack, Spline Community, Thiings, React Kawaii.

Animations (Lottie, Rive)

Also fits: Motion, useAnimations, LottieFiles, Rive.

Backgrounds

Also fits: Haikei, Pattern Craft, BGJar, Pattern Monster.

Colors and gradients

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

App screenshots in phone frames

Also fits: LS Graphics free mockups, MockUPhone.

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: Playful consumer app site (AgentGid)

For an app or game landing page with color, 3D or hand-drawn art and lively motion. Look: playful, colorful, 3d, hand-drawn.
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 Bricolage Grotesque 800, body Nunito, code JetBrains Mono (Google Fonts, SIL OFL; in Next.js load them with next/font/google). CSS: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=JetBrains+Mono:wght@400&family=Nunito:wght@400;500&display=swap
- Colors (light): background #fdfcfd, surface #faf9fb, border #dbd8e0, text #211f26, muted #65636d, accent #d6409f (hover #cf3897, soft #fee9f5). Scales: Radix mauve + pink + amber; dark values in tokens.json.
- Type scale: 17px base, ratio 1.333: xs 9.5px, sm 13.0px, base 17.0px, lg 22.5px, xl 30.0px, 2xl 40.5px, 3xl 53.5px, 4xl 71.5px, 5xl 95.5px
- Radius 22px (sm 11, lg 33); 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/playful-consumer-app/starter/ · tokens: https://agentgid.com/assets/recipes/playful-consumer-app/starter/tokens.css, https://agentgid.com/assets/recipes/playful-consumer-app/starter/tailwind.css, https://agentgid.com/assets/recipes/playful-consumer-app/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:37 UTC): https://agentgid.com/assets/recipes/playful-consumer-app/playful-consumer-app-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 lottie-react  # Lottie React (MIT)
- npm install canvas-confetti  # canvas-confetti (ISC)

## Content sources
### UI kit and page blocks
- daisyUI (UI kits and website templates). Free Tailwind CSS plugin that adds semantic component class names (btn, card, ..) and themes; paid templates, charts and a Figma library are sold in a separate store. Price: free tier; commercial use OK; no credit needed. Style: colorful, playful, flat.
  Connect: npm daisyui.
  Get files: npm i -D daisyui@latest, then in CSS: @import "tailwindcss"; @plugin "daisyui"; docs for LLMs at daisyui.com/llms.txt; agent skill: npx skills add saadeghi/daisyui (css, html).
  Not allowed: Store templates have separate terms
  Rule: Keep the MIT copyright notice in copies of the library.
  Rule: Store templates are separate paid products with their own terms (not read).
  License: https://raw.githubusercontent.com/saadeghi/daisyui/master/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/daisyui/)
  Tailwind CSS: see https://agentgid.com/assets/daisyui/agent.md (official example: https://daisyui.com/docs/install/)
- Magic UI (UI kits and website templates). Copy-and-paste animated React/Tailwind components for landing pages, installable via the shadcn CLI; a paid Pro adds templates and premium components. Price: free tier; commercial use OK; no credit needed. Style: gradient, colorful, minimal.
  Connect: official MCP server https://magicui.design/docs/mcp.
  Get files: shadcn CLI / copy-paste from magicui.design/docs; official MCP: pnpm dlx @magicuidesign/cli@latest install cursor (also Claude, Windsurf, Cline) (html, css).
  Not allowed: Pro licence terms not read
  Rule: Keep the MIT notice if you redistribute the code.
  Rule: Pro templates and components are paid and not covered by this MIT file.
  License: https://raw.githubusercontent.com/magicuidesign/magicui/main/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/magic-ui/)
### 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)
### 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/)
- 3dicons (3D and isometric illustrations). Open-source library of hand-made 3D icons rendered in Blender, in several color styles and camera angles, free to download as image files. Price: free; commercial use OK; no credit needed. Style: 3d, colorful, playful, filled.
  Connect: download from https://3dicons.co (no API).
  Get files: Manual download: 'Download V1' / 'Download all' buttons or per-icon on https://3dicons.co; design files and a plugin via Figma Community; source repo github.com/realvjy/3dicons (png, figma).
  Not allowed: No official API or npm package found.
  Not allowed: Pro version terms are separate.
  Rule: CC0: no credit required, but credit to the author (Vijay Verma) is welcome.
  Rule: Check the license of the Pro version separately if you use it.
  License: https://3dicons.co (checked 2026-10-21; details: https://agentgid.com/assets/3dicons/)
- DrawKit (3D and isometric illustrations). Library of hand-drawn 2D and 3D illustration packs, icons and animations, labelled Free or Pro, with Figma plugins including a 3D builder. Price: free tier; commercial use OK; no credit needed; no AI training on its content. Style: 3d, flat, hand-drawn, colorful.
  Connect: download from https://www.drawkit.com (no API).
  Get files: Manual download of free or Pro packs from https://www.drawkit.com (Free packs need no account) (svg, png, figma, json).
  Not allowed: No redistribution as stand-alone files or compilations.
  Not allowed: Pro packs need a paid plan.
  Rule: Do not redistribute icons and illustrations stand-alone or as a compilation.
  Rule: Do not place them on stock sites or in design templates or template tools.
  Rule: Do not use them to train AI models.
  License: https://www.drawkit.com/license (checked 2026-10-21; details: https://agentgid.com/assets/drawkit/)
### Animations (Lottie, Rive)
- Anime.js (UI animation (Lottie, Rive)). MIT JavaScript animation library for CSS, SVG, DOM attributes and JavaScript objects. Price: free; commercial use OK; no credit needed.
  Connect: npm animejs.
  Get files: npm i animejs.
  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.
  Rule: Install with npm i animejs (the site shows this command).
  License: https://github.com/juliangarnier/anime/blob/master/LICENSE.md (checked 2026-10-20; details: https://agentgid.com/assets/anime-js/)
- Bodymovin (lottie-web) (UI animation (Lottie, Rive)). After Effects extension that exports animations as JSON, plus the lottie-web JavaScript player that renders them in browsers. Price: free; commercial use OK; no credit needed.
  Connect: npm lottie-web.
  Get files: npm install lottie-web, or take lottie.js from the build/player folder of the repo, or the cdnjs bodymovin script (js, json).
  Not allowed: Keep the MIT copyright and permission notice in copies you ship.
  Not allowed: The license covers the player software; animation JSON files have their own licenses.
  Rule: Keep the MIT license file and copyright notice with any copies of the library you ship.
  Rule: Install the player from npm (lottie-web) or download lottie.js from build/player and serve it yourself.
  Rule: Gzip lottie.js for production, as the README advises.
  Rule: The MIT license covers the software only; check the license of any animation JSON files you load.
  License: https://github.com/airbnb/lottie-web/blob/HEAD/LICENSE.md (checked 2026-10-14; details: https://agentgid.com/assets/bodymovin/)
### Backgrounds
- fffuel (Backgrounds, patterns and shapes). Collection of free color tools and SVG generators for gradients, patterns, textures, shapes and backgrounds. Price: free; commercial use OK; no credit needed. Style: gradient, abstract, geometric, colorful.
  Connect: download from https://www.fffuel.co (no API).
  Get files: Manual: pick a generator on fffuel.co, customize, then copy SVG code, download SVG, or use the SVG to PNG / base64 tools (svg, png, css).
  Not allowed: No resale, sublicensing or redistribution of the images
  Rule: Do not sublicense, resell, share, transfer or otherwise redistribute the Images.
  License: https://www.fffuel.co/license/ (checked 2026-10-21; details: https://agentgid.com/assets/fffuel/)
- SVGBackgrounds.com (Backgrounds, patterns and shapes). Library of SVG backgrounds, patterns, icons and shape tools; a free set of 48 backgrounds plus tools, and a subscription for all graphics. Price: free tier; commercial use OK; credit depends on the item; ship inside your app with conditions; no AI training on its content. Style: geometric, abstract, colorful, gradient.
  Connect: download from https://www.svgbackgrounds.com (no API).
  Get files: Manual: download SVG from a set page on svgbackgrounds.com (free sets without account at /set/free-svg-backgrounds-and-patterns/; subscription for the rest) (svg, css).
  Credit line: Icons by SVGBackgrounds.com (link to the specific set, placed near the graphics or on a credits page)
  Not allowed: No as-is use, redistribution or resale
  Not allowed: No AI training
  Not allowed: Credit required on the free tier
  Rule: Combine graphics with other original design work; do not use them on their own, as-is.
  Rule: Free-tier graphics need attribution; subscribers with an active subscription are exempt.
  Rule: Do not redistribute, resell or use them to train AI models or in automated template tools.
  License: https://www.svgbackgrounds.com/license/ (checked 2026-10-21; details: https://agentgid.com/assets/svgbackgrounds/)
### Colors and gradients
- uiGradients (Color palettes and gradients). Community collection of multi-color gradients; all data is in one gradients.json file in the GitHub repo, plus a browsing site. Price: free; commercial use OK; credit required. Style: gradient, colorful.
  Connect: download from https://uigradients.com (no API).
  Get files: curl https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json (array of {name, colors[hex]}); or copy CSS from uigradients.com (json, css).
  Not allowed: Keep the MIT copyright notice
  Not allowed: No official API; uigradients.com site itself has no terms page
  Rule: MIT: keep the copyright notice with copies of the gradients data.
  Rule: There is no official API; read gradients.json from the repo.
  License: https://github.com/ghosh/uiGradients/blob/master/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/uigradients/)
- 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)
### App screenshots in phone frames
- Shots (Mockups and device frames). Browser tool that places screenshots into device mockups and exports them as images (and animations/video) with backgrounds and social frame presets. Price: free tier; commercial use OK; no credit needed. Style: realistic, gradient.
  Connect: download from https://shots.so (no API).
  Get files: Manual: open shots.so in a browser, add a screenshot, pick a mockup, export (PNG shown in the export panel) (png).
  Not allowed: Terms ban scraping and bulk-downloading of data
  Not allowed: Free, Basic and Pro plans have different limits (pricing page not readable)
  Rule: Terms do not state whether exports may be used commercially; treat commercial use as unconfirmed.
  Rule: Do not scrape or bulk-download from the service.
  License: https://shots.so/terms (checked 2026-10-21; details: https://agentgid.com/assets/shots-so/)
- Mockuuups Studio (Mockups and device frames). Mockup library (5,300+ device, print and paper mockups) with a web tool, desktop app, design-tool plugins and a render API that places images or URL screenshots into mockups. Price: free tier; commercial use with conditions; ship inside your app with conditions; no AI training on its content. Style: realistic.
  Connect: API docs https://mockuuups.studio/api/docs/ (API key needed). Limits: 1 render = 1 credit; hi-res and URL screenshots cost 1 extra credit; 50 free credits; HTTP 402 when credits run out.
  Get files: API: POST https://api.mockuuups.studio/v1/renders with Bearer API key (mockup id, size, contents); or use the web tool, desktop app or Figma/Sketch plugins (png).
  Not allowed: Free licence is non-commercial and needs credit
  Not allowed: No resale, redistribution, scraping or AI training
  Rule: Free plan: personal non-commercial use only, with credit 'Mockup by Mockuuups Studio'.
  Rule: Paid plan or paid export needed for client, business or commercial work (no credit required).
  Rule: Do not resell or redistribute mockups or put them in packs/UI kits; no scraping or mass downloading; no AI training.
  License: https://mockuuups.studio/license (checked 2026-10-21; details: https://agentgid.com/assets/mockuuups-studio/)
### 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 emilkowalski/skills --skill animate-expo  # animate-expo
- npx skills add greensock/gsap-skills --skill gsap-core  # gsap-core
- npx skills add ConardLi/garden-skills --skill motion-showreel  # motion-showreel
- npx skills add ibelick/ui-skills --skill fixing-motion-performance  # fixing-motion-performance
- npx skills add tech-leads-club/agent-skills --skill sales-motion-design  # sales-motion-design
- npx skills add MengTo/Skills --skill optimize-web-animations  # optimize-web-animations

## 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/playful-consumer-app/ · all recipes: https://agentgid.com/assets/recipes/

Other recipes

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