skills/creative/popular-web-designs/templates/coinbase.md
Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
- Primary:
DM Sans| Mono:system monospace stack- Font stack (CSS):
font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">Use
write_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (#0052ff) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (#578bfa). The design alternates between white content sections and dark (#0a0b0d, #282b31) feature sections, creating a professional, financial-grade interface.
Key Characteristics:
#0052ff) as singular brand accent#0a0b0d) dark sections + white light sections#eef0f3) with blue tinttext-transform: lowercase on some button labels — unusual#0052ff): Primary brand, links, CTA borders#ffffff): Primary light surface#0a0b0d): Text, dark section backgrounds#eef0f3): Secondary button background#578bfa): Button hover background#0667d0): Secondary link color#5b616e): Border color at 20% opacity#282b31): Dark button/card backgroundsrgba(247,247,247,0.88)): Subtle surfaceCoinbaseDisplay — hero headlinesCoinbaseSans — buttons, headings, navCoinbaseText — reading textCoinbaseIcons — icon font| Role | Font | Size | Weight | Line Height | Notes |
|---|---|---|---|---|---|
| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
Primary Pill (56px radius)
#eef0f3 or #282b311px solid matching background#578bfa (light blue)2px solid black outlineFull Pill (100000px radius)
Blue Bordered
1px solid #0052ff1px solid rgba(91,97,110,0.2)Minimal shadow system — depth from color contrast between dark/light sections.
Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
#0052ff)#ffffff)#0a0b0d#eef0f3#578bfa#0a0b0d