# Wireframe SVG Style Guide

> **Purpose:** Self-contained specification for generating professional SVG wireframes from ASCII art.
> This document is sent as the FULL prompt to a Sonnet Task agent alongside the ASCII wireframe.
> Referenced by: `step-05-deploy.md` (Section 8: Generate SVG Wireframes)

## Agent Prompt Template

> **USAGE:** Read this section, replace `{placeholders}` with actual wireframe data, send as the complete prompt to a Task(sonnet) agent. The agent returns ONLY the SVG markup string.

---

You are a professional UI wireframe designer. Convert the following ASCII wireframe into a high-quality SVG wireframe that looks like a modern web application mockup.

### Input

**Screen name:** `{screenName}`
**Module:** `{moduleName}`
**Section type:** `{sectionType}` (list|detail|create|dashboard|approve)
**ASCII wireframe:**
```
{asciiContent}
```

**Element metadata (if available):**
```json
{elementsJson}
```

### Output Requirements

Return ONLY the SVG markup as a single `<svg>` element. No explanation, no markdown, no code fences.
The SVG must be self-contained (no external fonts, no external CSS, no `<image>` tags).

### Visual Design System

#### Viewport & Canvas
- `viewBox="0 0 960 {dynamicHeight}"` — width fixed at 960, height adapts to content
- Minimum height: 540 for list views, 720 for detail views, 480 for dashboards
- Background: `#1e293b` (dark card background matching the HTML theme)
- 24px padding on all sides
- Root element: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 {height}">`

#### Color Palette (MUST use these exact colors)

| Role | Color | Usage |
|------|-------|-------|
| Background | `#1e293b` | Main canvas, card backgrounds |
| Surface | `#0f172a` | Input fields, table cells, nested panels |
| Border | `#334155` | All borders, dividers, table lines |
| Border light | `#475569` | Hover states, active borders |
| Primary | `#6366f1` | Primary buttons, active tabs, selected items |
| Primary hover | `#4f46e5` | Button hover state accent |
| Primary light | `#818cf8` | Links, column headers, highlighted text |
| Accent | `#06b6d4` | Secondary actions, info badges |
| Text bright | `#e2e8f0` | Headings, table header text, important labels |
| Text | `#b8c4d1` | Body text, table cell content |
| Text muted | `#8a9bb0` | Placeholders, secondary labels, pagination |
| Success | `#22c55e` | Active/approved status badges |
| Success bg | `rgba(34,197,94,0.15)` | Status badge background |
| Warning | `#eab308` | Pending/draft status badges |
| Warning bg | `rgba(234,179,8,0.15)` | Status badge background |
| Error | `#ef4444` | Error states, delete buttons |
| Gray | `#94a3b8` | Inactive/draft status |
| Gray bg | `rgba(100,116,139,0.15)` | Status badge background |
| Row hover | `rgba(99,102,241,0.05)` | Table row hover |
| Shadow | `rgba(0,0,0,0.25)` | Drop shadow for cards |

#### Typography (embedded via system fonts)

- Font family: `'Inter', 'Segoe UI', system-ui, sans-serif` (use `font-family` attribute on EVERY `<text>`)
- Page title: 18px, font-weight 600, color `#e2e8f0`
- Section heading: 14px, font-weight 600, color `#e2e8f0`
- Table header: 11px, font-weight 600, text-transform uppercase, letter-spacing 0.05em, color `#8a9bb0`
- Body text / table cells: 13px, font-weight 400, color `#b8c4d1`
- Button text: 13px, font-weight 500, color `#ffffff`
- Small text / badges: 11px, font-weight 500
- Placeholder text: 13px, font-weight 400, color `#8a9bb0`, font-style italic

---

### Component Patterns

#### Buttons (Primary)
```xml
<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="#6366f1"/>
<text x="{x+w/2}" y="{y+22}" text-anchor="middle"
      font-family="Inter,Segoe UI,system-ui,sans-serif" font-size="13"
      font-weight="500" fill="#ffffff">{label}</text>
```

#### Buttons (Secondary/Ghost)
```xml
<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="none" stroke="#334155" stroke-width="1"/>
<text x="{x+w/2}" y="{y+22}" text-anchor="middle"
      font-family="Inter,Segoe UI,system-ui,sans-serif" font-size="13"
      font-weight="500" fill="#b8c4d1">{label}</text>
```

#### Input Fields
```xml
<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
<text x="{x+12}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" fill="#8a9bb0" font-style="italic">{placeholder}</text>
```

