OpenCode is the open source AI coding agent. Its interface wears its terminal lineage proudly: Berkeley Mono is the only typeface, running monospace from body copy to micro labels; the primary is a warm near-black with reddish-brown undertone (#201d1d), text a warm off-white (#fdfcfc), radii a utilitarian 4px throughout, and spacing an 8px system scaling to 96px.
AIMinimal
Prompt Template
Base Template
Design a OpenCode-inspired interface. - Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices; - Warm near-black primary (#201d1d) with reddish-brown undertone, not pure black; - Off-white text (#fdfcfc) with warm tint, not pure white; - Minimal 4px border radius throughout -- sharp, utilitarian corners; - 8px base spacing system scaling up to 96px. Colors: #201d1d, #fdfcfc, #9a9898, #302c2c with #007aff accent. Typography: - Background:.
Variant Prompts
📱 Mobile
Design a mobile app with OpenCode aesthetics. Use OpenCode color identity with #007aff accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with OpenCode style. Use OpenCode color identity with #007aff accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with OpenCode design language. Use OpenCode color identity with #007aff accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with OpenCode visual identity. Use OpenCode color identity with #007aff accents. Compelling, conversion-focused.
Usage Examples
OpenCode App
WebBuild a web app with OpenCode design language and #007aff color system.
OpenCode Dashboard
DashboardCreate a dashboard using OpenCode style with data visualization and - Background: typography.
✅ Best For
- AI
- AI coding and agent tools
- Dark developer platform UIs
❌ Avoid For
- Products for non-technical users
- Bright paper-style reading sites
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.