CURATED · OPEN · FREE

Opencode

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

01

Identity DNA

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

02

Color

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

03

Typography

monospace

• display56px · 700
• heading24px · 700
• body16px · 400

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

04

Spacing

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

05

Surfaces

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

06

Layout

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

07

Motion & Interaction

Subtle opacity transitions on hover for interactive elements.

Subtle opacity change to indicate interactivity. · Standard pointer cursor with no visible scale or press effect.

08

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.

09

Voice & Don'ts

• Tone Direct, technical, and confident.
• Headlines Bold, monospace statements that are clear and benefit-driven.
• CTAs Simple, action-oriented labels like 'Download' and 'Learn more'.

• 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.
• Avoid: Marketing fluff or overly casual language.
• Avoid: Complex jargon without context.
• Avoid: Excessive use of exclamation points.
• Avoid: Vague promises; be specific about features.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko