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

# Agency Feminine — Agent Prompt Guide

## Quick Colour Reference

| CSS Variable | Hex | Role |
|-------------|-----|------|
| `--color-primary` | `#d4a5a5` | Dusty rose — primary accent |
| `--color-primary-hover` | `#c79393` | Darker rose — hover |
| `--color-primary-light` | `#e8cece` | Light rose — backgrounds |
| `--color-accent` | `#9caf88` | Sage green — secondary |
| `--color-accent-hover` | `#8a9d76` | Darker sage — hover |
| `--color-bg` | `#fdf6ee` | Cream page background |
| `--color-surface` | `#ffffff` | Card/elevated surface |
| `--color-surface-alt` | `#f8f0e5` | Alternate section background |
| `--color-text` | `#3d3530` | Primary text (warm dark) |
| `--color-text-secondary` | `#7a6e65` | Secondary text |
| `--color-text-tertiary` | `#b0a59c` | Tertiary/placeholder |
| `--color-border` | `#e8ddd0` | Default border |
| `--color-success` | `#9caf88` | Success (sage green) |
| `--color-warning` | `#d4a56a` | Warning (warm amber) |
| `--color-error` | `#c97070` | Error (soft red) |
| `--font-serif` | `'Cormorant Garamond', Georgia, serif` | Headings |
| `--font-sans` | `'Lato', system-ui, sans-serif` | Body text |
| `--radius-default` | `12px` | Standard radius |
| `--radius-card` | `16px` | Card radius |
| `--radius-pill` | `999px` | Button radius |

## Ready-to-Use Prompts

**Prompt 1 — Landing hero:**

> Build a hero section on cream (#fdf6ee) background. Centred layout, max-width 720px. Overline: 12px Lato 400 uppercase #b0a59c with 0.06em tracking. Headline: 56px Cormorant Garamond italic 400 #3d3530 with -0.01em tracking. Subtext: 18px Lato 300 #7a6e65 with 1.8 line-height. Two pill buttons below: primary #d4a5a5/#fff, secondary transparent with 1.5px #d4a5a5 border. 120px vertical padding.

**Prompt 2 — Services/offering cards:**

> Create a 3-column card grid on #fdf6ee. Cards: #ffffff, 16px radius, 1px #e8ddd0 border, 32px padding, 0 2px 12px rgba(61,53,48,0.06) shadow. Each card: decorative icon in #d4a5a5 at top, 22px Cormorant 500 title, 16px Lato 300 #7a6e65 description (1.75 line-height). Hover: translateY(-2px) with 0 4px 24px rgba(61,53,48,0.08) shadow. 400ms ease-in-out transition.

**Prompt 3 — Testimonial section:**

> Design a testimonial block on #f8f0e5 background. Centred, max-width 640px. Large decorative quotation mark in #d4a5a5 above. Quote text in Cormorant Garamond italic 24px #3d3530 with 1.5 line-height. Attribution below: 14px Lato 400 #7a6e65, name in #3d3530 weight 500. Subtle 1px #e8ddd0 separator between quote and attribution. 80px vertical padding.

**Prompt 4 — Contact form:**

> Build a contact form on #ffffff surface with 16px radius and 32px padding. Form labels: 12px Lato 400 #7a6e65 with 0.05em letter-spacing. Inputs: #ffffff background, 1px #e8ddd0 border, 12px radius, 15px Lato 300, 14px 18px padding. Focus: #d4a5a5 border with 0 0 0 4px rgba(212,165,165,0.12) glow. Textarea: 120px min-height. Submit: full-width pill button #d4a5a5/#fff, 14px Lato 500, 14px 32px padding.
