# opencode.ai — Design System

## 1. Visual Theme & Atmosphere
OpenCode is an AI coding platform with a design system that reads as Apple-meets-terminal. The CSS custom properties reference Apple's HIG color naming (`--color-bg`, `--color-text`, `--color-accent: #007aff`) while the sole typeface — Berkeley Mono — grounds every element in code culture. Light grey surfaces (`#f5f5f7`), near-white elevation, and tight neutral text create an interface that is unambiguously developer-facing. Minimal, precise, and confident.

## 2. Color Palette & Roles
| Token | Value | Role |
|-------|-------|------|
| Background | `#ffffff` | Primary canvas |
| Surface | `#f5f5f7` | Subtle section fill |
| Elevated | `#ffffff` | Card backgrounds |
| Text | `#1d1d1f` | Primary copy |
| Text secondary | `#424245` | Supporting text |
| Text muted | `#6e6e73` | Placeholder, metadata |
| Accent | `#007aff` | CTAs, links, focus |
| Accent hover | `#0056b3` | Pressed state |
| Border | `#d2d2d7` | Dividers |
| Success | `#30d158` | Status indicators |

A semantic token system modelled closely on Apple's design tokens. Dark mode is not present in the extracted data.

## 3. Typography Rules
- **Sole typeface**: Berkeley Mono — a premium monospaced font. h1 at 38px/700, body at system default sizes.
- Fallback chain: IBM Plex Mono → ui-monospace → system monospace stack.
- Monospace everywhere signals that the product is code-first. No sans-serif or serif anywhere in the stack.
- Letter-spacing: normal — monospace tracks naturally.
- The single-font decision is confident and unusual; it removes any tension between "marketing" and "product" typography.

## 4. Component Stylings
- **Radius**: 4–6px — minimal, square-ish. Cards and inputs feel precise.
- **Shadows**: None defined — depth via surface colour differential.
- **Buttons**: Accent-blue fill, 4–6px radius.
- **Inputs**: Surface-coloured, border-defined.
- **Focus states**: Likely `#007aff` ring.

## 5. Layout Principles
- Single-column hero with Berkeley Mono headline.
- Surface sections (`#f5f5f7`) divide content without hard borders.
- Token-driven spacing system (Apple-style 4px grid implied).
- Low visual noise — every element earns its place.

## 6. Depth & Elevation
Three surface levels: white canvas, `#f5f5f7` fill, white elevated card. Shadow-free. The 0.12 alpha overlay (`rgba(15,0,0,0.12)`) used for hover states. Consistent with terminal/IDE aesthetic where chrome stays flat.

## 7. Do's and Don'ts
**Do:**
- Use Berkeley Mono for all text, including headings
- Follow the semantic token names (`--color-text`, `--color-accent`) for all colour decisions
- Keep radius tight (4–6px) — no soft corners

**Don't:**
- Introduce any sans-serif or serif font
- Deviate from the Apple-style neutral grey scale
- Add decorative shadows or gradients

## 8. Responsive Behavior
Clean responsive scaling. Berkeley Mono at 38px h1 scales down to ~24px mobile. Surface sections stack vertically. Tight radius holds across all viewports.

## 9. Agent Prompt Guide
> Reproduce opencode.ai style: white canvas, `#f5f5f7` surface fills, Berkeley Mono for all text (700 heading, 400 body). Accent `#007aff`. Radius 4–6px. No shadows. Semantic tokens modelled on Apple HIG. Developer-facing, terminal-adjacent aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*