Popular Web Designs
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.
Default look comes first
This skill is for when the user wants a page styled after a specific known brand. If they
have not named one, use your deployment's house-style skill (a *-design skill under
skills/, when installed) instead of picking from this catalog.
Related design skills
- The house-style skill (
*-design, when installed) — the org's default look as
ready-to-apply tokens. Use it unless the user asks for a specific brand below.
taste-skill — use for the design process and taste (reading the brief,
producing variants, verifying the result, avoiding AI-design slop).
Pair it with this skill when the user wants a thoughtfully-designed page styled
after a known brand: taste-skill drives the workflow, this skill supplies
the visual vocabulary.
How to Use
- Pick a design from the catalog below
- Read it:
read skills/popular-web-designs/templates/<site>.md
- Use the design tokens and component specs when generating HTML
- Build with
write, then serve the result with the publish skill (skills/publish/SKILL.md)
Each template includes an Implementation Notes block at the top with:
- CDN font substitute and Google Fonts
<link> tag (ready to paste)
- CSS font-family stacks for primary and monospace
- Reminders to use
write for HTML creation and local headless Chromium for verification
HTML Generation Pattern
<!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>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />
<style>
:root {
--color-bg: #ffffff;
--color-text: #171717;
--color-accent: #533afd;
}
body {
font-family: "Inter", system-ui, sans-serif;
color: var(--color-text);
background: var(--color-bg);
}
</style>
</head>
<body></body>
</html>
Write the file with write, verify the result locally (curl -fsS http://localhost:<port>,
then chromium --headless --no-sandbox --disable-gpu --screenshot=/tmp/page.png http://localhost:<port>
when a render check matters), and serve it with the publish skill to confirm visual
accuracy and hand over a stable link.
Font Substitution Reference
Most 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.
Design Catalog
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 |
Pinterest |
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
Match the design to the content:
- 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
1---2name: popular-web-designs3description: 54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.4---56# Popular Web Designs7854 real-world design systems ready for use when generating HTML/CSS. Each template captures a9site's complete visual language: color palette, typography hierarchy, component styles, spacing10system, shadows, responsive behavior, and practical agent prompts with exact CSS values.1112## Default look comes first1314This skill is for when the user wants a page styled after **a specific known brand**. If they15have not named one, use your deployment's house-style skill (a `*-design` skill under16`skills/`, when installed) instead of picking from this catalog.1718## Related design skills1920- **The house-style skill** (`*-design`, when installed) — the org's default look as21 ready-to-apply tokens. Use it unless the user asks for a specific brand below.22- **`taste-skill`** — use for the design _process and taste_ (reading the brief,23 producing variants, verifying the result, avoiding AI-design slop).24 Pair it with this skill when the user wants a thoughtfully-designed page styled25 after a known brand: `taste-skill` drives the workflow, this skill supplies26 the visual vocabulary.2728## How to Use29301. Pick a design from the catalog below312. Read it: `read skills/popular-web-designs/templates/<site>.md`323. Use the design tokens and component specs when generating HTML334. Build with `write`, then serve the result with the `publish` skill (`skills/publish/SKILL.md`)3435Each template includes an **Implementation Notes** block at the top with:3637- CDN font substitute and Google Fonts `<link>` tag (ready to paste)38- CSS font-family stacks for primary and monospace39- Reminders to use `write` for HTML creation and local headless Chromium for verification4041## HTML Generation Pattern4243```html44<!DOCTYPE html>45<html lang="en">46 <head>47 <meta charset="UTF-8" />48 <meta name="viewport" content="width=device-width, initial-scale=1.0" />49 <title>Page Title</title>5051 <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />52 <style>53 :root {54 --color-bg: #ffffff;55 --color-text: #171717;56 --color-accent: #533afd;57 }5859 body {60 font-family: "Inter", system-ui, sans-serif;61 color: var(--color-text);62 background: var(--color-bg);63 }64 </style>65 </head>66 <body></body>67</html>68```6970Write the file with `write`, verify the result locally (`curl -fsS http://localhost:<port>`,71then `chromium --headless --no-sandbox --disable-gpu --screenshot=/tmp/page.png http://localhost:<port>`72when a render check matters), and serve it with the `publish` skill to confirm visual73accuracy and hand over a stable link.7475## Font Substitution Reference7677Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts78substitute that preserves the design's character. Common mappings:7980| Proprietary Font | CDN Substitute | Character |81| ------------------------- | ---------------------------- | ------------------------------ |82| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |83| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |84| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |85| Berkeley Mono | JetBrains Mono | Technical monospace |86| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |87| Circular (Spotify) | DM Sans | Geometric, warm |88| figmaSans | Inter | Clean humanist |89| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |90| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |91| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |92| UberMove | DM Sans | Bold, tight |93| HashiCorp Sans | Inter | Enterprise, neutral |94| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |95| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |96| Rubik (Sentry) | Rubik | Available on Google Fonts |9798When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no99substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3100for sohne-var), follow the template's weight, size, and letter-spacing values closely —101those carry more visual identity than the specific font face.102103## Design Catalog104105### AI & Machine Learning106107| Template | Site | Style |108| ---------------- | ---------------- | ------------------------------------------------------- |109| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |110| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |111| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |112| `minimax.md` | Minimax | Bold dark interface with neon accents |113| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |114| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |115| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |116| `replicate.md` | Replicate | Clean white canvas, code-forward |117| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |118| `together.ai.md` | Together AI | Technical, blueprint-style design |119| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |120| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |121122### Developer Tools & Platforms123124| Template | Site | Style |125| --------------- | ---------- | ----------------------------------------------- |126| `cursor.md` | Cursor | Sleek dark interface, gradient accents |127| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |128| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |129| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |130| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |131| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |132| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |133| `resend.md` | Resend | Minimal dark theme, monospace accents |134| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |135| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |136| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |137| `vercel.md` | Vercel | Black and white precision, Geist font system |138| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |139| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |140141### Infrastructure & Cloud142143| Template | Site | Style |144| --------------- | ---------- | -------------------------------------------------- |145| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |146| `composio.md` | Composio | Modern dark with colorful integration icons |147| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |148| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |149| `sanity.md` | Sanity | Red accent, content-first editorial layout |150| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |151152### Design & Productivity153154| Template | Site | Style |155| -------------- | --------- | --------------------------------------------------- |156| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |157| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |158| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |159| `figma.md` | Figma | Vibrant multi-color, playful yet professional |160| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |161| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |162| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |163| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |164| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |165| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |166167### Fintech & Crypto168169| Template | Site | Style |170| ------------- | -------- | ------------------------------------------------------- |171| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |172| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |173| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |174| `wise.md` | Wise | Bright green accent, friendly and clear |175176### Enterprise & Consumer177178| Template | Site | Style |179| ------------ | ------- | ----------------------------------------------------- |180| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |181| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |182| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |183| `ibm.md` | IBM | Carbon design system, structured blue palette |184| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |185| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |186| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |187| `uber.md` | Uber | Bold black and white, tight type, urban energy |188189## Choosing a Design190191Match the design to the content:192193- **Developer tools / dashboards:** Linear, Vercel, Supabase, Raycast, Sentry194- **Documentation / content sites:** Mintlify, Notion, Sanity, MongoDB195- **Marketing / landing pages:** Stripe, Framer, Apple, SpaceX196- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman197- **Light / clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate198- **Playful / friendly:** PostHog, Figma, Lovable, Zapier, Miro199- **Premium / luxury:** Apple, BMW, Stripe, Superhuman, Revolut200- **Data-dense / dashboards:** Sentry, Kraken, Cohere, ClickHouse201- **Monospace / terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent
yc-software