1---2name: popular-web-designs3description: >4 54 production-quality design systems extracted from real websites. Load a template5 to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear,6 Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components,7 layout rules, and ready-to-use CSS values.8version: 1.0.09author: Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md)10license: MIT11tags: [design, css, html, ui, web-development, design-systems, templates]12triggers:13 - build a page that looks like14 - make it look like stripe15 - design like linear16 - vercel style17 - create a UI18 - web design19 - landing page20 - dashboard design21 - website styled like22---2324# Popular Web Designs252654 real-world design systems ready for use when generating HTML/CSS. Each template captures a27site's complete visual language: color palette, typography hierarchy, component styles, spacing28system, shadows, responsive behavior, and practical agent prompts with exact CSS values.2930## How to Use31321. Pick a design from the catalog below332. Load it: `skill_view(name="popular-web-designs", file_path="templates/<site>.md")`343. Use the design tokens and component specs when generating HTML354. Pair with the `generative-widgets` skill to serve the result via cloudflared tunnel3637Each template includes a **Hermes Implementation Notes** block at the top with:38- CDN font substitute and Google Fonts `<link>` tag (ready to paste)39- CSS font-family stacks for primary and monospace40- Reminders to use `write_file` for HTML creation and `browser_vision` for verification4142## HTML Generation Pattern4344```html45<!DOCTYPE html>46<html lang="en">47<head>48 <meta charset="UTF-8">49 <meta name="viewport" content="width=device-width, initial-scale=1.0">50 <title>Page Title</title>51 <!-- Paste the Google Fonts <link> from the template's Hermes notes -->52 <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">53 <style>54 /* Apply the template's color palette as CSS custom properties */55 :root {56 --color-bg: #ffffff;57 --color-text: #171717;58 --color-accent: #533afd;59 /* ... more from template Section 2 */60 }61 /* Apply typography from template Section 3 */62 body {63 font-family: 'Inter', system-ui, sans-serif;64 color: var(--color-text);65 background: var(--color-bg);66 }67 /* Apply component styles from template Section 4 */68 /* Apply layout from template Section 5 */69 /* Apply shadows from template Section 6 */70 </style>71</head>72<body>73 <!-- Build using component specs from the template -->74</body>75</html>76```7778Write the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),79and verify the result with `browser_vision` to confirm visual accuracy.8081## Font Substitution Reference8283Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts84substitute that preserves the design's character. Common mappings:8586| Proprietary Font | CDN Substitute | Character |87|---|---|---|88| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |89| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |90| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |91| Berkeley Mono | JetBrains Mono | Technical monospace |92| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |93| Circular (Spotify) | DM Sans | Geometric, warm |94| figmaSans | Inter | Clean humanist |95| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |96| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |97| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |98| UberMove | DM Sans | Bold, tight |99| HashiCorp Sans | Inter | Enterprise, neutral |100| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |101| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |102| Rubik (Sentry) | Rubik | Available on Google Fonts |103104When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no105substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3106for sohne-var), follow the template's weight, size, and letter-spacing values closely —107those carry more visual identity than the specific font face.108109## Design Catalog110111### AI & Machine Learning112113| Template | Site | Style |114|---|---|---|115| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |116| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |117| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |118| `minimax.md` | Minimax | Bold dark interface with neon accents |119| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |120| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |121| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |122| `replicate.md` | Replicate | Clean white canvas, code-forward |123| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |124| `together.ai.md` | Together AI | Technical, blueprint-style design |125| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |126| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |127128### Developer Tools & Platforms129130| Template | Site | Style |131|---|---|---|132| `cursor.md` | Cursor | Sleek dark interface, gradient accents |133| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |134| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |135| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |136| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |137| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |138| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |139| `resend.md` | Resend | Minimal dark theme, monospace accents |140| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |141| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |142| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |143| `vercel.md` | Vercel | Black and white precision, Geist font system |144| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |145| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |146147### Infrastructure & Cloud148149| Template | Site | Style |150|---|---|---|151| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |152| `composio.md` | Composio | Modern dark with colorful integration icons |153| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |154| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |155| `sanity.md` | Sanity | Red accent, content-first editorial layout |156| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |157158### Design & Productivity159160| Template | Site | Style |161|---|---|---|162| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |163| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |164| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |165| `figma.md` | Figma | Vibrant multi-color, playful yet professional |166| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |167| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |168| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |169| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |170| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |171| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |172173### Fintech & Crypto174175| Template | Site | Style |176|---|---|---|177| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |178| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |179| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |180| `wise.md` | Wise | Bright green accent, friendly and clear |181182### Enterprise & Consumer183184| Template | Site | Style |185|---|---|---|186| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |187| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |188| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |189| `ibm.md` | IBM | Carbon design system, structured blue palette |190| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |191| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |192| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |193| `uber.md` | Uber | Bold black and white, tight type, urban energy |194195## Choosing a Design196197Match the design to the content:198199- **Developer tools / dashboards:** Linear, Vercel, Supabase, Raycast, Sentry200- **Documentation / content sites:** Mintlify, Notion, Sanity, MongoDB201- **Marketing / landing pages:** Stripe, Framer, Apple, SpaceX202- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman203- **Light / clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate204- **Playful / friendly:** PostHog, Figma, Lovable, Zapier, Miro205- **Premium / luxury:** Apple, BMW, Stripe, Superhuman, Revolut206- **Data-dense / dashboards:** Sentry, Kraken, Cohere, ClickHouse207- **Monospace / terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent
ichichuang