Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
JetBrains Mono| Mono:JetBrains Mono- Font stack (CSS):font-family: 'JetBrains Mono', 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=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
OpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (#201d1d) with warm off-white text (#fdfcfc). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in #201d1d -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.
Berkeley Mono is the sole typeface, establishing an unapologetic monospace identity. Every element -- headings, body text, buttons, navigation -- shares this single font family, creating a unified "everything is code" philosophy. The heading at 38px bold with 1.50 line-height is generous and readable, while body text at 16px with weight 500 provides a slightly heavier-than-normal reading weight that enhances legibility on screen. The monospace grid naturally enforces alignment and rhythm across the layout.
The color system is deliberately minimal. The primary palette consists of just three functional tones: the warm near-black (#201d1d), a medium warm gray (#9a9898), and a bright off-white (#fdfcfc). Semantic colors borrow from the Apple HIG palette -- blue accent (#007aff), red danger (#ff3b30), green success (#30d158), orange warning (#ff9f0a) -- giving the interface familiar, trustworthy signal colors without adding brand complexity. Borders use a subtle warm transparency (rgba(15, 0, 0, 0.12)) that ties into the warm undertone of the entire system.
Key Characteristics:
- Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices
- Warm near-black primary (#201d1d) with reddish-brown undertone, not pure black
- Off-white text (#fdfcfc) with warm tint, not pure white
- Minimal 4px border radius throughout -- sharp, utilitarian corners
- 8px base spacing system scaling up to 96px
- Apple HIG-inspired semantic colors (blue, red, green, orange)
- Transparent warm borders using rgba(15, 0, 0, 0.12)
- Email input with generous 20px padding and 6px radius -- the most generous component radius
- Single button variant: dark background, light text, tight vertical padding (4px 20px)
- Underlined links as default link style, reinforcing the text-centric identity
#201d1d): Primary background, button fills, link text. A warm near-black with subtle reddish-brown warmth -- rgb(32, 29, 29).#fdfcfc): Primary text on dark surfaces, button text. A barely-warm off-white that avoids clinical pure white.#9a9898): Secondary text, muted links. A neutral warm gray that bridges dark and light.#302c2c): Slightly lighter than primary dark, used for elevated surfaces and subtle differentiation.#646262): Stronger borders, outline rings on interactive elements.#f1eeee): Light mode surface, subtle background variation.#007aff): Primary accent, links, interactive highlights. Apple system blue.#0056b3): Darker blue for hover states.#004085): Deepest blue for pressed/active states.#ff3b30): Error states, destructive actions. Apple system red.#d70015): Darker red for hover on danger elements.#a50011): Deepest red for pressed danger states.#30d158): Success states, positive feedback. Apple system green.#ff9f0a): Warning states, caution signals. Apple system orange.#cc7f08): Darker orange for hover on warning elements.#995f06): Deepest orange for pressed warning states.#6e6e73): Muted labels, disabled text, placeholder content.#424245): Secondary text on light backgrounds, captions.rgba(15, 0, 0, 0.12)): Primary border color, warm transparent black with red tint.#9a9898): Tab underline border, 2px solid bottom.#646262): 1px solid outline border for containers.Berkeley Mono, with fallbacks: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace| Role | Size | Weight | Line Height | Notes |
|---|---|---|---|---|
| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero headlines, page titles |
| Heading 2 | 16px (1.00rem) | 700 | 1.50 | Section titles, bold emphasis |
| Body | 16px (1.00rem) | 400 | 1.50 | Standard body text, paragraphs |
| Body Medium | 16px (1.00rem) | 500 | 1.50 | Links, button text, nav items |
| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | Compact labels, tab items |
| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | Footnotes, metadata, small labels |
Primary (Dark Fill)
- Background: #201d1d (OpenCode Dark)
- Text: #fdfcfc (OpenCode Light)
- Padding: 4px 20px
- Radius: 4px
- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)
- Outline: rgb(253, 252, 252) none 0px
- Use: Primary CTAs, main actions
Email Input
- Background: #f8f7f7 (light neutral)
- Text: #201d1d
- Border: 1px solid rgba(15, 0, 0, 0.12)
- Padding: 20px
- Radius: 6px
- Font: Berkeley Mono, standard size
- Use: Form fields, email capture
Default Link
- Color: #201d1d
- Decoration: underline 1px
- Font-weight: 500
- Use: Primary text links in body content
Light Link
- Color: #fdfcfc
- Decoration: none
- Use: Links on dark backgrounds, navigation
Muted Link
- Color: #9a9898
- Decoration: none
- Use: Footer links, secondary navigation
Tab Navigation
- Border-bottom: 2px solid #9a9898 (active tab indicator)
- Font: 16px, weight 500, line-height 1.00
- Use: Section switching, content filtering
Terminal Hero - Full-width dark terminal window as hero element - ASCII art / stylized logo within terminal frame - Monospace command examples with syntax highlighting - Reinforces the CLI-first identity of the product
Feature List - Bulleted feature items with Berkeley Mono text - Weight 500 for feature names, 400 for descriptions - Tight vertical spacing between items - No cards or borders -- pure text layout
Email Capture
- Light background input (#f8f7f7) contrasting dark page
- Generous 20px padding for comfortable typing
- 6px radius -- the roundest element in the system
- Newsletter/waitlist pattern
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default state for most elements |
| Border Subtle (Level 1) | 1px solid rgba(15, 0, 0, 0.12) |
Section dividers, input borders, horizontal rules |
| Border Tab (Level 2) | 2px solid #9a9898 bottom only |
Active tab indicator |
| Border Outline (Level 3) | 1px solid #646262 |
Container outlines, elevated elements |
Shadow Philosophy: OpenCode's depth system is intentionally flat. There are no box-shadows in the extracted tokens -- zero shadow values were detected. Depth is communicated exclusively through border treatments and background color shifts. This flatness is consistent with the terminal aesthetic: terminals don't have shadows, and neither does OpenCode. The three border levels (transparent warm, tab indicator, solid outline) create sufficient visual hierarchy without any elevation illusion.
#201d1d and #302c2c create subtle surface differentiationrgba(15, 0, 0, 0.12)) ties borders to the overall warm dark palette#007aff) or underline style change#007aff → #0056b3 → #004085 (default → hover → active)#ff3b30 → #d70015 → #a50011#ff9f0a → #cc7f08 → #995f06| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, reduced padding, heading scales down |
| Tablet | 640-1024px | Content width expands, slight padding increase |
| Desktop | >1024px | Full content width (~800-900px centered), maximum whitespace |
#201d1d (warm near-black)#fdfcfc (warm off-white)#9a9898 (warm gray)#6e6e73#007aff (blue)#ff3b30 (red)#30d158 (green)#ff9f0a (orange)#201d1d, button text: #fdfcfcrgba(15, 0, 0, 0.12) (warm transparent)#f8f7f7, input border: rgba(15, 0, 0, 0.12)#201d1d warm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color #fdfcfc. Subtitle at 16px weight 400, color #9a9898. Primary CTA button (#201d1d bg with 1px solid #646262 border, 4px radius, 4px 20px padding, #fdfcfc text at weight 500)."#201d1d background. Feature name at 16px Berkeley Mono weight 700, color #fdfcfc. Description at 16px weight 400, color #9a9898. No cards, no borders -- pure text with 16px vertical gap between items."#f8f7f7 background input, 1px solid rgba(15, 0, 0, 0.12) border, 6px radius, 20px padding. Adjacent dark button (#201d1d bg, #fdfcfc text, 4px radius, 4px 20px padding). Berkeley Mono throughout."#201d1d background. 16px Berkeley Mono weight 500 for links, #fdfcfc text. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency -- solid dark surface."#201d1d background, multi-column link grid. Links at 16px Berkeley Mono weight 400, color #9a9898. Section headers at weight 700. Border-top 1px solid rgba(15, 0, 0, 0.12) separator."#201d1d not #000000, use #fdfcfc not #ffffff. The reddish warmth is subtle but essential.#007aff blue, #ff3b30 red, #30d158 green, #ff9f0a orange. Each has hover and active darkened variants.rgba(15, 0, 0, 0.12) -- a warm transparent dark, not neutral gray. This ties borders to the warm palette.