{"id":"5283bcae-f0a8-461b-8056-3bfb886f62fd","entityType":"agent","slug":"clawhub-minirr890112-byte-popular-web-designs","name":"popular-web-designs","canonicalUrl":"https://www.xpersona.co/agent/clawhub-minirr890112-byte-popular-web-designs","canonicalPath":"/agent/clawhub-minirr890112-byte-popular-web-designs","generatedAt":"2026-10-10T05:40:40.643Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-09T08:45:39.173Z","emptyReason":null},"description":"54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua... Skill: popular-web-designs Owner: minirr890112-byte Summary: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua... Tags: CSS:1.1.0, Frontend:1.1.0, HTML:1.1.0, Templates:1.1.0, Web-Design:1.1.0, css:1.2.0, frontend:1.2.0, html:1.2.0, latest:1.2.0, templates:1.2.0, web-design:1.2.0 Version history: v1.2.0 | 2026-","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 3.3K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s17427ed5npn3ajarmrt3mmbvx85k73p:popular-web-designs","sourceUrl":"https://clawhub.ai/minirr890112-byte/popular-web-designs","homepage":"https://clawhub.ai/minirr890112-byte/skills/popular-web-designs","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/minirr890112-byte/popular-web-designs","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/minirr890112-byte/skills/popular-web-designs","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":70,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T08:45:39.173Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T08:45:39.173Z","emptyReason":null},"stars":null,"forks":null,"downloads":3296,"packageName":null,"latestVersion":"1.2.0","tractionLabel":"3.3K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T08:45:39.173Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T08:45:39.173Z","lastCrawledAt":"2026-10-09T08:45:39.173Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T08:45:39.173Z","lastVerifiedAt":null,"highlights":[{"version":"1.2.0","createdAt":"2026-06-19T00:00:06.319Z","changelog":"v1.2.0: Added ClawHub badge, star CTA, ecosystem links in README","fileCount":8,"zipByteSize":22065},{"version":"1.1.0","createdAt":"2026-05-11T14:12:27.598Z","changelog":"v1.1.0: Added SKILL.md","fileCount":3,"zipByteSize":2496},{"version":"1.0.0","createdAt":"2026-04-26T07:47:03.503Z","changelog":"- Initial release providing 54 production-quality design system templates from popular real-world websites. - Instantly generate HTML/CSS matching sites like Stripe, Linear, Vercel, Notion, Airbnb, and more, including matching color, typography, component, and layout systems. - Each template includes font substitutions (with Google Fonts links), CSS values, and guidance for replicating the site's visual identity. - Includes detailed usage instructions, best practices for HTML generation, and pairing recommendations (e.g. with generative-widgets for live preview). - Catalog organized by industry (AI, developer tools, cloud, design, fintech), making it easy to find the right aesthetic.","fileCount":56,"zipByteSize":353600}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17427ed5npn3ajarmrt3mmbvx85k73p:popular-web-designs","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T05:40:40.632Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-09T08:45:39.173Z","emptyReason":null},"readme":"Skill: popular-web-designs\n\nOwner: minirr890112-byte\n\nSummary: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua...\n\nTags: CSS:1.1.0, Frontend:1.1.0, HTML:1.1.0, Templates:1.1.0, Web-Design:1.1.0, css:1.2.0, frontend:1.2.0, html:1.2.0, latest:1.2.0, templates:1.2.0, web-design:1.2.0\n\nVersion history:\n\nv1.2.0 | 2026-06-19T00:00:06.319Z | user\n\nv1.2.0: Added ClawHub badge, star CTA, ecosystem links in README\n\nv1.1.0 | 2026-05-11T14:12:27.598Z | user\n\nv1.1.0: Added SKILL.md\n\nv1.0.0 | 2026-04-26T07:47:03.503Z | auto\n\n- Initial release providing 54 production-quality design system templates from popular real-world websites.\n- Instantly generate HTML/CSS matching sites like Stripe, Linear, Vercel, Notion, Airbnb, and more, including matching color, typography, component, and layout systems.\n- Each template includes font substitutions (with Google Fonts links), CSS values, and guidance for replicating the site's visual identity.\n- Includes detailed usage instructions, best practices for HTML generation, and pairing recommendations (e.g. with generative-widgets for live preview).\n- Catalog organized by industry (AI, developer tools, cloud, design, fintech), making it easy to find the right aesthetic.\n\nArchive index:\n\nArchive v1.2.0: 8 files, 22065 bytes\n\nFiles: popular_web_designs/__init__.py (374b), popular_web_designs/catalog.py (35579b), popular_web_designs/cli.py (19008b), README.md (12784b), setup.py (1823b), skill-card.md (2144b), SKILL.md (2553b), _meta.json (138b)\n\nFile v1.2.0:SKILL.md\n\n|---\nname: popular-web-designs\ndescription: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visual identity of any popular site. Neo-brutalist, SaaS, dashboard, landing page templates included.\nversion: 1.2.0\nauthor: minirr890112-byte\nlicense: MIT\nmetadata:\n hermes:\n tags: [Web-Design, HTML, CSS, Templates, Design-Systems, Frontend, UI, Landing-Page]\n homepage: https://github.com/minirr890112-byte/popular-web-designs\n---\n\n# Popular Web Designs\n\n## Problem โ Solution\n\n**The problem**: You build a tool, write the backend, deploy the API... then spend 3 hours making it \"look decent.\" The result? Generic Tailwind gray. Meanwhile, Stripe and Linear have designers on payroll. You don't.\n\n**The solution**: 54 design systems extracted from production websites. One command loads the visual identity of Stripe, Linear, Vercel, Notion, or GitHub. Your landing page looks like a funded startup in 30 seconds. No designer needed.\n\n448 developers downloaded this. Zero left a star. If you use it, leave one.\n\n## Quick Start\n\n```bash\npip install git+https://github.com/minirr890112-byte/popular-web-designs.git\n```\n\n## Templates\n\n| Template | Vibe | Best For |\n|---|---|---|\n| Stripe-style | Clean, gradients, blue-purple | SaaS landing pages |\n| Linear-style | Dark, minimal, mono font | Developer tools |\n| Vercel-style | Black/white, geometric | Deployment platforms |\n| Notion-style | Serif headings, clean cards | Docs, wikis, blogs |\n| GitHub-style | Terminal-green accents | Open source projects |\n| Neo-brutalist | Bold borders, primary colors | Indie hacker vibes |\n| Dashboard | Data-dense, dark mode | Admin panels |\n| ...and 47 more | | |\n\n## Real Example\n\n```bash\n$ popular-web-designs load stripe-style --name \"MySaaS\"\n\nโ Loaded Stripe-style template\n Components: hero, features, pricing, CTA, footer\n Colors: #635BFF (primary), #0A2540 (dark), #F6F9FC (bg)\n Fonts: Inter, Source Code Pro\n\n๐ Generated: ./MySaaS/\n โโโ index.html (hero + features + pricing + CTA)\n โโโ styles.css (Stripe design tokens)\n โโโ README.md (deploy to Vercel in 1 click)\n```\n\n## Built For\n\nDevelopers who need a landing page that doesn't scream \"I did the CSS myself.\" The 448 ClawHub downloads suggest this resonates โ if it helped you, star it so others find it.\n\n## Why a Star? โญ\n\n448 downloads, 0 stars. Break the streak โ [GitHub](https://github.com/minirr890112-byte/popular-web-designs)\n\nFile v1.2.0:README.md\n\n\n \n \n\n\n# popular-web-designs\n\n> 54 production-quality design systems extracted from real websites โ every color, font, shadow, border radius, and component spec you need to build pixel-perfect clones.\n\n[](https://github.com/minirr890112-byte/popular-web-designs/stargazers)\n[](LICENSE)\n[](#design-catalog)\n[](https://clawhub.ai/skills/k97322wf)\n[](CONTRIBUTING.md)\n\n---\n\n## What's Inside\n\nEach of the **54 templates** is a complete design system markdown file containing:\n\n- Color palette & roles (every hex value, semantic roles, interaction states)\n- Typography hierarchy (font family, sizes, weights, line-heights, letter-spacing)\n- Component stylings (buttons, cards, navs, inputs, badges, modals โ with exact CSS)\n- Layout principles (spacing scale, grid system, whitespace philosophy)\n- Depth & elevation (shadow stacks with layer-by-layer values)\n- Responsive behavior (breakpoints, collapsing strategy, touch targets)\n- Accessibility specs (focus rings, color contrast ratios, interactive states)\n- **Agent prompt guide** โ copy-paste prompts to instantly generate pixel-perfect HTML\n\nNo guessing. No eyeballing. The exact values used by Stripe, Linear, Notion, Vercel, and 50 more.\n\n## Why This Exists\n\nWhen an AI generates HTML, it defaults to generic design. Blue links, system fonts, `box-shadow: 0 2px 8px rgba(0,0,0,0.1)`. These templates replace guesswork with precision.\n\n**Without this skill:** you get a generic admin dashboard that looks like 100 other AI-generated demos.\n\n**With this skill:** you get a pixel-accurate Notion page with warm-undertone grays, 4-layer whisper shadows, and compressed-letter-spacing Inter at 64px. You get a Stripe page with blue-purple gradients and weight-300 Source Sans elegance. You get a Linear dark mode UI with Geist Mono code blocks and purple accent glow.\n\n
\n\n## Install\n\n```bash\n# As a pip package\npip install git+https://github.com/minirr890112-byte/popular-web-designs.git\n\n# As a ClawHub skill\nclawhub install k97322wf3ap6xdkmwkwvej4kbd86h4yv\n```\n\n## Quick Start\n\n```python\n# Load any design template\nfrom popular_web_designs import load_template\n\n# Get the full Notion design system\nnotion = load_template('notion')\nprint(notion.colors.primary) # {'text': 'rgba(0,0,0,0.95)', 'accent': '#0075de', ...}\nprint(notion.shadows.card) # Multi-layer shadow stack\nprint(notion.typography.h1) # {size: '64px', weight: 700, letter_spacing: '-2.125px', ...}\n```\n\nOr use it as a skill with any Hermes-compatible agent:\n\n```\nskill_view(name=\"popular-web-designs\", file_path=\"templates/stripe.md\")\n```\n\nThen ask the agent: \"Build a landing page that looks like Stripe\" โ it will use the exact design tokens.\n\n---\n\n## Design Catalog\n\n### AI & Machine Learning (12)\n\n| Template | Site | Key Visual Identity |\n|---|---|---|\n| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |\n| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |\n| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |\n| `minimax.md` | Minimax | Bold dark interface with neon accents |\n| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |\n| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |\n| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |\n| `replicate.md` | Replicate | Clean white canvas, code-forward |\n| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |\n| `together.ai.md` | Together AI | Technical, blueprint-style design |\n| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent |\n| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism |\n\n### Developer Tools & Platforms (14)\n\n| Template | Site | Key Visual Identity |\n|---|---|---|\n| `cursor.md` | Cursor | Sleek dark interface, gradient accents |\n| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |\n| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |\n| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |\n| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |\n| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |\n| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |\n| `resend.md` | Resend | Minimal dark theme, monospace accents |\n| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |\n| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |\n| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |\n| `vercel.md` | Vercel | Black and white precision, Geist font system |\n| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |\n| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |\n\n### Infrastructure & Cloud (6)\n\n| Template | Site | Key Visual Identity |\n|---|---|---|\n| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |\n| `composio.md` | Composio | Modern dark with colorful integration icons |\n| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |\n| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |\n| `sanity.md` | Sanity | Red accent, content-first editorial layout |\n| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |\n\n### Design & Productivity (10)\n\n| Template | Site | Key Visual Identity |\n|---|---|---|\n| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |\n| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |\n| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |\n| `figma.md` | Figma | Vibrant multi-color, playful yet professional |\n| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |\n| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |\n| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |\n| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |\n| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |\n| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |\n\n### Fintech & Crypto (4)\n\n| Template | Site | Key Visual Identity |\n|---|---|---|\n| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |\n| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |\n| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |\n| `wise.md` | Wise | Bright green accent, friendly and clear |\n\n### Enterprise & Consumer (8)\n\n| Template | Site | Key Visual Identity |\n|---|---|---|\n| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |\n| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |\n| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |\n| `ibm.md` | IBM | Carbon design system, structured blue palette |\n| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |\n| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |\n| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |\n| `uber.md` | Uber | Bold black and white, tight type, urban energy |\n\n---\n\n## Featured Previews\n\n### Stripe โ Signature purple gradients, weight-300 elegance\n```\nPrimary: #635bff (purple CTA), #0a2540 (navy text)\nBackground: #ffffff โ #f6f9fc (gradient sections)\nTypography: Source Sans 3, weight 300-600, -0.3px letter-spacing\nShadow: subtle 0 2px 5px rgba(0,0,0,0.05) card lift\n```\n\n### Linear โ Ultra-minimal dark-mode, precise, purple accent\n```\nPrimary: #5e6ad2 (purple accent)\nBackground: #1a1a1a (dark canvas), #222222 (cards)\nTypography: Geist / Inter, weight 400-600, -0.01em tracking\nBorder: rgba(255,255,255,0.06) whisper lines\n```\n\n### Notion โ Warm minimalism, serif headings, soft surfaces\n```\nPrimary: #0075de (Notion Blue)\nBackground: #ffffff / #f6f5f4 (warm white alternation)\nTypography: Inter weight 300-700, -2.125px at 64px display\nShadow: 4-layer whisper stack (max opacity 0.04)\n```\n\n### Vercel โ Black and white precision, Geist font system\n```\nPrimary: #000000 (text), #ffffff (bg)\nAccent: #0070f3 (blue), #7928ca (purple gradient partner)\nTypography: Geist / Geist Mono, geometric compressed\nBorder: rgba(0,0,0,0.08) hairline\n```\n\n### Apple โ Premium white space, SF Pro, cinematic imagery\n```\nPrimary: #1d1d1f (text), #f5f5f7 (section bg)\nAccent: #0071e3 (Apple Blue), #2997ff (lighter blue)\nTypography: SF Pro Display (Inter substitute), -0.022em tracking\nShadow: complex multi-layer, subtle depth\n```\n\n---\n\n## How Each Template Is Structured\n\nEvery `.md` template follows 9 standard sections:\n\n1. **Visual Theme & Atmosphere** โ The philosophy behind the design\n2. **Color Palette & Roles** โ Every hex value with semantic meaning\n3. **Typography Rules** โ Complete hierarchy table with sizes, weights, letter-spacing\n4. **Component Stylings** โ Buttons, cards, inputs, navs with exact CSS\n5. **Layout Principles** โ Spacing scale, grid, whitespace, border radius scale\n6. **Depth & Elevation** โ Shadow stacks with layer-by-layer values\n7. **Responsive Behavior** โ Breakpoints, collapsing strategy, touch targets\n8. **Accessibility & States** โ Focus rings, contrast ratios, interactive states\n9. **Agent Prompt Guide** โ Copy-paste prompts for instant generation\n\n---\n\n## Choosing a Design\n\n| Use Case | Recommended Templates |\n|---|---|\n| Developer tools / dashboards | Linear, Vercel, Supabase, Raycast, Sentry, PostHog |\n| Documentation / content sites | Mintlify, Notion, Sanity, MongoDB, ClickHouse |\n| Marketing / landing pages | Stripe, Framer, Apple, SpaceX, Webflow |\n| Dark mode UIs | Linear, Cursor, ElevenLabs, Warp, Superhuman |\n| Light / clean UIs | Vercel, Stripe, Notion, Cal.com, Replicate |\n| Playful / friendly | PostHog, Figma, Lovable, Zapier, Miro, Airtable |\n| Premium / luxury | Apple, BMW, Stripe, Superhuman, Revolut |\n| Data-dense / dashboards | Sentry, Kraken, Cohere, ClickHouse |\n| Monospace / terminal aesthetic | Ollama, OpenCode, x.ai, VoltAgent |\n| Fintech / trust-focused | Coinbase, Revolut, Wise, Kraken |\n\n---\n\n## Ecosystem\n\nPart of the **HermesMade** toolkit:\n\n| Tool | Description |\n|---|---|\n| [task-cost-estimator](https://github.com/minirr890112-byte/task-cost-estimator) | Estimate dev task costs with AI |\n| [api-cost-compare](https://github.com/minirr890112-byte/api-cost-compare) | Compare LLM API pricing |\n| [model-watch](https://github.com/minirr890112-byte/model-watch) | Monitor new model releases |\n| [prompt-inspector](https://github.com/minirr890112-byte/prompt-inspector) | Analyze and optimize prompts |\n| [code-inspector](https://github.com/minirr890112-byte/code-inspector) | Code quality analysis |\n| [llm-deploy-helper](https://github.com/minirr890112-byte/llm-deploy-helper) | Deploy LLM inference servers |\n\n---\n\n## โญ Why Star?\n\n**1,910 developers downloaded this from ClawHub** โ making it the most-downloaded HermesMade skill. This represents thousands of hours of CSS pain avoided.\n\nIf these design tokens saved you time building a landing page, a star helps other developers discover it too. It's the only currency open source has.\n\n---\n\n## License\n\nMIT ยฉ [HermesMade](https://github.com/minirr890112-byte)\n\nDesign systems sourced from [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) โ all design tokens are factual descriptions of publicly accessible websites.\n\nFile v1.2.0:_meta.json\n\n{\n \"ownerId\": \"kn71cgymfx66r5zs5fd9vyz4cd85kv00\",\n \"slug\": \"popular-web-designs\",\n \"version\": \"1.2.0\",\n \"publishedAt\": 1781827206319\n}\n\nFile v1.2.0:skill-card.md\n\n## Description:\n\nProvides 54 web design system templates that help agents generate HTML, CSS, and UI guidance matching recognizable website visual styles.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[minirr890112-byte](https://clawhub.ai/user/minirr890112-byte)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and agents use this skill to select popular web design templates, inspect design tokens, and generate starter HTML/CSS or design guidance for landing pages, dashboards, documentation sites, and frontend prototypes.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The documented pip install path fetches executable Python from an unpinned GitHub branch.\n\nMitigation: Review the repository before installation and prefer a pinned commit, signed release, or trusted package version.\n\nRisk: Generated CSS and HTML may closely imitate recognizable third-party website styles.\n\nMitigation: Review generated assets for brand, trademark, and originality requirements before using them in public or commercial products.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/minirr890112-byte/skills/popular-web-designs)\n- [Project homepage](https://github.com/minirr890112-byte/popular-web-designs)\n- [Original design-system source](https://github.com/VoltAgent/awesome-design-md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance, CSS custom properties, and self-contained HTML/CSS snippets or files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [CLI output can be printed to stdout or written to local CSS and HTML files when an output path is provided.]\n\n## Skill Version(s):\n\n1.2.0 (source: server release evidence, artifact frontmatter, setup.py, and package __version__)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.1.0: 3 files, 2496 bytes\n\nFiles: skill-card.md (2043b), SKILL.md (1651b), _meta.json (138b)\n\nFile v1.1.0:SKILL.md\n\n---\nname: popular-web-designs\ndescription: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visual identity of any popular site. Neo-brutalist, SaaS, dashboard, landing page templates included.\nversion: 1.1.0\nauthor: minirr890112-byte\nlicense: MIT\nmetadata:\n hermes:\n tags: [Web-Design, HTML, CSS, Templates, Design-Systems, Frontend, UI, Landing-Page]\n homepage: https://github.com/minirr890112-byte/HermesMade\n---\n\n# Popular Web Designs\n\n## ไธๅฅ่ฏ\n\n54 ไธชไป็ๅฎ็ฝ็ซๆๅ็ๆ็่ฎพ่ฎก็ณป็ปใไธๅฅ่ฏ็ๆๅน้ StripeใLinearใVercel ็ญๆต่ก็ฝ็ซ่ง่ง้ฃๆ ผ็ HTML/CSSใ\n\n## ๆ ธๅฟๅ่ฝ\n\n- **54 Premium Templates** โ StripeใLinearใVercelใNotionใGitHub ็ญ\n- **Production Quality** โ ้็ฉๅ ทๆจกๆฟ๏ผ็ๅฎ็ฝ็ซๆๅ\n- **Neo-Brutalist Support** โ ๅ ๅซๆ็ฎ/neo-brutalist ้ฃๆ ผ\n- **Instant HTML/CSS** โ ไธๅฅ่ฏ็ๆๅฏ็ดๆฅ้จ็ฝฒ็้กต้ข\n\n## ๆไน็จ\n\n```bash\n# Load a template and generate\nclawhub install popular-web-designs\n```\n\n## ไฝฟ็จๅบๆฏ\n\n| ๅบๆฏ | ๆจ่ๆจกๆฟ |\n|------|---------|\n| SaaS ่ฝๅฐ้กต | Stripe-style |\n| ๅผๅ่ ๅทฅๅ ท | Linear-style, Vercel-style |\n| ไธชไบบๅๅฎข | Notion-style |\n| ๆงๅถ้ขๆฟ | Dashboard template |\n| ๆ็ฎ้ฃๆ ผ | Neo-brutalist |\n\n## Built for\n\nDevelopers who need a landing page fast without hiring a designer. 365 downloads on ClawHub โ the most downloaded HermesMade skill.\n\n## ไธบไปไน็ป้ขๆ๏ผ\n\n365 ไธ่ฝฝไป 0โ โ ๅฆๆไฝ ็จ่ฟไธ่งๅพๆ็จ๏ผ่ฏท็นไบฎ โญ โ [GitHub](https://github.com/minirr890112-byte/HermesMade)\n\nFile v1.1.0:_meta.json\n\n{\n \"ownerId\": \"kn71cgymfx66r5zs5fd9vyz4cd85kv00\",\n \"slug\": \"popular-web-designs\",\n \"version\": \"1.1.0\",\n \"publishedAt\": 1778508747598\n}\n\nFile v1.1.0:skill-card.md\n\n## Description: \nProvides 54 production-quality web design templates extracted from real websites to help agents generate HTML/CSS in popular SaaS, dashboard, landing page, and neo-brutalist styles. \n\nThis skill is ready for commercial/non-commercial use. \n\n## Publisher: \n[minirr890112-byte](https://clawhub.ai/user/minirr890112-byte) \n\n### License/Terms of Use: \nMIT-0 \n\n\n## Use Case: \nDevelopers and agents use this skill to draft landing pages, dashboards, blogs, and developer-tool interfaces by selecting popular visual templates and generating matching HTML/CSS. \n\n### Deployment Geography for Use: \nGlobal \n\n## Known Risks and Mitigations: \nRisk: Generated HTML/CSS may imitate recognizable brands or website styles. \nMitigation: Review designs before publishing and adjust branding, copy, and visual identity for the user's own rights and use case. \nRisk: Generated HTML/CSS may be unsuitable for direct production use without review. \nMitigation: Review generated pages for accessibility, responsiveness, content accuracy, and deployment requirements before publishing. \n\n\n## Reference(s): \n- [ClawHub skill page](https://clawhub.ai/minirr890112-byte/popular-web-designs) \n- [HermesMade homepage](https://github.com/minirr890112-byte/HermesMade) \n\n\n## Skill Output: \n**Output Type(s):** [Code, Shell commands, Guidance] \n**Output Format:** [Markdown with HTML/CSS and shell command snippets] \n**Output Parameters:** [1D] \n**Other Properties Related to Output:** [Produces design-system guidance and deployable HTML/CSS examples; no executable files are bundled.] \n\n## Skill Version(s): \n1.1.0 (source: server release metadata and SKILL.md frontmatter) \n\n## Ethical Considerations: \nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. \n\nArchive v1.0.0: 56 files, 353600 bytes\n\nFiles: SKILL.md (9444b), templates/airbnb.md (14824b), templates/airtable.md (4300b), templates/apple.md (21122b), templates/bmw.md (10585b), templates/cal.md (18582b), templates/claude.md (21078b), templates/clay.md (18105b), templates/clickhouse.md (16180b), templates/cohere.md (15543b), templates/coinbase.md (5781b), templates/composio.md (21732b), templates/cursor.md (19867b), templates/elevenlabs.md (15978b), templates/expo.md (19466b), templates/figma.md (12403b), templates/framer.md (18347b), templates/hashicorp.md (16425b), templates/ibm.md (20366b), templates/intercom.md (7162b), templates/kraken.md (5094b), templates/linear.app.md (23231b), templates/lovable.md (18160b), templates/minimax.md (15071b), templates/mintlify.md (18203b), templates/miro.md (5538b), templates/mistral.ai.md (16421b), templates/mongodb.md (15808b), templates/notion.md (19090b), templates/nvidia.md (17834b), templates/ollama.md (16307b), templates/opencode.ai.md (16307b), templates/pinterest.md (12694b), templates/posthog.md (19347b), templates/raycast.md (19261b), templates/replicate.md (14947b), templates/resend.md (19201b), templates/revolut.md (9363b), templates/runwayml.md (15097b), templates/sanity.md (22041b), templates/sentry.md (15539b), templates/spacex.md (12064b), templates/spotify.md (13731b), templates/stripe.md (21263b), templates/supabase.md (15592b), templates/superhuman.md (19714b), templates/together.ai.md (15073b), templates/uber.md (19430b), templates/vercel.md (20227b), templates/voltagent.md (27091b), templates/warp.md (17441b), templates/webflow.md (4863b), templates/wise.md (9208b), templates/x.ai.md (17043b), templates/zapier.md (19484b), _meta.json (138b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: popular-web-designs\ndescription: >\n 54 production-quality design systems extracted from real websites. Load a template\n to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear,\n Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components,\n layout rules, and ready-to-use CSS values.\nversion: 1.0.0\nauthor: Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md)\nlicense: MIT\ntags: [design, css, html, ui, web-development, design-systems, templates]\ntriggers:\n - build a page that looks like\n - make it look like stripe\n - design like linear\n - vercel style\n - create a UI\n - web design\n - landing page\n - dashboard design\n - website styled like\n---\n\n# Popular Web Designs\n\n54 real-world design systems ready for use when generating HTML/CSS. Each template captures a\nsite's complete visual language: color palette, typography hierarchy, component styles, spacing\nsystem, shadows, responsive behavior, and practical agent prompts with exact CSS values.\n\n## How to Use\n\n1. Pick a design from the catalog below\n2. Load it: `skill_view(name=\"popular-web-designs\", file_path=\"templates/.md\")`\n3. Use the design tokens and component specs when generating HTML\n4. Pair with the `generative-widgets` skill to serve the result via cloudflared tunnel\n\nEach template includes a **Hermes Implementation Notes** block at the top with:\n- CDN font substitute and Google Fonts `` tag (ready to paste)\n- CSS font-family stacks for primary and monospace\n- Reminders to use `write_file` for HTML creation and `browser_vision` for verification\n\n## HTML Generation Pattern\n\n```html\n\n\n\n \n \n Page Title\n \n \n \n\n\n \n\n\n```\n\nWrite the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),\nand verify the result with `browser_vision` to confirm visual accuracy.\n\n## Font Substitution Reference\n\nMost sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts\nsubstitute that preserves the design's character. Common mappings:\n\n| Proprietary Font | CDN Substitute | Character |\n|---|---|---|\n| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |\n| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |\n| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |\n| Berkeley Mono | JetBrains Mono | Technical monospace |\n| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |\n| Circular (Spotify) | DM Sans | Geometric, warm |\n| figmaSans | Inter | Clean humanist |\n| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |\n| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |\n| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |\n| UberMove | DM Sans | Bold, tight |\n| HashiCorp Sans | Inter | Enterprise, neutral |\n| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |\n| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |\n| Rubik (Sentry) | Rubik | Available on Google Fonts |\n\nWhen a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no\nsubstitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3\nfor sohne-var), follow the template's weight, size, and letter-spacing values closely โ\nthose carry more visual identity than the specific font face.\n\n## Design Catalog\n\n### AI & Machine Learning\n\n| Template | Site | Style |\n|---|---|---|\n| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |\n| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |\n| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |\n| `minimax.md` | Minimax | Bold dark interface with neon accents |\n| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |\n| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |\n| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |\n| `replicate.md` | Replicate | Clean white canvas, code-forward |\n| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |\n| `together.ai.md` | Together AI | Technical, blueprint-style design |\n| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |\n| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |\n\n### Developer Tools & Platforms\n\n| Template | Site | Style |\n|---|---|---|\n| `cursor.md` | Cursor | Sleek dark interface, gradient accents |\n| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |\n| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |\n| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |\n| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |\n| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |\n| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |\n| `resend.md` | Resend | Minimal dark theme, monospace accents |\n| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |\n| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |\n| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |\n| `vercel.md` | Vercel | Black and white precision, Geist font system |\n| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |\n| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |\n\n### Infrastructure & Cloud\n\n| Template | Site | Style |\n|---|---|---|\n| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |\n| `composio.md` | Composio | Modern dark with colorful integration icons |\n| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |\n| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |\n| `sanity.md` | Sanity | Red accent, content-first editorial layout |\n| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |\n\n### Design & Productivity\n\n| Template | Site | Style |\n|---|---|---|\n| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |\n| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |\n| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |\n| `figma.md` | Figma | Vibrant multi-color, playful yet professional |\n| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |\n| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |\n| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |\n| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |\n| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |\n| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |\n\n### Fintech & Crypto\n\n| Template | Site | Style |\n|---|---|---|\n| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |\n| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |\n| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |\n| `wise.md` | Wise | Bright green accent, friendly and clear |\n\n### Enterprise & Consumer\n\n| Template | Site | Style |\n|---|---|---|\n| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |\n| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |\n| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |\n| `ibm.md` | IBM | Carbon design system, structured blue palette |\n| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |\n| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |\n| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |\n| `uber.md` | Uber | Bold black and white, tight type, urban energy |\n\n## Choosing a Design\n\nMatch the design to the content:\n\n- **Developer tools / dashboards:** Linear, Vercel, Supabase, Raycast, Sentry\n- **Documentation / content sites:** Mintlify, Notion, Sanity, MongoDB\n- **Marketing / landing pages:** Stripe, Framer, Apple, SpaceX\n- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman\n- **Light / clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate\n- **Playful / friendly:** PostHog, Figma, Lovable, Zapier, Miro\n- **Premium / luxury:** Apple, BMW, Stripe, Superhuman, Revolut\n- **Data-dense / dashboards:** Sentry, Kraken, Cohere, ClickHouse\n- **Monospace / terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent\n\nFile v1.0.0:_meta.json\n\n{\n \"ownerId\": \"kn71cgymfx66r5zs5fd9vyz4cd85kv00\",\n \"slug\": \"popular-web-designs\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1777189623503\n}\n\nFile v1.0.0:templates/airbnb.md\n\n# Design System: Airbnb\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `DM Sans` | **Mono:** `system monospace stack`\n> - **Font stack (CSS):** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`\n> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nAirbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (`#ffffff`) with the iconic Rausch Red (`#ff385c`) โ named after Airbnb's first street address โ serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.\n\nThe typography uses Airbnb Cereal VF โ a custom variable font that's warm and approachable, with rounded terminals that echo the brand's \"belong anywhere\" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.\n\nWhat distinguishes Airbnb is its palette-based token system (`--palette-*`) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`) that creates a subtle, warm lift. Combined with generous border-radius (8pxโ32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting โ designed for browsing, not commanding.\n\n**Key Characteristics:**\n- Pure white canvas with Rausch Red (`#ff385c`) as singular brand accent\n- Airbnb Cereal VF โ custom variable font with warm, rounded terminals\n- Palette-based token system (`--palette-*`) for systematic color management\n- Three-layer card shadows: border ring + soft blur + stronger blur\n- Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements\n- Circular navigation controls (50% radius)\n- Photography-first listing cards โ images are the hero content\n- Near-black text (`#222222`) โ warm, not cold\n- Luxe Purple (`#460479`) and Plus Magenta (`#92174d`) for premium tiers\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Rausch Red** (`#ff385c`): `--palette-bg-primary-core`, primary CTA, brand accent, active states\n- **Deep Rausch** (`#e00b41`): `--palette-bg-tertiary-core`, pressed/dark variant of brand red\n- **Error Red** (`#c13515`): `--palette-text-primary-error`, error text on light\n- **Error Dark** (`#b32505`): `--palette-text-secondary-error-hover`, error hover\n\n### Premium Tiers\n- **Luxe Purple** (`#460479`): `--palette-bg-primary-luxe`, Airbnb Luxe tier branding\n- **Plus Magenta** (`#92174d`): `--palette-bg-primary-plus`, Airbnb Plus tier branding\n\n### Text Scale\n- **Near Black** (`#222222`): `--palette-text-primary`, primary text โ warm, not cold\n- **Focused Gray** (`#3f3f3f`): `--palette-text-focused`, focused state text\n- **Secondary Gray** (`#6a6a6a`): Secondary text, descriptions\n- **Disabled** (`rgba(0,0,0,0.24)`): `--palette-text-material-disabled`, disabled state\n- **Link Disabled** (`#929292`): `--palette-text-link-disabled`, disabled links\n\n### Interactive\n- **Legal Blue** (`#428bff`): `--palette-text-legal`, legal links, informational\n- **Border Gray** (`#c1c1c1`): Border color for cards and dividers\n- **Light Surface** (`#f2f2f2`): Circular navigation buttons, secondary surfaces\n\n### Surface & Shadows\n- **Pure White** (`#ffffff`): Page background, card surfaces\n- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`): Three-layer warm lift\n- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`): Button hover elevation\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Airbnb Cereal VF`, fallbacks: `Circular, -apple-system, system-ui, Roboto, Helvetica Neue`\n- **OpenType Features**: `\"salt\"` (stylistic alternates) on specific caption elements\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Section Heading | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | Primary headings |\n| Card Heading | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | Category/card titles |\n| Card Heading Medium | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | Lighter variant |\n| Sub-heading | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | Bold sub-headings |\n| Feature Title | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | Feature headings |\n| UI Medium | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Nav, emphasized text |\n| UI Semibold | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | Strong emphasis |\n| Button | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Button labels |\n| Body / Link | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | Standard body |\n| Body Medium | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | Medium body |\n| Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `\"salt\"` feature |\n| Small | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | Descriptions |\n| Tag | Airbnb Cereal VF | 12px (0.75rem) | 400โ700 | 1.33 | normal | Tags, prices |\n| Badge | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `\"salt\"` feature |\n| Micro Uppercase | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |\n\n### Principles\n- **Warm weight range**: 500โ700 dominate. No weight 300 or 400 for headings โ Airbnb's type is always at least medium weight, creating a warm, confident voice.\n- **Negative tracking on headings**: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.\n- **\"salt\" OpenType feature**: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.\n- **Variable font precision**: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: `#222222` (near-black, not pure black)\n- Text: `#ffffff`\n- Padding: 0px 24px\n- Radius: 8px\n- Hover: transitions to error/brand accent via `var(--accent-bg-error)`\n- Focus: `0 0 0 2px var(--palette-grey1000)` ring + scale(0.92)\n\n**Circular Nav**\n- Background: `#f2f2f2`\n- Text: `#222222`\n- Radius: 50% (circle)\n- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)\n- Active: 4px white border ring + focus shadow\n- Focus: scale(0.92) shrink animation\n\n### Cards & Containers\n- Background: `#ffffff`\n- Radius: 14px (badges), 20px (cards/buttons), 32px (large)\n- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` (three-layer)\n- Listing cards: full-width photography on top, details below\n- Carousel controls: circular 50% buttons\n\n### Inputs\n- Search: `#222222` text\n- Focus: `var(--palette-bg-primary-error)` background tint + `0 0 0 2px` ring\n- Radius: depends on context (search bar uses pill-like rounding)\n\n### Navigation\n- White sticky header with search bar centered\n- Airbnb logo (Rausch Red) left-aligned\n- Category filter pills: horizontal scroll below search\n- Circular nav controls for carousel navigation\n- \"Become a Host\" text link, avatar/menu right-aligned\n\n### Image Treatment\n- Listing photography fills card top with generous height\n- Image carousel with dot indicators\n- Heart/wishlist icon overlay on images\n- 8pxโ14px radius on contained images\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px\n\n### Grid & Container\n- Full-width header with centered search\n- Category pill bar: horizontal scrollable row\n- Listing grid: responsive multi-column (3โ5 columns on desktop)\n- Full-width footer with link columns\n\n### Whitespace Philosophy\n- **Travel-magazine spacing**: Generous vertical padding between sections creates a leisurely browsing pace โ you're meant to scroll slowly, like browsing a magazine.\n- **Photography density**: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.\n- **Search bar prominence**: The search bar gets maximum vertical space in the header โ finding your destination is the primary action.\n\n### Border Radius Scale\n- Subtle (4px): Small links\n- Standard (8px): Buttons, tabs, search elements\n- Badge (14px): Status badges, labels\n- Card (20px): Feature cards, large buttons\n- Large (32px): Large containers, hero elements\n- Circle (50%): Nav controls, avatars, icons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Card (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | Listing cards, search bar |\n| Hover (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | Button hover, interactive lift |\n| Active Focus (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + focus ring | Active/focused elements |\n\n**Shadow Philosophy**: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (`0px 0px 0px 1px` at 0.02 opacity) is an ultra-subtle border. Layer 2 (`0px 2px 6px` at 0.04) provides soft ambient shadow. Layer 3 (`0px 4px 8px` at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#222222` (warm near-black) for text โ never pure `#000000`\n- Apply Rausch Red (`#ff385c`) only for primary CTAs and brand moments โ it's the singular accent\n- Use Airbnb Cereal VF at weight 500โ700 โ the warm weight range is intentional\n- Apply the three-layer card shadow for all elevated surfaces\n- Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls\n- Use photography as the primary visual content โ listings are image-first\n- Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy\n- Use circular (50%) buttons for carousel/navigation controls\n\n### Don't\n- Don't use pure black (`#000000`) for text โ always `#222222` (warm)\n- Don't apply Rausch Red to backgrounds or large surfaces โ it's an accent only\n- Don't use thin font weights (300, 400) for headings โ 500 minimum\n- Don't use heavy shadows (>0.1 opacity as primary layer) โ keep them warm and graduated\n- Don't use sharp corners (0โ4px) on cards โ the generous rounding (20px+) is core\n- Don't introduce additional brand colors beyond the Rausch/Luxe/Plus system\n- Don't override the palette token system โ use `--palette-*` variables consistently\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Single column, compact search |\n| Mobile | 375โ550px | Standard mobile listing grid |\n| Tablet Small | 550โ744px | 2-column listings |\n| Tablet | 744โ950px | Search bar expansion |\n| Desktop Small | 950โ1128px | 3-column listings |\n| Desktop | 1128โ1440px | 4-column grid, full header |\n| Large Desktop | 1440โ1920px | 5-column grid |\n| Ultra-wide | >1920px | Maximum grid width |\n\n*Note: Airbnb has 61 detected breakpoints โ one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.*\n\n### Touch Targets\n- Circular nav buttons: adequate 50% radius sizing\n- Listing cards: full-card tap target on mobile\n- Search bar: prominently sized for thumb interaction\n- Category pills: horizontally scrollable with generous padding\n\n### Collapsing Strategy\n- Listing grid: 5 โ 4 โ 3 โ 2 โ 1 columns\n- Search: expanded bar โ compact bar โ overlay\n- Category pills: horizontal scroll at all sizes\n- Navigation: full header โ mobile simplified\n- Map: side panel โ overlay/toggle\n\n### Image Behavior\n- Listing photos: carousel with swipe on mobile\n- Responsive image sizing with aspect ratio maintained\n- Heart overlay positioned consistently across sizes\n- Photo quality adjusts based on viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#222222`)\n- Brand accent: Rausch Red (`#ff385c`)\n- Secondary text: `#6a6a6a`\n- Disabled: `rgba(0,0,0,0.24)`\n- Card border: `rgba(0,0,0,0.02) 0px 0px 0px 1px`\n- Card shadow: full three-layer stack\n- Button surface: `#f2f2f2`\n\n### Example Component Prompts\n- \"Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a.\"\n- \"Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon).\"\n- \"Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev/next arrows (#f2f2f2 bg, 50% radius).\"\n- \"Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent.\"\n- \"Design a heart/wishlist button: transparent background, 50% radius, white heart icon with dark shadow outline.\"\n\n### Iteration Guide\n1. Start with white โ the photography provides all the color\n2. Rausch Red (#ff385c) is the singular accent โ use sparingly for CTAs only\n3. Near-black (#222222) for text โ the warmth matters\n4. Three-layer shadows create natural, warm lift โ always use all three layers\n5. Generous radius: 8px buttons, 20px cards, 50% controls\n6. Cereal VF at 500โ700 weight โ no thin weights for any heading\n7. Photography is hero โ every listing card is image-first\n\nFile v1.0.0:templates/airtable.md\n\n# Design System: Airtable\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `Inter` | **Mono:** `system monospace stack`\n> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`\n> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nAirtable's website is a clean, enterprise-friendly platform that communicates \"sophisticated simplicity\" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.\n\n**Key Characteristics:**\n- White canvas with deep navy text (`#181d26`)\n- Airtable Blue (`#1b61c9`) as primary CTA and link color\n- Haas + Haas Groot Disp dual font system\n- Positive letter-spacing on body text (0.08pxโ0.28px)\n- 12px radius buttons, 16pxโ32px for cards\n- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`\n- Semantic theme tokens: `--theme_*` CSS variable naming\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Deep Navy** (`#181d26`): Primary text\n- **Airtable Blue** (`#1b61c9`): CTA buttons, links\n- **White** (`#ffffff`): Primary surface\n- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`\n\n### Semantic\n- **Success Green** (`#006400`): `--theme_success-text`\n- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`\n- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`\n\n### Neutral\n- **Dark Gray** (`#333333`): Secondary text\n- **Mid Blue** (`#254fad`): Link/accent blue variant\n- **Border** (`#e0e2e6`): Card borders\n- **Light Surface** (`#f8fafc`): Subtle surface\n\n### Shadows\n- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)\n- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`\n- **Display**: `Haas Groot Disp`, fallback: `Haas`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Haas | 48px | 400 | 1.15 | normal |\n| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |\n| Section Heading | Haas | 40px | 400 | 1.25 | normal |\n| Sub-heading | Haas | 32px | 400โ500 | 1.15โ1.25 | normal |\n| Card Title | Haas | 24px | 400 | 1.20โ1.30 | 0.12px |\n| Feature | Haas | 20px | 400 | 1.25โ1.50 | 0.1px |\n| Body | Haas | 18px | 400 | 1.35 | 0.18px |\n| Body Medium | Haas | 16px | 500 | 1.30 | 0.08โ0.16px |\n| Button | Haas | 16px | 500 | 1.25โ1.30 | 0.08px |\n| Caption | Haas | 14px | 400โ500 | 1.25โ1.35 | 0.07โ0.28px |\n\n## 4. Component Stylings\n\n### Buttons\n- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius\n- **White**: white bg, `#181d26` text, 12px radius, 1px border white\n- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)\n\n### Cards: `1px solid #e0e2e6`, 16pxโ24px radius\n### Inputs: Standard Haas styling\n\n## 5. Layout\n- Spacing: 1โ48px (8px base)\n- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)\n\n## 6. Depth\n- Blue-tinted multi-layer shadow system\n- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`\n\n## 7. Do's and Don'ts\n### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons\n### Don't: Skip positive letter-spacing, use heavy shadows\n\n## 8. Responsive Behavior\nBreakpoints: 425โ1664px (23 breakpoints)\n\n## 9. Agent Prompt Guide\n- Text: Deep Navy (`#181d26`)\n- CTA: Airtable Blue (`#1b61c9`)\n- Background: White (`#ffffff`)\n- Border: `#e0e2e6`\n\nFile v1.0.0:templates/apple.md\n\n# Design System: Apple\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `system-ui` | **Mono:** `SF Mono (system)`\n> - **Font stack (CSS):** `font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;`\n> - **Mono stack (CSS):** `font-family: 'SF Mono (system)', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nApple's website is a masterclass in controlled drama โ vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a gallery. The design philosophy is reductive to its core: every pixel exists in service of the product, and the interface itself retreats until it becomes invisible. This is not minimalism as aesthetic preference; it is minimalism as reverence for the object.\n\nThe typography anchors everything. San Francisco (SF Pro Display for large sizes, SF Pro Text for body) is Apple's proprietary typeface, engineered with optical sizing that automatically adjusts letterforms depending on point size. At display sizes (56px), weight 600 with a tight line-height of 1.07 and subtle negative letter-spacing (-0.28px) creates headlines that feel machined rather than typeset โ precise, confident, and unapologetically direct. At body sizes (17px), the tracking loosens slightly (-0.374px) and line-height opens to 1.47, creating a reading rhythm that is comfortable without ever feeling slack.\n\nThe color story is starkly binary. Product sections alternate between pure black (`#000000`) backgrounds with white text and light gray (`#f5f5f7`) backgrounds with near-black text (`#1d1d1f`). This creates a cinematic pacing โ dark sections feel immersive and premium, light sections feel open and informational. The only chromatic accent is Apple Blue (`#0071e3`), reserved exclusively for interactive elements: links, buttons, and focus states. This singular accent color in a sea of neutrals gives every clickable element unmistakable visibility.\n\n**Key Characteristics:**\n- SF Pro Display/Text with optical sizing โ letterforms adapt automatically to size context\n- Binary light/dark section rhythm: black (`#000000`) alternating with light gray (`#f5f5f7`)\n- Single accent color: Apple Blue (`#0071e3`) reserved exclusively for interactive elements\n- Product-as-hero photography on solid color fields โ no gradients, no textures, no distractions\n- Extremely tight headline line-heights (1.07-1.14) creating compressed, billboard-like impact\n- Full-width section layout with centered content โ the viewport IS the canvas\n- Pill-shaped CTAs (980px radius) creating soft, approachable action buttons\n- Generous whitespace between sections allowing each product moment to breathe\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (`#000000`): Hero section backgrounds, immersive product showcases. The darkest canvas for the brightest products.\n- **Light Gray** (`#f5f5f7`): Alternate section backgrounds, informational areas. Not white โ the slight blue-gray tint prevents sterility.\n- **Near Black** (`#1d1d1f`): Primary text on light backgrounds, dark button fills. Slightly warmer than pure black for comfortable reading.\n\n### Interactive\n- **Apple Blue** (`#0071e3`): `--sk-focus-color`, primary CTA backgrounds, focus rings. The ONLY chromatic color in the interface.\n- **Link Blue** (`#0066cc`): `--sk-body-link-color`, inline text links. Slightly darker than Apple Blue for text-level readability.\n- **Bright Blue** (`#2997ff`): Links on dark backgrounds. Higher luminance for contrast on black sections.\n\n### Text\n- **White** (`#ffffff`): Text on dark backgrounds, button text on blue/dark CTAs.\n- **Near Black** (`#1d1d1f`): Primary body text on light backgrounds.\n- **Black 80%** (`rgba(0, 0, 0, 0.8)`): Secondary text, nav items on light backgrounds. Slightly softened.\n- **Black 48%** (`rgba(0, 0, 0, 0.48)`): Tertiary text, disabled states, carousel controls.\n\n### Surface & Dark Variants\n- **Dark Surface 1** (`#272729`): Card backgrounds in dark sections.\n- **Dark Surface 2** (`#262628`): Subtle surface variation in dark contexts.\n- **Dark Surface 3** (`#28282a`): Elevated cards on dark backgrounds.\n- **Dark Surface 4** (`#2a2a2d`): Highest dark surface elevation.\n- **Dark Surface 5** (`#242426`): Deepest dark surface tone.\n\n### Button States\n- **Button Active** (`#ededf2`): Active/pressed state for light buttons.\n- **Button Default Light** (`#fafafc`): Search/filter button backgrounds.\n- **Overlay** (`rgba(210, 210, 215, 0.64)`): Media control scrims, overlays.\n- **White 32%** (`rgba(255, 255, 255, 0.32)`): Hover state on dark modal close buttons.\n\n### Shadows\n- **Card Shadow** (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`): Soft, diffused elevation for product cards. Offset and wide blur create a natural, photographic shadow.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `SF Pro Display`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`\n- **Body**: `SF Pro Text`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`\n- SF Pro Display is used at 20px and above; SF Pro Text is optimized for 19px and below.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | SF Pro Display | 56px (3.50rem) | 600 | 1.07 (tight) | -0.28px | Product launch headlines, maximum impact |\n| Section Heading | SF Pro Display | 40px (2.50rem) | 600 | 1.10 (tight) | normal | Feature section titles |\n| Tile Heading | SF Pro Display | 28px (1.75rem) | 400 | 1.14 (tight) | 0.196px | Product tile headlines |\n| Card Title | SF Pro Display | 21px (1.31rem) | 700 | 1.19 (tight) | 0.231px | Bold card headings |\n| Sub-heading | SF Pro Display | 21px (1.31rem) | 400 | 1.19 (tight) | 0.231px | Regular card headings |\n| Nav Heading | SF Pro Text | 34px (2.13rem) | 600 | 1.47 | -0.374px | Large navigation headings |\n| Sub-nav | SF Pro Text | 24px (1.50rem) | 300 | 1.50 | normal | Light sub-navigation text |\n| Body | SF Pro Text | 17px (1.06rem) | 400 | 1.47 | -0.374px | Standard reading text |\n| Body Emphasis | SF Pro Text | 17px (1.06rem) | 600 | 1.24 (tight) | -0.374px | Emphasized body text, labels |\n| Button Large | SF Pro Text | 18px (1.13rem) | 300 | 1.00 (tight) | normal | Large button text, light weight |\n| Button | SF Pro Text | 17px (1.06rem) | 400 | 2.41 (relaxed) | normal | Standard button text |\n| Link | SF Pro Text | 14px (0.88rem) | 400 | 1.43 | -0.224px | Body links, \"Learn more\" |\n| Caption | SF Pro Text | 14px (0.88rem) | 400 | 1.29 (tight) | -0.224px | Secondary text, descriptions |\n| Caption Bold | SF Pro Text | 14px (0.88rem) | 600 | 1.29 (tight) | -0.224px | Emphasized captions |\n| Micro | SF Pro Text | 12px (0.75rem) | 400 | 1.33 | -0.12px | Fine print, footnotes |\n| Micro Bold | SF Pro Text | 12px (0.75rem) | 600 | 1.33 | -0.12px | Bold fine print |\n| Nano | SF Pro Text | 10px (0.63rem) | 400 | 1.47 | -0.08px | Legal text, smallest size |\n\n### Principles\n- **Optical sizing as philosophy**: SF Pro automatically switches between Display and Text optical sizes. Display versions have wider letter spacing and thinner strokes optimized for large sizes; Text versions are tighter and sturdier for small sizes. This means the font literally changes its DNA based on context.\n- **Weight restraint**: The scale spans 300 (light) to 700 (bold) but most text lives at 400 (regular) and 600 (semibold). Weight 300 appears only on large decorative text. Weight 700 is rare, used only for bold card titles.\n- **Negative tracking at all sizes**: Unlike most systems that only track headlines, Apple applies subtle negative letter-spacing even at body sizes (-0.374px at 17px, -0.224px at 14px, -0.12px at 12px). This creates universally tight, efficient text.\n- **Extreme line-height range**: Headlines compress to 1.07 while body text opens to 1.47, and some button contexts stretch to 2.41. This dramatic range creates clear visual hierarchy through rhythm alone.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Blue (CTA)**\n- Background: `#0071e3` (Apple Blue)\n- Text: `#ffffff`\n- Padding: 8px 15px\n- Radius: 8px\n- Border: 1px solid transparent\n- Font: SF Pro Text, 17px, weight 400\n- Hover: background brightens slightly\n- Active: `#ededf2` background shift\n- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline\n- Use: Primary call-to-action (\"Buy\", \"Shop iPhone\")\n\n**Primary Dark**\n- Background: `#1d1d1f`\n- Text: `#ffffff`\n- Padding: 8px 15px\n- Radius: 8px\n- Font: SF Pro Text, 17px, weight 400\n- Use: Secondary CTA, dark variant\n\n**Pill Link (Learn More / Shop)**\n- Background: transparent\n- Text: `#0066cc` (light bg) or `#2997ff` (dark bg)\n- Radius: 980px (full pill)\n- Border: 1px solid `#0066cc`\n- Font: SF Pro Text, 14px-17px\n- Hover: underline decoration\n- Use: \"Learn more\" and \"Shop\" links โ the signature Apple inline CTA\n\n**Filter / Search Button**\n- Background: `#fafafc`\n- Text: `rgba(0, 0, 0, 0.8)`\n- Padding: 0px 14px\n- Radius: 11px\n- Border: 3px solid `rgba(0, 0, 0, 0.04)`\n- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline\n- Use: Search bars, filter controls\n\n**Media Control**\n- Background: `rgba(210, 210, 215, 0.64)`\n- Text: `rgba(0, 0, 0, 0.48)`\n- Radius: 50% (circular)\n- Active: scale(0.9), background shifts\n- Focus: `2px solid var(--sk-focus-color, #0071e3)` outline, white bg, black text\n- Use: Play/pause, carousel arrows\n\n### Cards & Containers\n- Background: `#f5f5f7` (light) or `#272729`-`#2a2a2d` (dark)\n- Border: none (borders are rare in Apple's system)\n- Radius: 5px-8px\n- Shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` for elevated product cards\n- Content: centered, generous padding\n- Hover: no standard hover state โ cards are static, links within them are interactive\n\n### Navigation\n- Background: `rgba(0, 0, 0, 0.8)` (translucent dark) with `backdrop-filter: saturate(180%) blur(20px)`\n- Height: 48px (compact)\n- Text: `#ffffff` at 12px, weight 400\n- Active: underline on hover\n- Logo: Apple logomark (SVG) centered or left-aligned, 17x48px viewport\n- Mobile: collapses to hamburger with full-screen overlay menu\n- The nav floats above content, maintaining its dark translucent glass regardless of section background\n\n### Image Treatment\n- Products on solid-color fields (black or white) โ no backgrounds, no context, just the object\n- Full-bleed section images that span the entire viewport width\n- Product photography at extremely high resolution with subtle shadows\n- Lifestyle images confined to rounded-corner containers (12px+ radius)\n\n### Distinctive Components\n\n**Product Hero Module**\n- Full-viewport-width section with solid background (black or `#f5f5f7`)\n- Product name as the primary headline (SF Pro Display, 56px, weight 600)\n- One-line descriptor below in lighter weight\n- Two pill CTAs side by side: \"Learn more\" (outline) and \"Buy\" / \"Shop\" (filled)\n\n**Product Grid Tile**\n- Square or near-square card on contrasting background\n- Product image dominating 60-70% of the tile\n- Product name + one-line description below\n- \"Learn more\" and \"Shop\" link pair at bottom\n\n**Feature Comparison Strip**\n- Horizontal scroll of product variants\n- Each variant as a vertical card with image, name, and key specs\n- Minimal chrome โ the products speak for themselves\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px\n- Notable characteristic: the scale is dense at small sizes (2-11px) with granular 1px increments, then jumps in larger steps. This allows precise micro-adjustments for typography and icon alignment.\n\n### Grid & Container\n- Max content width: approximately 980px (the recurring \"980px radius\" in pill buttons echoes this width)\n- Hero: full-viewport-width sections with centered content block\n- Product grids: 2-3 column layouts within centered container\n- Single-column for hero moments โ one product, one message, full attention\n- No visible grid lines or gutters โ spacing creates implied structure\n\n### Whitespace Philosophy\n- **Cinematic breathing room**: Each product section occupies a full viewport height (or close to it). The whitespace between products is not empty โ it is the pause between scenes in a film.\n- **Vertical rhythm through color blocks**: Rather than using spacing alone to separate sections, Apple uses alternating background colors (black, `#f5f5f7`, white). Each color change signals a new \"scene.\"\n- **Compression within, expansion between**: Text blocks are tightly set (negative letter-spacing, tight line-heights) while the space surrounding them is vast. This creates a tension between density and openness.\n\n### Border Radius Scale\n- Micro (5px): Small containers, link tags\n- Standard (8px): Buttons, product cards, image containers\n- Comfortable (11px): Search inputs, filter buttons\n- Large (12px): Feature panels, lifestyle image containers\n- Full Pill (980px): CTA links (\"Learn more\", \"Shop\"), navigation pills\n- Circle (50%): Media controls (play/pause, arrows)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, solid background | Standard content sections, text blocks |\n| Navigation Glass | `backdrop-filter: saturate(180%) blur(20px)` on `rgba(0,0,0,0.8)` | Sticky navigation bar โ the glass effect |\n| Subtle Lift (Level 1) | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | Product cards, floating elements |\n| Media Control | `rgba(210, 210, 215, 0.64)` background with scale transforms | Play/pause buttons, carousel controls |\n| Focus (Accessibility) | `2px solid #0071e3` outline | Keyboard focus on all interactive elements |\n\n**Shadow Philosophy**: Apple uses shadow extremely sparingly. The primary shadow (`3px 5px 30px` with 0.22 opacity) is soft, wide, and offset โ mimicking a diffused studio light casting a natural shadow beneath a physical object. This reinforces the \"product as physical sculpture\" metaphor. Most elements have NO shadow at all; elevation comes from background color contrast (dark card on darker background, or light card on slightly different gray).\n\n### Decorative Depth\n- Navigation glass: the translucent, blurred navigation bar is the most recognizable depth element, creating a sense of floating UI above scrolling content\n- Section color transitions: depth is implied by the alternation between black and light gray sections rather than by shadows\n- Product photography shadows: the products themselves cast shadows in their photography, so the UI doesn't need to add synthetic ones\n\n## 7. Do's and Don'ts\n\n### Do\n- Use SF Pro Display at 20px+ and SF Pro Text below 20px โ respect the optical sizing boundary\n- Apply negative letter-spacing at all text sizes (not just headlines) โ Apple tracks tight universally\n- Use Apple Blue (`#0071e3`) ONLY for interactive elements โ it must be the singular accent\n- Alternate between black and light gray (`#f5f5f7`) section backgrounds for cinematic rhythm\n- Use 980px pill radius for CTA links โ the signature Apple link shape\n- Keep product imagery on solid-color fields with no competing visual elements\n- Use the translucent dark glass (`rgba(0,0,0,0.8)` + blur) for sticky navigation\n- Compress headline line-heights to 1.07-1.14 โ Apple headlines are famously tight\n\n### Don't\n- Don't introduce additional accent colors โ the entire chromatic budget is spent on blue\n- Don't use heavy shadows or multiple shadow layers โ Apple's shadow system is one soft diffused shadow or nothing\n- Don't use borders on cards or containers โ Apple almost never uses visible borders (except on specific buttons)\n- Don't apply wide letter-spacing to SF Pro โ it is designed to run tight at every size\n- Don't use weight 800 or 900 โ the maximum is 700 (bold), and even that is rare\n- Don't add textures, patterns, or gradients to backgrounds โ solid colors only\n- Don't make the navigation opaque โ the glass blur effect is essential to the Apple UI identity\n- Don't center-align body text โ Apple body copy is left-aligned; only headlines center\n- Don't use rounded corners larger than 12px on rectangular elements (980px is for pills only)\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | <360px | Minimum supported, single column |\n| Mobile | 360-480px | Standard mobile layout |\n| Mobile Large | 480-640px | Wider single column, larger images |\n| Tablet Small | 640-834px | 2-column product grids begin |\n| Tablet | 834-1024px | Full tablet layout, expanded nav |\n| Desktop Small | 1024-1070px | Standard desktop layout begins |\n| Desktop | 1070-1440px | Full layout, max content width |\n| Large Desktop | >1440px | Centered with generous margins |\n\n### Touch Targets\n- Primary CTAs: 8px 15px padding creating ~44px touch height\n- Navigation links: 48px height with adequate spacing\n- Media controls: 50% radius circular buttons, minimum 44x44px\n- \"Learn more\" pills: generous padding for comfortable tapping\n\n### Collapsing Strategy\n- Hero headlines: 56px Display โ 40px โ 28px on mobile, maintaining tight line-height proportionally\n- Product grids: 3-column โ 2-column โ single column stacked\n- Navigation: full horizontal nav โ compact mobile menu (hamburger)\n- Product hero modules: full-bleed maintained at all sizes, text scales down\n- Section backgrounds: maintain full-width color blocks at all breakpoints โ the cinematic rhythm never breaks\n- Image sizing: products scale proportionally, never crop โ the product silhouette is sacred\n\n### Image Behavior\n- Product photography maintains aspect ratio at all breakpoints\n- Hero product images scale down but stay centered\n- Full-bleed section backgrounds persist at every size\n- Lifestyle images may crop on mobile but maintain their rounded corners\n- Lazy loading for below-fold product images\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Apple Blue (`#0071e3`)\n- Page background (light): `#f5f5f7`\n- Page background (dark): `#000000`\n- Heading text (light): `#1d1d1f`\n- Heading text (dark): `#ffffff`\n- Body text: `rgba(0, 0, 0, 0.8)` on light, `#ffffff` on dark\n- Link (light bg): `#0066cc`\n- Link (dark bg): `#2997ff`\n- Focus ring: `#0071e3`\n- Card shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`\n\n### Example Component Prompts\n- \"Create a hero section on black background. Headline at 56px SF Pro Display weight 600, line-height 1.07, letter-spacing -0.28px, color white. One-line subtitle at 21px SF Pro Display weight 400, line-height 1.19, color white. Two pill CTAs: 'Learn more' (transparent bg, white text, 1px solid white border, 980px radius) and 'Buy' (Apple Blue #0071e3 bg, white text, 8px radius, 8px 15px padding).\"\n- \"Design a product card: #f5f5f7 background, 8px border-radius, no border, no shadow. Product image top 60% of card on solid background. Title at 28px SF Pro Display weight 400, letter-spacing 0.196px, line-height 1.14. Description at 14px SF Pro Text weight 400, color rgba(0,0,0,0.8). 'Learn more' and 'Shop' links in #0066cc at 14px.\"\n- \"Build the Apple navigation: sticky, 48px height, background rgba(0,0,0,0.8) with backdrop-filter: saturate(180%) blur(20px). Links at 12px SF Pro Text weight 400, white text. Apple logo left, links centered, search and bag icons right.\"\n- \"Create an alternating section layout: first section black bg with white text and centered product image, second section #f5f5f7 bg with #1d1d1f text. Each section near full-viewport height with 56px headline and two pill CTAs below.\"\n- \"Design a 'Learn more' link: text #0066cc on light bg or #2997ff on dark bg, 14px SF Pro Text, underline on hover. After the text, include a right-arrow chevron character (>). Wrap in a container with 980px border-radius for pill shape when used as a standalone CTA.\"\n\n### Iteration Guide\n1. Every interactive element gets Apple Blue (`#0071e3`) โ no other accent colors\n2. Section backgrounds alternate: black for immersive moments, `#f5f5f7` for informational moments\n3. Typography optical sizing: SF Pro Display at 20px+, SF Pro Text below โ never mix\n4. Negative letter-spacing at all sizes: -0.28px at 56px, -0.374px at 17px, -0.224px at 14px, -0.12px at 12px\n5. The navigation glass effect (translucent dark + blur) is non-negotiable โ it defines the Apple web experience\n6. Products always appear on solid color fields โ never on gradients, textures, or lifestyle backgrounds in hero modules\n7. Shadow is rare and always soft: `3px 5px 30px 0.22 opacity` or nothing at all\n8. Pill CTAs use 980px radius โ this creates the signature Apple rounded-rectangle-that-looks-like-a-capsule shape\n\nFile v1.0.0:templates/bmw.md\n\n# Design System: BMW\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `DM Sans` | **Mono:** `system monospace stack`\n> - **Font stack (CSS):** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`\n> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nBMW's website is automotive engineering made visual โ a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.\n\nThe typography is built on BMWTypeNextLatin โ a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture โ light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.\n\nWhat makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (`--site-context-highlight-color: #1c69d4`, `--site-context-focus-color: #0653b6`, `--site-context-metainfo-color: #757575`) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (`#1c69d4`) is BMW's signature blue โ used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected โ BMW's design is angular, sharp-cornered, and uncompromisingly geometric.\n\n**Key Characteristics:**\n- BMWTypeNextLatin Light (weight 300) uppercase for display โ whispered authority\n- BMW Blue (`#1c69d4`) as singular accent โ used only for interactive elements\n- Zero border-radius detected โ angular, sharp-cornered, industrial geometry\n- Dark hero photography + white content sections โ showroom lighting rhythm\n- CSS variable-driven theming: `--site-context-*` tokens for brand flexibility\n- Weight 900 for navigation emphasis โ extreme contrast with 300 display\n- Tight line-heights (1.15โ1.30) throughout โ compressed, efficient, German engineering\n- Full-bleed automotive photography as primary visual content\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pure White** (`#ffffff`): `--site-context-theme-color`, primary surface, card backgrounds\n- **BMW Blue** (`#1c69d4`): `--site-context-highlight-color`, primary interactive accent\n- **BMW Focus Blue** (`#0653b6`): `--site-context-focus-color`, keyboard focus and active states\n\n### Neutral Scale\n- **Near Black** (`#262626`): Primary text on light surfaces, dark link text\n- **Meta Gray** (`#757575`): `--site-context-metainfo-color`, secondary text, metadata\n- **Silver** (`#bbbbbb`): Tertiary text, muted links, footer elements\n\n### Interactive States\n- All links hover to white (`#ffffff`) โ suggesting primarily dark-surface navigation\n- Text links use underline: none on hover โ clean interaction\n\n### Shadows\n- Minimal shadow system โ depth through photography and dark/light section contrast\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Light**: `BMWTypeNextLatin Light`, fallbacks: `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`\n- **Body / UI**: `BMWTypeNextLatin`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (tight) | `text-transform: uppercase` |\n| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (tight) | Major section titles |\n| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (tight) | Navigation bold items |\n| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard body text |\n| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20โ2.88 | CTA buttons |\n| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard buttons |\n\n### Principles\n- **Light display, heavy navigation**: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.\n- **Universal uppercase display**: The 60px hero is always uppercase โ creating a monumental, architectural quality.\n- **Tight everything**: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes โ every line is compressed, efficient, German-engineered.\n- **Single font family**: BMWTypeNextLatin handles everything from 60px display to 16px body โ unity through one typeface at different weights.\n\n## 4. Component Stylings\n\n### Buttons\n- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary\n- Line-height: 1.15โ2.88 (large variation suggests padding-driven sizing)\n- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)\n- No border-radius โ sharp rectangular buttons\n\n### Cards & Containers\n- No border-radius โ all containers are sharp-cornered rectangles\n- White backgrounds on light sections\n- Dark backgrounds for hero/feature sections\n- No visible borders on most elements\n\n### Navigation\n- BMWTypeNextLatin 18px weight 900 for primary nav links\n- White text on dark header\n- BMW logo 54x54px\n- Hover: remains white, text-decoration none\n- \"Home\" text link in header\n\n### Image Treatment\n- Full-bleed automotive photography\n- Dark cinematic lighting\n- Edge-to-edge hero images\n- Car photography as primary visual content\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px\n\n### Grid & Container\n- Full-width hero photography\n- Centered content sections\n- Footer: multi-column link grid\n\n### Whitespace Philosophy\n- **Showroom pacing**: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.\n- **Compressed content**: Body text areas use tight line-heights and compact spacing โ information-dense, no waste.\n\n### Border Radius Scale\n- **None detected.** BMW uses sharp corners exclusively โ every element is a precise rectangle. This is the most angular design system analyzed.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-bleed dark imagery | Hero backgrounds |\n| Flat (Level 1) | White surface, no shadow | Content sections |\n| Focus (Accessibility) | BMW Focus Blue (`#0653b6`) | Focus states |\n\n**Shadow Philosophy**: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections โ the automotive lighting does the elevation work.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use BMWTypeNextLatin Light (300) uppercase for all display headings\n- Keep ALL corners sharp (0px radius) โ angular geometry is non-negotiable\n- Use BMW Blue (`#1c69d4`) only for interactive elements โ never decoratively\n- Apply weight 900 for navigation emphasis โ the extreme weight contrast is intentional\n- Use full-bleed automotive photography for hero sections\n- Keep line-heights tight (1.15โ1.30) throughout\n- Use `--site-context-*` CSS variables for theming\n\n### Don't\n- Don't round corners โ zero radius is the BMW identity\n- Don't use BMW Blue for backgrounds or large surfaces โ it's an accent only\n- Don't use medium font weights (500โ600) โ the system uses 300, 400, 700, 900 extremes\n- Don't add decorative elements โ the photography and typography carry everything\n- Don't use relaxed line-heights โ BMW text is always compressed\n- Don't lighten the dark hero sections โ the contrast with white IS the design\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Minimum supported |\n| Mobile | 375โ480px | Single column |\n| Mobile Large | 480โ640px | Slight adjustments |\n| Tablet Small | 640โ768px | 2-column begins |\n| Tablet | 768โ920px | Standard tablet |\n| Desktop Small | 920โ1024px | Desktop layout begins |\n| Desktop | 1024โ1280px | Standard desktop |\n| Large Desktop | 1280โ1440px | Expanded |\n| Ultra-wide | 1440โ1600px | Maximum layout |\n\n### Collapsing Strategy\n- Hero: 60px โ scales down, maintains uppercase\n- Navigation: horizontal โ hamburger\n- Photography: full-bleed maintained at all sizes\n- Content sections: stack vertically\n- Footer: multi-column โ stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#262626`)\n- Secondary text: Meta Gray (`#757575`)\n- Accent: BMW Blue (`#1c69d4`)\n- Focus: BMW Focus Blue (`#0653b6`)\n- Muted: Silver (`#bbbbbb`)\n\n### Example Component Prompts\n- \"Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere.\"\n- \"Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout.\"\n- \"Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface.\"\n- \"Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15.\"\n\n### Iteration Guide\n1. Zero border-radius โ every corner is sharp, no exceptions\n2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav)\n3. BMW Blue for interactive only โ never as background or decoration\n4. Photography carries emotion โ the UI is pure precision\n5. Tight line-heights everywhere โ 1.15 to 1.30 is the range\n\nFile v1.0.0:templates/cal.md\n\n# Design System: Cal.com\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `Inter` | **Mono:** `Roboto Mono`\n> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`\n> - **Mono stack (CSS):** `font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nCal.com's website is a masterclass in monochromatic restraint โ a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (`#242424`), mid-gray secondary text (`#898989`), and pure white surfaces. Color is treated as a foreign substance โ when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.\n\nCal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height โ confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing \"rock-solid\" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.\n\nThe elevation system is notably sophisticated for a minimal site โ 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (`0px 0px 0px 1px`), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.\n\n**Key Characteristics:**\n- Purely grayscale brand palette โ no brand colors, boldness through monochrome\n- Cal Sans custom geometric display font with extremely tight default letter-spacing\n- Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights\n- Cal Sans for headings, Inter for body โ clean typographic division\n- Wide border-radius scale from 2px to 9999px (pill) โ versatile rounding\n- White canvas with near-black (#242424) text โ maximum contrast, zero decoration\n- Product screenshots as primary visual content โ the scheduling UI sells itself\n- Built on Framer platform\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Charcoal** (`#242424`): Primary heading and button text โ Cal.com's signature near-black, warmer than pure black\n- **Midnight** (`#111111`): Deepest text/overlay color โ used at 50% opacity for subtle overlays\n- **White** (`#ffffff`): Primary background and surface โ the dominant canvas\n\n### Secondary & Accent\n- **Link Blue** (`#0099ff`): In-text links with underline decoration โ the only blue in the system, reserved strictly for hyperlinks\n- **Focus Ring** (`#3b82f6` at 50% opacity): Keyboard focus indicator โ accessibility-only, invisible in normal interaction\n- **Default Link** (`#0000ee`): Browser-default link color on some elements โ unmodified, signaling openness\n\n### Surface & Background\n- **Pure White** (`#ffffff`): Primary page background and card surfaces\n- **Light Gray** (approx `#f5f5f5`): Subtle section differentiation โ barely visible tint\n- **Mid Gray** (`#898989`): Secondary text, descriptions, and muted labels\n\n### Neutrals & Text\n- **Charcoal** (`#242424`): Headlines, buttons, primary UI text\n- **Midnight** (`#111111`): Deep black for high-contrast links and nav text\n- **Mid Gray** (`#898989`): Descriptions, secondary labels, muted content\n- **Pure Black** (`#000000`): Certain link text elements\n- **Border Gray** (approx `rgba(34, 42, 53, 0.08โ0.10)`): Shadow-based borders using ring shadows instead of CSS borders\n\n### Semantic & Accent\n- Cal.com is deliberately colorless for brand elements โ \"a grayscale brand to emphasise on boldness and professionalism\"\n- Product UI screenshots show color (blues, greens in the scheduling interface), but the marketing site itself stays monochrome\n- The philosophy mirrors Uber's approach: let the content carry color, the frame stays neutral\n\n### Gradient System\n- No gradients on the marketing site โ the design is fully flat and monochrome\n- Depth is achieved entirely through shadows, not color transitions\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `Cal Sans` โ custom geometric sans-serif by Mark Davis. Open-source, available on Google Fonts and GitHub. Extremely tight default letter-spacing designed for large headlines. Has 6 character variants (Cc, j, t, u, 0, 1)\n- **Body**: `Inter` โ \"rock-solid\" standard body font. Fallback: `Inter Placeholder`\n- **UI Light**: `Cal Sans UI Variable Light` โ light-weight variant (300) for softer UI text with -0.2px letter-spacing\n- **UI Medium**: `Cal Sans UI Medium` โ medium-weight variant (500) for emphasized captions\n- **Mono**: `Roboto Mono` โ for code blocks and technical content\n- **Tertiary**: `Matter Regular` / `Matter SemiBold` / `Matter Medium` โ additional body fonts for specific contexts\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | Maximum impact, tight default spacing |\n| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | Large section titles |\n| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | Feature block headlines |\n| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | Positive spacing for readability at smaller size |\n| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | Relaxed line-height variant |\n| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Smallest Cal Sans usage |\n| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Small labels in Cal Sans |\n| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | Light-weight body intro text |\n| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | Light-weight body text |\n| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40โ1.50 | -0.2 to -0.28px | Light captions and descriptions |\n| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI buttons and nav labels |\n| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | Small UI text |\n| Micro | Inter | 12px | 500 | 1.00 | 0px | Smallest Inter text |\n| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | Code snippets, technical text |\n| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | Alternate body text (product UI) |\n\n### Principles\n- **Cal Sans at large, Inter at small**: Cal Sans is exclusively for headings and display โ never for body text. The system enforces this division strictly\n- **Tight by default, space when small**: Cal Sans letters are \"intentionally spaced to be extremely close\" at large sizes. At 20px and below, positive letter-spacing (+0.2px) must be applied to prevent cramming\n- **Weight 300 body variant**: Cal Sans UI Variable Light at 300 weight creates an elegant, airy body text that contrasts with the dense 600-weight headlines\n- **Weight 600 dominance**: Nearly all Cal Sans usage is at weight 600 (semi-bold) โ the font was designed to perform at this weight\n- **Negative tracking on light text**: Cal Sans UI Light uses -0.2px to -0.28px letter-spacing, subtly tightening the already-compact letterforms\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Primary**: `#242424` (or `#1e1f23`) background, white text, 6โ8px radius. Hover: opacity reduction to 0.7. The signature CTA โ maximally dark on white\n- **White/Ghost**: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation\n- **Pill**: 9999px radius for rounded pill-shaped actions and badges\n- **Compact**: 4px padding, small text โ utility actions within product UI\n- **Inset highlight**: Some buttons feature `rgba(255, 255, 255, 0.15) 0px 2px 0px inset` โ a subtle inner-top highlight creating a 3D pressed effect\n\n### Cards & Containers\n- **Shadow Card**: White background, multi-layered shadow โ `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`. The ring shadow (0px 0px 0px 1px) acts as a shadow-border\n- **Product UI Cards**: Screenshots of the scheduling interface displayed in card containers with shadow elevation\n- **Radius**: 8px for standard cards, 12px for larger containers, 16px for prominent sections\n- **Hover**: Likely subtle shadow deepening or scale transform\n\n### Inputs & Forms\n- **Select dropdown**: White background, `#000000` text, 1px solid `rgb(118, 118, 118)` border\n- **Focus**: Uses Framer's focus outline system (`--framer-focus-outline`)\n- **Text input**: 8px radius, standard border treatment\n- **Minimal form presence**: The marketing site prioritizes CTA buttons over complex forms\n\n### Navigation\n- **Top nav**: White/transparent background, Cal Sans links at near-black\n- **Nav text**: `#111111` (Midnight) for primary links, `#000000` for emphasis\n- **CTA button**: Dark Primary in the nav โ high contrast call-to-action\n- **Mobile**: Collapses to hamburger with simplified navigation\n- **Sticky**: Fixed on scroll\n\n### Image Treatment\n- **Product screenshots**: Large scheduling UI screenshots โ the product is the primary visual\n- **Trust logos**: Grayscale company logos in a horizontal trust bar\n- **Aspect ratios**: Wide landscape for product UI screenshots\n- **No decorative imagery**: No illustrations, photos, or abstract graphics โ pure product + typography\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px\n- **Section padding**: 80pxโ96px vertical between major sections (generous)\n- **Card padding**: 12pxโ24px internal\n- **Component gaps**: 4pxโ8px between related elements\n- **Notable jump**: From 28px to 80px โ a deliberate gap emphasizing the section-level spacing tier\n\n### Grid & Container\n- **Max width**: ~1200px content container, centered\n- **Column patterns**: Full-width hero, centered text blocks, 2-3 column feature grids\n- **Feature showcase**: Product screenshots flanked by description text\n- **Breakpoints**: 98px, 640px, 768px, 810px, 1024px, 1199px โ Framer-generated\n\n### Whitespace Philosophy\n- **Lavish section spacing**: 80pxโ96px between sections creates a breathable, premium feel\n- **Product-first content**: Screenshots dominate the visual space โ minimal surrounding decoration\n- **Centered headlines**: Cal Sans headings centered with generous margins above and below\n\n### Border Radius Scale\n- **2px**: Subtle rounding on inline elements\n- **4px**: Small UI components\n- **6pxโ7px**: Buttons, small cards, images\n- **8px**: Standard interactive elements โ buttons, inputs, images\n- **12px**: Medium containers โ links, larger cards, images\n- **16px**: Large section containers\n- **29px**: Special rounded elements\n- **100px**: Large rounding โ nearly circular on small elements\n- **1000px**: Very large rounding\n- **9999px**: Full pill shape โ badges, links\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow | Page canvas, basic text containers |\n| Level 1 (Inset) | `rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset` | Pressed/recessed elements, input wells |\n| Level 2 (Ring + Soft) | `rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px` | Cards, containers โ the workhorse shadow |\n| Level 3 (Ring + Soft Alt) | `rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px` | Alt card elevation without ring border |\n| Level 4 (Inset Highlight) | `rgba(255,255,255,0.15) 0px 2px 0px inset` or `rgb(255,255,255) 0px 2px 0px inset` | Button inner highlight โ 3D pressed effect |\n| Level 5 (Soft Only) | `rgba(34,42,53,0.05) 0px 4px 8px` | Subtle ambient shadow |\n\n### Shadow Philosophy\nCal.com's shadow system is the most sophisticated element of the design โ 11 shadow definitions using a multi-layered compositing technique:\n- **Ring borders**: `0px 0px 0px 1px` shadows act as borders, avoiding CSS `border` entirely. This creates hairline containment without affecting layout\n- **Diffused soft shadows**: `0px 4px 8px` at 5% opacity add gentle ambient depth\n- **Sharp contact shadows**: `0px 1px 5px -4px` at 70% opacity create tight bottom-edge shadows for grounding\n- **Inset highlights**: White inset shadows at the top of buttons create a subtle 3D bevel\n- Shadows are composed in comma-separated stacks โ each surface gets 2-3 layered shadow definitions working together\n\n### Decorative Depth\n- No gradients or glow effects\n- All depth comes from the sophisticated shadow compositing system\n- The overall effect is subtle but precise โ surfaces feel like physical cards sitting on a table\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Cal Sans exclusively for headings (24px+) and never for body text โ it's a display font with tight default spacing\n- Apply positive letter-spacing (+0.2px) when using Cal Sans below 24px โ the font cramps at small sizes without it\n- Maintain the grayscale palette โ boldness comes from contrast, not color\n- Use the multi-layered shadow system for card elevation โ ring shadow + diffused shadow + contact shadow\n- Keep backgrounds pure white โ the monochrome philosophy requires a clean canvas\n- Use Inter for all body text at weight 300โ600 โ it's the reliable counterpart to Cal Sans's display personality\n- Let product screenshots be the visual content โ no illustrations, no decorative graphics\n- Apply generous section spacing (80pxโ96px) โ the breathing room is essential to the premium feel\n\n### Don't\n- Use Cal Sans for body text or text below 16px โ it wasn't designed for extended reading\n- Add brand colors โ Cal.com is intentionally grayscale, color is reserved for links and UI states only\n- Use CSS borders when shadows can achieve the same containment โ the ring-shadow technique is the system's approach\n- Apply negative letter-spacing to Cal Sans at small sizes โ it needs positive spacing (+0.2px) below 24px\n- Create heavy, dark shadows โ Cal.com's shadows are subtle (5% opacity diffused) with sharp contact edges\n- Use illustrations, abstract graphics, or decorative elements โ the visual language is typography + product UI only\n- Mix Cal Sans weights โ the font is designed for weight 600, other weights break the intended character\n- Reduce section spacing below 48px โ the generous whitespace is core to the premium monochrome aesthetic\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, hero text ~36px, stacked features, hamburger nav |\n| Tablet Small | 640pxโ768px | 2-column begins for some elements |\n| Tablet | 768pxโ810px | Layout adjustments, fuller grid |\n| Tablet Large | 810pxโ1024px | Multi-column feature grids |\n| Desktop | 1024pxโ1199px | Full layout, expanded navigation |\n| Large Desktop | >1199px | Max-width container, centered content |\n\n### Touch Targets\n- Buttons: 8px radius with comfortable padding (10px+ vertical)\n- Nav links: Dark text with adequate spacing\n- Mobile CTAs: Full-width dark buttons for easy thumb access\n- Pill badges: 9999px radius creates large, tappable targets\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav โ hamburger on mobile\n- **Hero**: 64px Cal Sans display โ ~36px on mobile\n- **Feature grids**: Multi-column โ 2-column โ single stacked column\n- **Product screenshots**: Scale within containers, maintaining aspect ratios\n- **Section spacing**: Reduces from 80pxโ96px to ~48px on mobile\n\n### Image Behavior\n- Product screenshots scale responsively\n- Trust logos reflow to multi-row grid on mobile\n- No art direction changes โ same compositions at all sizes\n- Images use 7pxโ12px border-radius for consistent rounded corners\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Charcoal (`#242424`)\n- Deep Text: Midnight (`#111111`)\n- Secondary Text: Mid Gray (`#898989`)\n- Background: Pure White (`#ffffff`)\n- Link: Link Blue (`#0099ff`)\n- CTA Button: Charcoal (`#242424`) bg, white text\n- Shadow Border: `rgba(34, 42, 53, 0.08)` ring\n\n### Example Component Prompts\n- \"Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)\"\n- \"Design a scheduling card with white background, multi-layered shadow (0px 1px 5px -4px rgba(19,19,22,0.7), 0px 0px 0px 1px rgba(34,42,53,0.08), 0px 4px 8px rgba(34,42,53,0.05)), 12px radius\"\n- \"Build a navigation bar with white background, Inter links at 14px weight 500 in #111111, a dark CTA button (#242424), sticky positioning\"\n- \"Create a trust bar with grayscale company logos, horizontally centered, 16px gap between logos, on white background\"\n- \"Design a feature section with 48px Cal Sans heading (weight 600, #242424), 16px Inter body text (weight 300, #898989, line-height 1.50), and a product screenshot with 12px radius and the card shadow\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify headings use Cal Sans at weight 600, body uses Inter โ never mix them\n2. Check that the palette is purely grayscale โ if you see brand colors, remove them\n3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders\n4. Confirm section spacing is generous (80px+) โ if sections feel cramped, add more space\n5. The overall tone should feel like a clean, professional scheduling tool โ monochrome confidence without any decorative flourishes\n\nFile v1.0.0:templates/claude.md\n\n# Design System: Claude (Anthropic)\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `Inter` | **Mono:** `JetBrains Mono`\n> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`\n> - **Mono stack (CSS):** `font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nClaude's interface is a literary salon reimagined as a product page โ warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.\n\nThe signature move is the custom Anthropic Serif typeface โ a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (`#c96442`), black, and muted green, the visual language says \"thoughtful companion\" rather than \"powerful tool.\" The serif headlines breathe at tight-but-comfortable line-heights (1.10โ1.30), creating a cadence that feels more like reading an essay than scanning a product page.\n\nWhat makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) โ there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.\n\n**Key Characteristics:**\n- Warm parchment canvas (`#f5f4ed`) evoking premium paper, not screens\n- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code\n- Terracotta brand accent (`#c96442`) โ warm, earthy, deliberately un-tech\n- Exclusively warm-toned neutrals โ every gray has a yellow-brown undertone\n- Organic, editorial illustrations replacing typical tech iconography\n- Ring-based shadow system (`0px 0px 0px 1px`) creating border-like depth without visible borders\n- Magazine-like pacing with generous section spacing and serif-driven hierarchy\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Anthropic Near Black** (`#141413`): The primary text color and dark-theme surface โ not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest \"black\" in any major tech brand.\n- **Terracotta Brand** (`#c96442`): The core brand color โ a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.\n- **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.\n\n### Secondary & Accent\n- **Error Crimson** (`#b53333`): A deep, warm red for error states โ serious without being alarming.\n- **Focus Blue** (`#3898ec`): Standard blue for input focus rings โ the only cool color in the entire system, used purely for accessibility.\n\n### Surface & Background\n- **Parchment** (`#f5f4ed`): The primary page background โ a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.\n- **Ivory** (`#faf9f5`): The lightest surface โ used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.\n- **Pure White** (`#ffffff`): Reserved for specific button surfaces and maximum-contrast elements.\n- **Warm Sand** (`#e8e6dc`): Button backgrounds and prominent interactive surfaces โ a noticeably warm light gray.\n- **Dark Surface** (`#30302e`): Dark-theme containers, nav borders, and elevated dark elements โ warm charcoal.\n- **Deep Dark** (`#141413`): Dark-theme page background and primary dark surface.\n\n### Neutrals & Text\n- **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces โ the go-to dark-on-light text.\n- **Olive Gray** (`#5e5d59`): Secondary body text โ a distinctly warm medium-dark gray.\n- **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized metadata.\n- **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.\n- **Warm Silver** (`#b0aea5`): Text on dark surfaces โ a warm, parchment-tinted light gray.\n\n### Semantic & Accent\n- **Border Cream** (`#f0eee6`): Standard light-theme border โ barely visible warm cream, creating the gentlest possible containment.\n- **Border Warm** (`#e8e6dc`): Prominent borders, section dividers, and emphasized containment on light surfaces.\n- **Border Dark** (`#30302e`): Standard border on dark surfaces โ maintains the warm tone.\n- **Ring Warm** (`#d1cfc5`): Shadow ring color for button hover/focus states.\n- **Ring Subtle** (`#dedc01`): Secondary ring variant for lighter interactive surfaces.\n- **Ring Deep** (`#c2c0b6`): Deeper ring for active/pressed states.\n\n### Gradient System\n- Claude's design is **gradient-free** in the traditional sense. Depth and visual richness come from the interplay of warm surface tones, organic illustrations, and light/dark section alternation. The warm palette itself creates a \"gradient\" effect as the eye moves through cream โ sand โ stone โ charcoal โ black sections.\n\n## 3. Typography Rules\n\n### Font Family\n- **Headline**: `Anthropic Serif`, with fallback: `Georgia`\n- **Body / UI**: `Anthropic Sans`, with fallback: `Arial`\n- **Code**: `Anthropic Mono`, with fallback: `Arial`\n\n*Note: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui/Inter as the sans substitute.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (tight) | normal | Maximum impact, book-title presence |\n| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (tight) | normal | Feature section anchors |\n| Sub-heading Large | Anthropic Serif | 36โ36.8px (~2.3rem) | 500 | 1.30 | normal | Secondary section markers |\n| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (tight) | normal | Card titles, feature names |\n| Sub-heading Small | Anthropic Serif | 25โ25.6px (~1.6rem) | 500 | 1.20 | normal | Smaller section titles |\n| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | Small feature headings |\n| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (relaxed) | normal | Serif body text (editorial passages) |\n| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Intro paragraphs |\n| Body / Nav | Anthropic Sans | 17px (1.06rem) | 400โ500 | 1.00โ1.60 | normal | Navigation links, UI text |\n| Body Standard | Anthropic Sans | 16px (1rem) | 400โ500 | 1.25โ1.60 | normal | Standard body, button text |\n| Body Small | Anthropic Sans | 15px (0.94rem) | 400โ500 | 1.00โ1.60 | normal | Compact body text |\n| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |\n| Label | Anthropic Sans | 12px (0.75rem) | 400โ500 | 1.25โ1.60 | 0.12px | Badges, small labels |\n| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | Uppercase overline labels |\n| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | Smallest text |\n| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | Inline code, terminal |\n\n### Principles\n- **Serif for authority, sans for utility**: Anthropic Serif carries all headline content with medium weight (500), giving every heading the gravitas of a published title. Anthropic Sans handles all functional UI text โ buttons, labels, navigation โ with quiet efficiency.\n- **Single weight for serifs**: All Anthropic Serif headings use weight 500 โ no bold, no light. This creates a consistent \"voice\" across all headline sizes, as if the same author wrote every heading.\n- **Relaxed body line-height**: Most body text uses 1.60 line-height โ significantly more generous than typical tech sites (1.4โ1.5). This creates a reading experience closer to a book than a dashboard.\n- **Tight-but-not-compressed headings**: Line-heights of 1.10โ1.30 for headings are tight but never claustrophobic. The serif letterforms need breathing room that sans-serif fonts don't.\n- **Micro letter-spacing on labels**: Small sans text (12px and below) uses deliberate letter-spacing (0.12pxโ0.5px) to maintain readability at tiny sizes.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Warm Sand (Secondary)**\n- Background: Warm Sand (`#e8e6dc`)\n- Text: Charcoal Warm (`#4d4c48`)\n- Padding: 0px 12px 0px 8px (asymmetric โ icon-first layout)\n- Radius: comfortably rounded (8px)\n- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)\n- The workhorse button โ warm, unassuming, clearly interactive\n\n**White Surface**\n- Background: Pure White (`#ffffff`)\n- Text: Anthropic Near Black (`#141413`)\n- Padding: 8px 16px 8px 12px\n- Radius: generously rounded (12px)\n- Hover: shifts to secondary background color\n- Clean, elevated button for light surfaces\n\n**Dark Charcoal**\n- Background: Dark Surface (`#30302e`)\n- Text: Ivory (`#faf9f5`)\n- Padding: 0px 12px 0px 8px\n- Radius: comfortably rounded (8px)\n- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)\n- The inverted variant for dark-on-light emphasis\n\n**Brand Terracotta**\n- Background: Terracotta Brand (`#c96442`)\n- Text: Ivory (`#faf9f5`)\n- Radius: 8โ12px\n- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)\n- The primary CTA โ the only button with chromatic color\n\n**Dark Primary**\n- Background: Anthropic Near Black (`#141413`)\n- Text: Warm Silver (`#b0aea5`)\n- Padding: 9.6px 16.8px\n- Radius: generously rounded (12px)\n- Border: thin solid Dark Surface (`1px solid #30302e`)\n- Used on dark theme surfaces\n\n### Cards & Containers\n- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces; Dark Surface (`#30302e`) on dark\n- Border: thin solid Border Cream (`1px solid #f0eee6`) on light; `1px solid #30302e` on dark\n- Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media\n- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content\n- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states\n- Section borders: `1px 0px 0px` (top-only) for list item separators\n\n### Inputs & Forms\n- Text: Anthropic Near Black (`#141413`)\n- Padding: 1.6px 12px (very compact vertical)\n- Border: standard warm borders\n- Focus: ring with Focus Blue (`#3898ec`) border-color โ the only cool color moment\n- Radius: generously rounded (12px)\n\n### Navigation\n- Sticky top nav with warm background\n- Logo: Claude wordmark in Anthropic Near Black\n- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm (`#3d3d3a`)\n- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)\n- CTA: Terracotta Brand button or White Surface button\n- Hover: text shifts to foreground-primary, no decoration\n\n### Image Treatment\n- Product screenshots showing the Claude chat interface\n- Generous border-radius on media (16โ32px)\n- Embedded video players with rounded corners\n- Dark UI screenshots provide contrast against warm light canvas\n- Organic, hand-drawn illustrations for conceptual sections\n\n### Distinctive Components\n\n**Model Comparison Cards**\n- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid\n- Each model gets a bordered card with name, description, and capability badges\n- Border Warm (`#e8e6dc`) separation between items\n\n**Organic Illustrations**\n- Hand-drawn-feeling vector illustrations in terracotta, black, and muted green\n- Abstract, conceptual rather than literal product diagrams\n- The primary visual personality โ no other AI company uses this style\n\n**Dark/Light Section Alternation**\n- The page alternates between Parchment light and Near Black dark sections\n- Creates a reading rhythm like chapters in a book\n- Each section feels like a distinct environment\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px\n- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)\n- Card internal padding: approximately 24โ32px\n- Section vertical spacing: generous (estimated 80โ120px between major sections)\n\n### Grid & Container\n- Max container width: approximately 1200px, centered\n- Hero: centered with editorial layout\n- Feature sections: single-column or 2โ3 column card grids\n- Model comparison: clean 3-column grid\n- Full-width dark sections breaking the container for emphasis\n\n### Whitespace Philosophy\n- **Editorial pacing**: Each section breathes like a magazine spread โ generous top/bottom margins create natural reading pauses.\n- **Serif-driven rhythm**: The serif headings establish a literary cadence that demands more whitespace than sans-serif designs.\n- **Content island approach**: Sections alternate between light and dark environments, creating distinct \"rooms\" for each message.\n\n### Border Radius Scale\n- Sharp (4px): Minimal inline elements\n- Subtly rounded (6โ7.5px): Small buttons, secondary interactive elements\n- Comfortably rounded (8โ8.5px): Standard buttons, cards, containers\n- Generously rounded (12px): Primary buttons, input fields, nav elements\n- Very rounded (16px): Featured containers, video players, tab lists\n- Highly rounded (24px): Tag-like elements, highlighted containers\n- Maximum rounded (32px): Hero containers, embedded media, large cards\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Parchment background, inline text |\n| Contained (Level 1) | `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) | Standard cards, sections |\n| Ring (Level 2) | `0px 0px 0px 1px` ring shadows using warm grays | Interactive cards, buttons, hover states |\n| Whisper (Level 3) | `rgba(0,0,0,0.05) 0px 4px 24px` | Elevated feature cards, product screenshots |\n| Inset (Level 4) | `inset 0px 0px 0px 1px` at 15% opacity | Active/pressed button states |\n\n**Shadow Philosophy**: Claude communicates depth through **warm-toned ring shadows** rather than traditional drop shadows. The signature `0px 0px 0px 1px` pattern creates a border-like halo that's softer than an actual border โ it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) โ barely visible lifts that suggest floating rather than casting.\n\n### Decorative Depth\n- **Light/Dark alternation**: The most dramatic depth effect comes from alternating between Parchment (`#f5f4ed`) and Near Black (`#141413`) sections โ entire sections shift elevation by changing the ambient light level.\n- **Warm ring halos**: Button and card interactions use ring shadows that match the warm palette โ never cool-toned or generic gray.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Parchment (`#f5f4ed`) as the primary light background โ the warm cream tone IS the Claude personality\n- Use Anthropic Serif at weight 500 for all headlines โ the single-weight consistency is intentional\n- Use Terracotta Brand (`#c96442`) only for primary CTAs and the highest-signal brand moments\n- Keep all neutrals warm-toned โ every gray should have a yellow-brown undertone\n- Use ring shadows (`0px 0px 0px 1px`) for interactive element states instead of drop shadows\n- Maintain the editorial serif/sans hierarchy โ serif for content headlines, sans for UI\n- Use generous body line-height (1.60) for a literary reading experience\n- Alternate between light and dark sections to create chapter-like page rhythm\n- Apply generous border-radius (12โ32px) for a soft, approachable feel\n\n### Don't\n- Don't use cool blue-grays anywhere โ the palette is exclusively warm-toned\n- Don't use bold (700+) weight on Anthropic Serif โ weight 500 is the ceiling for serifs\n- Don't introduce saturated colors beyond Terracotta โ the palette is deliberately muted\n- Don't use sharp corners (< 6px radius) on buttons or cards โ softness is core to the identity\n- Don't apply heavy drop shadows โ depth comes from ring shadows and background color shifts\n- Don't use pure white (`#ffffff`) as a page background โ Parchment (`#f5f4ed`) or Ivory (`#faf9f5`) are always warmer\n- Don't use geometric/tech-style illustrations โ Claude's illustrations are organic and hand-drawn-feeling\n- Don't reduce body line-height below 1.40 โ the generous spacing supports the editorial personality\n- Don't use monospace fonts for non-code content โ Anthropic Mono is strictly for code\n- Don't mix in sans-serif for headlines โ the serif/sans split is the typographic identity\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | <479px | Minimum layout, stacked everything, compact typography |\n| Mobile | 479โ640px | Single column, hamburger nav, reduced heading sizes |\n| Large Mobile | 640โ767px | Slightly wider content area |\n| Tablet | 768โ991px | 2-column grids begin, condensed nav |\n| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |\n\n### Touch Targets\n- Buttons use generous padding (8โ16px vertical minimum)\n- Navigation links adequately spaced for thumb navigation\n- Card surfaces serve as large touch targets\n- Minimum recommended: 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav collapses to hamburger on mobile\n- **Feature sections**: Multi-column โ stacked single column\n- **Hero text**: 64px โ 36px โ ~25px progressive scaling\n- **Model cards**: 3-column โ stacked vertical\n- **Section padding**: Reduces proportionally but maintains editorial rhythm\n- **Illustrations**: Scale proportionally, maintain aspect ratios\n\n### Image Behavior\n- Product screenshots scale proportionally within rounded containers\n- Illustrations maintain quality at all sizes\n- Video embeds maintain 16:9 aspect ratio with rounded corners\n- No art direction changes between breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand CTA: \"Terracotta Brand (#c96442)\"\n- Page Background: \"Parchment (#f5f4ed)\"\n- Card Surface: \"Ivory (#faf9f5)\"\n- Primary Text: \"Anthropic Near Black (#141413)\"\n- Secondary Text: \"Olive Gray (#5e5d59)\"\n- Tertiary Text: \"Stone Gray (#87867f)\"\n- Borders (light): \"Border Cream (#f0eee6)\"\n- Dark Surface: \"Dark Surface (#30302e)\"\n\n### Example Component Prompts\n- \"Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius.\"\n- \"Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px).\"\n- \"Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e).\"\n- \"Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px.\"\n- \"Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Reference specific color names โ \"use Olive Gray (#5e5d59)\" not \"make it gray\"\n3. Always specify warm-toned variants โ no cool grays\n4. Describe serif vs sans usage explicitly โ \"Anthropic Serif for the heading, Anthropic Sans for the label\"\n5. For shadows, use \"ring shadow (0px 0px 0px 1px)\" or \"whisper shadow\" โ never generic \"drop shadow\"\n6. Specify the warm background โ \"on Parchment (#f5f4ed)\" or \"on Near Black (#141413)\"\n7. Keep illustrations organic and conceptual โ describe \"hand-drawn-feeling\" style\n\nFile v1.0.0:templates/clay.md\n\n# Design System: Clay\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `DM Sans` | **Mono:** `system monospace stack`\n> - **Font stack (CSS):** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`\n> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nClay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality โ Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta โ each named like flavors at a juice bar, not colors in an enterprise UI kit.\n\nThe typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.\n\nWhat makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior โ where a button literally tilts and jumps on interaction โ creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24pxโ40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.\n\n**Key Characteristics:**\n- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) โ artisanal, not clinical\n- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit\n- Roobert font with 5 OpenType stylistic sets โ quirky geometric character\n- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow\n- Space Mono for code and technical labels\n- Generous border radius: 24px cards, 40px sections, 1584px pills\n- Mixed border styles: solid + dashed in the same interface\n- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`\n- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text\n- **Warm Cream** (`#faf9f7`): Page background โ the warm, paper-like canvas\n\n### Swatch Palette โ Named Colors\n\n**Matcha (Green)**\n- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent\n- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green\n- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections\n\n**Slushie (Cyan)**\n- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent\n- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal\n\n**Lemon (Gold)**\n- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold\n- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold\n- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber\n- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber\n\n**Ube (Purple)**\n- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender\n- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple\n- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple\n\n**Pomegranate (Pink/Red)**\n- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink\n\n**Blueberry (Navy Blue)**\n- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy\n\n### Neutral Scale (Warm)\n- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links\n- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links\n- **Dark Charcoal** (`#333333`): Link text on light backgrounds\n\n### Surface & Border\n- **Oat Border** (`#dad4c8`): Primary border โ warm, cream-toned structural lines\n- **Oat Light** (`#eee9df`): Secondary lighter border\n- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections\n- **Dark Border** (`#525a69`): Border on dark sections\n- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)\n\n### Badges\n- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface\n- **Badge Blue Text** (`#3859f9`): Vivid blue badge text\n- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator\n\n### Shadows\n- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight โ the signature\n- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state โ playful hard shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Roobert`, fallback: `Arial`\n- **Monospace**: `Space Mono`\n- **OpenType Features**: `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on all Roobert text (display uses all 5; body/UI uses `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |\n| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |\n| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |\n| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |\n| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |\n| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |\n| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |\n| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |\n| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20โ1.40 | -0.16px to -0.32px | 4โ5 stylistic sets |\n| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |\n| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |\n| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |\n| Caption | Roobert | 14px (0.88rem) | 400 | 1.50โ1.60 | -0.14px | 4 stylistic sets |\n| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |\n| Badge | Roobert | 9.6px | 600 | โ | โ | Pill badges |\n\n### Principles\n- **Five stylistic sets as identity**: The combination of `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis โ body text omits it, creating a subtle hierarchy through glyph variation.\n- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px โ the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.\n- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.\n- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Transparent with Hover Animation)**\n- Background: transparent (`rgba(239, 241, 243, 0)`)\n- Text: `#000000`\n- Padding: 6.4px 12.8px\n- Border: none (or `1px solid #717989` for outlined variant)\n- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n**White Solid**\n- Background: `#ffffff`\n- Text: `#000000`\n- Padding: 6.4px\n- Hover: oat-200 swatch color, animated rotation + shadow\n- Use: Primary CTA on colored sections\n\n**Ghost Outlined**\n- Background: transparent\n- Text: `#000000`\n- Padding: 8px\n- Border: `1px solid #717989`\n- Radius: 4px\n- Hover: dragonfruit swatch color, white text, animated rotation\n\n### Cards & Containers\n- Background: `#ffffff` on cream canvas\n- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`\n- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)\n- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`\n- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)\n\n### Inputs & Forms\n- Text: `#000000`\n- Border: `1px solid #717989`\n- Radius: 4px\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n### Navigation\n- Sticky top nav on cream background\n- Roobert 15px weight 500 for nav links\n- Clay logo left-aligned\n- CTA buttons right-aligned with pill radius\n- Border bottom: `1px solid #dad4c8`\n- Mobile: hamburger collapse at 767px\n\n### Image Treatment\n- Product screenshots in white cards with oat borders\n- Colorful illustrated sections with swatch background colors\n- 8pxโ24px radius on images\n- Full-width colorful section backgrounds\n\n### Distinctive Components\n\n**Swatch Color Sections**\n- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)\n- White text on dark swatches, black text on light swatches\n- Each section tells a distinct product story through its color\n\n**Playful Hover Buttons**\n- Rotate -8deg + translate upward on hover\n- Hard offset shadow (`-7px 7px`) instead of soft blur\n- Background transitions to contrasting swatch color\n- Creates a physical, toy-like interaction quality\n\n**Dashed Border Elements**\n- Dashed borders (`1px dashed #dad4c8`) alongside solid borders\n- Used for secondary containers and decorative elements\n- Adds a hand-drawn, craft-like quality\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px\n\n### Grid & Container\n- Max content width centered\n- Feature sections alternate between white cards and colorful swatch backgrounds\n- Card grids: 2โ3 columns on desktop\n- Full-width colorful sections break the grid\n- Footer with generous 40px radius container\n\n### Whitespace Philosophy\n- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere โ it feels inviting, like a well-set table.\n- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own \"room.\"\n- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.\n\n### Border Radius Scale\n- Sharp (4px): Ghost buttons, inputs\n- Standard (8px): Small cards, images, links\n- Badge (11px): Tag badges\n- Card (12px): Standard cards, buttons\n- Feature (24px): Feature cards, images, panels\n- Section (40px): Large sections, footer, containers\n- Pill (1584px): CTAs, pill-shaped buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, cream canvas | Page background |\n| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons โ multi-layer with inset highlight |\n| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state โ playful hard offset shadow |\n| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |\n\n**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a \"pressed into clay\" quality where elements feel both raised AND embedded โ like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.\n\n### Decorative Depth\n- Full-width swatch-colored sections create dramatic depth through color contrast\n- Dashed borders add visual texture alongside solid borders\n- Product illustrations with warm, organic art style\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm cream (`#faf9f7`) as the page background โ the warmth is the identity\n- Apply all 5 OpenType stylistic sets on Roobert headings: `\"ss01\", \"ss03\", \"ss10\", \"ss11\", \"ss12\"`\n- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds\n- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`\n- Use warm oat borders (`#dad4c8`) โ not neutral gray\n- Mix solid and dashed borders for visual variety\n- Use generous radius: 24px for cards, 40px for sections\n- Use weight 600 exclusively for headings, 500 for UI, 400 for body\n\n### Don't\n- Don't use cool gray backgrounds โ the warm cream (`#faf9f7`) is non-negotiable\n- Don't use neutral gray borders (`#ccc`, `#ddd`) โ always use the warm oat tones\n- Don't mix more than 2 swatch colors in the same section\n- Don't skip the OpenType stylistic sets โ they define Roobert's character\n- Don't use subtle hover effects โ the rotation + hard shadow is the signature interaction\n- Don't use small border radius (<12px) on feature cards โ the generous rounding is structural\n- Don't use standard shadows (blur-based) โ Clay uses hard offset and multi-layer inset\n- Don't forget the uppercase labels with 1.08px tracking โ they're the wayfinding system\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <479px | Single column, tight padding |\n| Mobile | 479โ767px | Standard mobile, stacked layout |\n| Tablet | 768โ991px | 2-column grids, condensed nav |\n| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |\n\n### Touch Targets\n- Buttons: minimum 6.4px + 12.8px padding for adequate touch area\n- Nav links: 15px font with generous spacing\n- Mobile: full-width buttons for easy tapping\n\n### Collapsing Strategy\n- Hero: 80px โ 60px โ smaller display text\n- Navigation: horizontal โ hamburger at 767px\n- Feature sections: multi-column โ stacked\n- Colorful sections: maintain full-width but compress padding\n- Card grids: 3-column โ 2-column โ single column\n\n### Image Behavior\n- Product screenshots scale proportionally\n- Colorful section illustrations adapt to viewport width\n- Rounded corners maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Warm Cream (`#faf9f7`)\n- Text: Clay Black (`#000000`)\n- Secondary text: Warm Silver (`#9f9b93`)\n- Border: Oat Border (`#dad4c8`)\n- Green accent: Matcha 600 (`#078a52`)\n- Cyan accent: Slushie 500 (`#3bd3fd`)\n- Gold accent: Lemon 500 (`#fbbd41`)\n- Purple accent: Ube 800 (`#43089f`)\n- Pink accent: Pomegranate 400 (`#fc7981`)\n\n### Example Component Prompts\n- \"Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989).\"\n- \"Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius.\"\n- \"Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px.\"\n- \"Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px.\"\n- \"Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'.\"\n\n### Iteration Guide\n1. Start with warm cream (#faf9f7) โ never cool white\n2. Swatch colors are for full sections, not small accents โ go bold with matcha, slushie, ube\n3. Oat borders (#dad4c8) everywhere โ dashed variants for decoration\n4. OpenType stylistic sets are mandatory โ they make Roobert look like Roobert\n5. Hover animations are the signature โ rotation + hard shadow, not subtle fades\n6. Generous radius: 24px cards, 40px sections โ nothing looks sharp or corporate\n7. Three weights: 600 (headings), 500 (UI), 400 (body) โ strict roles\n\nFile v1.0.0:templates/clickhouse.md\n\n# Design System: ClickHouse\n\n\n> **Hermes Agent โ Implementation Notes**\n>\n> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:\n> - **Primary:** `Inter` | **Mono:** `JetBrains Mono`\n> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`\n> - **Mono stack (CSS):** `font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`\n> ```html\n> \n> ```\n> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).\n> Verify visual accuracy with `browser_vision` after generating.\n\n## 1. Visual Theme & Atmosphere\n\nClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black โ a design that screams \"speed\" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.\n\nThe typography is aggressively heavy โ Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical m","readmeExcerpt":"Skill: popular-web-designs Owner: minirr890112-byte Summary: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua... Tags: CSS:1.1.0, Frontend:1.1.0, HTML:1.1.0, Templates:1.1.0, Web-Design:1.1.0, css:1.2.0, frontend:1.2.0, html:1.2.0, latest:1.2.0, templates:1.2.0, web-design:1.2.0 Version history: v1.2.0 | 2026-","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"pip install git+https://github.com/minirr890112-byte/popular-web-designs.git"},{"language":"bash","snippet":"$ popular-web-designs load stripe-style --name \"MySaaS\"\n\nโ Loaded Stripe-style template\n Components: hero, features, pricing, CTA, footer\n Colors: #635BFF (primary), #0A2540 (dark), #F6F9FC (bg)\n Fonts: Inter, Source Code Pro\n\n๐ Generated: ./MySaaS/\n โโโ index.html (hero + features + pricing + CTA)\n โโโ styles.css (Stripe design tokens)\n โโโ README.md (deploy to Vercel in 1 click)"},{"language":"bash","snippet":"# As a pip package\npip install git+https://github.com/minirr890112-byte/popular-web-designs.git\n\n# As a ClawHub skill\nclawhub install k97322wf3ap6xdkmwkwvej4kbd86h4yv"},{"language":"python","snippet":"# Load any design template\nfrom popular_web_designs import load_template\n\n# Get the full Notion design system\nnotion = load_template('notion')\nprint(notion.colors.primary) # {'text': 'rgba(0,0,0,0.95)', 'accent': '#0075de', ...}\nprint(notion.shadows.card) # Multi-layer shadow stack\nprint(notion.typography.h1) # {size: '64px', weight: 700, letter_spacing: '-2.125px', ...}"},{"language":"text","snippet":"skill_view(name=\"popular-web-designs\", file_path=\"templates/stripe.md\")"},{"language":"text","snippet":"Primary: #635bff (purple CTA), #0a2540 (navy text)\nBackground: #ffffff โ #f6f9fc (gradient sections)\nTypography: Source Sans 3, weight 300-600, -0.3px letter-spacing\nShadow: subtle 0 2px 5px rgba(0,0,0,0.05) card lift"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"|---\nname: popular-web-designs\ndescription: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visual identity of any popular site. Neo-brutalist, SaaS, dashboard, landing page templates included.\nversion: 1.2.0\nauthor: minirr890112-byte\nlicense: MIT\nmetadata:\n hermes:\n tags: [Web-Design, HTML, CSS, Templates, Design-Systems, Frontend, UI, Landing-Page]\n homepage: https://github.com/minirr890112-byte/popular-web-designs\n---\n\n# Popular Web Designs\n\n## Problem โ Solution\n\n**The problem**: You build a tool, write the backend, deploy the API... then spend 3 hours making it \"look decent.\" The result? Generic Tailwind gray. Meanwhile, Stripe and Linear have designers on payroll. You don't.\n\n**The solution**: 54 design systems extracted from production websites. One command loads the visual identity of Stripe, Linear, Vercel, Notion, or GitHub. Your landing page looks like a funded startup in 30 seconds. No designer needed.\n\n448 developers downloaded this. Zero left a star. If you use it, leave one.\n\n## Quick Start\n\n```bash\npip install git+https://github.com/minirr890112-byte/popular-web-designs.git\n```\n\n## Templates\n\n| Template | Vibe | Best For |\n|---|---|---|\n| Stripe-style | Clean, gradients, blue-purple | SaaS landing pages |\n| Linear-style | Dark, minimal, mono font | Developer tools |\n| Vercel-style | Black/white, geometric | Deployment platforms |\n| Notion-style | Serif headings, clean cards | Docs, wikis, blogs |\n| GitHub-style | Terminal-green accents | Open source projects |\n| Neo-brutalist | Bold borders, primary colors | Indie hacker vibes |\n| Dashboard | Data-dense, dark mode | Admin panels |\n| ...and 47 more | | |\n\n## Real Example\n\n```bash\n$ popular-web-designs load stripe-style --name \"MySaaS\"\n\nโ Loaded Stripe-style template\n Components: hero, features, pricing, CTA, footer\n Colors: #635BFF (primary), #0A2540 (dark), #F6F9FC (bg)\n Fonts: Inter, Source Code Pro\n\n๐ Generated: ./MySaaS/\n โโโ index.html (hero + features + pricing + CTA)\n โโโ styles.css (Stripe design tokens)\n โโโ README.md (deploy to Vercel in 1 click)\n```\n\n## Built For\n\nDevelopers who need a landing page that doesn't scream \"I did the CSS myself.\" The 448 ClawHub downloads suggest this resonates โ if it helped you, star it so others find it.\n\n## Why a Star? โญ\n\n448 downloads, 0 stars. Break the streak โ [GitHub](https://github.com/minirr890112-byte/popular-web-designs)"},{"path":"README.md","content":"\n \n \n\n\n# popular-web-designs\n\n> 54 production-quality design systems extracted from real websites โ every color, font, shadow, border radius, and component spec you need to build pixel-perfect clones.\n\n[](https://github.com/minirr890112-byte/popular-web-designs/stargazers)\n[](LICENSE)\n[](#design-catalog)\n[](https://clawhub.ai/skills/k97322wf)\n[](CONTRIBUTING.md)\n\n---\n\n## What's Inside\n\nEach of the **54 templates** is a complete design system markdown file containing:\n\n- Color palette & roles (every hex value, semantic roles, interaction states)\n- Typography hierarchy (font family, sizes, weights, line-heights, letter-spacing)\n- Component stylings (buttons, cards, navs, inputs, badges, modals โ with exact CSS)\n- Layout principles (spacing scale, grid system, whitespace philosophy)\n- Depth & elevation (shadow stacks with layer-by-layer values)\n- Responsive behavior (breakpoints, collapsing strategy, touch targets)\n- Accessibility specs (focus rings, color contrast ratios, interactive states)\n- **Agent prompt guide** โ copy-paste prompts to instantly generate pixel-perfect HTML\n\nNo guessing. No eyeballing. The exact values used by Stripe, Linear, Notion, Vercel, and 50 more.\n\n## Why This Exists\n\nWhen an AI generates HTML, it defaults to generic design. Blue links, system fonts, `box-shadow: 0 2px 8px rgba(0,0,0,0.1)`. These templates replace guesswork with precision.\n\n**Without this skill:** you get a generic admin dashboard that looks like 100 other AI-generated demos.\n\n**With this skill:** you get a pixel-accurate Notion page with warm-undertone grays, 4-layer whisper shadows, and compressed-letter-spacing Inter at 64px. You get a Stripe page with blue-purple gradients and weight-300 Source Sans elegance. You get a Linear dark mode UI with Geist Mono code blocks and purple accent glow.\n\n
\n\n| Generic AI Output | With This Skill |\n|---|---|\n| `box-shadow: 0 2px 8px rgba(0,0,0,0.1)` | `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px` |\n| `border: 1px solid #e5e7eb` | `border: 1px solid rgba(0,0,0,0.1)` |\n| `font-family: system-ui` | `font-family: 'Inter', -apple-system, system-ui, sans-serif` at exactly 64px/700/-2.125px |\n| `background"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn71cgymfx66r5zs5fd9vyz4cd85kv00\",\n \"slug\": \"popular-web-designs\",\n \"version\": \"1.2.0\",\n \"publishedAt\": 1781827206319\n}"},{"path":"skill-card.md","content":"## Description:\n\nProvides 54 web design system templates that help agents generate HTML, CSS, and UI guidance matching recognizable website visual styles.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[minirr890112-byte](https://clawhub.ai/user/minirr890112-byte)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and agents use this skill to select popular web design templates, inspect design tokens, and generate starter HTML/CSS or design guidance for landing pages, dashboards, documentation sites, and frontend prototypes.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The documented pip install path fetches executable Python from an unpinned GitHub branch.\n\nMitigation: Review the repository before installation and prefer a pinned commit, signed release, or trusted package version.\n\nRisk: Generated CSS and HTML may closely imitate recognizable third-party website styles.\n\nMitigation: Review generated assets for brand, trademark, and originality requirements before using them in public or commercial products.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/minirr890112-byte/skills/popular-web-designs)\n- [Project homepage](https://github.com/minirr890112-byte/popular-web-designs)\n- [Original design-system source](https://github.com/VoltAgent/awesome-design-md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance, CSS custom properties, and self-contained HTML/CSS snippets or files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [CLI output can be printed to stdout or written to local CSS and HTML files when an output path is provided.]\n\n## Skill Version(s):\n\n1.2.0 (source: server release evidence, artifact frontmatter, setup.py, and package __version__)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua... Skill: popular-web-designs Owner: minirr890112-byte Summary: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua... Tags: CSS:1.1.0, Frontend:1.1.0, HTML:1.1.0, Templates:1.1.0, Web-Design:1.1.0, css:1.2.0, frontend:1.2.0, html:1.2.0, latest:1.2.0, templates:1.2.0, web-design:1.2.0 Version history: v1.2.0 | 2026-","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1352,"uniquenessScore":55,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-09T08:45:39.173Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-09T08:45:39.173Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T05:40:40.643Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | ๐ Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation โข (~400 MCP servers for AI agents) โข AI Automation / AI Agent with MCPs โข AI Workflows & AI Agents โข MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}
![\"54](\"https://img.shields.io/badge/54-Design_Systems-0075de?style=flat-square\"){kind=icon}
\n