#### Search Bar (input with magnifying glass icon)
```xml
<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
<circle cx="{x+22}" cy="{y+18}" r="7" fill="none" stroke="#8a9bb0" stroke-width="1.5"/>
<line x1="{x+27}" y1="{y+23}" x2="{x+31}" y2="{y+27}" stroke="#8a9bb0" stroke-width="1.5" stroke-linecap="round"/>
<text x="{x+40}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" fill="#8a9bb0" font-style="italic">Rechercher...</text>
```

#### Dropdown / Select
```xml
<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
<text x="{x+12}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" fill="#b8c4d1">{selectedValue}</text>
<path d="M{x+w-24},{y+16} l6,8 l6,-8" fill="#8a9bb0"/>
```

#### Data Table
- Header row: background `#0f172a`, text uppercase 11px, color `#8a9bb0`, letter-spacing 0.05em
- Data rows: alternating `#1e293b` and `rgba(15,23,42,0.5)`, height 44px
- Row hover: one sample row with `rgba(99,102,241,0.05)` fill
- Column dividers: `stroke="#334155"` at 0.5 opacity
- Cell padding: 16px horizontal
- Header height: 40px
- Action column (rightmost): 3-dot vertical ellipsis menu icon

#### Status Badges
```xml
<!-- Active/Approved (green) -->
<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(34,197,94,0.15)"/>
<circle cx="{x+10}" cy="{y+11}" r="3" fill="#4ade80"/>
<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="11" font-weight="500" fill="#4ade80">{label}</text>

<!-- Pending/Warning (yellow) -->
<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(234,179,8,0.15)"/>
<circle cx="{x+10}" cy="{y+11}" r="3" fill="#facc15"/>
<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="11" font-weight="500" fill="#facc15">{label}</text>

<!-- Inactive/Draft (gray) -->
<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(100,116,139,0.15)"/>
<circle cx="{x+10}" cy="{y+11}" r="3" fill="#94a3b8"/>
<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="11" font-weight="500" fill="#94a3b8">{label}</text>
```

#### Cards / Panels
```xml
<defs>
  <filter id="shadow" x="-2%" y="-2%" width="104%" height="104%">
    <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.25"/>
  </filter>
</defs>
<rect x="{x}" y="{y}" width="{w}" height="{h}" rx="12" fill="#1e293b" stroke="#334155" stroke-width="1" filter="url(#shadow)"/>
```

#### Tabs
```xml
<!-- Active tab -->
<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="#6366f1"/>
<text x="{x+w/2}" y="{y+22}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" font-weight="500" fill="#ffffff">{label}</text>

<!-- Inactive tab -->
<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="transparent"/>
<text x="{x+w/2}" y="{y+22}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" font-weight="400" fill="#8a9bb0">{label}</text>
```

#### Pagination
```xml
<text x="{x}" y="{y}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="12" fill="#8a9bb0">1-25 de 142</text>
<!-- Active page -->
<rect x="{px}" y="{py}" width="28" height="28" rx="6" fill="#6366f1"/>
<text x="{px+14}" y="{py+18}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="12" font-weight="500" fill="#fff">1</text>
<!-- Inactive page -->
<rect x="{px+32}" y="{py}" width="28" height="28" rx="6" fill="none" stroke="#334155"/>
<text x="{px+46}" y="{py+18}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="12" fill="#8a9bb0">2</text>
```

#### KPI Cards (Dashboard)
```xml
<rect x="{x}" y="{y}" width="{w}" height="80" rx="8" fill="#334155"/>
<text x="{x+w/2}" y="{y+35}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="22" font-weight="700" fill="#e2e8f0">{value}</text>
<text x="{x+w/2}" y="{y+55}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="11" fill="#8a9bb0">{label}</text>
```

#### Chart Placeholder (Dashboard)
```xml
<rect x="{x}" y="{y}" width="{w}" height="180" rx="8" fill="none"
      stroke="#334155" stroke-dasharray="6,4"/>
<text x="{x+w/2}" y="{y+90}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" fill="#8a9bb0">{chartLabel}</text>
```

#### Back Button / Navigation
```xml
<path d="M{x},{y+10} l-8,-10 l8,-10" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<text x="{x+8}" y="{y+5}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" font-weight="500" fill="#818cf8">Retour a la liste</text>
```

