OpenCode AI

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, 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."

Hierarchy

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

Principles

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.

Note on Font Substitutes

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

• **JetBrains Mono** — closest match for stroke contrast and x-height; pair at weights 400 / 500 / 700.
• **IBM Plex Mono** — official secondary fallback in the documented font stack; slightly more open counters but matches line-height behavior.
• **Geist Mono** — modern alternative with similar geometric construction.

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

Layout

Spacing System

• **Base unit:** 8px (with finer 1/2/4px steps available for tight inline gaps).
• **Tokens (front matter):** `{spacing.xxs}` (1px) · `{spacing.xs}` (4px) · `{spacing.sm}` (8px) · `{spacing.md}` (12px) · `{spacing.lg}` (16px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.section}` (96px).
• **Universal section rhythm:** every page in the set uses `{spacing.section}` (96px) as the vertical gap between major content blocks. This is the largest spacing token in the system and is the dominant layout cue across the home, `/zen`, and `/enterprise` pages.
• **Section internal padding:** content rows inside a section sit at `{spacing.lg}` (16px) vertical with no horizontal padding — text starts flush at the section's left edge.

Grid & Container

• **Max width:** ~960px content column for body sections; the dark hero TUI mockup is full-bleed within an outer ~1100px content frame.
• **Two-column split:** `/enterprise` pairs a left text block (~360px wide) with a right-aligned form column (~480px wide). The home page is single-column reading.
• **Footer:** 5-up horizontal link row (GitHub / Docs / Changelog / Discord / X) at desktop, collapsing to 2-up at tablet and 1-up at mobile.

Whitespace Philosophy

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.

Elevation & Depth

| 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.

Decorative Depth

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

• **ASCII block-pixel wordmark** — the OpenCode brand name rendered as a 5-row block of monospaced character cells, used in the primary nav and as the centerpiece of the hero TUI mockup.
• **Hero TUI mockup** — full-bleed `{colors.surface-dark}` rectangle containing a faux terminal interface: ASCII wordmark, a `tui-prompt-row` showing a Build command line, and `tab switch agent` / `ctrl-p commands` keybinding hints in `{colors.ash}` at the bottom edge.
• **Chart tiles** — three thin-line ASCII charts inside the home page's "open source AI coding agent" stat block, with abstract dotted/sparse-line plots in `{colors.body}` against the cream canvas. Captions sit beneath in `{typography.caption-md}` (`Fig 1. 150K GitHub Stars`, `Fig 2. 850 Contributors`, `Fig 3. 6.5M Monthly Devs`).

Shapes

Border Radius Scale

| 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.

Photography Geometry

There is no photography. Visual elements are limited to:

• **ASCII block-pixel wordmark** in the nav and hero TUI mockup.
• **Inline ASCII charts** inside the stat-block section — abstract sparse-line and dotted plots without specific data points.
• **Avatar dots** (~32px) inside testimonial rows on `/zen` — flat colored circles in `{rounded.full}`.
• **In-product icons** (kbd, A+, ⊕, ↻, K, Z) rendered as small monospaced character glyphs, not bitmaps or SVG.

Components

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

Buttons

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

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `4px 20px`, height ~36px, rounded `{rounded.sm}` (4px).
• Used for "Download" (top nav), "Get started with Zen", "Send" (enterprise contact form), "Subscribe" (newsletter footer), "Read docs →".
• Pressed state lives in `button-primary-active` — background drops to `{colors.ink-deep}`.

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

• Background `{colors.canvas}`, text `{colors.ink}`, 1px solid `{colors.hairline-strong}` border, type `{typography.button-md}`, padding `4px 20px`, rounded `{rounded.sm}`.
• Lower-emphasis CTA — appears beside the primary fill where two actions are paired.

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

• Default: transparent background, text `{colors.mute}`, type `{typography.button-md}`, padding `8px 16px`, rounded `{rounded.none}`.
• Active: same surface, text `{colors.ink}`, with a 2px `{colors.ash}` bottom underline indicating selection.
• Used in the install-method tab strip on the home page (`curl` / `npm` / `bun` / `brew` / `yay`).

**`button-disabled`**

• Background `{colors.surface-card}`, text `{colors.ash}`, rounded `{rounded.sm}`.

Badges & Chips

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

• Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.caption-md}`, padding `2px 8px`, rounded `{rounded.sm}`.
• Sits inline with body copy as a "News" / "Beta" / "Live now" tag on the home page above the hero headline.

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

• Background transparent, text `{colors.ink}`, type `{typography.heading-md}`, rounded `{rounded.none}`.
• Renders as a bare `**Heading**` line above a 1px `{colors.hairline}` rule with no chip background — but the way the text reads ("[+]", "[x]", `What is OpenCode?`) makes it function as a label component.

Inputs & Forms

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

