OpenCode Design System

---

version: alpha

name: OpenCode-design-analysis

description: |

A terminal-native marketing system rendered entirely in Berkeley Mono — every word on the page, from the hero headline down to the footer fine print, is monospaced. The page itself reads like a manpage or a static-site README: warm cream canvas (`#fdfcfc`), nearly-black ink (`#201d1d`), 4px-radius rectangles for the few interactive elements, and bracketed `[+]`/`[-]` ASCII markers used as bullets. The brand's only "visual moment" is a single dark hero card that mocks up the OpenCode TUI itself — black background, monospaced terminal output, ASCII pipe characters, and a wordmark rendered as block-pixel ASCII. Every section sits as a hairline-bordered text block on the cream canvas with no shadows, no gradients, no decorative imagery, and no non-monospaced character anywhere in the system.

colors:

primary: "#201d1d"

on-primary: "#fdfcfc"

ink: "#201d1d"

ink-deep: "#0f0000"

charcoal: "#302c2c"

body: "#424245"

mute: "#646262"

stone: "#6e6e73"

ash: "#9a9898"

canvas: "#fdfcfc"

surface-soft: "#f8f7f7"

surface-card: "#f1eeee"

surface-dark: "#201d1d"

surface-dark-elevated: "#302c2c"

hairline: "rgba(15,0,0,0.12)"

hairline-strong: "#646262"

on-dark: "#fdfcfc"

on-dark-mute: "#9a9898"

accent: "#007aff"

accent-hover: "#0056b3"

accent-active: "#004085"

warning: "#ff9f0a"

warning-hover: "#cc7f08"

warning-active: "#995f06"

danger: "#ff3b30"

danger-hover: "#d70015"

danger-active: "#a50011"

success: "#30d158"

typography:

display-xl:

fontFamily: Berkeley Mono

fontSize: 38px

fontWeight: 700

lineHeight: 1.5

letterSpacing: 0

heading-md:

fontFamily: Berkeley Mono

fontSize: 16px

fontWeight: 700

lineHeight: 1.5

letterSpacing: 0

body-md:

fontFamily: Berkeley Mono

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

body-strong:

fontFamily: Berkeley Mono

fontSize: 16px

fontWeight: 500

lineHeight: 1.5

letterSpacing: 0

body-tight:

fontFamily: Berkeley Mono

fontSize: 16px

fontWeight: 500

lineHeight: 1

letterSpacing: 0

link-md:

fontFamily: Berkeley Mono

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

button-md:

fontFamily: Berkeley Mono

fontSize: 16px

fontWeight: 500

lineHeight: 2

letterSpacing: 0

caption-md:

fontFamily: Berkeley Mono

fontSize: 14px

fontWeight: 400

lineHeight: 2

letterSpacing: 0

rounded:

none: 0px

sm: 4px

full: 9999px

spacing:

xxs: 1px

xs: 4px

sm: 8px

md: 12px

lg: 16px

xl: 24px

xxl: 32px

section: 96px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.sm}"

padding: 4px 20px

height: 36px

button-primary-active:

backgroundColor: "{colors.ink-deep}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.sm}"

button-secondary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.sm}"

padding: 4px 20px

button-tab:

backgroundColor: "transparent"

textColor: "{colors.mute}"

typography: "{typography.button-md}"

rounded: "{rounded.none}"

padding: 8px 16px

button-tab-active:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.none}"

button-disabled:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ash}"

rounded: "{rounded.sm}"

badge-news:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.caption-md}"

rounded: "{rounded.sm}"

padding: 2px 8px

text-input:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.sm}"

padding: 8px 12px

height: 40px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.sm}"

textarea:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.sm}"

padding: 12px

install-snippet:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.sm}"

padding: 12px 16px

hero-tui-mockup:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.none}"

padding: 64px 32px

tui-prompt-row:

backgroundColor: "{colors.surface-dark-elevated}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.sm}"

padding: 8px 12px

list-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.body-md}"

rounded: "{rounded.none}"

padding: 8px 0px

faq-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.none}"

padding: 12px 0px

testimonial-row:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.body}"

typography: "{typography.body-md}"

rounded: "{rounded.sm}"

padding: 16px 20px

chart-tile:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.caption-md}"

rounded: "{rounded.none}"

padding: 16px

primary-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-strong}"

rounded: "{rounded.none}"

height: 56px

footer-section:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.caption-md}"

rounded: "{rounded.none}"

padding: 32px 0px

link-inline:

textColor: "{colors.ink}"

typography: "{typography.link-md}"

badge-section-label:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.heading-md}"

rounded: "{rounded.none}"

---

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:**

> **Source pages:** `/` (home), `/zen`, `/enterprise`. The chrome palette is identical across all three.

The full Apple Human Interface Guidelines semantic ramp ships with the system. On marketing pages these colors appear primarily inside the hero TUI mockup as syntax-highlight stand-ins; in the in-product TUI they carry their conventional meaning.

**Berkeley Mono** is the proprietary monospaced face used across every text role in the system. It carries weights 400 (regular), 500 (medium), and 700 (bold) and falls back through a long monospace stack — IBM Plex Mono → ui-monospace → SFMono-Regular → Menlo → Monaco → Consolas → Liberation Mono → Courier New.

The single-font decision is the brand. There is no display face, no body sans, no italic alternative, and no fallback to a proportional font anywhere — even the legal copyright row uses Berkeley Mono at 14px. This is the most aggressive typographic restraint of any site in the marketing-tools category: OpenCode's identity is "the marketing page is a man page."

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 38px | 700 | 1.5 | 0 | Hero headline ("The open source AI coding agent") |

| `{typography.heading-md}` | 16px | 700 | 1.5 | 0 | Section label ("What is OpenCode?", "FAQ", "Built for privacy first") |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Body copy, paragraph text, list-row text, install-snippet code |

