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

# Design System: Corporate Traditional — Agent Prompt Guide

## Quick Colour Reference

| CSS Variable | Hex | Role |
|-------------|-----|------|
| `--color-primary` | `#1B365D` | Navy blue — headers, nav, primary buttons |
| `--color-primary-light` | `#2A4A7F` | Hover states |
| `--color-primary-dark` | `#0F2341` | Active states, footer |
| `--color-accent` | `#B8860B` | Gold — CTAs, highlights, key links |
| `--color-accent-light` | `#D4A843` | Gold hover |
| `--color-text` | `#333333` | Body text |
| `--color-text-heading` | `#1B365D` | Headings |
| `--color-text-secondary` | `#6B7280` | Captions, metadata |
| `--color-surface` | `#FFFFFF` | Page background |
| `--color-surface-alt` | `#F5F5F0` | Alternate sections |
| `--color-border` | `#D1D5DB` | Borders, dividers |
| `--color-success` | `#166534` | Success states |
| `--color-warning` | `#92400E` | Warning states |
| `--color-error` | `#991B1B` | Error states |

## Ready-to-Use Prompts

**Prompt 1 — Full page layout:**
> Build a landing page following DESIGN.md. Use the navy (#1B365D) top navigation bar at 64px height with white text. Hero section has a serif H1 (Georgia, 48px) on a #F5F5F0 background with 96px vertical padding. Below, a 3-column feature grid using cards with 1px #D1D5DB borders and 4px border-radius. Primary CTA button in navy with gold (#B8860B) accent for the secondary action. Footer in #0F2341 with white text.

**Prompt 2 — Form page:**
> Create a multi-step form page following DESIGN.md. White background, centred container at 680px max-width. Each input has a 1px #D1D5DB border, 4px radius, and transitions to #1B365D border on focus with a 3px navy ring. Labels are 14px weight-600 in #333333. Primary submit button in #1B365D, secondary cancel in outlined style. Error states use #991B1B borders with inline error messages below fields.

**Prompt 3 — Dashboard layout:**
> Build a dashboard following DESIGN.md. Left sidebar (280px) in #1B365D with white navigation links. Main content area on #F5F5F0 background. Stat cards in white with 1px borders and raised shadow (0 1px 3px rgba(27,54,93,0.06)). Data tables use #EEF0F4 header rows, alternating white/#F5F5F0 body rows, and 1px #D1D5DB borders. Gold (#B8860B) for key metric highlights and important action buttons.
