Dark Mode

Design System
Inspired by OpenCode

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in monospace precision.

Install OpenCode View on GitHub
01 / Colors

Color Palette

Primary
OpenCode Dark
#201d1d
Background, buttons
OpenCode Light
#fdfcfc
Primary text
Mid Gray
#9a9898
Secondary text
Dark Surface
#302c2c
Elevated surface
Surface & Border
Light Surface
#f1eeee
Light background
Input BG
#f8f7f7
Form inputs
Border Gray
#646262
Outline borders
Text Muted
#6e6e73
Muted labels
Accent
Accent Blue
#007aff
Primary accent
Accent Hover
#0056b3
Hover state
Accent Active
#004085
Active state
Semantic
Danger
#ff3b30
Error, destructive
Success
#30d158
Success state
Warning
#ff9f0a
Caution, alerts
Text Secondary
#424245
Captions on light
02 / Typography

Typography Scale

Heading 1 -- Hero
Heading 1 -- 38px / 700 / 1.50 / Berkeley Mono
Heading 2 -- Section Title
Heading 2 -- 16px / 700 / 1.50 / Berkeley Mono
Body Medium -- Navigation links, interactive text, and button labels live here.
Body Medium -- 16px / 500 / 1.50 / Berkeley Mono
Body Regular -- Standard paragraph text for descriptions, documentation, and general content across the interface.
Body Regular -- 16px / 400 / 1.50 / Berkeley Mono
Body Tight -- Compact Labels
Body Tight -- 16px / 500 / 1.00 / Berkeley Mono
Caption -- Footnotes, metadata, and small supplementary text with relaxed line-height for readability.
Caption -- 14px / 400 / 2.00 / Berkeley Mono
$ opencode --help
Code -- 14px / 400 / 1.50 / Berkeley Mono (monospace)
03 / Buttons

Button Variants

Install OpenCode
Primary Dark
View on GitHub
Secondary Outline
Learn More
Accent Blue
Delete
Danger
Success
Success
Warning
Warning
04 / Cards

Card Examples

AI Agent

Terminal-Native Coding

An open source AI coding agent that runs in your terminal. No IDE required -- just you, your code, and the command line.

Open Source

Multi-Provider Support

Works with Anthropic, OpenAI, and other LLM providers. Choose the model that fits your workflow and budget.

CLI

Context-Aware Editing

Understands your entire codebase context. Make changes across multiple files with natural language instructions.

05 / Forms

Form Elements

Default (warm border, 20px padding)
Focus (accent blue border)
Error (danger red border)
06 / Spacing

Spacing Scale

1
2
4
8
12
16
20
24
32
40
48
64
07 / Radius

Border Radius Scale

4px
Default (buttons, cards)
6px
Inputs
08 / Elevation

Elevation & Depth

Level 0: Flat
No border, no shadow
Level 1: Subtle
1px rgba(253,252,252,0.12)
Level 2: Tab
2px solid #9a9898
Level 3: Outline
1px solid #646262