54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more.
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
54 real-world design systems ready for use when generating HTML/CSS. Each template captures a site's complete visual language: color palette, typography hierarchy, component styles, spacing system, shadows, responsive behavior, and practical agent prompts with exact CSS values.
skill_view(name="popular-web-designs", file_path="templates/<site>.md")generative-widgetsEach template includes a Hermes Implementation Notes block at the top with:
<link>write_filebrowser_vision<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <!-- Paste the Google Fonts <link> from the template's Hermes notes --> <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet"> <style> /* Apply the template's color palette as CSS custom properties */ :root { --color-bg: #ffffff; --color-text: #171717; --color-accent: #533afd; /* ... more from template Section 2 */ } /* Apply typography from template Section 3 */ body { font-family: 'Inter', system-ui, sans-serif; color: var(--color-text); background: var(--color-bg); } /* Apply component styles from template Section 4 */ /* Apply layout from template Section 5 */ /* Apply shadows from template Section 6 */ </style> </head> <body> <!-- Build using component specs from the template --> </body> </html>
Write the file with
write_filegenerative-widgetsbrowser_visionMost sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts substitute that preserves the design's character. Common mappings:
| Proprietary Font | CDN Substitute | Character |
|---|---|---|
| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |
| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |
| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |
| Berkeley Mono | JetBrains Mono | Technical monospace |
| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |
| Circular (Spotify) | DM Sans | Geometric, warm |
| figmaSans | Inter | Clean humanist |
| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |
| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |
| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |
| UberMove | DM Sans | Bold, tight |
| HashiCorp Sans | Inter | Enterprise, neutral |
| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |
| Rubik (Sentry) | Rubik | Available on Google Fonts |
When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3 for sohne-var), follow the template's weight, size, and letter-spacing values closely — those carry more visual identity than the specific font face.
| Template | Site | Style |
|---|---|---|
| Anthropic Claude | Warm terracotta accent, clean editorial layout |
| Cohere | Vibrant gradients, data-rich dashboard aesthetic |
| ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
| Minimax | Bold dark interface with neon accents |
| Mistral AI | French-engineered minimalism, purple-toned |
| Ollama | Terminal-first, monochrome simplicity |
| OpenCode AI | Developer-centric dark theme, full monospace |
| Replicate | Clean white canvas, code-forward |
| RunwayML | Cinematic dark UI, media-rich layout |
| Together AI | Technical, blueprint-style design |
| VoltAgent | Void-black canvas, emerald accent, terminal-native |
| xAI | Stark monochrome, futuristic minimalism, full monospace |
| Template | Site | Style |
|---|---|---|
| Cursor | Sleek dark interface, gradient accents |
| Expo | Dark theme, tight letter-spacing, code-centric |
| Linear | Ultra-minimal dark-mode, precise, purple accent |
| Lovable | Playful gradients, friendly dev aesthetic |
| Mintlify | Clean, green-accented, reading-optimized |
| PostHog | Playful branding, developer-friendly dark UI |
| Raycast | Sleek dark chrome, vibrant gradient accents |
| Resend | Minimal dark theme, monospace accents |
| Sentry | Dark dashboard, data-dense, pink-purple accent |
| Supabase | Dark emerald theme, code-first developer tool |
| Superhuman | Premium dark UI, keyboard-first, purple glow |
| Vercel | Black and white precision, Geist font system |
| Warp | Dark IDE-like interface, block-based command UI |
| Zapier | Warm orange, friendly illustration-driven |
| Template | Site | Style |
|---|---|---|
| ClickHouse | Yellow-accented, technical documentation style |
| Composio | Modern dark with colorful integration icons |
| HashiCorp | Enterprise-clean, black and white |
| MongoDB | Green leaf branding, developer documentation focus |
| Sanity | Red accent, content-first editorial layout |
| Stripe | Signature purple gradients, weight-300 elegance |
| Template | Site | Style |
|---|---|---|
| Airtable | Colorful, friendly, structured data aesthetic |
| Cal.com | Clean neutral UI, developer-oriented simplicity |
| Clay | Organic shapes, soft gradients, art-directed layout |
| Figma | Vibrant multi-color, playful yet professional |
| Framer | Bold black and blue, motion-first, design-forward |
| Intercom | Friendly blue palette, conversational UI patterns |
| Miro | Bright yellow accent, infinite canvas aesthetic |
| Notion | Warm minimalism, serif headings, soft surfaces |
| Red accent, masonry grid, image-first layout | |
| Webflow | Blue-accented, polished marketing site aesthetic |
| Template | Site | Style |
|---|---|---|
| Coinbase | Clean blue identity, trust-focused, institutional feel |
| Kraken | Purple-accented dark UI, data-dense dashboards |
| Revolut | Sleek dark interface, gradient cards, fintech precision |
| Wise | Bright green accent, friendly and clear |
| Template | Site | Style |
|---|---|---|
| Airbnb | Warm coral accent, photography-driven, rounded UI |
| Apple | Premium white space, SF Pro, cinematic imagery |
| BMW | Dark premium surfaces, precise engineering aesthetic |
| IBM | Carbon design system, structured blue palette |
| NVIDIA | Green-black energy, technical power aesthetic |
| SpaceX | Stark black and white, full-bleed imagery, futuristic |
| Spotify | Vibrant green on dark, bold type, album-art-driven |
| Uber | Bold black and white, tight type, urban energy |
Match the design to the content:
MIT
mkdir -p ~/.hermes/skills/creative/popular-web-designs && curl -o ~/.hermes/skills/creative/popular-web-designs/SKILL.md https://raw.githubusercontent.com/NousResearch/hermes-agent/main/skills/creative/popular-web-designs/SKILL.md
1,500+ AI skills, agents & workflows. Install in 30 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.