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

# Agency Techie — Agent Prompt Guide

## Quick Colour Reference

| CSS Variable | Hex | Role |
|-------------|-----|------|
| `--color-primary` | `#22d3ee` | Primary actions, links, focus |
| `--color-primary-hover` | `#06b6d4` | Hover states for primary |
| `--color-accent` | `#a78bfa` | Secondary highlights, tags |
| `--color-bg` | `#0d1117` | Page background |
| `--color-surface-1` | `#161b22` | Cards, panels |
| `--color-surface-2` | `#1c2333` | Elevated elements |
| `--color-surface-3` | `#243044` | Active/selected states |
| `--color-text` | `#e2e8f0` | Primary text |
| `--color-text-secondary` | `#94a3b8` | Secondary text |
| `--color-text-tertiary` | `#475569` | Disabled, placeholders |
| `--color-border` | `#1e293b` | Default borders |
| `--color-success` | `#4ade80` | Success states |
| `--color-warning` | `#fbbf24` | Warning states |
| `--color-error` | `#f87171` | Error states |
| `--font-mono` | `'JetBrains Mono', 'Fira Code', monospace` | Code, data |
| `--font-sans` | `'Inter', system-ui, sans-serif` | UI, prose |
| `--radius-default` | `4px` | Standard radius |

## Ready-to-Use Prompts

**Prompt 1 — Full page build:**
> Build a dashboard page using the Agency Techie design system. Dark background (#0d1117), cards on #161b22 with 1px #1e293b borders and 6px radius. Primary accent is #22d3ee. Use JetBrains Mono for all data/metrics and Inter for labels and descriptions. Navigation bar at 56px height with #94a3b8 nav text. Dense 16px card gaps.

**Prompt 2 — Component build:**
> Create a data table component. Background #161b22, header row #1c2333, row hover #243044. Text in #e2e8f0, secondary columns in #94a3b8. Borders 1px #1e293b. Use JetBrains Mono 14px for data cells, Inter 12px/500 for column headers. Sort indicators in #22d3ee.

**Prompt 3 — Form build:**
> Design a settings form. Inputs: #161b22 background, 1px #1e293b border, 4px radius, 14px Inter. Focus state: #22d3ee border with 0 0 0 3px rgba(34,211,238,0.1) glow. Labels: 12px Inter 500 #94a3b8. Primary submit button: #22d3ee background, #0d1117 text, 500 weight.

**Prompt 4 — API documentation page:**
> Build an API reference page. Left sidebar navigation on #161b22, content area on #0d1117. Endpoint methods (GET, POST) as badges with 2px radius — GET in #4ade80 text on rgba(74,222,128,0.1), POST in #60a5fa on rgba(96,165,250,0.1). Code examples in JetBrains Mono 14px on #161b22 blocks with #1e293b borders. Response fields in a data table.
