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

# Design System: Agency Creative — Agent Prompt Guide

## Quick Colour Reference

| CSS Variable | Hex | Role |
|-------------|-----|------|
| `--color-primary` | `#7c3aed` | Primary purple |
| `--color-primary-light` | `#a78bfa` | Light purple, hover states |
| `--color-accent` | `#ec4899` | Pink accent |
| `--color-accent-light` | `#f472b6` | Light pink, hover |
| `--color-gradient` | `linear-gradient(135deg, #7c3aed, #ec4899)` | Signature gradient |
| `--color-bg-dark` | `#0f0f0f` | Dark mode background |
| `--color-bg-light` | `#ffffff` | Light mode background |
| `--color-surface-dark` | `#18181b` | Dark mode cards |
| `--color-surface-light` | `#fafafa` | Light mode cards |
| `--color-text-dark` | `#f8fafc` | Dark mode text |
| `--color-text-light` | `#0f0f0f` | Light mode text |
| `--color-text-secondary` | `#a1a1aa` | Secondary text (dark) |
| `--color-border-dark` | `#27272a` | Dark mode borders |
| `--color-border-light` | `#e4e4e7` | Light mode borders |
| `--color-success` | `#34d399` | Success states |
| `--color-error` | `#f87171` | Error states |
| `--font-display` | `'Space Grotesk', system-ui, sans-serif` | Headings |
| `--font-body` | `'Inter', system-ui, sans-serif` | Body text |
| `--radius-card` | `16px` | Card/container radius |
| `--radius-pill` | `999px` | Button radius |

## Ready-to-Use Prompts

**Prompt 1 — Hero section:**
> Build a hero section using the Agency Creative design system on dark background #0f0f0f. Headline in Space Grotesk 80px/700 with gradient text fill (linear-gradient 135deg #7c3aed to #ec4899 with background-clip text). 13px uppercase overline in #a1a1aa with 0.12em letter-spacing above the headline. Body text 18px Inter #a1a1aa, max 560px. Two buttons: primary pill with gradient background and 0 8px 32px rgba(124,58,237,0.3) glow, secondary pill with 2px #7c3aed border.

**Prompt 2 — Portfolio grid:**
> Create a portfolio case study grid on #0f0f0f. Cards with 16px radius on #18181b with 1px #27272a border. Card image takes full width with 0px top radius bleed. Below: 13px overline in uppercase #a1a1aa, 28px Space Grotesk 600 title in #f8fafc, 14px Inter description in #a1a1aa. Cards lift 4px on hover with 300ms spring easing and gain 0 12px 40px rgba(0,0,0,0.3) shadow. 3-column desktop, 2-column tablet, 1-column mobile.

**Prompt 3 — Services section (light mode):**
> Design a services section on #ffffff background. Section title: 48px Space Grotesk 700 #0f0f0f with gradient text fill on the emphasised word. Feature cards on #fafafa with 16px radius and 1px #e4e4e7 border. Each card: 48px gradient icon area, 22px Space Grotesk title, 16px Inter description in #52525b. Cards hover with 0 12px 40px rgba(0,0,0,0.08) shadow and -4px translateY.

**Prompt 4 — Contact/CTA section:**
> Build a full-width CTA section with gradient background (135deg #7c3aed to #ec4899). Display text 64px Space Grotesk 700 #ffffff centred. Subtext 18px Inter 400 rgba(255,255,255,0.85). White pill button: #ffffff background, #7c3aed text, 15px/600. On hover: translateY(-2px) with 0 8px 24px rgba(0,0,0,0.2) shadow. Vertical padding 120px.
