skills/creative/popular-web-designs/templates/opencode.ai.md
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">Use
write_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:
#201d1d) with reddish-brown undertone, not pure black#fdfcfc) with warm tint, not pure whitergba(15, 0, 0, 0.12)#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)
#201d1d (OpenCode Dark)#fdfcfc (OpenCode Light)rgb(253, 252, 252) none 0pxEmail Input
#f8f7f7 (light neutral)#201d1d1px solid rgba(15, 0, 0, 0.12)Default Link
#201d1dLight Link
#fdfcfcMuted Link
#9a9898Tab Navigation
2px solid #9a9898 (active tab indicator)Terminal Hero
Feature List
Email Capture
#f8f7f7) contrasting dark page| 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.