<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: OpenCode — Component Stylings

## Buttons

**Primary (Dark Fill)**
- Background: `#201d1d` · Text: `#fdfcfc`
- Padding: 4px 20px · Radius: 4px
- Font: 16px Berkeley Mono, weight 500, line-height 2.00
- Outline: `rgb(253, 252, 252) none 0px`

## Inputs

**Text/Email**
- Background: `#f8f7f7` · Text: `#201d1d`
- Border: `1px solid rgba(15, 0, 0, 0.12)`
- Padding: 20px · Radius: 6px · Font: Berkeley Mono

## Links

**Default** — `#201d1d`, underline 1px, weight 500

**Light** — `#fdfcfc`, no decoration (dark backgrounds, nav)

**Muted** — `#9a9898`, no decoration (footer, secondary nav)

## Tabs

**Tab Navigation**
- Border-bottom: `2px solid #9a9898` (active indicator)
- Font: 16px, weight 500, line-height 1.00

## Navigation

- Horizontal layout, Berkeley Mono throughout
- Brand logotype left-aligned; links 16px weight 500 with underline
- Solid dark background — no blur or transparency

## Image Treatment

- Terminal/code screenshots as hero imagery
- Dark terminal aesthetic, monospace type, minimal borders

## Distinctive Components

**Terminal Hero**
- Full-width dark terminal window as hero element
- ASCII art / stylized logo within terminal frame
- Monospace command examples with syntax highlighting

**Feature List**
- Weight 500 for feature names, 400 for descriptions
- Tight vertical spacing; no cards or borders

**Email Capture**
- Light input (`#f8f7f7`) contrasting dark page
- 20px padding · 6px radius (roundest element in system)
- Newsletter/waitlist pattern
