OpenCode Design System

Overview

OpenCode's marketing site is rendered entirely in Berkeley Mono — every word on the page, from the 38px hero headline down to the 14px footer fine print, sits in the same monospaced face. The visual identity comes from that single typographic decision: the page reads like a manpage or a static-site README, complete with bracketed [+] / [-] / [x] ASCII markers used in place of icons or bullets, and a wordmark rendered as block-pixel ASCII art at the top of the nav. There is no sans-serif anywhere, no display face, no italics, no decorative ornament — the system is one font and one weight away from being a 1990s whatis page rendered at modern resolutions.

The chrome is austere: warm cream canvas ({colors.canvas} — #fdfcfc with a faint blush), nearly-black ink ({colors.ink} — #201d1d), and a 4-tier neutral gray ladder for body, metadata, and disabled text. Cards don't exist as raised surfaces — sections are just hairline-bordered text blocks ({colors.hairline} 1px) sitting directly on the canvas with {spacing.section} (96px) air between them. The single "visual" moment in the entire system is a full-bleed dark hero card ({colors.surface-dark} — true near-black) that mocks up the OpenCode TUI itself: a terminal frame with tab / ctrl-p keybinding hints, a "Build" command line, and the OpenCode wordmark rendered as a pixel-block ASCII title.

The semantic palette is unusual for a brand-marketing site: it ships the full Apple Human Interface Guidelines accent ramp — {colors.accent} (Apple Blue #007aff), {colors.danger} (#ff3b30), {colors.warning} (#ff9f0a), {colors.success} (#30d158) plus their hover/active deepenings — even though the marketing surfaces themselves only use these colors in the dark hero TUI mockup as syntax-highlight stand-ins. The wider palette belongs to the in-product TUI; the marketing pages mostly stay in monochrome.

Key Characteristics:

• 100% Berkeley Mono typography across every text role — no sans-serif fallback anywhere in the chrome
• Warm cream {colors.canvas} ("#fdfcfc") as the only body background — no surface alternation across sections
• Single dark surface ({colors.surface-dark} — "#201d1d") reserved exclusively for the hero TUI mockup
• 4px radius ({rounded.sm}) on every interactive element; sections themselves are sharp rectangles bordered in 1px hairline
• ASCII bracket markers ([+], [-], [x]) used as bullet glyphs in feature lists and FAQ rows
• Block-pixel ASCII wordmark in the primary nav and inside the hero TUI — the brand identity is its own ASCII art
• 96px {spacing.section} rhythm between every section, with no decorative dividers; only thin 1px {colors.hairline} rules separate content blocks

Known Gaps

• Mobile screenshots not captured — responsive behavior synthesizes OpenCode's mobile pattern (hamburger drawer, single-column, footer accordion) from desktop evidence and the breakpoint stack.
• Hover states not documented by system policy.
• In-product TUI screenshots beyond the marketing hero mockup are not in the captured set; the actual opencode terminal interface (full keybindings, panels, status bar) is not documented here.
• /go page not extracted — the marketing page for the Go SDK likely shares the same chrome but introduces code-sample blocks not documented above.
• Form validation state styling (success / error inline messages) not present in the captured surfaces.