# Opencode · Design system migration spec

> Source: https://opencode.ai  ·  Curated by OpenDesign  ·  en

> The site is a strong example of a monochromatic, monospace-driven design system that effectively communicates a technical, developer-first product identity.

## 1. Identity DNA

Opencode’s design system is built like a modern terminal wrapper: a disciplined, monochrome interface that serves as a transparent conduit for its powerful AI core. The visual language is CLI-first, prioritizing clarity, speed, and the immediate utility of the developer tool over decorative flourish.

**One-liner:** An open-source AI coding agent that prioritizes privacy and terminal-native workflows.
**Keywords:** open-source · AI agent · coding · terminal · privacy-first
**Analogy:** A developer's Swiss Army knife for AI coding, presented as a clean, no-nonsense utility.

## 2. Color

The palette is a strict monochrome spectrum, relying on the high contrast between a pure white background and deep black ink for readability. This functional approach uses grays sparingly, ensuring focus remains on the technical content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fdfcfc` | main background |
| `--bg-soft` | `#f8f7f7` | card background |
| `--ink` | `#201d1d` | body text |
| `--ink-soft` | `#9a9898` | secondary text |
| `--muted` | `#646262` | placeholder |
| `--muted-soft` | `#8d8b8b` | weak hint |
| `--line` | `rgba(100, 98, 98, 0.2)` | divider |

**Color principle:** A monochromatic, high-contrast palette derived from text ink, using subtle grays for structure and hierarchy.

The system deliberately rejects saturated accent colors, establishing a principle where typographic weight and spatial contrast provide all necessary visual hierarchy.

## 3. Typography

Typography is the primary expressive element, using monospace for headlines and code to signal technical precision and command-line heritage. A clean sans-serif provides a readable counterpart for body instructions, maintaining a consistent, focused voice.

- **Display:** monospace
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -0.5px | Main headline |
| heading | 24px | 1.33 | 700 | 0 | Section headings |
| body | 16px | 1.5 | 400 | 0 | Body text and code snippets |

**Type rules:**
- Use monospace for all text elements to maintain a technical, developer-centric feel.
- Maintain consistent line heights for readability, especially in code blocks.

## 4. Spacing

Generous whitespace is the system's rhythm, creating clear, isolated zones for each content block.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 64 / 80 px
- **Rhythm:** A consistent rhythm built on a 4px base unit, with generous padding in content sections.

## 5. Surfaces

Surfaces are flat and defined by minimal borders, specifically a 1px solid line that provides structural separation without visual weight. The design avoids shadows and gradients, embracing a purely flat, functional aesthetic.

- **Radius:** sm 4px · md 6px · lg 6px · pill 999px
- **Borders:** A single, subtle 1px border in rgba(100, 98, 98, 0.2) is used to delineate sections and components.

## 6. Layout

The layout skeleton is a single, centered column, creating a focused path from the hero headline to the product preview. Sections are distinct and spacious, with structure communicated through whitespace rather than elaborate containers.

- **Container max:** 1280px
- **Paragraph max:** 800px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A single-column centered layout with generous vertical padding separating distinct content blocks.

## 7. Motion & Interaction

Motion philosophy is one of immediacy and subtlety, with hover effects and state transitions that are fast and unobtrusive. The goal is to reinforce the tool's responsive, CLI-like feel without introducing distracting animations.

- **Durations:** micro 150ms · small 180ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity transitions on hover for interactive elements.

- **Hover:** Subtle opacity change to indicate interactivity.
- **Click:** Standard pointer cursor with no visible scale or press effect.
- **Transition:** A quick 0.15s or 0.18s opacity transition on hover states.
- **Keyboard:** Standard focus outlines are likely used but not visible in the static screenshot.

## 8. Voice & Don'ts

The editorial voice is direct, technical, and confident, using short declarative statements and simple, action-oriented calls to action. The system avoids marketing jargon and complex sentence structures in favor of straightforward utility.

- **Tone:** Direct, technical, and confident.
- **Headline style:** Bold, monospace statements that are clear and benefit-driven.
- **CTA style:** Simple, action-oriented labels like 'Download' and 'Learn more'.
- **Avoid:** Marketing fluff or overly casual language. / Complex jargon without context. / Excessive use of exclamation points. / Vague promises; be specific about features.

### Don'ts
- ❌ Don't use a serif or humanist sans-serif font — screenshot shows a monospace font used exclusively for all text.
- ❌ Don't introduce multiple vibrant accent colors — screenshot shows a strict monochromatic palette.
- ❌ Don't use drop shadows or complex gradients on surfaces — screenshot shows flat surfaces with thin borders.
- ❌ Don't use rounded pill-shaped buttons for primary actions — screenshot shows buttons with a slight 6px radius.
- ❌ Don't use a two-column or multi-column layout for the main content — screenshot shows a single, centered column.
- ❌ Don't use large, decorative icons or illustrations — screenshot relies on text and minimal UI elements.

By design, the system deliberately avoids serif fonts, bright accent colors, and decorative clutter to maintain its stark, focused developer aesthetic.

## System Prompt (paste into AI tool)

```
This is the website for Opencode, an open-source AI coding agent. The design is minimalist and technical, targeting developers. It uses a strict monochromatic color palette with a very light off-white background (#fdfcfc) and near-black ink (#201d1d). The entire typographic system is monospace, reinforcing the developer-focused identity. The layout is a clean, single-column structure with generous whitespace. Critical design constraints: never use a serif or humanist sans-serif typeface, avoid introducing any saturated accent colors, and ensure all surfaces remain flat without shadows or gradients.
```
