Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:JetBrains Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Expo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on a bright, airy canvas — a cool-tinted off-white (#f0f0f3) that gives the page a subtle technological coolness without the starkness of pure white. This is a site that breathes: enormous vertical spacing between sections creates a gallery-like pace where each feature gets its own "room."
The design language is decisively monochromatic — pure black (#000000) headlines against the lightest possible backgrounds, with a spectrum of cool blue-grays (#60646c, #b0b4ba, #555860) handling all secondary communication. Color is almost entirely absent from the interface itself; when it appears, it's reserved for product screenshots, app icons, and the React universe illustration — making the actual content burst with life against the neutral canvas.
What makes Expo distinctive is its pill-shaped geometry. Buttons, tabs, video containers, and even images use generously rounded or fully pill-shaped corners (24px–9999px), creating an organic, approachable feel that contradicts the typical sharp-edged developer tool aesthetic. Combined with tight letter-spacing on massive headlines (-1.6px to -3px at 64px), the result is a design that's simultaneously premium and friendly — like an Apple product page reimagined for developers.
Key Characteristics:
- Luminous cool-white canvas (#f0f0f3) with gallery-like vertical spacing
- Strictly monochromatic: pure black headlines, cool blue-gray body text, no decorative color
- Pill-shaped geometry everywhere — buttons, tabs, containers, images (24px–9999px radius)
- Massive display headlines (64px) with extreme negative letter-spacing (-1.6px to -3px)
- Inter as the sole typeface, used at weights 400–900 for full expressive range
- Whisper-soft shadows that barely lift elements from the surface
- Product screenshots as the only source of color in the interface
#000000): The absolute anchor — used for primary headlines, CTA buttons, and the brand identity. Pure black on cool white creates maximum contrast without feeling aggressive.#1c2024): The primary text color for body content — a barely perceptible blue-black that's softer than pure #000 for extended reading.#0d74ce): The standard link color — a trustworthy, saturated blue that signals interactivity without competing with the monochrome hierarchy.#476cff): A brighter, more saturated blue for legal/footer links — slightly more attention-grabbing than Link Cobalt.#47c2ff): A light, friendly cyan-blue for widget branding elements — the brightest accent in the system.#8145b5): A rich violet used for "preview" or beta feature indicators — creating clear visual distinction from standard content.#f0f0f3): The primary page background — a cool off-white with the faintest blue-violet tint. Not warm, not sterile — precisely technological.#ffffff): Card surfaces, button backgrounds, and elevated content containers. Creates a clear "lifted" distinction from Cloud Gray.#1a1a1a): Dark surface for dark-theme widgets and overlay elements.#171717): The darkest surface variant, used for promotional banners and high-contrast containers.#60646c): The workhorse secondary text color (305 instances). A cool blue-gray that's authoritative without being heavy.#555860): Slightly darker than Slate, used for emphasized secondary text.#b0b4ba): Tertiary text, placeholders, and de-emphasized metadata. Comfortably readable but clearly receded.#999999): Accordion icons and deeply de-emphasized UI elements in dark contexts.#cccccc): Arrow icons and decorative elements in dark contexts.#363a3f): Borders on dark surfaces, switch tracks, and emphasized containment.#333333): Dark mode switch backgrounds and deep secondary surfaces.#ab6400): A warm, deep amber for warning states — deliberately not bright yellow, conveying seriousness.#eb8e90): A soft pink-coral for disabled destructive actions — gentler than typical red, reducing alarm fatigue.#e0e1e6): Standard card/container borders — a cool lavender-gray that's visible without being heavy.#d9d9e0): Button and form element borders — slightly warmer/darker than card borders for interactive elements.#2547d0): Deep blue for keyboard focus indicators in dark theme contexts.Inter, with fallbacks: -apple-system, system-uiJetBrains Mono, with fallback: ui-monospacesystem-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Inter | 64px (4rem) | 700–900 | 1.10 (tight) | -1.6px to -3px | Maximum impact, extreme tracking |
| Section Heading | Inter | 48px (3rem) | 600 | 1.10 (tight) | -2px | Feature section anchors |
| Sub-heading | Inter | 20px (1.25rem) | 600 | 1.20 (tight) | -0.25px | Card titles, feature names |
| Body Large | Inter | 18px (1.13rem) | 400–500 | 1.40 | normal | Intro paragraphs, section descriptions |
| Body / Button | Inter | 16px (1rem) | 400–700 | 1.25–1.40 | normal | Standard text, nav links, buttons |
| Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.00–1.40 | normal | Descriptions, metadata, badge text |
| Tag / Small | Inter | 12px (0.75rem) | 500 | 1.00–1.60 | normal | Smallest sans-serif text, badges |
| Code Body | JetBrains Mono | 16px (1rem) | 400–600 | 1.40 | normal | Inline code, terminal commands |
| Code Caption | JetBrains Mono | 14px (0.88rem) | 400–600 | 1.40 | normal | Code snippets, technical labels |
| Code Small | JetBrains Mono | 12px (0.75rem) | 400 | 1.60 | normal | Uppercase tech tags |
Primary (White on border)
- Background: Pure White (#ffffff)
- Text: Near Black (#1c2024)
- Padding: 0px 12px (compact, content-driven height)
- Border: thin solid Input Border (1px solid #d9d9e0)
- Radius: subtly rounded (6px)
- Shadow: subtle combined shadow on hover
- The understated default — clean, professional, unheroic
Primary Pill - Same as Primary but with pill-shaped radius (9999px) - Used for hero CTAs and high-emphasis actions - The extra roundness signals "start here"
Dark Primary
- Background: Expo Black (#000000)
- Text: Pure White (#ffffff)
- Pill-shaped (9999px) or generously rounded (32–36px)
- No border (black IS the border)
- The maximum-emphasis CTA — reserved for primary conversion actions
#ffffff) — clearly lifted from Cloud Gray page1px solid #e0e1e6) for standard cardsrgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px) — barely perceptible liftrgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px) — clear floating elevation#ffffff)#1c2024)1px solid #d9d9e0)#1c2024) or Slate Gray (#60646c) at 14–16px Inter weight 500Universe React Logo - Animated/illustrated React logo as the visual centerpiece - Connects Expo's identity to the React ecosystem - The only illustrative element on an otherwise photographic page
Device Preview Grid - Multiple device types (phone, tablet, web) shown simultaneously - Demonstrates cross-platform capability visually - Each device uses realistic device chrome
Status Badge - "All Systems Operational" pill in the nav - Green dot + text — compact trust signal - Pill-shaped (36px radius)
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Cloud Gray page background, inline text |
| Surface (Level 1) | White bg, no shadow | Standard white cards on Cloud Gray |
| Whisper (Level 2) | rgba(0,0,0,0.08) 0px 3px 6px + rgba(0,0,0,0.07) 0px 2px 4px |
Subtle card lift, hover states |
| Elevated (Level 3) | rgba(0,0,0,0.1) 0px 10px 20px + rgba(0,0,0,0.05) 0px 3px 6px |
Feature showcases, product screenshots |
| Modal (Level 4) | Dark overlay (--dialog-overlay-background-color) + heavy shadow |
Dialogs, overlays |
Shadow Philosophy: Expo uses shadows as gentle whispers rather than architectural statements. The primary depth mechanism is background color contrast — white cards floating on Cloud Gray — rather than shadow casting. When shadows appear, they're soft, diffused, and directional (downward), creating the feeling of paper hovering millimeters above a desk.
#f0f0f3) as the page background and Pure White (#ffffff) for elevated cards — the two-tone light system is essential#000000) for headlines and primary CTAs — it carries maximum authority on the light canvas#60646c) for secondary text — it's the precise balance between readable and receded| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, hamburger nav, stacked cards, hero text scales to ~36px |
| Tablet | 640–1024px | 2-column grids, condensed nav, medium hero text |
| Desktop | >1024px | Full multi-column layout, expanded nav, massive hero (64px) |
Only one explicit breakpoint detected (640px), suggesting a fluid, container-query or min()/clamp()-based responsive system rather than fixed breakpoint snapping.