OpenCode AI

version alpha

name OpenCode

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}"

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

Colors

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

Brand & Accent

• Ink ({colors.primary} / {colors.ink} — #201d1d): the brand's only "color." Headlines, body text, primary CTA fill, nav links, and every solid icon. Treats nearly-black as the brand color rather than pure black to keep type readable on the warm cream canvas.

• Ink Deep ({colors.ink-deep} — #0f0000): pressed-state for the primary CTA. Carries a faint red undertone matching the canvas's warm cast.

• Cream ({colors.canvas} — #fdfcfc): the brand's signature warm white. Used for every page body, every card surface, the on-primary text color, and the ASCII wordmark fill on dark.

Surface

• Canvas Cream ({colors.canvas} — #fdfcfc): every page body, every card.

• Soft Surface ({colors.surface-soft} — #f8f7f7): text-input default background, testimonial row fill, alternating row tint.

• Surface Card ({colors.surface-card} — #f1eeee): install-snippet pill, disabled button fill, slightly-elevated section row.

• Surface Dark ({colors.surface-dark} — #201d1d): the hero TUI mockup background and the dark CTA pill on the home page. Identical to {colors.ink} — the brand uses one near-black for both text and dark surfaces.

• Surface Dark Elevated ({colors.surface-dark-elevated} — #302c2c): the prompt-row inside the hero TUI mockup, one notch lighter than the dark surface itself.

• Hairline ({colors.hairline} — rgba(15,0,0,0.12)): 1px section divider. The translucent warm tint matches the cream canvas's undertone.

• Hairline Strong ({colors.hairline-strong} — #646262): tab strip's bottom rule and stronger inline divider.

Text

• Ink ({colors.ink} — #201d1d): headlines, body text, primary nav links, button text on light surfaces.

• Charcoal ({colors.charcoal} — #302c2c): subtly softer body where pure ink is too heavy.

• Body ({colors.body} — #424245): default paragraph text and FAQ answers.

• Mute ({colors.mute} — #646262): tab labels (default state), metadata, footer link text, in-list secondary annotations.

• Stone ({colors.stone} — #6e6e73): least-emphasis utility text, breadcrumb separators.

• Ash ({colors.ash} — #9a9898): disabled text and secondary annotation in dark TUI mockup, also TUI mockup secondary color.

Semantic

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.

• Accent ({colors.accent} — #007aff): primary informational signal, in-product link color, TUI command highlight.

• Accent Hover ({colors.accent-hover} — #0056b3): pressed informational link.

• Accent Active ({colors.accent-active} — #004085): deeply-pressed informational state.

• Danger ({colors.danger} — #ff3b30): destructive confirmation, error state.

• Danger Hover ({colors.danger-hover} — #d70015): pressed destructive.

• Danger Active ({colors.danger-active} — #a50011): deeply-pressed destructive.

• Warning ({colors.warning} — #ff9f0a): caution callouts.

• Warning Hover ({colors.warning-hover} — #cc7f08): pressed caution.

• Warning Active ({colors.warning-active} — #995f06): deeply-pressed caution.

• Success ({colors.success} — #30d158): positive confirmation, in-TUI success indicator.

Typography

Font Family

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,