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

# Design System: Corporate Friendly — Agent Prompt Guide

## Quick Colour Reference

| CSS Variable | Hex | Role |
|-------------|-----|------|
| `--color-primary` | `#3b82f6` | Blue — buttons, links, active states |
| `--color-primary-light` | `#60a5fa` | Hover highlights |
| `--color-primary-dark` | `#2563eb` | Active/pressed |
| `--color-primary-subtle` | `#eff6ff` | Tinted backgrounds |
| `--color-accent` | `#f97316` | Orange — secondary CTAs, badges |
| `--color-accent-light` | `#fb923c` | Accent hover |
| `--color-accent-subtle` | `#fff7ed` | Accent backgrounds |
| `--color-text` | `#111827` | Headings |
| `--color-text-body` | `#374151` | Body text |
| `--color-text-secondary` | `#6b7280` | Captions, helpers |
| `--color-surface` | `#FFFFFF` | Page background |
| `--color-surface-alt` | `#F9FAFB` | Alternate sections |
| `--color-surface-warm` | `#FFFBF5` | Testimonial/trust sections |
| `--color-border` | `#E5E7EB` | Default borders |
| `--color-success` | `#16a34a` | Success states |
| `--color-warning` | `#eab308` | Warning states |
| `--color-error` | `#ef4444` | Error states |

## Ready-to-Use Prompts

**Prompt 1 — Healthcare/education landing page:**

> Build a landing page following DESIGN.md. White background with a 68px navbar (white, bottom border #E5E7EB). Hero with 36px/700 heading in #111827, 18px body in #374151, primary blue (#3b82f6) CTA with 12px radius, and a secondary orange (#f97316) button. Feature section on #F9FAFB with 3 cards (16px radius, #E5E7EB border) each with a blue icon in a circular #eff6ff container. Testimonial section on #FFFBF5 warm background with rounded cards and friendly avatar photos. All spacing follows the 8px grid with generous 64–80px section breaks.

**Prompt 2 — User onboarding flow:**

> Create a multi-step onboarding wizard following DESIGN.md. Centred container at 560px max-width on white background. Step indicator at top with blue (#3b82f6) filled circles for completed steps, outlined for upcoming. Each step has a friendly H2 (28px/600), descriptive body text (16px/1.65 line-height), and form inputs with 12px radius and 1.5px #E5E7EB borders that transition to blue on focus. Progress bar in #3b82f6. Primary "Continue" button full-width in blue, "Back" as ghost button. Generous 32px spacing between form fields.

**Prompt 3 — Patient/student portal dashboard:**

> Build a portal dashboard following DESIGN.md. Left sidebar (280px) on #F9FAFB with rounded (8px) nav items — active item has #eff6ff background and #3b82f6 text. Main area on white. Welcome message with the user's name in 28px/600. Stat cards in a 3-column grid (16px radius, 1px #E5E7EB border) with large metric numbers in #111827 and orange (#f97316) accent on important callouts. Upcoming appointments/tasks in a clean list with 16px spacing, blue dots for status, and friendly time formatting. Action buttons in blue, secondary actions in outlined style.
