Warm cream canvas with a near-black ink, a 5-tier neutral gray ladder, and the full Apple HIG semantic ramp — preserved for the in-product TUI but rarely used on the marketing pages.
[+] Brand
Ink (primary)
#201d1d
Headlines, body text, primary CTA fill, nav links
Ink Deep
#0f0000
Pressed-state for primary CTA
Cream (canvas)
#fdfcfc
Page body, card surfaces, on-primary text
[+] Surface
Soft Surface
#f8f7f7
Text-input background, testimonial fill
Surface Card
#f1eeee
Install snippet, disabled button fill
Surface Dark
#201d1d
Hero TUI mockup, dark CTA pill
Surface Dark Elevated
#302c2c
Inset prompt-row inside hero TUI
Hairline
rgba(15,0,0,0.12)
1px section divider — translucent warm tint
Hairline Strong
#646262
Tab strip bottom rule, stronger inline divider
[+] Text
Ink
#201d1d
Headlines, body, primary nav links
Charcoal
#302c2c
Subtly softer body where pure ink is too heavy
Body
#424245
Default paragraph, FAQ answers
Mute
#646262
Tab labels (default), metadata, footer
Stone
#6e6e73
Least-emphasis utility text
Ash
#9a9898
Disabled text, TUI mockup secondary
[+] Semantic (Apple HIG ramp — primarily for in-product TUI)
Accent
#007aff
Apple Blue — TUI command highlight, in-product link
Accent Hover
#0056b3
Pressed informational link
Accent Active
#004085
Deeply-pressed informational
Danger
#ff3b30
Destructive confirmation, error state
Danger Hover
#d70015
Pressed destructive
Danger Active
#a50011
Deeply-pressed destructive
Warning
#ff9f0a
Caution callouts
Warning Hover
#cc7f08
Pressed caution
Warning Active
#995f06
Deeply-pressed caution
Success
#30d158
Positive confirmation, in-TUI success indicator
[02] Typography
Typography Scale
100% Berkeley Mono. No sans-serif, no italic, no display variant — the marketing page is a man page rendered at modern resolutions.
display-xlBerkeley Mono 38px / 700 / lh 1.5
The open source AI coding agent
heading-mdBerkeley Mono 16px / 700 / lh 1.5
What is OpenCode?
body-mdBerkeley Mono 16px / 400 / lh 1.5
Default paragraph copy carries every body section, list-row text, and install-snippet code at 16px regular weight.
The system's only visual moment — a full-bleed dark surface mocking up the OpenCode terminal interface with an ASCII block-pixel wordmark, an inset prompt row, and keybinding hints.
opencode
│ BuildClaude Opus 4.5 OpenCode Zen
tab switch agent ctrl-p commands
[05] Content Rows
List · FAQ · Testimonial Rows
Bracketed ASCII markers carry the bullet vocabulary. List rows announce features, FAQ rows expand/collapse, testimonial rows pair an avatar dot with a quote.
[+] List Rows
[+]LSP enabled Automatically loads the right LSPs for the IDE
[+]Multi-session Start multiple agents in parallel on the same project
[+]Share Links Share a link to any session for others to debug
[+]GitHub Copilot Log in with GitHub to use your Copilot account
[+]Any model 75+ LLM providers through Models.dev, including local models
[+]Any editor Available as a terminal interface, desktop app, and IDE extension
[+] FAQ Rows
+What is OpenCode?
+How do I use OpenCode?
+Do I need extra subscriptions to use OpenCode?
+Can I use my existing subscriptions with OpenCode?
+Can I only use OpenCode in the terminal?
+How much does OpenCode cost?
+What about data and privacy?
+Is OpenCode open source?
[+] Testimonial Rows
Row labelrole · company
Generic testimonial body rendered in body-md on a soft-surface row at 4px radius.
Row labelrole · company
Second example row to show the avatar-dot color variation across testimonials.
[06] Stat Block
Chart Tiles
Three thin abstract sparse-line charts inside a stat block, each with a Fig N. caption underneath in caption-md mute.
Fig 1. Generic ascending line
Fig 2. Generic dotted scatter
Fig 3. Generic monthly bars
[07] Forms
Form Elements
Inputs sit on the soft-surface fill by default; on focus the background flips to canvas with an ink-colored border.