#### Form Layout (2-column)
```xml
<!-- Label -->
<text x="{x}" y="{y}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="12" font-weight="500" fill="#8a9bb0">{fieldLabel}</text>
<!-- Input below label (12px gap) -->
<rect x="{x}" y="{y+8}" width="{colWidth}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
<text x="{x+12}" y="{y+33}" font-family="Inter,Segoe UI,system-ui,sans-serif"
      font-size="13" fill="#b8c4d1">{value or placeholder}</text>
```

---

### Section-Specific Layout Rules

**List Page Layout:**
1. Page header (title left + primary action button right) at y=24
2. Filter bar below header (search + dropdowns) at y=72
3. Data table occupying remaining space at y=128
4. Pagination bar at bottom

**Detail Page Layout:**
1. Back button + breadcrumb at y=24
2. Entity header (code + name + status badge + action buttons) at y=60
3. Horizontal divider at y=100
4. Tab bar at y=112
5. Active tab content area at y=160

**Create/Edit Form Layout:**
1. Form title at y=24
2. Two-column grid of form fields (label above input) starting at y=64
3. Horizontal divider before actions
4. Cancel + Submit buttons right-aligned at bottom

**Dashboard Layout:**
1. KPI cards in a 4-column grid at y=24
2. 2-column grid of chart placeholders at y=128
3. Optional filter bar above KPIs

---

### Quality Rules (MANDATORY)

1. **Every `<text>` element** MUST have the `font-family` attribute set
2. **No external dependencies** — no `<use>`, no `<image>`, no `xlink:href`
3. **All text must be readable** — contrast ratio >=4.5:1 on its background
4. **Consistent spacing** — 24px margin, 16px padding, 12px gap between form fields
5. **Rounded corners everywhere** — `rx="6"` minimum for interactive elements, `rx="12"` for cards
6. **No `<style>` blocks** — all styling via inline attributes (inline SVG in HTML can conflict with host CSS)
7. **viewBox only, no width/height on root `<svg>`** — let the container handle sizing
8. **Use realistic but fictional data** — French locale, Swiss franc format (12'500.00 CHF), European dates (15.01.2026)
9. **Match the ASCII structure exactly** — same number of columns, same sections, same buttons. Do not add or remove UI elements.
10. **Ensure table columns match** — if ASCII shows 5 columns, SVG must show exactly 5 columns with the same headers

---

### Fallback

If you cannot produce a valid SVG (e.g., ASCII is too ambiguous or malformed), return EXACTLY the string:
```
FALLBACK_ASCII
```
This signals the system to use the ASCII wireframe instead.

---

## Orchestration Instructions

> **FOR the agent executing step-03 or step-05**: Follow this process to generate SVGs.

### Step-by-step process:

1. **Read** this file to get the prompt template (the "Agent Prompt Template" section above)

2. **Collect** all wireframes that need SVG:
```javascript
const wireframesToProcess = [];
for (const [moduleCode, wireframes] of Object.entries(EMBEDDED_ARTIFACTS.wireframes)) {
  for (let i = 0; i < wireframes.length; i++) {
    const wf = wireframes[i];
    if (wf.content && !wf.svgContent) {
      wireframesToProcess.push({ moduleCode, index: i, wf });
    }
  }
}
```

3. **Spawn parallel Task(sonnet) agents** — ONE per wireframe, ALL in a single message:
```
FOR EACH { moduleCode, index, wf } in wireframesToProcess:
  Task(sonnet) prompt = this file's prompt template with substitutions:
    {screenName}  = wf.screen
    {moduleName}  = moduleCode
    {sectionType} = wf.section
    {asciiContent} = wf.content
    {elementsJson} = JSON.stringify(wf.elements || [])
```

4. **Collect and validate** results:
```javascript
FOR EACH result:
  // Strip markdown code fences if agent wrapped output
  let svg = result.trim();
  if (svg.startsWith('```')) {
    svg = svg.replace(/^```(?:xml|svg|html)?\n?/, '').replace(/\n?```$/, '').trim();
  }

  IF svg starts with "<svg" AND svg contains "</svg>":
    EMBEDDED_ARTIFACTS.wireframes[moduleCode][index].svgContent = svg
  ELSE:
    // Graceful fallback: leave svgContent as null
    // HTML renders ASCII automatically
```

5. **Display summary** (non-blocking):
```
SVG wireframes: {generated}/{total} generated successfully
```

> **CRITICAL:** SVG generation is NEVER blocking. If all generations fail, deployment
> proceeds with ASCII-only wireframes. SVG is an enhancement, not a requirement.