| `{typography.body-strong}` | 16px | 500 | 1.5 | 0 | Inline emphasis, primary nav link, tab-label active |

| `{typography.body-tight}` | 16px | 500 | 1 | 0 | Compact label rendered without breathing room |

| `{typography.link-md}` | 16px | 400 | 1.5 | 0 | Inline anchor link in body prose |

| `{typography.button-md}` | 16px | 500 | 2 | 0 | Every button label across the system |

| `{typography.caption-md}` | 14px | 400 | 2 | 0 | Footer link text, badge label, copyright row, chart caption |

The hierarchy is built almost entirely from size and weight contrast on a single face. The display headline (38px / 700) and the heading-md label (16px / 700) share a weight; the difference is just size. Body and link share size, weight, and line-height — only context distinguishes them. Buttons get a deliberately tall line-height (2.0) so labels feel calmly spaced inside the 4px-radius rectangle.

Berkeley Mono is a paid commercial font. Open-source substitutes that approximate its metrics within ~3% at body sizes:

When substituting, line-height behavior is preserved by keeping `lineHeight: 1.5` for body and `lineHeight: 2` for buttons — adjusting weight is rarely needed.

Whitespace is structural and generous. Sections sit 96px apart with no decorative dividers between them — the `{colors.hairline}` 1px rule is the only signal of separation. Inside a section, content is left-flush against the column edge with no internal indentation; bullets use ASCII bracket prefixes (`[+]` / `[-]`) instead of indent-based layout. The result is a page that feels like a printed code listing rather than a styled marketing layout.

| Level | Treatment | Use |

|---|---|---|

| 0 — Flat | No border, no shadow | Default for body sections, list rows, hero text block, footer |

| 1 — Hairline rule | 1px solid `{colors.hairline}` (translucent warm tint) | Section dividers, between major content blocks |

| 2 — Hairline strong | 1px solid `{colors.hairline-strong}` | Tab strip bottom rule, in-list emphasized divider |

| 3 — Inverted dark | `{colors.surface-dark}` fill | Hero TUI mockup, dark CTA pill — the system's only "elevated" surface uses color, not shadow |

There are no drop shadows in the system. Nothing lifts, nothing floats. The only way an element registers as "above" another is the dark surface used in the hero mockup.

Depth comes from typography density and the single dark TUI mockup, not from CSS effects:

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Sections, hero TUI mockup, primary nav, footer, list rows — every container that isn't a button |

| `{rounded.sm}` | 4px | Every interactive element — primary CTA, secondary CTA, text inputs, install snippet, badges, prompt rows |

| `{rounded.full}` | 9999px | Avatar circles in testimonials |

The radius vocabulary is two values: 4px for interactive elements and 0px for everything else. Avatar circles in testimonial rows are the only fully-rounded element in the system.

There is no photography. Visual elements are limited to:

> **No hover states documented** per system policy. Each spec covers Default and Active/Pressed only.

**`button-primary`** — the universal OpenCode CTA

**`button-secondary`** — outlined alternative

**`button-tab`** + **`button-tab-active`** — install-tab strip

**`button-disabled`**

**`badge-news`** — small dark chip in the news/announcement strip

**`badge-section-label`** — bracketed section header

**`text-input`** + **`text-input-focused`**

**`textarea`**

**`install-snippet`** — the home page's signature install code block

**`hero-tui-mockup`** — the home page's signature TUI preview

**`tui-prompt-row`** — the inset command line inside the TUI mockup

**`list-row`** — feature/benefit row with ASCII bracket bullet

**`faq-row`** — FAQ entry with bracket toggle

**`testimonial-row`** — `/zen` peer-quote row

**`chart-tile`** — the stat-block sparse-line chart

**`primary-nav`**

**Top Nav (Mobile)**

**`footer-section`**

**`link-inline`** — body-prose anchor link

| Name | Width | Key Changes |

|---|---|---|

| desktop-large | 1280px+ | Default — 960px content column, 5-up footer link grid |

| desktop | 1024px | Same layout; nav remains horizontal |

| tablet | 850px | Footer collapses to 2-up grid; `/enterprise` two-column form stacks |

| tablet-narrow | 768px | Primary nav becomes hamburger drawer; Download CTA stays visible |

| mobile | 640px | Single-column everything; hero display drops 38px → ~28px; section padding tightens |

All interactive elements meet WCAG AA at the ~36–40px height range. `{component.button-primary}` sits at ~36px with 20px horizontal padding. `{component.text-input}` and `{component.textarea}` sit at ~40px. `{component.button-tab}` rows in the install-method strip sit at ~32–36px depending on label length but extend to a full 44px tappable cell via inline padding. Footer links use `{typography.caption-md}` (14px) but receive ~28px line-height (caption-md is 2.0) plus 8px vertical padding for a comfortable ~44px tappable row.

There are no raster images in the system aside from the favicon and OG share image. Every visual element — wordmarks, charts, icons — is rendered as type or inline SVG and scales without aspect-ratio considerations.

1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves.

2. Reference component names and tokens directly (`{colors.ink}`, `{component.hero-tui-mockup}`, `{rounded.sm}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.

4. Add new variants as separate component entries (`-active`, `-disabled`) — do not bury them inside prose.

5. Default body to `{typography.body-md}`; reach for `{typography.body-strong}` for emphasis; reserve `{typography.display-xl}` strictly for the page-top hero headline.

6. Keep `{colors.surface-dark}` scarce — at most one full-bleed dark mockup per page. The dark surface is a narrative device, not a chrome treatment.

7. When introducing a new component, ask whether it can be expressed with the existing ASCII-bracket + 4px-radius + Berkeley-Mono vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.