Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Geist| Mono:Geist Mono- Font stack (CSS):font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Vercel's website is the visual thesis of developer infrastructure made invisible — a design system so restrained it borders on philosophical. The page is overwhelmingly white (#ffffff) with near-black (#171717) text, creating a gallery-like emptiness where every element earns its pixel. This isn't minimalism as decoration; it's minimalism as engineering principle. The Geist design system treats the interface like a compiler treats code — every unnecessary token is stripped away until only structure remains.
The custom Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing (-2.4px to -2.88px at display sizes), creating headlines that feel compressed, urgent, and engineered — like code that's been minified for production. At body sizes, the tracking relaxes but the geometric precision persists. Geist Mono completes the system as the monospace companion for code, terminal output, and technical labels. Both fonts enable OpenType "liga" (ligatures) globally, adding a layer of typographic sophistication that rewards close reading.
What distinguishes Vercel from other monochrome design systems is its shadow-as-border philosophy. Instead of traditional CSS borders, Vercel uses box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08) — a zero-offset, zero-blur, 1px-spread shadow that creates a border-like line without the box model implications. This technique allows borders to exist in the shadow layer, enabling smoother transitions, rounded corners without clipping, and a subtler visual weight than traditional borders. The entire depth system is built on layered, multi-value shadow stacks where each layer serves a specific purpose: one for the border, one for soft elevation, one for ambient depth.
Key Characteristics:
- Geist Sans with extreme negative letter-spacing (-2.4px to -2.88px at display) — text as compressed infrastructure
- Geist Mono for code and technical labels with OpenType "liga" globally
- Shadow-as-border technique: box-shadow 0px 0px 0px 1px replaces traditional borders throughout
- Multi-layer shadow stacks for nuanced depth (border + elevation + ambient in single declarations)
- Near-pure white canvas with #171717 text — not quite black, creating micro-contrast softness
- Workflow-specific accent colors: Ship Red (#ff5b4f), Preview Pink (#de1d8d), Develop Blue (#0a72ef)
- Focus ring system using hsla(212, 100%, 48%, 1) — a saturated blue for accessibility
- Pill badges (9999px) with tinted backgrounds for status indicators
#171717): Primary text, headings, dark surface backgrounds. Not pure black — the slight warmth prevents harshness.#ffffff): Page background, card surfaces, button text on dark.#000000): Secondary use, --geist-console-text-color-default, used in specific console/code contexts.#ff5b4f): --ship-text, the "ship to production" workflow step — warm, urgent coral-red.#de1d8d): --preview-text, the preview deployment workflow — vivid magenta-pink.#0a72ef): --develop-text, the development workflow — bright, focused blue.#0070f3): --geist-console-text-color-blue, syntax highlighting blue.#7928ca): --geist-console-text-color-purple, syntax highlighting purple.#eb367f): --geist-console-text-color-pink, syntax highlighting pink.#0072f5): Primary link color with underline decoration.hsla(212, 100%, 48%, 1)): --ds-focus-color, focus ring on interactive elements.rgba(147, 197, 253, 0.5)): --tw-ring-color, Tailwind ring utility.#171717): Primary text, headings, nav text.#4d4d4d): Secondary text, description copy.#666666): Tertiary text, muted links.#808080): Placeholder text, disabled states.#ebebeb): Borders, card outlines, dividers.#fafafa): Subtle surface tint, inner shadow highlight.hsla(0, 0%, 98%, 1)): --ds-overlay-backdrop-color, modal/dialog backdrop.hsla(0, 0%, 95%, 1)): --geist-selection-text-color, text selection highlight.#ebf5ff): Pill badge background, tinted blue surface.#0068d6): Pill badge text, darker blue for readability.rgba(0, 0, 0, 0.08) 0px 0px 0px 1px): The signature — replaces traditional borders.rgba(0, 0, 0, 0.04) 0px 2px 2px): Minimal lift for cards.rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px): Full multi-layer card shadow.rgb(235, 235, 235) 0px 0px 0px 1px): Light gray ring-border for tabs and images.Geist, with fallbacks: Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI SymbolGeist Mono, with fallbacks: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New"liga" enabled globally on all Geist text; "tnum" for tabular numbers on specific captions.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Geist | 48px (3.00rem) | 600 | 1.00–1.17 (tight) | -2.4px to -2.88px | Maximum compression, billboard impact |
| Section Heading | Geist | 40px (2.50rem) | 600 | 1.20 (tight) | -2.4px | Feature section titles |
| Sub-heading Large | Geist | 32px (2.00rem) | 600 | 1.25 (tight) | -1.28px | Card headings, sub-sections |
| Sub-heading | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | Lighter sub-headings |
| Card Title | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | Feature cards |
| Card Title Light | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | Secondary card headings |
| Body Large | Geist | 20px (1.25rem) | 400 | 1.80 (relaxed) | normal | Introductions, feature descriptions |
| Body | Geist | 18px (1.13rem) | 400 | 1.56 | normal | Standard reading text |
| Body Small | Geist | 16px (1.00rem) | 400 | 1.50 | normal | Standard UI text |
| Body Medium | Geist | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |
| Body Semibold | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | Strong labels, active states |
| Button / Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | Buttons, links, captions |
| Button Small | Geist | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Compact buttons |
| Caption | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | Metadata, tags |
| Mono Body | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
| Mono Caption | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | Code labels |
| Mono Small | Geist Mono | 12px (0.75rem) | 500 | 1.00 (tight) | normal | text-transform: uppercase, technical labels |
| Micro Badge | Geist | 7px (0.44rem) | 700 | 1.00 (tight) | normal | text-transform: uppercase, tiny badges |
"liga". Ligatures aren't decorative — they're structural, creating tighter, more efficient glyph combinations."tnum" or "liga" serves as the "developer console" voice — compact technical labels that connect the marketing site to the product.Primary White (Shadow-bordered)
- Background: #ffffff
- Text: #171717
- Padding: 0px 6px (minimal — content-driven width)
- Radius: 6px (subtly rounded)
- Shadow: rgb(235, 235, 235) 0px 0px 0px 1px (ring-border)
- Hover: background shifts to var(--ds-gray-1000) (dark)
- Focus: 2px solid var(--ds-focus-color) outline + var(--ds-focus-ring) shadow
- Use: Standard secondary button
Primary Dark (Inferred from Geist system)
- Background: #171717
- Text: #ffffff
- Padding: 8px 16px
- Radius: 6px
- Use: Primary CTA ("Start Deploying", "Get Started")
Pill Button / Badge
- Background: #ebf5ff (tinted blue)
- Text: #0068d6
- Padding: 0px 10px
- Radius: 9999px (full pill)
- Font: 12px weight 500
- Use: Status badges, tags, feature labels
Large Pill (Navigation)
- Background: transparent or #171717
- Radius: 64px–100px
- Use: Tab navigation, section selectors
#ffffffrgba(0, 0, 0, 0.08) 0px 0px 0px 1pxrgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px1px solid #ebebeb with 12px top radiusvar(--ds-gray-200) background1px 0 0 0 var(--ds-gray-alpha-600)2px solid var(--ds-focus-color) — consistent blue focus ring#171717 text1px solid #ebebeb border12px 12px 0px 0px radiusWorkflow Pipeline - Three-step horizontal pipeline: Develop → Preview → Ship - Each step has its own accent color: Blue → Pink → Red - Connected with lines/arrows - The visual metaphor for Vercel's core value proposition
Trust Bar / Logo Grid
- Company logos (Perplexity, ChatGPT, Cursor, etc.) in grayscale
- Horizontal scroll or grid layout
- Subtle #ebebeb border separation
Metric Cards - Large number display (e.g., "10x faster") - Geist 48px weight 600 for the metric - Description below in gray body text - Shadow-bordered card container
border-bottom: 1px solid #171717| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Ring (Level 1) | rgba(0,0,0,0.08) 0px 0px 0px 1px |
Shadow-as-border for most elements |
| Light Ring (Level 1b) | rgb(235,235,235) 0px 0px 0px 1px |
Lighter ring for tabs, images |
| Subtle Card (Level 2) | Ring + rgba(0,0,0,0.04) 0px 2px 2px |
Standard cards with minimal lift |
| Full Card (Level 3) | Ring + Subtle + rgba(0,0,0,0.04) 0px 8px 8px -8px + inner #fafafa ring |
Featured cards, highlighted panels |
| Focus (Accessibility) | 2px solid hsla(212, 100%, 48%, 1) outline |
Keyboard focus on all interactive elements |
Shadow Philosophy: Vercel has arguably the most sophisticated shadow system in modern web design. Rather than using shadows for elevation in the traditional Material Design sense, Vercel uses multi-value shadow stacks where each layer has a distinct architectural purpose: one creates the "border" (0px spread, 1px), another adds ambient softness (2px blur), another handles depth at distance (8px blur with negative spread), and an inner ring (#fafafa) creates the subtle highlight that makes the card "glow" from within. This layered approach means cards feel built, not floating.
1px solid #171717 (full dark line) between major sections0px 0px 0px 1px rgba(0,0,0,0.08)) instead of traditional CSS borders"liga" on all Geist text — ligatures are structural, not optional#171717 to #ffffff are the system#171717 instead of #000000 for primary text — the micro-warmth mattersborder on cards — use the shadow-border technique#fafafa ring in card shadows — it's the glow that makes the system work| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Tight single column, minimal padding |
| Mobile | 400–600px | Standard mobile, stacked layout |
| Tablet Small | 600–768px | 2-column grids begin |
| Tablet | 768–1024px | Full card grids, expanded padding |
| Desktop Small | 1024–1200px | Standard desktop layout |
| Desktop | 1200–1400px | Full layout, maximum content width |
| Large Desktop | >1400px | Centered, generous margins |
#171717)#ffffff)#171717)#4d4d4d)rgba(0, 0, 0, 0.08) 0px 0px 0px 1px#0072f5)hsla(212, 100%, 48%, 1))0px 0px 0px 1px rgba(0,0,0,0.08) is the foundation#fafafa ring in card shadows is what gives Vercel cards their subtle inner glow