Popular Web Designs: 54 Brand Design Systems for HTML/CSS
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
Written by Neura Market from the official Hermes Agent documentation for Popular Web Designs. Commands, paths, and version numbers are reproduced from the source unchanged.
Read the official documentationThis skill gives Hermes Agent a library of 54 real-world design systems, each captured as a markdown template you can pull into an HTML/CSS build. Reach for it when someone asks for a page that looks like Stripe, Linear, Vercel, or any of the other brands in the catalog, and you want the actual palette, type scale, and component styling rather than a vague impression of the look.
What it does
The skill ships a catalog of templates. Each one records 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. You pick a template, load it, and use its tokens and component specs while generating HTML. The templates are not screenshots or mood boards. They are structured specs an agent can read and apply.
Every template opens with a Hermes Implementation Notes block. That block carries a CDN font substitute and a Google Fonts <link> tag ready to paste, CSS font-family stacks for primary and monospace text, and reminders to use write_file for HTML creation and browser_exec (capture_screenshot()) for verification.
Before you start
This skill is bundled with Hermes Agent and installed by default, so there is no separate install step. It lives at skills/creative/popular-web-designs, is version 1.0.0, and is licensed MIT. It runs on linux, macos, and windows. The author is listed as Hermes Agent + Teknium, with the design systems sourced from VoltAgent/awesome-design-md.
You will need a working Hermes Agent session, since the loading step is a skill call rather than a shell command. If you plan to serve the result, the source points at the generative-widgets skill and a cloudflared tunnel for that part of the workflow.
How to use it
- Pick a design from the catalog below.
- Load it with the skill call:
skill_view(name="popular-web-designs", file_path="templates/.md") - Use the design tokens and component specs when generating HTML.
- Pair with the
generative-widgetsskill to serve the result via cloudflared tunnel.
The load step is the one place people stumble. The file_path argument takes the template filename from the catalog, so the design you chose determines what you pass. Read the template before you write any markup: the implementation notes at the top tell you which font link to paste and which stacks to use, and the numbered sections below them hold the values you will copy into your stylesheet.
HTML generation pattern
The source provides a skeleton that shows how a template's sections map onto a single HTML file. The comments mark where each section of the template goes.
<!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_file, serve with the generative-widgets workflow (cloudflared tunnel), and verify the result with browser_exec: open the page, capture_screenshot(), and inspect the image to confirm visual accuracy.
The verification step is not optional decoration. A palette can be copied correctly and still read wrong if the type scale or spacing is off, and a screenshot is how you catch that before handing the page over. Treat the template's numbered sections as the source of truth and the skeleton as the container.
Font substitution reference
Most of the sites in the catalog use proprietary fonts that are not available via CDN. Each template maps its original face to a Google Fonts substitute chosen to preserve the design's character. The 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.
That last point deserves emphasis. Swapping Circular for DM Sans changes the letterforms, but matching the weights and tracking keeps the page recognisable. If you drift on the numbers, the substitute stops reading as the brand even when the palette is exact.
Design catalog
The catalog is grouped by industry. Each row gives the template filename, the site it captures, and a one-line description of the style.
AI & Machine Learning
| Template | Site | Style |
|---|---|---|
claude.md | Anthropic Claude | Warm terracotta accent, clean editorial layout |
cohere.md | Cohere | Vibrant gradients, data-rich dashboard aesthetic |
elevenlabs.md | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
minimax.md | Minimax | Bold dark interface with neon accents |
mistral.ai.md | Mistral AI | French-engineered minimalism, purple-toned |
ollama.md | Ollama | Terminal-first, monochrome simplicity |
opencode.ai.md | OpenCode AI | Developer-centric dark theme, full monospace |
replicate.md | Replicate | Clean white canvas, code-forward |
runwayml.md | RunwayML | Cinematic dark UI, media-rich layout |
together.ai.md | Together AI | Technical, blueprint-style design |
voltagent.md | VoltAgent | Void-black canvas, emerald accent, terminal-native |
x.ai.md | xAI | Stark monochrome, futuristic minimalism, full monospace |
Developer Tools & Platforms
| Template | Site | Style |
|---|---|---|
cursor.md | Cursor | Sleek dark interface, gradient accents |
expo.md | Expo | Dark theme, tight letter-spacing, code-centric |
linear.app.md | Linear | Ultra-minimal dark-mode, precise, purple accent |
lovable.md | Lovable | Playful gradients, friendly dev aesthetic |
mintlify.md | Mintlify | Clean, green-accented, reading-optimized |
posthog.md | PostHog | Playful branding, developer-friendly dark UI |
raycast.md | Raycast | Sleek dark chrome, vibrant gradient accents |
resend.md | Resend | Minimal dark theme, monospace accents |
sentry.md | Sentry | Dark dashboard, data-dense, pink-purple accent |
supabase.md | Supabase | Dark emerald theme, code-first developer tool |
superhuman.md | Superhuman | Premium dark UI, keyboard-first, purple glow |
vercel.md | Vercel | Black and white precision, Geist font system |
warp.md | Warp | Dark IDE-like interface, block-based command UI |
zapier.md | Zapier | Warm orange, friendly illustration-driven |
Infrastructure & Cloud
| Template | Site | Style |
|---|---|---|
clickhouse.md | ClickHouse | Yellow-accented, technical documentation style |
composio.md | Composio | Modern dark with colorful integration icons |
hashicorp.md | HashiCorp | Enterprise-clean, black and white |
mongodb.md | MongoDB | Green leaf branding, developer documentation focus |
sanity.md | Sanity | Red accent, content-first editorial layout |
stripe.md | Stripe | Signature purple gradients, weight-300 elegance |
Design & Productivity
| Template | Site | Style |
|---|---|---|
airtable.md | Airtable | Colorful, friendly, structured data aesthetic |
cal.md | Cal.com | Clean neutral UI, developer-oriented simplicity |
clay.md | Clay | Organic shapes, soft gradients, art-directed layout |
figma.md | Figma | Vibrant multi-color, playful yet professional |
framer.md | Framer | Bold black and blue, motion-first, design-forward |
intercom.md | Intercom | Friendly blue palette, conversational UI patterns |
miro.md | Miro | Bright yellow accent, infinite canvas aesthetic |
notion.md | Notion | Warm minimalism, serif headings, soft surfaces |
pinterest.md | Red accent, masonry grid, image-first layout | |
webflow.md | Webflow | Blue-accented, polished marketing site aesthetic |
Fintech & Crypto
| Template | Site | Style |
|---|---|---|
coinbase.md | Coinbase | Clean blue identity, trust-focused, institutional feel |
kraken.md | Kraken | Purple-accented dark UI, data-dense dashboards |
revolut.md | Revolut | Sleek dark interface, gradient cards, fintech precision |
wise.md | Wise | Bright green accent, friendly and clear |
Enterprise & Consumer
| Template | Site | Style |
|---|---|---|
airbnb.md | Airbnb | Warm coral accent, photography-driven, rounded UI |
apple.md | Apple | Premium white space, SF Pro, cinematic imagery |
bmw.md | BMW | Dark premium surfaces, precise engineering aesthetic |
ibm.md | IBM | Carbon design system, structured blue palette |
nvidia.md | NVIDIA | Green-black energy, technical power aesthetic |
spacex.md | SpaceX | Stark black and white, full-bleed imagery, futuristic |
spotify.md | Spotify | Vibrant green on dark, bold type, album-art-driven |
uber.md | Uber | Bold black and white, tight type, urban energy |
Choosing a design
The source gives a set of starting points that match designs to content type. Use them as a first filter, then read the template before committing.
- Developer tools / dashboards: Linear, Vercel, Supabase, Raycast, Sentry
- Documentation / content sites: Mintlify, Notion, Sanity, MongoDB
- Marketing / landing pages: Stripe, Framer, Apple, SpaceX
- Dark mode UIs: Linear, Cursor, ElevenLabs, Warp, Superhuman
- Light / clean UIs: Vercel, Stripe, Notion, Cal.com, Replicate
- Playful / friendly: PostHog, Figma, Lovable, Zapier, Miro
- Premium / luxury: Apple, BMW, Stripe, Superhuman, Revolut
- Data-dense / dashboards: Sentry, Kraken, Cohere, ClickHouse
- Monospace / terminal aesthetic: Ollama, OpenCode, x.ai, VoltAgent
A practical habit: pick two candidates from the list, load both, and compare their palettes and type scales side by side before you write markup. The catalog description tells you the mood, but the template tells you whether the spacing and component set fit the page you actually have to build.
When not to use it
This skill supplies visual vocabulary, not design judgement. The source names two related skills that cover the other halves of the job.
Use claude-design for the design process and taste: scoping a brief, producing variants, verifying a local HTML artifact, and avoiding AI-design slop. Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand. claude-design drives the workflow, this skill supplies the visual vocabulary.
Use design-md when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact. If nobody needs a rendered page, the template catalog is the wrong tool.
Limits and gotchas
- Most sites in the catalog use proprietary fonts that are unavailable via CDN. The templates map each to a Google Fonts substitute, and that substitution is a loss. When a substitute is in play, the template's weight, size, and letter-spacing values are what preserve the design's character, so copy them closely rather than approximating.
- When the CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no substitution loss occurs. Check the implementation notes before assuming a substitute is needed.
- The templates are specs, not drop-in pages. You still write the HTML, and the source's pattern expects
write_filefor creation andbrowser_execwithcapture_screenshot()for verification. - Serving the result is a separate concern handled by the
generative-widgetsskill and a cloudflared tunnel.
What pairs with it
claude-design: the design process and taste layer. Use it to scope the brief, generate variants, and verify the artifact, with this skill providing the brand vocabulary.design-md: for formal DESIGN.md token spec files instead of rendered HTML.generative-widgets: to serve the finished page via cloudflared tunnel.