• Default: background `{colors.surface-soft}`, text `{colors.ink}`, 1px solid `{colors.hairline}`, type `{typography.body-md}`, padding `8px 12px`, height ~40px, rounded `{rounded.sm}`.
• Focused: background flips to `{colors.canvas}`, border becomes 1px solid `{colors.ink}` (the canvas's flat focus signal — no halo, no glow).
• Used for every contact-form field on `/enterprise` (Full name, Role, Company, Company email, Phone number) and the newsletter email field at the home page footer.

**`textarea`**

• Background `{colors.surface-soft}`, text `{colors.ink}`, 1px solid `{colors.hairline}`, type `{typography.body-md}`, padding `12px`, rounded `{rounded.sm}`.
• "What problem are you trying to solve?" multi-line textarea on `/enterprise`.

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

• Background `{colors.surface-card}` (`#f1eeee`), text `{colors.ink}` rendered in `{typography.body-md}` (already monospaced — Berkeley Mono), padding `12px 16px`, rounded `{rounded.sm}`.
• Contains the literal `curl -fsSL https://opencode.ai/install | bash` command with a small copy-icon at the right edge. Sits below the install-method tab strip.

Cards & Containers

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

• Container: full-bleed `{colors.surface-dark}` (~near-black), padding `64px 32px`, rounded `{rounded.none}`.
• Contents (top → bottom): ASCII block-pixel "OPENCODE" wordmark centered in `{colors.on-dark}`; a `{component.tui-prompt-row}` showing a "Build" command line with model selector text; an `tab switch agent ctrl-p commands` keybinding hint row at the bottom in `{colors.ash}`.

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

• Background `{colors.surface-dark-elevated}` (`#302c2c`), text `{colors.on-dark}` in `{typography.body-md}`, padding `8px 12px`, rounded `{rounded.sm}`.
• Renders an inline command (`Build Claude Opus 4.5 OpenCode Zen`) with a leading vertical pipe and the model name styled as a bracketed token.

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

• Background `{colors.canvas}`, text `{colors.body}` in `{typography.body-md}`, padding `8px 0`.
• Each row begins with a `[+]` / `[-]` / `[x]` ASCII marker followed by a bold label and a regular description: e.g., `[+] LSP enabled Automatically loads the right LSPs for the IDE`. The bracket marker is part of the text content, not a separate icon.

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

• Background `{colors.canvas}`, text `{colors.ink}` in `{typography.body-md}`, padding `12px 0`, with a 1px `{colors.hairline}` bottom rule.
• Each row leads with `+` / `−` ASCII markers indicating expand/collapse state. Always rendered as plain text rows — no chevron icons, no animated accordion chrome.

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

• Background `{colors.surface-soft}`, text `{colors.body}` in `{typography.body-md}`, padding `16px 20px`, rounded `{rounded.sm}`.
• Layout: a 32px avatar circle (`{rounded.full}`) at left, name + role + company in `{typography.body-strong}` on the first line, quote in `{typography.body-md}` `{colors.body}` on the second line.

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

• Background `{colors.canvas}`, text `{colors.body}` in `{typography.caption-md}`, rounded `{rounded.none}`, padding `16px`.
• Contains an inline SVG/CSS-drawn ASCII-style sparse-line plot (dotted, abstract — never specific data points) with a `Fig N. <stat label>` caption beneath in `{colors.mute}`.

Navigation

**`primary-nav`**

• Background `{colors.canvas}`, text `{colors.ink}` in `{typography.body-strong}`, height ~56px, rounded `{rounded.none}`, with a 1px `{colors.hairline}` bottom rule.
• Layout (desktop): block-pixel ASCII OpenCode wordmark at left (~120×24px), nav links cluster center-right ("GitHub [150K] · Docs · Zen · Go · Enterprise"), `{component.button-primary}` "Download" CTA at the far right with a small download glyph.

**Top Nav (Mobile)**

• ASCII wordmark stays at left, nav links collapse into a hamburger drawer at the right. The Download CTA remains visible at every breakpoint.

Footer

**`footer-section`**

• Background `{colors.canvas}`, text `{colors.body}` in `{typography.caption-md}`, padding `32px 0`, with a 1px `{colors.hairline}` top rule.
• Top row: 5-column horizontal link grid (GitHub [150K] · Docs · Changelog · Discord · X), each rendered as a centered cell separated by 1px `{colors.hairline}` vertical rules.
• Bottom row: `©2026 Anomaly` copyright at left, `Brand · Privacy · Terms · English ▼` utility cluster at right, all in `{typography.caption-md}` `{colors.mute}`.

Inline

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

• `{colors.ink}` text with underline. The brand's only link affordance — even links inside body paragraphs use ink color rather than `{colors.accent}` blue. Apple Blue is reserved for the in-product TUI.

Do's and Don'ts

Do

• Render every text role in Berkeley Mono. The single-font decision is the entire identity.
• Keep `{colors.canvas}` (`#fdfcfc`) as the only body background. Don't introduce gray section bands.
• Use ASCII bracket markers (`[+]`, `[-]`, `[x]`, `+`, `−`) as bullets, toggles, and section glyphs. They are the brand's only iconography.
• Anchor the dark `{component.hero-tui-mockup}` exactly once per landing page as the hero centerpiece. Never use the dark surface for body content.
• Reserve `{colors.accent}` (Apple Blue) and the rest of the semantic ramp for in-TUI states; marketing chrome stays monochrome.
• Use `{rounded.sm}` (4px) on every interactive element and `{rounded.none}` (0px) on every container.
• Stack content sections at `{spacing.section}` (96px) rhythm with only 1px `{colors.hairline}` rules between them.

Don't

• Don't introduce a sans-serif body font, a display face, or an italic style. Berkeley Mono carries everything.
• Don't add drop shadows, gradients, or atmospheric backgrounds. The system is flat-on-cream.
• Don't replace the ASCII bracket markers with SVG icons. The brackets are the icons.
• Don't use the semantic accent ramp (`{colors.accent}`, `{colors.warning}`, `{colors.danger}`, `{colors.success}`) on marketing CTAs. They belong to the in-product TUI.
• Don't pad cards with 24px+ internal padding. List rows sit at 8px vertical; FAQ rows at 12px.
• Don't render the OpenCode wordmark as a vector logo. It is always block-pixel ASCII.
• Don't fill the hero TUI mockup with photography or illustration. It is text-only and always shows a faux terminal command line.

Responsive Behavior

Breakpoints

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

Touch Targets

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.

Collapsing Strategy

• **Primary nav:** desktop horizontal cluster → tablet-narrow hamburger drawer at 768px. The dark "Download" CTA stays visible at all widths.
• **Hero TUI mockup:** maintains its full-bleed dark surface at every breakpoint; the ASCII wordmark scales proportionally and the keybinding-hint row may wrap to two lines on narrow screens.
• **Install snippet + tab strip:** desktop fixed-width pill → mobile full-width pill with horizontal scroll on the tab strip if labels overflow.
• **Footer:** 5-up horizontal link grid → 2-up at tablet → 1-up at mobile (each link becomes a full-width row).
• **`/enterprise` two-column layout:** desktop 50/50 → tablet stacks to single-column with the form below the text block.
• **Section padding:** `{spacing.section}` (96px) desktop → 64px tablet → 48px mobile.
• **Hero headline:** `{typography.display-xl}` (38px) at desktop, scaling to ~28px at mobile, line-height holding at 1.5.

Image Behavior

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.

Iteration Guide

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.

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.

개요

OpenCode의 마케팅 사이트는 완전히 Berkeley Mono로 렌더링됩니다. 38px 영웅 헤드라인부터 14px 바닥글 작은 글씨까지 페이지의 모든 단어가 동일한 고정폭 문자에 표시됩니다. 시각적 아이덴티티는 단일 인쇄상의 결정에서 비롯됩니다. 페이지는 맨페이지나 정적 사이트 README처럼 읽혀지며, 괄호 안의 `[+]` / `[-]` / `[x]` 아이콘이나 글머리 기호 대신 사용되는 ASCII 마커와 탐색 상단에 블록 픽셀 ASCII 아트로 렌더링된 워드마크로 완성됩니다. 어디에도 산세리프가 없고, 표시면도, 이탤릭체도, 장식 장식도 없습니다. 이 시스템은 현대 해상도로 렌더링된 1990년대 `whatis` 페이지와는 하나의 글꼴과 하나의 무게입니다.

크롬은 소박합니다. 따뜻한 크림색 캔버스(`` — `` 희미한 홍조 포함), 검정색에 가까운 잉크(`` — ``), 본문, 메타데이터 및 비활성화된 텍스트를 위한 4단계 중성 회색 사다리입니다. 카드는 솟아오른 표면으로 존재하지 않습니다. 섹션은 ``(96px) 공간을 사이에 두고 캔버스에 직접 놓여 있는 가는 경계의 텍스트 블록(`` 1px)일 뿐입니다. 전체 시스템의 단일 "시각적" 순간은 OpenCode TUI 자체를 흉내내는 풀 블리드 다크 히어로 카드(`` — 실제 검정색에 가까운)입니다. 즉, `tab` / `ctrl-p` 키 바인딩 힌트가 있는 터미널 프레임, "빌드" 명령줄 및 픽셀 블록 ASCII 제목으로 렌더링된 OpenCode 워드마크입니다.

의미 체계 팔레트는 브랜드 마케팅 사이트에서는 일반적이지 않습니다. 전체 Apple 휴먼 인터페이스 지침 악센트 램프를 제공합니다 — `` (Apple Blue ``), `` (``), `` (_``), `` (``) 및 해당 호버/활성 심화 — 마케팅 표면 자체는 다크 히어로 TUI 모형에서 구문 강조 표시로 이러한 색상만 사용하더라도 마찬가지입니다. 더 넓은 팔레트는 제품 내 TUI에 속합니다. 마케팅 페이지는 대부분 흑백으로 유지됩니다.

**주요 특성:**

• 모든 텍스트 역할에 100% Berkeley Mono 타이포그래피 — 크롬 어디에도 산세리프 대체가 없습니다
• 따뜻한 크림 ``(#fdfcfc)을 유일한 본문 배경으로 - 섹션 전체에 걸쳐 표면 교대 없음
• 영웅 TUI 모형 전용으로 예약된 단일 어두운 표면(`` — #201d1d)
모든 대화형 요소의 _
• 4픽셀 반경(``) 섹션 자체는 1px 가는 선으로 둘러싸인 날카로운 직사각형입니다
• 기능 목록 및 FAQ 행에서 글머리 기호 문자로 사용되는 ASCII 괄호 마커(`[+]`, `[-]`, `[x]`)
• 기본 탐색 메뉴와 영웅 TUI 내부의 블록 픽셀 ASCII 워드마크 — 브랜드 아이덴티티는 자체 ASCII 아트입니다
• 96px `` 장식 구분선 없이 모든 섹션 사이에 리듬이 있어야 합니다. 얇은 1픽셀만 `` 규칙으로 콘텐츠 블록을 구분합니다

색상

> **소스 페이지:** `/`(홈), `/zen`, `/enterprise`. 크롬 팔레트는 세 가지 모두 동일합니다.

브랜드 및 액센트

• **잉크** (`` / `` — ``): 브랜드의 유일한 "색상"입니다. 헤드라인, 본문 텍스트, 기본 CTA 채우기, 탐색 링크 및 모든 단색 아이콘. 따뜻한 크림색 캔버스에 활자 가독성을 유지하기 위해 순수 검정색이 아닌 거의 검정색을 브랜드 색상으로 취급합니다.
• **잉크 깊이**(`` — ``): 기본 CTA의 누름 상태입니다. 캔버스의 따뜻한 색감과 어울리는 희미한 붉은색을 띠고 있습니다.
• **크림** (`` — ``): 브랜드의 시그니처 따뜻한 화이트 색상. 모든 페이지 본문, 모든 카드 표면, 기본 텍스트 색상 및 어두운 ASCII 워드마크 채우기에 사용됩니다.

표면

• **캔버스 크림**(`` — ``): 모든 페이지 본문, 모든 카드.
• **부드러운 표면** (`` — ``): 텍스트 입력 기본 배경, 추천 행 채우기, 교대 행 색조.
• **Surface Card** (`` — ``): 설치 조각 알약, 비활성화된 단추 채우기, 약간 높은 섹션 행.
• **서피스 다크**(`` — ``): 히어로 TUI 모형 배경과 홈 페이지의 어두운 CTA 알약입니다. ``과 동일 — 브랜드는 텍스트와 어두운 표면 모두에 검정색에 가까운 색상을 사용합니다.
• **Surface Dark Elevated** (`` — ``): Hero TUI 모형 내부의 프롬프트 행으로, 어두운 표면 자체보다 한 단계 더 밝습니다.
• **가는 선** (`` — `rgba(15,0,0,0.12)`): 1px 섹션 구분선. 반투명한 따뜻한 틴트가 크림색 캔버스의 언더톤과 잘 어울립니다.
• **헤어라인 강력** (`` — ``): 탭 스트립의 하단 룰 및 더욱 강력한 인라인 구분선.

텍스트

• **잉크**(`` — ``): 헤드라인, 본문 텍스트, 기본 탐색 링크, 밝은 표면의 버튼 텍스트.
• **차콜**(`` — ``): 순수 잉크가 너무 무거워서 미묘하게 부드러운 바디.
• **본문**(`` — ``): 기본 단락 텍스트 및 FAQ 답변
• **음소거**(`` — ``): 탭 레이블(기본 상태), 메타데이터, 바닥글 링크 텍스트, 목록 내 보조 주석.
• **스톤** (`` — ``): 최소 강조 유틸리티 텍스트, 이동 경로 구분 기호.
• **Ash** (`` — ``): 어두운 TUI 모형에서 텍스트 및 보조 주석이 비활성화되었으며 TUI 모형 보조 색상도 사용되었습니다.

의미

전체 Apple 휴먼 인터페이스 지침 의미 램프가 시스템과 함께 제공됩니다. 마케팅 페이지에서 이러한 색상은 주로 Hero TUI 모형 내부에 구문 강조 표시로 나타납니다. 제품 내 TUI에서는 일반적인 의미를 갖습니다.

• **악센트** (`` — ``): 기본 정보 신호, 제품 내 링크 색상, TUI 명령 강조 표시.
• **악센트 호버**(`` — ``): 정보 링크를 눌렀습니다.
• **액센트 활성**(`` — ``): 깊게 눌러진 정보 상태.
• **위험**(`` — ``): 파괴적인 확인, 오류 상태.
• **위험 호버**(`` — ``): 누르면 파괴적입니다.
• **위험 활성**(`` — ``): 깊게 눌러 파괴적입니다.
• **경고** (`` — ``): 주의 문구.
• **호버 경고**(`` — ``): 주의를 누르세요.
• **경고 활성**(`` — ``): 깊은 주의가 필요합니다.
• **성공**(`` — ``): 긍정적인 확인, TUI 내 성공 표시기.

타이포그래피

글꼴군

**Berkeley Mono**는 시스템의 모든 텍스트 역할에 사용되는 독점적인 고정 폭 문자입니다. 가중치 400(일반), 500(중간) 및 700(굵게)을 전달하며 긴 고정 폭 스택(IBM Plex Mono → ui-monospace → SFMono-Regular → Menlo → Monaco → Consolas → Liberation Mono → Courier New)을 통해 폴백됩니다.

단일 글꼴 결정은 브랜드입니다. 표시 면, 본문 산세, 이탤릭체 대안이 없으며 비례 글꼴로 대체되는 곳도 없습니다. 심지어 법적 저작권 행에서도 14px의 Berkeley Mono를 사용합니다. 이는 마케팅 도구 카테고리의 모든 사이트 중 가장 공격적인 인쇄상의 제한입니다. OpenCode의 정체성은 "마케팅 페이지는 매뉴얼 페이지입니다."

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 38px | 700 | 1.5 | 0 | 히어로 헤드라인("오픈소스 AI 코딩 에이전트") |

| _`` | 16px | 700 | 1.5 | 0 | 섹션 라벨("OpenCode란 무엇입니까?", "FAQ", "개인정보 보호를 최우선으로 구축됨") |

| _`` | 16px | 400 | 1.5 | 0 | 본문 문구, 단락 텍스트, 목록 행 텍스트, 설치 스니펫 코드 |

| _`` | 16px | 500 | 1.5 | 0 | 인라인 강조, 기본 탐색 링크, 탭 레이블 활성화 |

| _`` | 16px | 500 | 1 | 0 | 숨 쉴 공간 없이 렌더링된 컴팩트 라벨 |

| _`` | 16px | 400 | 1.5 | 0 | 본문 산문의 인라인 앵커 링크 |

| _`` | 16px | 500 | 2 | 0 | 시스템 전체의 모든 버튼 라벨 |

| _`` | 14px | 400 | 2 | 0 | 바닥글 링크 텍스트, 배지 라벨, 저작권 행, 차트 캡션 |

원칙

계층 구조는 거의 전적으로 단일 면의 크기와 무게 대비로 구성됩니다. 디스플레이 헤드라인(38px/700)과heading-md 라벨(16px/700)은 가중치를 공유합니다. 차이점은 단지 크기일 뿐입니다. 본문과 링크는 크기, 무게, 줄 높이를 공유하며 문맥에 의해서만 구별됩니다. 버튼은 의도적으로 높은 선 높이(2.0)를 가지므로 라벨은 반경 4px 직사각형 내부에 차분한 간격으로 배치되어 있습니다.

글꼴 대체에 대한 참고사항

Berkeley Mono는 유료 상용 글꼴입니다. 신체 크기에서 ~3% 이내의 수치를 근사화하는 오픈 소스 대체물:

• **JetBrains Mono** — 획 대비와 x 높이가 가장 근접하게 일치합니다. 무게 400/500/700으로 쌍을 이룹니다.
• **IBM Plex Mono** — 문서화된 글꼴 스택의 공식적인 보조 대체입니다. 약간 더 열린 카운터가 있지만 줄 높이 동작과 일치합니다.
• **Geist Mono** — 비슷한 기하학적 구조를 지닌 현대적인 대안입니다.

대체 시 본문에는 `lineHeight: 1.5`, 버튼에는 `lineHeight: 2`을 유지하여 줄 높이 동작이 유지됩니다. 가중치 조정은 거의 필요하지 않습니다.

레이아웃

간격 시스템

• **기본 단위:** 8px(인라인 간격이 좁은 경우 더 미세한 1/2/4px 단계 사용 가능).
• **토큰(머리말):** ``(1px) · ``(4px) · ``(8px) · ``(12px) · ``(16px) · ``(24px) · ``(32px) · ``(96px).
• **범용 섹션 리듬:** 세트의 모든 페이지는 주요 콘텐츠 블록 사이의 수직 간격으로 ``(96px)을 사용합니다. 이는 시스템에서 가장 큰 간격 토큰이며 집, `/zen` 및 `/enterprise` 페이지 전체에서 지배적인 레이아웃 큐입니다.
• **섹션 내부 패딩:** 섹션 내부의 콘텐츠 행은 가로 패딩 없이 ``(16px) 세로로 배치됩니다. 텍스트는 섹션의 왼쪽 가장자리에서 같은 높이로 시작됩니다.

그리드 및 컨테이너

• **최대 너비:** 본문 섹션의 콘텐츠 열 ~960px; 다크 히어로 TUI 모형은 외부 ~1100픽셀 콘텐츠 프레임 내에서 풀블리드됩니다.
• **2열 분할:** `/enterprise` 왼쪽 텍스트 블록(너비 ~360px)과 오른쪽 정렬 양식 열(너비 ~480px)을 연결합니다. 홈페이지는 단일 열 읽기입니다.
• **바닥글:** 데스크탑의 5업 수평 링크 행(GitHub/Docs/Changelog/Discord/X), 태블릿에서는 2업, 모바일에서는 1업으로 축소됩니다.

공백 철학

공백은 구조적이고 관대합니다. 섹션은 사이에 장식 구분선 없이 96px 떨어져 있습니다. `` 1px 규칙이 유일한 분리 신호입니다. 섹션 내부의 콘텐츠는 내부 들여쓰기 없이 열 가장자리에 맞춰 왼쪽에 배치됩니다. 글머리 기호는 들여쓰기 기반 레이아웃 대신 ASCII 대괄호 접두어(`[+]` / `[-]`)를 사용합니다. 그 결과 스타일이 지정된 마케팅 레이아웃이 아닌 인쇄된 코드 목록처럼 느껴지는 페이지가 탄생했습니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 0 - 플랫 | 테두리 없음, 그림자 없음 | 본문 섹션, 목록 행, 주요 텍스트 블록, 바닥글에 대한 기본값 |

| 1 - 가는선 규칙 | 1px 단색 ``(반투명 따뜻한 색조) | 주요 콘텐츠 블록 사이의 섹션 구분선 |

| 2 - 헤어라인이 강함 | 1px 솔리드 `` | 탭 스트립 하단 규칙, 목록 내 강조 구분선 |

| 3 — 반전된 어두운 | _`` 채우기 | Hero TUI 모형, 어두운 CTA 알약 - 시스템의 유일한 "높은" 표면은 그림자가 아닌 색상을 사용합니다 |

시스템에 그림자가 없습니다. 아무것도 떠오르지 않고, 아무것도 뜨지 않습니다. 요소가 다른 요소 "위"로 등록되는 유일한 방법은 영웅 모형에 사용되는 어두운 표면입니다.

장식적 깊이

깊이는 CSS 효과가 아닌 타이포그래피 밀도와 단일 어두운 TUI 모형에서 비롯됩니다.

• **ASCII 블록 픽셀 워드마크** — 기본 탐색 및 영웅 TUI 모형의 중심으로 사용되는 고정폭 문자 셀의 5행 블록으로 렌더링된 OpenCode 브랜드 이름입니다.
• **Hero TUI 모형** — 가짜 터미널 인터페이스가 포함된 풀 블리드 `` 직사각형: ASCII 워드마크, 빌드 명령줄을 표시하는 `tui-prompt-row`, 하단의 ``에 있는 `tab switch agent` / `ctrl-p commands` 키 바인딩 힌트 가장자리.
• **차트 타일** — 홈 페이지의 "오픈 소스 AI 코딩 에이전트" 통계 블록 내에 세 개의 얇은 선 ASCII 차트가 있으며, 크림색 캔버스에 대한 ``의 추상 점선/희소선 플롯이 있습니다. 캡션은 ``(`Fig 1. 150K GitHub Stars`, `Fig 2. 850 Contributors`, `Fig 3. 6.5M Monthly Devs`) 아래에 있습니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 0픽셀 | 섹션, 히어로 TUI 모형, 기본 탐색, 바닥글, 목록 행 — 버튼이 아닌 모든 컨테이너 |

| _`` | 4픽셀 | 모든 대화형 요소 — 기본 CTA, 보조 CTA, 텍스트 입력, 설치 스니펫, 배지, 프롬프트 행 |

| _`` | 9999px | 회원평가의 아바타 서클 |

반경 어휘는 두 가지 값입니다. 즉, 대화형 요소의 경우 4px이고 그 밖의 모든 요소의 경우 0px입니다. 회원평가 행의 아바타 원은 시스템에서 유일하게 완전한 요소입니다.

사진 기하학

사진이 없습니다. 시각적 요소는 다음으로 제한됩니다.

• **탐색 및 Hero TUI 모형의 ASCII 블록 픽셀 워드마크**.
• **stat-block 섹션 내부의 인라인 ASCII 차트** — 특정 데이터 포인트가 없는 추상 희소선 및 점선 플롯.
• **아바타 도트**(~32px) `/zen`의 평가 행 내부 — ``의 평면 색상 원.
• **제품 내 아이콘**(kbd, A+, ⊕, ↻, K, Z)은 비트맵이나 SVG가 아닌 작은 고정 폭 문자 모양으로 렌더링됩니다.

구성요소

> 시스템 정책에 따라 **호버 상태가 문서화되지 않았습니다**. 각 사양에는 기본 및 활성/누름만 포함됩니다.

버튼

**`button-primary`** — 범용 OpenCode CTA

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 `4px 20px`, 높이 ~36px, 반올림 ``(4px).
• "다운로드"(상위 탐색), "Zen 시작하기", "보내기"(기업 문의 양식), "구독"(뉴스레터 바닥글), "문서 읽기 →"에 사용됩니다.
• 누른 상태는 `button-primary-active`에 있습니다 — 배경은 ``으로 떨어집니다.

**`button-secondary`** — 설명된 대안

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 유형 ``, 패딩 `4px 20px`, 둥근 ``.
• 낮은 강조 CTA — 두 작업이 쌍을 이루는 기본 채우기 옆에 표시됩니다.

**`button-tab`** + **`button-tab-active`** — 설치 탭 스트립

• 기본값: 투명 배경, 텍스트 ``, 유형 ``, 패딩 `8px 16px`, 반올림 ``.
• 활성: 동일한 표면, 텍스트 ``, 선택을 나타내는 2px `` 하단 밑줄 포함.
• 홈 페이지의 설치 방법 탭 스트립에 사용됩니다(`curl` / `npm` / `bun` / `brew` / `yay`).

**`button-disabled`**

• 배경 ``, 텍스트 ``, 반올림 ``.

배지 및 칩

**`badge-news`** — 뉴스/공지 항목의 작고 어두운 칩

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 `2px 8px`, 반올림 ``.
• 홈 페이지의 히어로 헤드라인 위에 "뉴스"/ "베타"/ "지금 라이브" 태그로 본문 문구와 함께 인라인으로 표시됩니다.

**`badge-section-label`** — 괄호로 묶인 섹션 헤더

• 배경 투명, 텍스트 ``, 유형 ``, 반올림 ``.
• 칩 배경 없이 1픽셀 `` 규칙 위에 베어 `**Heading**` 줄로 렌더링됩니다. 그러나 텍스트를 읽는 방식("[+]", "[x]", `What is OpenCode?`)은 레이블 구성 요소로 작동합니다.

입력 및 양식

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

• 기본값: 배경 ``, 텍스트 ``, 1px 단색 ``, 유형 ``, 패딩 `8px 12px`, 높이 ~40px, 반올림 ``.
• 초점: 배경이 ``로 뒤집히고 테두리가 1px 실선이 됩니다. ``(캔버스의 평면 초점 신호 — 후광 없음, 빛 없음)
• __CODEBCK_924___(성명, 역할, 회사, 회사 이메일, 전화번호)의 모든 연락처 양식 필드와 홈페이지 바닥글의 뉴스레터 이메일 필드에 사용됩니다.

**`textarea`**

• 배경 ``, 텍스트 ``, 1px 단색 ``, 유형 ``, 패딩 `12px`, 반올림 ``.
• "어떤 문제를 해결하려고 하시나요?" `/enterprise`.
의 여러 줄 텍스트 영역

**`install-snippet`** — 홈 페이지의 서명 설치 코드 블록

• 배경 ``(``), ``(이미 고정 폭 — Berkeley Mono)로 렌더링된 텍스트 ``, 패딩 `12px 16px`, 반올림 ``.
• 오른쪽 가장자리에 작은 복사 아이콘이 있는 리터럴 `curl -fsSL https://opencode.ai/install | bash` 명령이 포함되어 있습니다. 설치 방법 탭 스트립 아래에 위치합니다.

카드 및 용기

**`hero-tui-mockup`** — 홈 페이지의 서명 TUI 미리보기

• 컨테이너: 풀 블리드 ``(~검은색에 가까움), 패딩 `64px 32px`, 반올림 ``.
• 내용(상단 → 하단): `` 중앙에 있는 ASCII 블록 픽셀 "OPENCODE" 워드마크; 모델 선택기 텍스트가 포함된 "빌드" 명령줄을 표시하는 `` ``.
하단의 _`tab switch agent ctrl-p commands` 키 바인딩 힌트 행

_**`tui-prompt-row`** — TUI 모형 내부의 삽입 명령줄

• 배경 ``(``), ``의 텍스트 ``, 패딩 `8px 12px`, 반올림 ``.
• 선행 수직 파이프와 대괄호 토큰 스타일의 모델 이름을 사용하여 인라인 명령(`Build Claude Opus 4.5 OpenCode Zen`)을 렌더링합니다.

**`list-row`** — ASCII 대괄호 글머리 기호가 있는 기능/이점 행

• 배경 ``, ``의 텍스트 ``, 패딩 `8px 0`.
• 각 행은 `[+]` / `[-]` / `[x]` ASCII 마커로 시작하고 그 뒤에 굵은 레이블과 일반 설명이 옵니다(예: `[+] LSP enabled Automatically loads the right LSPs for the IDE`). 괄호 표시는 별도의 아이콘이 아닌 텍스트 콘텐츠의 일부입니다.

**`faq-row`** — 대괄호 토글이 포함된 FAQ 항목

• 배경 ``, ``의 텍스트 ``, 패딩 `12px 0`, 1px `` 하단 규칙 포함.
• 각 행은 확장/축소 상태를 나타내는 `+` / `−` ASCII 마커로 이어집니다. 항상 일반 텍스트 행으로 렌더링됩니다. 갈매기 모양 아이콘도 없고 애니메이션 아코디언 크롬도 없습니다.

**`testimonial-row`** — `/zen` 동료 인용 행

• 배경 ``, 텍스트 `` in ``, 패딩 `16px 20px`, 반올림 ``.
• 레이아웃: 왼쪽의 32px 아바타 원(``), 첫 번째 줄의 `` 이름 + 역할 + 회사, 두 번째 줄의 `` `` 인용.

**`chart-tile`** — 통계 블록 희소 선 차트

• 배경 ``, ``의 텍스트 ``, 반올림 ``, 패딩 `16px`.
• `` 아래에 `Fig N. ` 캡션이 있는 인라인 SVG/CSS로 그린 ASCII 스타일 희소선 플롯(점선, 추상 — 특정 데이터 포인트 없음)을 포함합니다.

탐색

**`primary-nav`**

• 배경 ``, 텍스트 `` in ``, 높이 ~56px, 반올림 ``, 1px `` 하단 규칙 포함.
• 레이아웃(데스크톱): 왼쪽의 블록 픽셀 ASCII OpenCode 워드마크(~120×24px), 오른쪽의 탐색 링크 클러스터 중앙("GitHub [150K] · Docs · Zen · Go · Enterprise"), `` 작은 다운로드 문자가 있는 맨 오른쪽의 "다운로드" CTA.

**상위 탐색(모바일)**

• ASCII 워드마크는 왼쪽에 유지되고 탐색 링크는 오른쪽의 햄버거 서랍으로 축소됩니다. 다운로드 CTA는 모든 중단점에서 계속 표시됩니다.

바닥글

**`footer-section`**

• 배경 ``, ``의 텍스트 ``, 패딩 `32px 0`, 1px `` 최상위 규칙 포함.
• 맨 위 행: 5열 수평 링크 그리드(GitHub [150K] · Docs · Changelog · Discord · X), 각각은 1px `` 수직 규칙으로 구분된 중앙 셀로 렌더링됩니다.
• 맨 아래 행: `©2026 Anomaly` 저작권(왼쪽), `Brand · Privacy · Terms · English ▼` 유틸리티 클러스터(오른쪽), 모두 `` ``.

인라인

**`link-inline`** — 본문-산문 앵커 링크

• `` 밑줄이 있는 텍스트. 브랜드의 유일한 링크 어포던스 - 본문 단락 내부의 링크도 `` 파란색이 아닌 잉크 색상을 사용합니다. Apple Blue는 제품 내 TUI용으로 예약되어 있습니다.

해야 할 일과 하지 말아야 할 일

Do

• Berkeley Mono에서 모든 텍스트 역할을 렌더링합니다. 단일 글꼴 결정이 전체 아이덴티티입니다.
• ``(``)을 유일한 본문 배경으로 유지하세요. 회색 섹션 밴드를 도입하지 마세요.
• ASCII 브래킷 마커(`[+]`, `[-]`, `[x]`, `+`, `−`)를 글머리 기호, 토글 및 섹션 문자 모양으로 사용합니다. 이는 브랜드의 유일한 아이콘입니다.
• 어두운 부분을 랜딩 페이지당 정확히 한 번 영웅 중심으로 고정 ``하세요. 본문 내용에 어두운 표면을 사용하지 마십시오.
• ``(Apple Blue) 및 TUI 상태에 대한 의미 램프의 나머지 부분을 예약합니다. 마케팅 크롬은 단색으로 유지됩니다.
• 모든 대화형 요소에 ``(4px)을 사용하고 모든 컨테이너에 ``(0px)을 사용하세요.
• 콘텐츠 섹션을 ``(96px) 리듬으로 스택하고 그 사이에 1px `` 규칙만 적용합니다.

하지 마세요

• 산세리프체 본문 글꼴, 표시면 또는 기울임꼴 스타일을 도입하지 마세요. Berkeley Mono는 모든 것을 담고 있습니다.
• 그림자, 그라데이션 또는 분위기 있는 배경을 추가하지 마세요. 시스템은 플랫 온 크림입니다.
• ASCII 대괄호 마커를 SVG 아이콘으로 바꾸지 마세요. 괄호는 아이콘입니다.
• 마케팅 CTA에 의미론적 악센트 램프(``, ``, ``, ``)를 사용하지 마세요. 제품 내 TUI에 속합니다.
• 24px 이상의 내부 패딩으로 카드를 패딩하지 마세요. 목록 행은 수직으로 8px에 위치합니다. 12px의 FAQ 행.
• OpenCode 워드마크를 벡터 로고로 렌더링하지 마세요. 항상 블록 픽셀 ASCII입니다.
• 영웅 TUI 모형을 사진이나 일러스트레이션으로 채우지 마세요. 텍스트 전용이며 항상 가짜 터미널 명령줄을 표시합니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 데스크탑 대형 | 1280px+ | 기본값 — 960px 콘텐츠 열, 5업 바닥글 링크 그리드 |

| 데스크탑 | 1024px | 동일한 레이아웃; 탐색은 가로로 유지됩니다 |

| 태블릿 | 850px | 바닥글이 2업 그리드로 축소됩니다. `/enterprise` 2열 양식 스택 |

| 태블릿 좁은 | 768px | 기본 탐색 메뉴가 햄버거 서랍이 됩니다. 다운로드 CTA는 계속 표시됩니다 |

| 모바일 | 640px | 단일 열의 모든 것; 영웅 디스플레이가 38px → ~28px 감소합니다. 섹션 패딩이 조여짐 |

터치 대상

모든 대화형 요소는 ~36~40픽셀 높이 범위에서 WCAG AA를 충족합니다. ``는 가로 패딩이 20px인 ~36px에 위치합니다. _`` 및 ``은 ~40px에 위치합니다. 설치 방법 스트립의 `` 행은 라벨 길이에 따라 ~32~36px에 위치하지만 인라인 패딩을 통해 전체 44px 탭 가능 셀로 확장됩니다. 바닥글 링크는 ``(14px)을 사용하지만 탭 가능한 편안한 ~44px 행을 위해 ~28px 줄 높이(caption-md는 2.0)와 8px 수직 패딩을 받습니다.

축소 전략

• **기본 탐색:** 데스크톱 수평 클러스터 → 태블릿 크기의 좁은 햄버거 서랍(768px). 어두운 '다운로드' CTA는 모든 너비에서 계속 표시됩니다.
• **Hero TUI 모형:** 모든 중단점에서 완전한 어두운 표면을 유지합니다. ASCII 워드마크는 비례적으로 확장되고 키 바인딩 힌트 행은 좁은 화면에서 두 줄로 줄바꿈될 수 있습니다.
• **스니펫 + 탭 스트립 설치:** 데스크톱 고정 너비 알약 → 라벨이 오버플로되는 경우 탭 스트립에 가로 스크롤이 있는 모바일 전체 너비 알약.
• **바닥글:** 5개 수평 링크 그리드 → 태블릿에서 2개 → 모바일에서 1개(각 링크는 전체 너비 행이 됨).
• **`/enterprise` 2열 레이아웃:** 데스크톱 50/50 → 태블릿은 텍스트 블록 아래 양식을 사용하여 단일 열로 스택됩니다.
• **섹션 패딩:** ``(96px) 데스크톱 → 64px 태블릿 → 48px 모바일.
• **히어로 헤드라인:** 데스크톱에서 ``(38px), 모바일에서 최대 28px로 크기 조정, 줄 높이는 1.5.
에서 유지

이미지 동작

파비콘 및 OG 공유 이미지 외에 시스템에는 래스터 이미지가 없습니다. 워드마크, 차트, 아이콘 등 모든 시각적 요소는 유형 또는 인라인 SVG로 렌더링되며 종횡비를 고려하지 않고 크기가 조정됩니다.

반복 가이드

1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 항목을 가져와서 모든 속성이 확인되는지 확인하세요.

2. 구성요소 이름 및 토큰을 직접 참조하십시오(``, ``, ``). 다른 말로 표현하지 마세요.

3. 편집 후 _`npx @google/design.md lint DESIGN.md` 실행 — `broken-ref`, `contrast-ratio` 및 `orphaned-tokens` 경고는 문제를 자동으로 표시합니다.

4. 새 변형을 별도의 구성 요소 항목(`-active`, `-disabled`)으로 추가합니다. 산문 안에 묻어두지 마세요.

5. 기본 본문은 _``입니다. 강조하려면 ``에 도달하세요. ``은 페이지 상단 히어로 헤드라인용으로만 예약하세요.

6. _``을(를) 부족하게 유지하세요. 페이지당 최대 하나의 풀 블리드 다크 모형을 사용하세요. 어두운 표면은 크롬 처리가 아닌 서사적 장치입니다.

7. 새로운 컴포넌트를 도입할 때, 새로운 토큰을 추가하기 전에 기존 ASCII-bracket + 4px-radius + Berkeley-Mono 어휘로 표현할 수 있는지 물어보세요. 시스템의 장점은 새로운 시스템이 거의 필요하지 않다는 것입니다.

알려진 격차

• **캡처되지 않은 모바일 스크린샷** — 반응형 동작은 데스크탑 증거 및 중단점 스택에서 OpenCode의 모바일 패턴(햄버거 서랍, 단일 열, 바닥글 아코디언)을 합성합니다.
• **마우스오버 상태는 시스템 정책에 따라 문서화되지 않았습니다**.
• **마케팅 히어로 모형 이외의 제품 내 TUI 스크린샷**은 캡처된 세트에 없습니다. 실제 `opencode` 터미널 인터페이스(전체 키 바인딩, 패널, 상태 표시줄)는 여기에 문서화되어 있지 않습니다.
• **`/go` 페이지** 추출되지 않음 — Go SDK의 마케팅 페이지는 동일한 크롬을 공유하지만 위에 문서화되지 않은 코드 샘플 블록을 소개합니다.
• **양식 유효성 검사 상태 스타일**(성공/오류 인라인 메시지)이 캡처된 표면에 없습니다.

概要

OpenCode のマーケティング サイトは完全に Berkeley Mono でレンダリングされています。38 ピクセルのヒーローの見出しから 14 ピクセルのフッターの細字まで、ページ上のすべての単語が同じ等幅の面に収まります。視覚的なアイデンティティは、その 1 つのタイポグラフィーの決定から生まれます。ページはマンページまたは静的サイトの README のように見え、括弧で囲まれた `[+]` / `[-]` / `[x]` の ASCII マーカーがアイコンや箇条書きの代わりに使用され、ワー​​ドマークがナビゲーションの上部にブロック ピクセルの ASCII アートとしてレンダリングされます。サンセリフはどこにもなく、表示面も斜体も装飾もありません。このシステムは、フォント 1 つとウェイト 1 つだけで、1990 年代の__CODEBCK_742___ ページを現代の解像度でレンダリングしたものになります。

クロムは厳格です。温かみのあるクリーム色のキャンバス (`` — `` にかすかな赤みがかった)、黒に近いインク (`` — ``)、および本文、メタデータ、および無効なテキスト用の 4 層のニュートラル グレーのラダーです。カードは隆起した表面としては存在しません。セクションは、ヘアラインで囲まれたテキスト ブロック (`` 1 ピクセル) がキャンバス上に直接置かれ、間に `` (96 ピクセル) の空気が挟まれています。システム全体における単一の「視覚的」瞬間は、OpenCode TUI 自体を模擬するフルブリードのダーク ヒーロー カード (`` — 真に黒に近い) です。__CODEBCK_750___ / `ctrl-p` キーバインド ヒントを含むターミナル フレーム、「Build」コマンド ライン、ピクセル ブロック ASCII タイトルとしてレンダリングされる OpenCode ワードマーク。

セマンティック パレットは、ブランド マーケティング サイトとしては珍しいものです。完全な Apple ヒューマン インターフェイス ガイドラインのアクセント ランプが同梱されています — `` (Apple Blue ``)、__CODEBCK_754___ (``)、__CODEBCK_756___ (``)、 `` (``) とそのホバー/アクティブ深化 - たとえマーケティング サーフェス自体がこれらの色を構文ハイライトの代用としてダーク ヒーロー TUI モックアップでのみ使用しているとしてもです。より広いパレットは製品内の TUI に属します。マーケティング ページはほとんどモノクロのままです。

_**主な特徴:**

• すべてのテキスト役割にわたって 100% Berkeley Mono タイポグラフィ — クロムのどこにもサンセリフのフォールバックはありません
• ウォーム クリーム `` (#fdfcfc) をボディの背景としてのみ — セクション間の表面の変更なし
• 単一の暗いサーフェス (`` — #201d1d) ヒーロー TUI モックアップ専用
すべてのインタラクティブ要素の
• 4px 半径 (``)。セクション自体は 1 ピクセルのヘアラインで囲まれた鋭い長方形
• ASCII 括弧マーカー (`[+]`、__CODEBCK_764___、__CODEBCK_765___) 機能リストおよび FAQ 行の箇条書きグリフとして使用
• プライマリ ナビゲーションとヒーロー TUI 内のブロックピクセル ASCII ワードマーク - ブランド アイデンティティは独自の ASCII アート
• 96px `` 各セクション間のリズム。装飾的な仕切りはありません。細い 1 ピクセルのみ `` ルールでコンテンツ ブロックを分離

色

> **ソース ページ:** `/` (ホーム)、__CODEBCK_769___、__CODEBCK_770___。クロム パレットは 3 つすべてで同一です。

ブランドとアクセント

• **インク** (`` / `` — ``): ブランドの唯一の「色」。見出し、本文テキスト、プライマリ CTA フィル、ナビゲーション リンク、およびすべての実線アイコン。 温かみのあるクリーム色のキャンバスで文字を読みやすくするために、純粋な黒ではなくほぼ黒をブランドカラーとして扱います。
• **インクディープ** (`` — ``): プライマリ CTA の押された状態。キャンバスの温かみのある色調と一致する、ほのかな赤のアンダートーンを持っています。
• **クリーム** (`` — ``): ブランドの象徴的な温かみのある白。すべてのページ本文、すべてのカード表面、主なテキストの色、および暗い色の ASCII ワードマークの塗りつぶしに使用されます。

表面

• **キャンバス クリーム** (`` — ``): すべてのページ本文、すべてのカード。
• **ソフト サーフェス** (`` — ``): テキスト入力のデフォルト背景、紹介の行の塗りつぶし、交互の行の色合い。
• **サーフェス カード** (`` — ``): インストール スニペット ピル、無効なボタン塗りつぶし、わずかに高いセクション行。
• **Surface Dark** (`` — ``): ヒーロー TUI モックアップの背景と、ホームページ上の暗い CTA ピル。 `` と同じ — このブランドは、テキストと暗い表面の両方に黒に近い色を使用しています。
• **Surface Dark Elevated** (`` — ``): ヒーロー TUI モックアップ内のプロンプト行で、ダーク サーフェス自体より 1 ノッチ明るいです。
• **ヘアライン** (`` — `rgba(15,0,0,0.12)`): 1 ピクセルのセクション区切り。半透明の温かみのある色合いが、クリーム色のキャンバスのアンダートーンにマッチします。
• **強いヘアライン** (`` — ``): タブ ストリップの下部ルールと強力なインライン区切り線。

テキスト

• **インク** (`` — ``): 見出し、本文テキスト、プライマリ ナビゲーション リンク、ライト サーフェス上のボタン テキスト。
• **チャコール** (`` — ``): 純粋なインクが重すぎる場合、微妙に柔らかいボディ。
• **本文** (`` — ``): デフォルトの段落テキストと FAQ の回答。
• **ミュート** (`` — ``): タブ ラベル (デフォルト状態)、メタデータ、フッター リンク テキスト、リスト内の二次注釈。
• **ストーン** (`` — ``): 最小強調のユーティリティ テキスト、ブレッドクラム区切り文字。
• **アッシュ** (`` — ``): ダーク TUI モックアップのテキストと二次注釈が無効になり、TUI モックアップの二次色も無効になります。

セマンティック

Apple ヒューマン インターフェイス ガイドラインの完全なセマンティック ランプがシステムに付属しています。 マーケティング ページでは、これらの色は主にヒーロー TUI モックアップ内に構文ハイライトの代用として表示されます。製品内の TUI では、これらは従来の意味を持ちます。

• **アクセント** (`` — ``): 主要な情報信号、製品内のリンクの色、TUI コマンドのハイライト。
• **アクセント ホバー** (`` — ``): 情報リンクが押されました。
• **アクセントアクティブ** (`` — ``): 深く押された情報状態。
• **危険** (`` — ``): 破壊的な確認、エラー状態。
• **デンジャー ホバー** (`` — ``): 押されると破壊的です。
• **危険アクティブ** (`` — ``): 深く押された破壊的。
• **警告** (`` — ``): 注意喚起。
• **ホバー警告** (`` — ``): 注意を押しました。
• **警告アクティブ** (`` — ``): 厳重な注意。
• **成功** (`` — ``): 肯定的な確認、TUI 内の成功インジケーター。

タイポグラフィ

フォント ファミリー

**Berkeley Mono** は、システム内のすべてのテキストの役割で使用される独自の等幅フェイスです。ウェイトは 400 (レギュラー)、500 (ミディアム)、700 (ボールド) で、長い等幅スタック (IBM Plex Mono → ui-monospace → SFMono- Regular → Menlo → Monaco → Consolas → Liberation Mono → Courier New) を通ってフォールバックします。

単一フォントの決定がブランドになります。表示面もボディもなく、イタリック体の代替も、プロポーショナル フォントへのフォールバックもどこにもありません。法的な著作権の列ですら、14 ピクセルの Berkeley Mono が使用されています。これは、マーケティング ツール カテゴリのサイトの中で最も積極的なタイポグラフィの制限です。OpenCode のアイデンティティは、「マーケティング ページはマニュアル ページである」ということです。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 38ピクセル | 700 | 1.5 | 0 |ヒーロー見出し (「オープンソース AI コーディング エージェント」) |

| `` | 16ピクセル | 700 | 1.5 | 0 |セクション ラベル (「OpenCode とは何ですか?」、「FAQ」、「プライバシーを最優先に構築」) |

| `` | 16ピクセル | 400 | 1.5 | 0 |本文コピー、段落テキスト、リスト行テキスト、インストール スニペット コード |

| `` | 16ピクセル | 500 | 1.5 | 0 |インライン強調、プライマリ ナビゲーション リンク、タブラベルがアクティブ |

| `` | 16ピクセル | 500 | 1 | 0 |スペースを必要とせずにレンダリングされたコンパクトなラベル |

| `` | 16ピクセル | 400 | 1.5 | 0 |本文の散文内のインライン アンカー リンク |

| `` | 16ピクセル | 500 | 2 | 0 |システム全体のすべてのボタンのラベル |

| `` | 14ピクセル | 400 | 2 | 0 |フッター リンク テキスト、バッジ ラベル、著作権行、グラフ キャプション |

原則

階層は、ほぼ完全に 1 つの面のサイズと重量のコントラストから構築されます。表示見出し (38px / 700) と見出しMDラベル (16px / 700) は重みを共有します。違いはサイズだけです。本文とリンクはサイズ、重み、行の高さを共有します。コンテキストのみがそれらを区別します。 ボタンの行の高さは意図的に高く (2.0) されるため、ラベルは半径 4 ピクセルの四角形内で静かに配置されます。

フォントの代替に関する注意

Berkeley Mono は有料の商用フォントです。本体サイズで最大 3% 以内のメトリクスに近似するオープンソースの代替品:

• **JetBrains Mono** — ストロークのコントラストと X 高さの最も近い一致。重み 400 / 500 / 700 のペア。
• **IBM Plex Mono** — 文書化されたフォント スタック内の公式の二次フォールバック。オープンカウンターが若干多くなりますが、行の高さの動作と一致します。
• **Geist Mono** — 同様の幾何学的構造を備えた現代的な代替品。

置換する場合、本文の__CODEBCK_833___とボタンの__CODEBCK_834___を維持することで行の高さの動作が維持されます。ウェイトの調整が必要になることはほとんどありません。

レイアウト

間隔システム_

• **基本単位:** 8 ピクセル (狭いインライン ギャップには、より細かい 1/2/4 ピクセルのステップが利用可能)。
• **トークン (前付):** `` (1px) · `` (4px) · `` (8px) · `` (12px) · `` (16px) · `` (24 ピクセル) · `` (32 ピクセル) · `` (96 ピクセル).
• **ユニバーサル セクション リズム:** セット内のすべてのページは、主要なコンテンツ ブロック間の垂直方向のギャップとして `` (96 ピクセル) を使用します。これはシステム内で最大の間隔トークンであり、ホーム、__CODEBCK_844___、__CODEBCK_845___ ページ全体の主要なレイアウト キューです。
• **セクションの内部パディング:** セクション内のコンテンツ行は、水平方向のパディングなしで、垂直方向に `` (16 ピクセル) に配置されます。テキストはセクションの左端から水平に始まります。

グリッドとコンテナ

• **最大幅:** 本文セクションのコンテンツ列は ~960px。ダーク ヒーローの TUI モックアップは、外側の約 1100 ピクセルのコンテンツ フレーム内にフルブリードされています。
• **2 列分割:** `/enterprise` は、左側のテキスト ブロック (幅約 360 ピクセル) と右揃えのフォーム列 (幅約 480 ピクセル) を組み合わせます。ホーム ページは 1 列で表示されます。
• **フッター:** デスクトップでは 5 段の水平リンク行 (GitHub / Docs / Changelog / Discord / X)、タブレットでは 2 段、モバイルでは 1 段に折りたたまれます。

ホワイトスペースの哲学

空白は構造的かつ寛大です。セクションは 96 ピクセル離れて配置され、間に装飾的な仕切りはありません。_`` 1px ルールが分離の唯一の信号です。セクション内では、コンテンツは列の端に対して同じ高さに保たれ、内部のくぼみはありません。箇条書きでは、インデントベースのレイアウトの代わりに、ASCII 括弧プレフィックス (`[+]` / `[-]`) が使用されます。 その結果、スタイル付きのマーケティング レイアウトではなく、印刷されたコード リストのようなページが作成されます。

標高と深さ

|レベル |治療 | |

を使用します

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

| 0 — フラット |境界線も影もありません |本文セクション、リスト行、ヒーロー テキスト ブロック、フッターのデフォルト |

| 1 — ヘアライン ルール | 1px ソリッド `` (半透明の暖色系) |主要なコンテンツ ブロック間のセクション区切り |

| 2 — ヘアラインが強い | 1px ソリッド `` |タブ ストリップ下部ルール、リスト内強調分割線 |

| 3 — 反転ダーク | `` 記入 |ヒーロー TUI モックアップ、ダーク CTA ピル — システムの唯一の「高層」サーフェスは、影ではなく色を使用します |

システムにはドロップ シャドウがありません。何も浮かばず、何も浮かばない。要素を別の要素の「上」として登録する唯一の方法は、ヒーローのモックアップで使用される暗い表面です。

装飾の深さ_

深さは、CSS 効果ではなく、タイポグラフィの密度と単一の暗い TUI モックアップによって決まります:

• **ASCII ブロック ピクセル ワードマーク** — 等幅文字セルの 5 行ブロックとしてレンダリングされる OpenCode ブランド名。プライマリ ナビゲーションで使用され、ヒーロー TUI モックアップの目玉として使用されます。
• _**Hero TUI モックアップ** — 擬似ターミナル インターフェイスを含むフルブリード `` 四角形: ASCII ワードマーク、ビルド コマンド ラインを示す `tui-prompt-row`、および下部の `` 内の `tab switch agent` / `ctrl-p commands` キーバインド ヒントエッジ.
• **グラフ タイル** — ホーム ページの「オープン ソース AI コーディング エージェント」統計ブロック内の 3 つの細線 ASCII グラフ。クリーム色のキャンバスに対して `` で抽象的な点線/疎線プロットが表示されます。キャプションは__CODEBCK_860___ (`Fig 1. 150K GitHub Stars`、__CODEBCK_862___、__CODEBCK_863___) の下にあります。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 0ピクセル |セクション、ヒーロー TUI モックアップ、プライマリ ナビゲーション、フッター、リスト行 — ボタン以外のすべてのコンテナ |

| `` | 4ピクセル |すべてのインタラクティブな要素 - プライマリ CTA、セカンダリ CTA、テキスト入力、インストール スニペット、バッジ、プロンプト行 |

| `` | 9999ピクセル |紹介文内のアバター サークル |

_半径ボキャブラリは 2 つの値です。インタラクティブ要素の場合は 4px、その他すべての場合は 0px です。お客様の声の行にあるアバター サークルは、システム内で唯一完全に丸みを帯びた要素です。

写真の幾何学

写真撮影はありません。視覚要素は次のものに制限されます:

• **ナビゲーションおよびヒーロー TUI モックアップの ASCII ブロック ピクセル ワードマーク**。
• **統計ブロック セクション内のインライン ASCII チャート** — 特定のデータ ポイントのない抽象的な疎線と点線のプロット。
• **__CODEBCK_867___ の紹介行内のアバター ドット** (~32px) — ``.
の平らな色の円
• **製品内アイコン** (kbd、A+、⊕、↻、K、Z) は、ビットマップや SVG ではなく、小さな等幅文字グリフとしてレンダリングされます。

コンポーネント

> **システム ポリシーごとにホバー状態は文書化されていません**。 各仕様はデフォルトとアクティブ/押下のみを対象としています。

ボタン

**`button-primary`** — ユニバーサル OpenCode CTA

• 背景__CODEBCK_870___、テキスト__CODEBCK_871___、入力__CODEBCK_872___、パディング__CODEBCK_873___、高さ ~36px、丸め__CODEBCK_874___ (4px)。
• 「ダウンロード」(トップナビゲーション)、「Zen を始める」、「送信」(企業連絡フォーム)、「購読」(ニュースレターのフッター)、「ドキュメントを読む →」に使用されます。
• 押された状態は__CODEBCK_875___にあります — バックグラウンドは__CODEBCK_876___に下がります。

**`button-secondary`** — 代替案の概要

• 背景__CODEBCK_878___、テキスト__CODEBCK_879___、1ピクセルの実線__CODEBCK_880___境界線、タイプ__CODEBCK_881___、パディング__CODEBCK_882___、丸め__CODEBCK_883___.
• 低強調 CTA — 2 つのアクションがペアになっているプライマリ フィルの横に表示されます。

**`button-tab`** + **`button-tab-active`** — インストールタブストリップ

• デフォルト: 透明な背景、テキスト__CODEBCK_886___、タイプ__CODEBCK_887___、パディング__CODEBCK_888___、丸め__CODEBCK_889___.
• アクティブ: 同じ表面、テキスト__CODEBCK_890___、下部の2ピクセル__CODEBCK_891___の下線が選択を示しています。
• ホーム ページのインストール メソッドのタブ ストリップで使用されます (`curl` / `npm` / `bun` / `brew` / `yay`)。

**`button-disabled`**

• 背景__CODEBCK_898___、テキスト__CODEBCK_899___、角丸__CODEBCK_900___.

バッジとチップ

_**`badge-news`** — ニュース/アナウンス欄の小さな黒いチップ

• 背景__CODEBCK_902___、テキスト__CODEBCK_903___、入力__CODEBCK_904___、パディング__CODEBCK_905___、丸め__CODEBCK_906___.
• ホーム ページのヒーロー ヘッドラインの上に「ニュース」/「ベータ」/「今すぐライブ」タグとしてボディ コピーとインラインで配置されます。

_**`badge-section-label`** — 括弧で囲まれたセクション ヘッダー

• 背景透明、テキスト__CODEBCK_908___、タイプ__CODEBCK_909___、丸め__CODEBCK_910___.
• チップ背景のない 1 ピクセル `` ルールの上に、裸の `**Heading**` 行としてレンダリングされます。ただし、テキストの読み方 ("[+]"、"[x]"、__CODEBCK_913___) により、ラベル コンポーネントとして機能します。

入力とフォーム

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

• デフォルト: 背景__CODEBCK_916___、テキスト__CODEBCK_917___、1ピクセル単色__CODEBCK_918___、タイプ__CODEBCK_919___、パディング__CODEBCK_920___、高さ~40ピクセル、丸め__CODEBCK_921___.
• フォーカスあり: 背景が__CODEBCK_922___に反転し、境界線が1ピクセルの実線__CODEBCK_923___になります(キャンバスのフラットなフォーカス信号 - ハロー、グローなし)。
• __CODEBCK_924___ (氏名、役割、会社名、会社の電子メール、電話番号) のすべての連絡先フォーム フィールドと、ホームページ フッターのニュースレターの電子メール フィールドに使用されます。

_**`textarea`**

• 背景__CODEBCK_926___、テキスト__CODEBCK_927___、1ピクセル単色__CODEBCK_928___、タイプ__CODEBCK_929___、パディング__CODEBCK_930___、丸め__CODEBCK_931___.
• 「解決しようとしている問題は何ですか?」 `/enterprise`.
の複数行のテキストエリア

**`install-snippet`** — ホームページの署名インストール コード ブロック

• 背景__CODEBCK_934___ (``)、__CODEBCK_937___でレンダリングされたテキスト__CODEBCK_936___(すでに等幅 — Berkeley Mono)、パディング__CODEBCK_938___、丸め__CODEBCK_939___.
• 右端に小さなコピー アイコンが付いたリテラル `curl -fsSL https://opencode.ai/install | bash` コマンドが含まれています。 インストール メソッドのタブ ストリップの下にあります。

カードとコンテナ

**`hero-tui-mockup`** — ホームページの特徴的な TUI プレビュー

• コンテナ: フルブリード__CODEBCK_942___ (黒に近い)、パディング__CODEBCK_943___、丸みを帯びた__CODEBCK_944___.
• コンテンツ (上→下):__CODEBCK_945___ の中央に ASCII ブロックピクセルの「OPENCODE」ワードマーク。 `` は、モデル セレクター テキストを含む「Build」コマンド ラインを示しています。 `` の下部にある `tab switch agent ctrl-p commands` キーバインド ヒント行。

**`tui-prompt-row`** — TUI モックアップ内の挿入コマンド ライン

• 背景__CODEBCK_950___ (``)、__CODEBCK_953___内のテキスト__CODEBCK_952___、パディング__CODEBCK_954___、丸め__CODEBCK_955___.
• 先頭の垂直パイプと括弧で囲まれたトークンとしてスタイル設定されたモデル名を使用して、インライン コマンド (`Build Claude Opus 4.5 OpenCode Zen`) をレンダリングします。

_**`list-row`** — ASCII 括弧付き箇条書き付きの機能/特典行

• 背景__CODEBCK_958___、__CODEBCK_960___内のテキスト__CODEBCK_959___、パディング__CODEBCK_961___.
• 各行は、__CODEBCK_962___ / `[-]` / `[x]` ASCII マーカーで始まり、その後に太字のラベルと通常の説明が続きます (例: `[+] LSP enabled Automatically loads the right LSPs for the IDE`)。括弧マーカーはテキスト コンテンツの一部であり、別個のアイコンではありません。

**`faq-row`** — 括弧付きの FAQ エントリ

• 背景__CODEBCK_967___、__CODEBCK_969___内のテキスト__CODEBCK_968___、パディング__CODEBCK_970___、1ピクセル__CODEBCK_971___の下部ルール。
• 各行の先頭には、展開/折りたたみ状態を示す `+` / `−` ASCII マーカーが付いています。 常にプレーン テキスト行としてレンダリングされます。シェブロン アイコンやアニメーション化されたアコーディオン クロムはありません。

_**`testimonial-row`** — `/zen` ピアクオート行

• 背景__CODEBCK_976___、__CODEBCK_978___内のテキスト__CODEBCK_977___、パディング__CODEBCK_979___、丸め__CODEBCK_980___.
• レイアウト: 左側に 32 ピクセルのアバター サークル (``)、最初の行の `` に名前 + 役割 + 会社、2 行目の `` `` に引用符を入力します。

**`chart-tile`** — 統計ブロックの疎線グラフ

• 背景__CODEBCK_986___、__CODEBCK_988___内のテキスト__CODEBCK_987___、丸め__CODEBCK_989___、パディング__CODEBCK_990___.
• _`` の下に__CODEBCK_991____ というキャプションが付いた、インライン SVG/CSS で描画された ASCII スタイルの疎線プロット (点線、抽象的 - 決して特定のデータ ポイントではない) が含まれています。

ナビゲーション

_**`primary-nav`**

• 背景__CODEBCK_994___、__CODEBCK_996___内のテキスト__CODEBCK_995___、高さ~56ピクセル、四捨五入__CODEBCK_997___、1ピクセル__CODEBCK_998___の下部ルール。
• レイアウト (デスクトップ): 左側にブロック ピクセル ASCII OpenCode ワードマーク (~120×24px)、中央右にナビゲーション リンク クラスター (「GitHub [150K] · Docs · Zen · Go · Enterprise」)、__CODEBCK_999___ 右端に小さなダウンロード グリフのある「ダウンロード」CTA。

**トップナビゲーション (モバイル)**

• _ASCII ワードマークは左側に残り、ナビゲーション リンクは右側のハンバーガーの引き出しに折りたたまれます。ダウンロード CTA は、すべてのブレークポイントで表示されたままになります。

フッター

**`footer-section`**

• 背景__CODEBCK_1001___、テキスト__CODEBCK_1002___、__CODEBCK_1003___、パディング__CODEBCK_1004___、1ピクセル__CODEBCK_1005___のトップルール。
• 上の行: 5 列の水平リンク グリッド (GitHub [150K] · Docs · Changelog · Discord · X)、それぞれは 1px `` 垂直ルールで区切られた中央のセルとしてレンダリングされます。
• 下の行: 左側に__CODEBCK_1007___著作権、右側に__CODEBCK_1008___ユーティリティクラスター、すべて__CODEBCK_1009____``.

インライン

**`link-inline`** — 本文散文アンカー リンク

• `` 下線付きのテキスト。ブランドの唯一のリンク アフォーダンス - 本文段落内のリンクでも、__CODEBCK_1013___ 青ではなくインクの色が使用されます。 Apple Blue は製品内の TUI 用に予約されています。

推奨事項と禁止事項

実行

• Berkeley Mono ですべてのテキストの役割をレンダリングします。単一フォントの決定がアイデンティティ全体を決定します。
• __CODEBCK_1014___ (``) を本文の背景のみにしておきます。灰色のセクション バンドを導入しないでください。
• ASCII ブラケット マーカー (`[+]`、__CODEBCK_1017___、__CODEBCK_1018___、__CODEBCK_1019___、__CODEBCK_1020___) を箇条書き、トグル、セクション グリフとして使用します。これらはブランドの唯一のアイコンです。
• ダーク__CODEBCK_1021___をヒーローの目玉としてランディング ページごとに 1 回だけ固定します。 本文コンテンツに暗い表面を使用しないでください。
• __CODEBCK_1022___ (Apple Blue) と残りのセマンティック ランプを TUI 状態用に予約します。マーケティング Chrome はモノクロのままです。
• すべてのインタラクティブ要素には `` (4px) を使用し、すべてのコンテナには `` (0px) を使用します。
• コンテンツ セクションを `` (96 ピクセル) のリズムでスタックし、その間に 1 ピクセルの `` ルールを設けます。

しないでください

• サンセリフ本文フォント、表示文字、または斜体スタイルを導入しないでください。 Berkeley Mono にはあらゆるものが揃っています。
• ドロップ シャドウ、グラデーション、または雰囲気のある背景を追加しないでください。システムはフラット オン クリームです。
• _ASCII 括弧マーカーを SVG アイコンに置き換えないでください。括弧はアイコンです。
• マーケティング CTA ではセマンティック アクセント ランプ (``、__CODEBCK_1028___、__CODEBCK_1029___、__CODEBCK_1030___) を使用しないでください。これらは製品内の TUI に属します。
• _24 ピクセル以上の内部パディングをカードに埋め込まないでください。リスト行は縦 8 ピクセルに配置されます。 12px.
の FAQ 行
• OpenCode ワードマークをベクトル ロゴとしてレンダリングしないでください。常にブロックピクセル ASCII です。
• ヒーロー TUI モックアップを写真やイラストで埋めないでください。これはテキストのみであり、常に偽の端末コマンド ラインが表示されます。

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

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

|デスクトップ-大 | 1280ピクセル以上 |デフォルト — 960 ピクセルのコンテンツ列、5 つ上のフッター リンク グリッド |

|デスクトップ | 1024ピクセル |同じレイアウト。ナビゲーションは水平のまま |

|タブレット | 850ピクセル |フッターは 2 つのグリッドに折りたたまれます。 `/enterprise` 2 列フォーム スタック |

|タブレット-ナロー | 768ピクセル |プライマリナビはハンバーガーの引き出しになります。ダウンロード CTA は表示されたままになります |

|モバイル | 640ピクセル |すべてを単一列にします。ヒーローの表示は 38 ピクセル→ ~28 ピクセルに低下します。セクションのパディングが引き締められます |

タッチターゲット

すべてのインタラクティブ要素は、高さ約 36 ～ 40 ピクセルの範囲で WCAG AA に適合します。 `` は約 36 ピクセル、水平方向のパディングは 20 ピクセルです。 `` と `` は約 40 ピクセルに収まります。 install-method ストリップ内の `` 行は、ラベルの長さに応じて約 32 ～ 36 ピクセルに収まりますが、インライン パディングを介してタップ可能なセル全体の 44 ピクセルまで拡張されます。フッター リンクは `` (14 ピクセル) を使用しますが、最大 28 ピクセルの行の高さ (caption-md は 2.0) と 8 ピクセルの垂直パディングを受け取り、快適な最大 44 ピクセルのタップ可能な行を実現します。

戦略の崩壊

• **プライマリ ナビゲーション:** デスクトップの水平クラスター → 768 ピクセルのタブレットの狭いハンバーガー ドロワー。 暗い色の「ダウンロード」CTA は、どの幅でも表示されたままになります。
• **ヒーロー TUI モックアップ:** は、すべてのブレークポイントでフルブリードの暗いサーフェスを維持します。 ASCII ワードマークは比例して拡大縮小され、狭い画面ではキーバインディング ヒントの行が 2 行に折り返される場合があります。
• **スニペット + タブ ストリップをインストール:** デスクトップの固定幅ピル → ラベルがオーバーフローした場合にタブ ストリップを水平スクロールしてモバイルの全幅ピルにします。
• **フッター:** 5 アップの水平リンク グリッド → タブレットで 2 アップ → モバイルで 1 アップ (各リンクは全幅の行になります)。
• _**`/enterprise` 2 列レイアウト:** デスクトップ 50/50 → タブレットはテキスト ブロックの下にフォームを備えた 1 列にスタックされます。
• **セクション パディング:** `` (96 ピクセル) デスクトップ → 64 ピクセル タブレット → 48 ピクセル モバイル。
• **ヒーロー見出し:** デスクトップでは `` (38 ピクセル)、モバイルでは ~28 ピクセルに拡大縮小、行の高さは 1.5 のままです。

画像の動作

システムには、ファビコンと OG 共有画像以外にラスター画像はありません。すべての視覚要素 (ワードマーク、グラフ、アイコン) はタイプまたはインライン SVG としてレンダリングされ、アスペクト比を考慮せずに拡大縮小されます。

反復ガイド

1。一度に 1 つのコンポーネントに焦点を当てます。 YAML エントリを取得し、すべてのプロパティが解決されることを確認します。

2.コンポーネント名とトークンを直接参照します (``、__CODEBCK_1041___、__CODEBCK_1042___) - 言い換えはしないでください。

3.編集後に__CODEBCK_1043___を実行します — `broken-ref`、__CODEBCK_1045___、__CODEBCK_1046___の警告フラグが自動的に発行されます。

4.新しいバリアントを個別のコンポーネント エントリとして追加します (`-active`、__CODEBCK_1048___)。散文の中に埋め込まないでください。

5.デフォルトの本文は `` です。強調したい場合は、__CODEBCK_1050___ に手を伸ばしてください。 `` はページトップのヒーロー見出し専用に予約してください。

6. `` は少なくしてください。フルブリードのダーク モックアップは 1 ページにつき 1 つまでにしてください。暗い表面は物語の装置であり、クロム処理ではありません。

7.新しいコンポーネントを導入するときは、新しいトークンを追加する前に、既存の ASCII ブラケット + 4px-radius + Berkeley-Mono ボキャブラリーで表現できるかどうかを確認してください。このシステムの強みは、新しいシステムがほとんど必要ないことです。

既知のギャップ

• **モバイルのスクリーンショットはキャプチャされません** — レスポンシブな動作は、デスクトップの証拠とブレークポイント スタックから OpenCode のモバイル パターン (ハンバーガー ドロワー、単一列、フッター アコーディオン) を合成します。
• **システム ポリシーによりホバー状態が文書化されていません**。
• **マーケティング ヒーローのモックアップを超える製品内の TUI スクリーンショット**は、キャプチャされたセットには含まれません。実際の `opencode` ターミナル インターフェイス (完全なキーバインド、パネル、ステータス バー) はここでは文書化されていません。
• **`/go` ページ** は抽出されませんでした — Go SDK のマーケティング ページは同じクロムを共有している可能性がありますが、上記に記載されていないコード サンプル ブロックが導入されています。
• **フォーム検証状態のスタイル** (成功/エラーのインライン メッセージ) がキャプチャされたサーフェスに存在しません。

Color Strategy Analysis

With 211 documented color tokens, Opencode balances brand consistency with functional hierarchy. The primary palette (#fdfcfc) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Opencode avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 211 documented color tokens, Opencode balances brand consistency with functional hierarchy. The primary palette (#fdfcfc) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Opencode avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 211 documented color tokens, Opencode balances brand consistency with functional hierarchy. The primary palette (#fdfcfc) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Opencode avoids through careful saturation management and deliberate negative space.

Related Design Systems

Explore similar design languages from the same category:

• Ollama Design System
• Raycast Design System
• Webflow Design System
• Mintlify Design System