---
name: Opencode
description: "The site is a strong example of a monochromatic, monospace-driven design system that effectively communicates a technical, developer-first product identity."
version: alpha

colors:
  background: "#fdfcfc"
  primary: "#201d1d"
  secondary: "#9a9898"
  neutral: "#646262"
  bg-soft: "#f8f7f7"
  muted-soft: "#8d8b8b"
  line: "rgba(100, 98, 98, 0.2)"

typography:
  display:
    fontFamily: monospace
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.5px"
  heading:
    fontFamily: monospace
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: monospace
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 6px
  lg: 6px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 64px

---

## Overview

An open-source AI coding agent that prioritizes privacy and terminal-native workflows.

*A developer's Swiss Army knife for AI coding, presented as a clean, no-nonsense utility.*

## Colors

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

- **Background (`#fdfcfc`)** — uses `bg` token
- **Primary text (`#201d1d`)** — uses `ink` token
- **Secondary text (`#9a9898`)** — uses `ink-soft` token
- **Muted (`#646262`)** — uses `muted` token
- **Borders (`rgba(100, 98, 98, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* A consistent rhythm built on a 4px base unit, with generous padding in content sections.

## Elevation & Depth

- Borders: A single, subtle 1px border in rgba(100, 98, 98, 0.2) is used to delineate sections and components.

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 6px
- `pill`: 999px

## Components

- **button:** A dark, monochrome button with rounded corners for primary actions like 'Download'.
- **card:** Simple, bordered cards for install commands, using a tabbed interface.
- **chip:** A small, dark 'New' badge used for announcements.
- **input:** A terminal-style command block with a copy button.
- **hero:** A large, text-heavy hero with a prominent headline, subtitle, and a command block for quick installation.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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