# Design System: Developer Dark — Colour Palette & Roles

## Background Surfaces

- **Base Dark** (`#111827`): Primary page background, the foundation of all surfaces
- **Surface** (`#1f2937`): Cards, panels, sidebar backgrounds -- one step up from base
- **Elevated** (`#374151`): Dropdown menus, tooltips, hover states on surfaces
- **Inset** (`#0d1117`): Code blocks, terminal output, sunken areas

## Text Colours

- **Primary Text** (`#f9fafb`): Main text on dark backgrounds -- near-white, not pure white
- **Secondary Text** (`#9ca3af`): Descriptions, labels, metadata, muted content
- **Tertiary Text** (`#6b7280`): Placeholders, disabled states, timestamps
- **Code Text** (`#e5e7eb`): Code content in monospace contexts

## Accent & Interactive

- **Terminal Green** (`#4ade80`): Primary accent -- CTAs, active states, success indicators
- **Green Hover** (`#22c55e`): Hover state for green interactive elements
- **Amber** (`#fbbf24`): Secondary accent -- warnings, highlights, secondary actions
- **Blue** (`#3b82f6`): Info states, links, tertiary interactive elements

## Semantic

- **Success** (`#4ade80`): Same as accent -- confirms terminal-green convention
- **Warning** (`#fbbf24`): Amber -- caution states, approaching limits
- **Error** (`#ef4444`): Red -- failures, destructive actions, validation errors
- **Info** (`#3b82f6`): Blue -- informational notices, help text

## Borders & Dividers

- **Border Primary** (`#1f2937`): Main structural borders, card outlines
- **Border Secondary** (`#374151`): Lighter borders for inner divisions
- **Border Focus** (`#4ade80`): Focus ring colour for keyboard navigation

## Shadows

- **Ambient** (`rgba(0, 0, 0, 0.3) 0px 1px 2px`): Minimal ambient shadow
- **Elevated** (`rgba(0, 0, 0, 0.4) 0px 4px 6px -1px`): Dropdowns, popovers
- **Overlay** (`rgba(0, 0, 0, 0.6) 0px 10px 15px -3px`): Modals, command palettes
