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

# Design System: Corporate Modern — Agent Prompt Guide

## Quick Colour Reference

| CSS Variable | Hex | Role |
|-------------|-----|------|
| `--color-primary` | `#0891b2` | Teal — CTAs, links, active states |
| `--color-primary-light` | `#22d3ee` | Hover accents, badges |
| `--color-primary-dark` | `#0e7490` | Active/pressed states |
| `--color-primary-subtle` | `#ecfeff` | Tinted backgrounds |
| `--color-text` | `#1a1a2e` | Headings, primary text |
| `--color-text-body` | `#334155` | Paragraph text |
| `--color-text-secondary` | `#64748b` | Captions, metadata |
| `--color-text-tertiary` | `#94a3b8` | Disabled, placeholders |
| `--color-surface` | `#FFFFFF` | Page background |
| `--color-surface-alt` | `#F8FAFC` | Alternate surfaces |
| `--color-border` | `#E2E8F0` | Default borders |
| `--color-border-strong` | `#CBD5E1` | Hover/active borders |
| `--color-success` | `#059669` | Success states |
| `--color-warning` | `#d97706` | Warning states |
| `--color-error` | `#dc2626` | Error states |

## Ready-to-Use Prompts

**Prompt 1 — SaaS landing page:**
> Build a SaaS landing page following DESIGN.md. White (#FFFFFF) background with a clean top navbar (white, 64px, 1px bottom border #E2E8F0). Hero section with a 56px/700 heading in #1a1a2e, 18px body text in #334155, and a teal (#0891b2) primary CTA button with 8px radius. Below, a 3-column feature grid with 12px-radius cards on #F8FAFC backgrounds. Use the 8px spacing grid throughout. Testimonial section on white with raised shadow cards. Footer in #1a1a2e with white text.

**Prompt 2 — Settings/admin page:**
> Create an admin settings page following DESIGN.md. Left sidebar (260px) on #F8FAFC with #E2E8F0 right border. Navigation items are 14px/500 in #64748b, active item in #0891b2 with #ecfeff background and 8px radius. Main content area on white with a 720px max-width form. Group related fields with 24px gaps, sections separated by 1px #E2E8F0 dividers. Inputs have #E2E8F0 borders, 8px radius, focus ring in teal. Save button in #0891b2, cancel in outlined secondary style.

**Prompt 3 — Data dashboard:**
> Build a data dashboard following DESIGN.md. Top navbar (64px, white, border-bottom #E2E8F0) with the product name in #1a1a2e/600 and teal notification badge. Main grid on #F8FAFC: KPI cards (white, 12px radius, border #E2E8F0) showing metrics in 32px/700 charcoal with trend arrows in #059669 or #dc2626. Chart containers are white cards with 24px padding. Data table with #F8FAFC header row, 14px/500 column headers in #64748b, and 16px/400 body cells in #334155 with alternating row shading.

**Prompt 4 — Pricing page:**
> Create a pricing page following DESIGN.md. Three pricing cards in a row (12px radius, #E2E8F0 border). The recommended plan has a teal (#0891b2) top border (3px) and a subtle #ecfeff background. Plan names in 24px/600, prices in 40px/700 #1a1a2e. Feature lists use 14px with #059669 checkmarks. CTA buttons: recommended plan gets primary teal, others get secondary outlined. Below, FAQ in accordion style with 1px dividers.
