From c85ece46b90e245776d00fc3fb279ada04ed0820 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:34:36 +0200
Subject: [PATCH 01/12] chore(agents): frontend-builder must invoke Skill
 frontend-design before UI work

Adds a mandatory pre-step to the frontend-builder agent prompt: invoke the
frontend-design skill at sprint start before creating or modifying any
visible UI component. DESIGN.md rules project-specific tokens; the skill
covers universal principles (typographic hierarchy, alignment, contrast,
focus, density, motion). Skip allowed only for pure logic/data-layer work
with no visual change.

Authored locally during sprint 6 (uncommitted in worktree), bundled into
sprint 7 hygiene as the first commit so it takes effect immediately for
the design refresh work.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .claude/agents/frontend-builder.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/.claude/agents/frontend-builder.md b/.claude/agents/frontend-builder.md
index 4c52a72..450b4f1 100644
--- a/.claude/agents/frontend-builder.md
+++ b/.claude/agents/frontend-builder.md
@@ -11,10 +11,22 @@ You are the **Frontend Builder** for the Mimic project (BAS WebUI based on MITRE
 
 Read these files first, in order:
 1. `SPEC.md` — global spec and technical decisions.
-2. `DESIGN.md` — UI design system. **Mandatory** — every component you build must follow it.
+2. `DESIGN.md` — UI design system. **Mandatory** — every component you build must follow it (tokens, slab, btn-outline, etc.).
 3. The **backend-builder's summary** for the current sprint (in `tasks/todo.md` or the latest team-lead dispatch). This is your API contract.
 4. `tasks/lessons.md` — past mistakes to avoid.
 
+## Mandatory skill — `frontend-design`
+
+Before creating or modifying **any visible UI component** (new page, new component, layout change, state additions like loading/error/empty), you MUST invoke the `frontend-design` skill once at the start of the sprint via:
+
+```
+Skill({ skill: "frontend-design" })
+```
+
+`DESIGN.md` rules the **project-specific** tokens and motifs (slab, btn-outline, palette, BAS layout patterns). `frontend-design` adds the **universal** principles `DESIGN.md` doesn't restate: typographic hierarchy, alignment grid, contrast ratios, focus states, density rhythm, motion restraint. The two are complementary — `DESIGN.md` wins on tokens/component shape, `frontend-design` wins on visual craft.
+
+Exception: pure logic/data-layer work with no visible UI change (hook refactor, query key rename, internal type tightening) — skip the skill, note it in your summary.
+
 ## What you build
 
 - React components under `frontend/src/components/`

From 5627d7dcfadbe27652790e16fd963592e42393dd Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:34:45 +0200
Subject: [PATCH 02/12] =?UTF-8?q?docs(sprint=207):=20plan=20=E2=80=94=20te?=
 =?UTF-8?q?rminal-SOC=20design=20refresh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

9 binding decisions locked with user 2026-06-09 (4-question + 4-question
+ 3-question rounds). Visual direction Bloomberg / terminal SOC. Border
radius 0 except status pills and avatars. Palette kept (primary blue +
slab + canvas/paper/cloud/fog/ink), ADD success/warn semantic tokens.
Scope: 8 pages + 17 components + tokens + DESIGN.md rewrite, all in one
sprint. JetBrains Mono for data only (Inter stays for body/headers).
Light + dark both kept. Zero transitions (brutalist).

Plan validated by spec-reviewer pre-pass: APPROVED with 3 findings
addressed inline (D9 added, R2 reworded, semantic tokens promoted from
optional to locked).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 tasks/todo.md | 370 +++++++++++++++++---------------------------------
 1 file changed, 121 insertions(+), 249 deletions(-)

diff --git a/tasks/todo.md b/tasks/todo.md
index 7d867c4..a926489 100644
--- a/tasks/todo.md
+++ b/tasks/todo.md
@@ -1,281 +1,153 @@
-# Sprint 6 — Engagement export (Markdown + CSV + PDF)
+# Sprint 7 — Design Refresh: Terminal-SOC Aesthetic
 
-> Branch : `sprint/6-export` · Worktree : `.claude/worktrees/sprint-6-export` · Base : `main` @ `678ee8f`
+> Branch : `sprint/7-design` · Worktree : `.claude/worktrees/sprint-7-design` · Base : `main` @ `e27babe`
 
-## §0 — Binding decisions (locked with the user 2026-06-07)
+## §0 — Binding decisions (locked with user, 2026-06-09)
 
-1. **Scope du sprint** : export d'un engagement (header + toutes ses simulations RT + SOC) vers Markdown, CSV et PDF — clôt la boucle « remplace l'utilisation d'un fichier excel plat partagé entre la redteam et les analystes SOC en fin de mission ».
-2. **Formats livrés** : Markdown, CSV, PDF (3 formats). JSON exclu (redondant avec l'API existante).
-3. **RBAC** : `admin` + `redteam` peuvent exporter. **SOC = pas d'accès** (pas de bouton dans l'UI, endpoint `/api/engagements/<eid>/export` → 403). Cohérent avec le pattern templates sprint 5 (livrable RedTeam).
-4. **Contenu de l'export** : Engagement header (name, description, dates, status, created_by, created_at) + **toutes** les simulations de l'engagement, avec leurs champs RT (name, techniques, tactics, description, commands, prerequisites, executed_at, execution_result, status) ET SOC (log_source, logs, soc_comment, incident_number). Ordre des simulations : `id ASC` (ordre de création).
-5. **Déclenchement UI** : un bouton **split-button dropdown** sur `EngagementDetailPage` libellé `[Export ▼]`, qui ouvre un menu `Markdown / CSV / PDF`. Click → download direct (Blob + `URL.createObjectURL`). Pas de modal de configuration. Pattern réutilisé du dropdown sprint 5 (`SimulationList`).
+1. **Visual direction**: Bloomberg / Terminal-SOC — dense, brutalist, semantic colors strong, no ornament.
+2. **Border-radius**: **0 everywhere** except status pills (`rounded-pill`) and avatars (round). All buttons, cards, modals, inputs, dropdowns, tables, tags → angular.
+3. **Palette**: KEEP current (`#024ad8` primary blue, `slab #111827`, `canvas/paper/cloud/fog/ink` light+dark vars). ADD semantic tokens `success-green` + `warn-amber` (confirmed scope add — needed for SOC-grade status legibility on dashboards and badges).
+4. **Scope**: Refonte globale en 1 sprint (all 8 pages + 17 components + tokens + DESIGN.md).
+5. **Monospace**: data-only — JetBrains Mono for IDs, dates ISO, commands, execution output, MITRE techniques, metrics. Inter stays for body/labels/headers.
+6. **Mono font**: JetBrains Mono, bundled locally via `@fontsource-variable/jetbrains-mono` (consistent with existing Inter bundle).
+7. **Modes**: KEEP light + dark both. Toggle stays.
+8. **Animations**: **Brutalist — zero transition**. Remove all `transition-*` utilities, focus rings sharp, hover instantaneous.
+9. **Display scale reduction**: locked. `display-xxl 72→40`, `display-xl 56→32`, `display-lg 44→28`, `display-md 32→24`, `display-sm 24→20`, `display-xs 20→16`. Headers stay modest in terminal aesthetic — no editorial flourish at hero scale.
 
-### Décisions techniques arrêtées par le team-lead (à challenger par spec-reviewer)
+## §1 — Pre-work checks (team-lead, before dispatch)
 
-6. **Endpoint backend** : **un seul** endpoint `GET /api/engagements/<eid>/export?format=md|csv|pdf` plutôt que 3 endpoints distincts. Une seule route à protéger (RBAC), un seul test d'intégration RBAC, switch sur `format` en interne. Format inconnu → **400** `{error: "format must be one of: md, csv, pdf"}`. Format manquant → **400** (pas de défaut implicite — évite l'ambiguïté).
-7. **Markdown** : généré via string templating Python (pas de lib externe). Simple, déterministe, testable par assertion de sous-chaînes.
-8. **CSV** : généré via `csv.writer` (stdlib). Une ligne d'en-tête + N lignes simulations. Colonnes : `id, name, status, techniques (joined "|"), tactics (joined "|"), description, commands, prerequisites, executed_at, execution_result, log_source, logs, soc_comment, incident_number, created_at, updated_at`. **Pas de header engagement dans le CSV** (format machine-readable strict) ; l'engagement context sort dans le filename.
-9. **PDF** : généré via **WeasyPrint** (Python HTML→PDF, lib mature, qualité de rendu pro, dépendances système cairo/pango/gdk-pixbuf à ajouter au `python:3.12-slim` du Dockerfile). Pipeline : on génère **le même HTML** que pour le Markdown (mais wrappé en `<html>...<style>...</html>`), puis WeasyPrint le rend en PDF. Le styling CSS est inline (≤ 30 lignes : hierarchy h1/h2/h3, code-block monospace, alternance fond pour les simulations). Pas de logo / page de garde — keep it simple.
-10. **Filename convention** : `engagement-<id>-<slugified-name>-YYYYMMDD.{ext}`. Slugification :
-    ```python
-    import unicodedata, re
-    normalized = unicodedata.normalize('NFKD', name).encode('ascii', 'ignore').decode()
-    slug = re.sub(r'[^a-z0-9]+', '-', normalized.lower()).strip('-')[:60] or "unnamed"
-    ```
-    Le NFKD-strip enlève les accents proprement (`Opération` → `Operation`), le fallback `"unnamed"` couvre le edge case d'un nom 100 % non-alphanum (`"---!!!"` → `""` → `"unnamed"`). `YYYYMMDD` = `date.today().strftime('%Y%m%d')` côté serveur. Le frontend lit `Content-Disposition` pour le nom du fichier.
-11. **Content-Type** : `text/markdown; charset=utf-8`, `text/csv; charset=utf-8`, `application/pdf`.
-12. **Génération synchrone** : Flask renvoie le fichier dans la même requête (un engagement = quelques dizaines de simulations max, génération < 500 ms même PDF). Pas de job async.
-13. **Pas de cache** : chaque export régénère depuis la DB (état toujours frais).
-14. **Frontend client** : pour télécharger, on utilise un fetch avec `responseType: 'blob'`, on lit `Content-Disposition` pour le filename, puis `URL.createObjectURL` + `<a>` invisible + `click()`. Pas de navigation. Le bouton `[Export ▼]` utilise la classe **`btn-outline`** (la même que le bouton `Edit` du header existant — cohérence visuelle directe). Le dropdown wrapper réutilise le même token set que le sprint 5 `NewSimulationDropdown` (`shadow-floating` + `dark:shadow-floating-dark`, `bg-canvas` + `dark:bg-fog`).
+- [ ] Confirm `tasks/lessons.md` has nothing contradicting this brief
+- [ ] Verify uncommitted `.claude/agents/frontend-builder.md` patch (Skill mandatory) is restored in worktree — sprint hygiene
+- [ ] Send plan to **spec-reviewer** for 2-pass approval (vs SPEC.md, vs §0 binding decisions). MUST be APPROVED before any code touches `frontend/`.
+- [ ] After approval: dispatch frontend-builder with this todo as brief.
 
-### Points OUVERTS pour le spec-reviewer (à valider Pass 1)
+## §2 — Sprint hygiene (commit #1)
 
-- **WeasyPrint vs alternatives** : retenu pour rendu pro + pipeline HTML mutualisable. Alternatives écartées : `reportlab` (layout programmatique = beaucoup plus de code), `xhtml2pdf` (rendu inférieur), `pdfkit + wkhtmltopdf` (binaire externe en archive partielle). Le coût Dockerfile (≈ 50 MB de libs cairo/pango) est accepté.
-- **CSV sans header engagement** : choix de pureté tabulaire (Excel-friendly direct). Le team-lead a tranché. Spec-reviewer doit confirmer ou proposer la variante "1 ligne commentaire `# Engagement: <name>`".
-- **Pas de JSON export** : redondant avec l'API. À confirmer.
-- **Statut `done` inclus comme tous les autres** : pas de filtre par défaut. L'utilisateur exporte toujours TOUT.
+- [ ] `chore(agents): frontend-builder must invoke Skill frontend-design before UI work` — lands BEFORE design work so the agent itself triggers the Skill on first call this sprint.
 
----
+## §3 — Foundation: DESIGN.md + tokens (commits #2–#4)
 
-## §1 — Backend (Sonnet · backend-builder)
+### §3.1 DESIGN.md rewrite (commit #2)
 
-### Modèle de données
-**Aucun changement** de modèle. Pas de migration. L'export est en lecture seule sur les modèles existants `Engagement` + `Simulation`.
+- [ ] Replace current HP-catalog doc (346 lines, off-brand) with terminal-SOC spec covering:
+  - **Overview**: brutalist BAS Purple Team console, angular surfaces, semantic color signals, data-monospace hybrid
+  - **Colors**: keep all existing tokens with **role redefinition** for terminal-SOC context. Primary = neutral action. Bloom-deep/coral = destructive/alert. ADD `success` (green) + `warn` (amber) — locked §0 D3 — with light + dark variants and WCAG AA contrast on slab and canvas surfaces
+  - **Typography**: Inter (body/headers/labels) + JetBrains Mono (data). Concrete tier table with size/weight/line-height
+  - **Layout**: tighter spacing (replace `section 80px` → `section 48px`; halve card padding on dense surfaces)
+  - **Shapes**: ALL radii = 0 except `rounded-pill` reserved for status badges and avatars
+  - **Components**: re-document `btn-*`, `text-input`, `card-*`, `badge-*`, `nav-*`, `modal-*` with brutalist specs (no shadow, hairline borders, zero transition)
+  - **Do's/Don'ts**: zero rounded on conteneurs; zero transitions; semantic colors only on status surfaces; mono ONLY for data, never headers
+  - **Iteration guide**
+- [ ] Doc lives in English (in-repo).
 
-### Services / serializers
-- Nouveau module **`backend/app/services/export.py`** avec 3 fonctions pures testables unitairement :
-  - `render_engagement_markdown(engagement: Engagement, simulations: list[Simulation]) -> str`
-  - `render_engagement_csv(engagement: Engagement, simulations: list[Simulation]) -> str`
-  - `render_engagement_pdf(engagement: Engagement, simulations: list[Simulation]) -> bytes`
-- Le rendu Markdown réutilise `_enrich_techniques` + `_enrich_tactics` de `serializers.py` pour avoir `[{id, name}]` au lieu de juste les IDs.
-- Le rendu PDF construit l'HTML à partir d'un template Python `_render_engagement_html(engagement, simulations) -> str` (string templating, pas Jinja — KISS) **et le passe à `weasyprint.HTML(string=html).write_pdf()`. Important : le PDF est généré à partir des MÊMES DONNÉES (engagement + simulations) que le Markdown, PAS à partir du string Markdown — `_render_engagement_html` est un rendu distinct.**
-- **Rendu de `created_by`** : pour Markdown et CSV, on rend la `username` seule (`engagement.created_by.username`), pas la dict `{id, username}`. Pour la cohérence du livrable handoff. Idem pour `simulation.created_by`.
-- **MITRE non chargé** : si le bundle n'est pas chargé, `_enrich_techniques` retourne `tactics: []` silencieusement (cohérent avec `serialize_simulation` existant — pas de 503 dans l'export). Le render doit continuer sans crash. Test dédié exigé (cf. § Tests).
+### §3.2 Tailwind token refresh (commit #3)
 
-### Endpoint
-- Extension du blueprint `engagements_bp` existant. Path : `GET /api/engagements/<int:eid>/export?format=md|csv|pdf`.
-- Décorateur : `@role_required("admin", "redteam")`.
-- Logique :
-  1. Charger l'engagement (404 si absent).
-  2. Parse `format` query param. Format manquant ou inconnu → 400 `{error: "format must be one of: md, csv, pdf"}`.
-  3. Charger les simulations triées par `id ASC`.
-  4. Appeler la fonction `render_engagement_<fmt>(engagement, simulations)`.
-  5. Construire la `Response` avec `Content-Type`, `Content-Disposition: attachment; filename="<slug>.<ext>"`, et le body.
-- Filename helper : `_export_filename(engagement, ext) -> str` (slugifier + date).
+- [ ] `frontend/tailwind.config.ts`:
+  - `borderRadius`: keep `none: 0`, keep `pill: 9999px`. Drop or stop using `xs/sm/md/lg/xl` for surfaces — keep only if a badge variant needs `2px`
+  - ADD `fontFamily.mono`: `['JetBrains Mono Variable', 'JetBrains Mono', 'ui-monospace', 'monospace']`
+  - ADD semantic colors (locked §0): `success: { DEFAULT, soft }` (green) + `warn: { DEFAULT, soft }` (amber). Pull dark-mode variants from CSS vars too. Suggested anchors — `success #16a34a` (dark `#22c55e`), `warn #d97706` (dark `#f59e0b`); design-reviewer audits WCAG AA at both modes.
+  - Reduce `display-*` scale (locked §0): `display-xxl 72px → 40px`, `display-xl 56→32`, `display-lg 44→28`, `display-md 32→24`, `display-sm 24→20`, `display-xs 20→16` — terminal headers are modest
+  - Drop `tracking[0.7px]` and uppercase from `button-md` (still ALLCAPS via class but no letter-spacing)
+  - Drop shadow tokens or keep but ensure no component class applies them
+- [ ] `frontend/src/styles/index.css`:
+  - Drop `font-size: 16.5px` root bump (back to `16px` standard)
+  - Set body `line-height: 1.4`, tighten headings to 1.1
+  - Rewrite `.btn-primary/ink/outline/outline-ink`: `rounded-none`, NO `transition-colors`, keep `uppercase`, drop `tracking-[0.7px]`, keep `h-11` (touch target)
+  - Rewrite `.text-input`: `rounded-none`, focus border-primary sharp (no halo), no transition
+  - Rewrite `.card-product` and any `.card-*`: `rounded-none`, no shadow, 1px hairline border for separation
+  - Rewrite `.badge-pill-*`: keep `rounded-pill` ONLY here (status badges); strip uppercase if applied
+  - Rewrite `.modal-backdrop`: same dark backdrop, no rounded for the modal frame itself
+  - ADD `.mono` utility or rely on Tailwind's `font-mono` (preferred) for data cells
 
-### Tests
-**Cible : 226 → 245+ pytest passing.**
+### §3.3 JetBrains Mono bundle (commit #4)
 
-Fichiers nouveaux :
-- `backend/tests/test_export_engagement.py` — couvre l'endpoint + RBAC + format inconnu.
-  - `test_export_markdown_admin_returns_md_with_engagement_header_and_all_simulations`
-  - `test_export_markdown_redteam_ok`
-  - `test_export_markdown_soc_403`
-  - `test_export_csv_returns_csv_with_one_row_per_simulation`
-  - `test_export_csv_columns_match_contract` (assert exact header row)
-  - `test_export_csv_escapes_special_characters` (commands avec virgule, guillemet, newline)
-  - `test_export_pdf_returns_pdf_magic_bytes_and_non_empty`
-  - `test_export_unknown_format_400`
-  - `test_export_missing_format_400`
-  - `test_export_unknown_engagement_404`
-  - `test_export_engagement_with_zero_simulations_renders_header_only`
-  - `test_export_unauthenticated_401`
-  - `test_export_filename_slugifies_name_and_carries_date`
-- `backend/tests/test_export_render.py` — tests unitaires sur les 3 fonctions pures.
-  - `test_render_engagement_markdown_includes_header_fields`
-  - `test_render_engagement_markdown_lists_all_simulations_in_order`
-  - `test_render_engagement_markdown_includes_techniques_with_id_and_name`
-  - `test_render_engagement_markdown_includes_tactics`
-  - `test_render_engagement_markdown_includes_soc_fields_even_when_blank` (cohérence handoff)
-  - `test_render_engagement_markdown_escapes_backticks_in_commands` (fenced code block safety)
-  - `test_render_engagement_csv_has_header_row`
-  - `test_render_engagement_csv_joins_multi_techniques_with_pipe`
-  - `test_render_engagement_pdf_starts_with_pdf_magic` (assert `output[:4] == b'%PDF'`)
-  - `test_render_engagement_markdown_with_mitre_bundle_not_loaded_does_not_crash` (assert render OK et contient les technique IDs même quand le bundle MITRE est absent — sécurise les Docker cold-starts)
+- [ ] `cd frontend && npm i @fontsource-variable/jetbrains-mono`
+- [ ] `frontend/src/styles/fonts.css`: add `@import '@fontsource-variable/jetbrains-mono'`
+- [ ] No CDN. Confirms via `npm ls @fontsource-variable/jetbrains-mono`.
 
-### Dépendances
-- `weasyprint>=60.0` ajouté à `backend/requirements.txt`.
-- `docker/Dockerfile` stage Python : ajouter les libs minimales WeasyPrint pour Debian slim. **Set minimal pour text-only PDF** :
-  ```
-  apt-get install -y libcairo2 libpango-1.0-0 libpangoft2-1.0-0 libharfbuzz0b libfontconfig1 shared-mime-info
-  ```
-  **Note** : `libgdk-pixbuf-2.0-0` n'est requis QUE si on intègre des images dans le PDF. Notre rendu est text-only → on peut s'en passer. Le builder confirme via `weasyprint --info` dans le container après build. Documenter dans le PR.
+## §4 — Component sweep (commit #5)
 
-### Livrable backend-builder (summary attendu)
-- **PREMIÈRE LIGNE OBLIGATOIRE** du summary (lesson sprint 5 — URL drift silencieuse interdite) :
-  ```
-  endpoint final = GET /api/engagements/<int:eid>/export?format=md|csv|pdf
-  ```
-  Texte EXACT, pas paraphrasé. Si le builder a choisi un autre path, il le déclare ici en deviation.
-- Tous les fichiers créés/modifiés
-- Contrat API précis (statuts, query params, headers de réponse) en table
-- Liste des helpers réutilisés (`_enrich_techniques`, `_enrich_tactics`, `serialize_user_brief`)
-- **Section "Déviations vs plan"** explicite (cf. lesson sprint 5)
-- Résultats pytest + ruff + mypy
+Rule: `rounded-*` → `rounded-none` unless explicitly an avatar or status pill; remove `transition-*`; data text → `font-mono`.
 
----
+- [ ] `Layout.tsx`: nav-bar/utility-strip already angular — confirm. Remove `transition-colors` on theme button and hover-underline transitions. Mono font for any data label exposed (e.g. user.role pill).
+- [ ] `StatusBadge.tsx`: KEEP rounded → switch to `rounded-pill` (it's a status pill, locked exception). Audit semantic mapping (planned/active/closed → semantic tokens once added).
+- [ ] `SimulationStatusBadge.tsx`: same — `rounded-pill`, semantic colors aligned with new tokens.
+- [ ] `FormField.tsx`: angular inputs (already via `.text-input` recipe — confirm).
+- [ ] `EmptyState.tsx`: angular wrapper. No rounded illustration container.
+- [ ] `ErrorState.tsx`: angular. Bloom-deep border-left if signalling.
+- [ ] `LoadingState.tsx`: drop any rounded spinner background. Spinner shape ok.
+- [ ] `ConfirmDialog.tsx`: angular modal. Buttons via new `.btn-*` recipes.
+- [ ] `Toast.tsx`: angular. Semantic color border-left strip.
+- [ ] `ExportEngagementButton.tsx` (sprint 6): angular dropdown menu. Audit `rounded-*` in the menu/item classes.
+- [ ] `MitreMatrixModal.tsx`: angular modal. Cells already grid — confirm no rounded.
+- [ ] `MitreTechniquePicker.tsx`: angular dropdown.
+- [ ] `MitreTechniquesField.tsx`: angular chips.
+- [ ] `MitreTechniqueTag.tsx`: angular tag (NOT pill — terminal tag, not a status). Decide once and apply consistently across MITRE surfaces.
+- [ ] `TemplatePickerModal.tsx`: angular modal.
+- [ ] `SimulationList.tsx`: angular table. Data cells (commands, executed_at, MITRE techniques) → `font-mono`.
+- [ ] `ProtectedRoute.tsx`: no visual surface, skip.
 
-## §2 — Frontend (Sonnet · frontend-builder)
+## §5 — Page sweep (commit #6)
 
-### Composants
-- **`ExportEngagementButton.tsx`** (nouveau) : split-button dropdown style sprint 5.
-  - Bouton principal `Export` (icône `Download` lucide-react) + chevron à droite (icône `ChevronDown`).
-  - **IMPORTANT — différence sémantique vs `NewSimulationDropdown` sprint 5** : les DEUX moitiés (label `Export` + chevron) ouvrent le dropdown. Il n'y a PAS d'action par défaut sur le click gauche (parce qu'il n'y a pas de format "défaut" évident parmi Markdown/CSV/PDF). Ce n'est PAS le même pattern que `[+ New]` (où la gauche navigue vers `/.../new` blank).
-  - Dropdown : 3 items "Markdown" / "CSV" / "PDF". Click → mutation download.
-  - Fermeture : click outside + Escape (réutiliser le hook/effet du dropdown sprint 5 dans `SimulationList`).
-  - Loading state : pendant la mutation, le composant affiche un spinner inline sur l'item cliqué, le dropdown reste ouvert. Désactive les 3 items pendant l'in-flight.
-  - Toast erreur sur 4xx/5xx.
-  - **`data-testid="export-dropdown"`** sur le wrapper du composant pour permettre au test-verifier d'asserter la présence/absence DOM (AC-30.1).
-  - Style : utiliser la classe utilitaire **`btn-outline`** (la même que le bouton `Edit` du header existant) — cohérence visuelle directe avec le header.
-- **`EngagementDetailPage.tsx`** : intégrer `<ExportEngagementButton engagementId={engagement.id} />` dans le header de la page, à côté du bouton `Edit` existant. **Visible uniquement si `currentUser.role in ['admin', 'redteam']`** (gate côté UI + RBAC backend de toute façon en force) — réutiliser le helper `canEditEngagements` de `useAuth` (le même rôle set).
+For each page: header/body/footer review, replace rounded card containers with angular hairline-bordered containers, ensure data cells use mono.
 
-### API client
-- **`frontend/src/api/exports.ts`** (nouveau) :
-  - `downloadEngagementExport(engagementId: number, format: 'md' | 'csv' | 'pdf'): Promise<void>` — fait un GET `/api/engagements/<id>/export?format=<fmt>` avec `responseType: 'blob'`, lit `Content-Disposition` pour le filename, crée un `Blob` + `URL.createObjectURL` + `<a>.click()`, puis `URL.revokeObjectURL`. **Contrat d'erreur** : sur réponse non-2xx, parse le JSON `{error: "..."}` du body (ou défaut "Export failed") et **throw un `Error`** avec le message — laisse le caller catcher pour le toast.
-  - Helper `parseContentDispositionFilename(header: string | undefined): string | null` (regex `filename="..."`, fallback null).
+- [ ] `LoginPage.tsx`: angular form card. Drop ornament.
+- [ ] `EngagementsListPage.tsx`: angular table container (currently `.card-product` with rounded-xl). Data cells (dates) → mono.
+- [ ] `EngagementDetailPage.tsx`: angular header section. Engagement metadata (start/end dates, IDs, created_at) in mono. Simulations table covered via SimulationList.
+- [ ] `EngagementFormPage.tsx`: angular form. Date inputs ok.
+- [ ] `SimulationFormPage.tsx`: angular form. Commands textarea → mono.
+- [ ] `TemplatesListPage.tsx`: angular list.
+- [ ] `TemplateFormPage.tsx`: angular form. Commands field → mono.
+- [ ] `UsersAdminPage.tsx`: angular table. Username column → mono (it's an ID).
 
-### Types
-- Aucun nouveau type API (l'export retourne un Blob).
+## §6 — Test refresh (commit #7)
 
-### Tests
-**Cible : 121 → 130+ vitest passing.**
+- [ ] `cd frontend && npm run test -- --run` — identify failing assertions on class names (`rounded-xl`, `card-product`, etc.). Update tests to use semantic queries (role, name, data-testid) where possible; if test asserts on visual class, update assertion to the new class.
+- [ ] No new vitest tests added (visual sprint, behavior unchanged).
+- [ ] Playwright e2e: should be `data-testid`-driven — run full suite to confirm no regression. If breakage, fix the testid not the test logic.
 
-Fichiers nouveaux :
-- `frontend/tests/ExportEngagementButton.test.tsx`
-  - `renders Export button with chevron`
-  - `clicking primary opens dropdown with three formats`
-  - `clicking outside closes dropdown`
-  - `Escape closes dropdown`
-  - `clicking Markdown triggers download with format=md`
-  - `clicking CSV triggers download with format=csv`
-  - `clicking PDF triggers download with format=pdf`
-  - `loading state disables items during in-flight`
-  - `error response shows toast`
-- `frontend/tests/EngagementDetailPage.test.tsx` (**nouveau** — il n'existe pas encore, le builder le crée from scratch) :
-  - `admin sees Export button`
-  - `redteam sees Export button`
-  - `soc does NOT see Export button`
+## §7 — Reviews
 
-### Screenshots OBLIGATOIRES (lesson sprint 4)
-- `EngagementDetailPage` light + dark, dropdown fermé.
-- `EngagementDetailPage` light + dark, dropdown ouvert (3 items visibles).
-- `EngagementDetailPage` SOC view — bouton Export ABSENT.
-- Le builder doit fournir un script Playwright authenti (réutiliser le pattern sprint 5 — `page.goto('/login') → fill → wait nav`).
+- [ ] **spec-reviewer** (pre-dispatch, §1): plan validated vs SPEC.md and §0 binding decisions
+- [ ] **frontend-builder** (§2-§6): implements, runs typecheck/lint/test, delivers screenshots for design-reviewer (every page + key states, light+dark)
+- [ ] **design-reviewer** (post-frontend): reviews screenshots + diff vs new DESIGN.md. Brutalist consistency, mono-discipline (only data), zero-rounded discipline.
+- [ ] **code-reviewer** (post-design): reviews frontend diff for duplication, lost reuse, dead code.
+- [ ] **test-verifier**: skipped this sprint (no new US, no behavior change).
+- [ ] **backend-builder**: idle, no work this sprint.
 
-### Livrable frontend-builder (summary attendu)
-- Tous les fichiers créés/modifiés
-- API contracts consommés exactement comme livrés par backend (cf. lesson sprint 5 — path drift à éviter, grep `Content-Disposition` dans la PR)
-- Helpers réutilisés (`useToast`, etc.)
-- Résultats vitest + typecheck + lint
-- Liste des écrans capturés (light + dark, role-by-role)
+## §8 — Git workflow
 
----
+- [ ] Branch: `sprint/7-design` (already created from origin/main)
+- [ ] Commits: conventional, one per logical group (§2 to §7)
+- [ ] PR via `make open-pr` (Gitea pattern, per memory)
+- [ ] PR body in `tasks/pr-body-sprint-7.md`
+- [ ] CHANGELOG.md sprint 7 section
 
-## §3 — Acceptance tests (Sonnet · test-verifier)
+## §9 — Risks & mitigations
 
-**Cible : 201 → 215+ Playwright passing.**
+- **R1 — Tests break en masse**: many vitest specs may assert on class strings (e.g., `rounded-xl` on cards). Mitigation: update assertions to semantic queries; budget half a phase to test repair.
+- **R2 — Dark mode contrast lost**: angular + new semantic colors may break WCAG AA contrast on dark slab. Mitigation: design-reviewer audits both modes; adjust the dark variant hex to meet WCAG AA. Rollback the success/warn family only if no accessible green/amber is achievable on the dark slab.
+- **R3 — Mono overflow**: JetBrains Mono is wider than Inter at same px. Cell widths in tables may overflow. Mitigation: keep `table-layout: fixed` and `word-break: break-word` (pattern reused from PDF export CSS sprint 6).
+- **R4 — DESIGN.md rewrite churn**: replacing 346 lines is a big diff. Mitigation: rewrite atomically in commit #2, keep token names consistent so downstream commits don't drift.
+- **R5 — User taste mismatch**: "Bloomberg/SOC" may not match user's mental image. Mitigation: design-reviewer screenshots → user check-in BEFORE merge.
 
-3 user stories à couvrir :
+## §10 — Definition of Done
 
-### US-29 — Admin/redteam exporte l'engagement en Markdown/CSV/PDF
-- **AC-29.1** : login admin → engagement avec ≥ 2 simulations → click "Export" → dropdown s'ouvre.
-- **AC-29.2** : click "Markdown" → download d'un `.md` avec `Content-Type: text/markdown`. Le fichier contient le nom de l'engagement, la date de début, et le nom de chaque simulation.
-- **AC-29.3** : click "CSV" → download d'un `.csv` avec exactement N+1 **rows CSV** (1 header + N simulations). La colonne `name` contient les noms des simulations. **Note implémentation test** : compter les rows via `csv.reader` (ou équivalent JS), PAS via `file.split('\n')` — les commands multilines produisent des cells avec newlines embedded entre quotes, le line-count du fichier > row-count CSV.
-- **AC-29.4** : click "PDF" → download avec `Content-Type: application/pdf`, taille > 1 KB, magic bytes `%PDF`.
-- **AC-29.5** : login redteam → mêmes 3 formats fonctionnent.
-- **AC-29.6** : filename respecte `engagement-<id>-<slug>-YYYYMMDD.{ext}` (assert via Content-Disposition).
+- [ ] All §0 decisions reflected in DESIGN.md + tokens + components + pages
+- [ ] `npm run typecheck` clean
+- [ ] `npm run lint` clean
+- [ ] `npm run test -- --run` all green
+- [ ] Backend untouched — `git diff origin/main -- backend/` empty
+- [ ] Playwright e2e green (223 baseline preserved)
+- [ ] Screenshots delivered (light + dark) for every page + key states
+- [ ] DESIGN.md rewritten, no HP/Forma/wordmark/chevron references
+- [ ] CHANGELOG.md sprint 7 section
+- [ ] PR opened on Gitea
+- [ ] User merges PR → sprint closed → team idle ready for sprint 8
 
-### US-30 — SOC pas d'accès à l'export
-- **AC-30.1** : login SOC → engagement page → bouton "Export" **ABSENT** du DOM (pas seulement `display: none`). Assert via `expect(page.locator('[data-testid="export-dropdown"]')).not.toBeAttached()`.
-- **AC-30.2** : appel direct API `GET /api/engagements/<id>/export?format=md` (Bearer SOC) → 403.
-- **AC-30.3** : (sanity) appel API sans token → 401.
+## §11 — Lessons being applied from prior sprints
 
-### US-31 — Robustesse format / engagement
-- **AC-31.1** : `GET /api/engagements/<id>/export` sans `format` → 400 message friendly.
-- **AC-31.2** : `GET /api/engagements/<id>/export?format=xml` → 400 friendly.
-- **AC-31.3** : `GET /api/engagements/99999/export?format=md` → 404.
-- **AC-31.4** : engagement avec 0 simulations → export OK (header seul, le CSV n'a qu'une ligne d'en-tête, le MD n'a pas de section simulation).
-
-### Bouncing
-- Si un AC échoue → bounce au builder responsable (backend ou frontend), pas de patch test-side.
-
----
-
-## §4 — Reviews
-
-### Spec-reviewer Pass 1 (avant dispatch)
-- Lit ce `tasks/todo.md` § 0 + § 1 + § 2 + § 3.
-- Verdict attendu : APPROVED / NEEDS-CHANGES par section.
-- Points particuliers à challenger : WeasyPrint vs reportlab, CSV sans header engagement, URL drift (un seul endpoint avec query param vs 3 endpoints distincts).
-
-### Spec-reviewer Pass 2 (après mes éventuels édits du plan)
-- Re-validation des changements apportés.
-- **TEAM-LEAD : ne PAS dispatcher backend tant que Pass 2 n'a pas répondu APPROVED.** Lesson sprint 5 — la patience sur le 2-pass a éliminé les addenda mid-implementation.
-
-### Code-reviewer (après backend + frontend)
-- LSP first (`goToDefinition`, `findReferences`).
-- Focalise sur : pureté des render functions (testables), gestion des deps WeasyPrint dans Dockerfile, échappement CSV, filename slug, dropdown close-on-outside réutilisation.
-
-### Design-reviewer (après screenshots frontend)
-- Light + dark cohérence du dropdown Export.
-- Vérifie que le bouton respecte la convention "icône + label court ≤ 8 chars" (`Export`).
-- Audit alignement vs le header existant de la page.
-
-### Test-verifier (après code-reviewer APPROVED)
-- Écrit 1 spec file par US (`us29-export-formats`, `us30-export-rbac`, `us31-export-robustness`).
-- Rapport pass/fail par AC.
-
----
-
-## §5 — SPEC.md update (au tout début du sprint — lesson sprint 3/4/5)
-
-Ajouter une section **§ Export d'engagement** entre § Templates de simulations et § Authentification & rôles :
-
-> ## Export d'engagement
-> Un engagement peut être exporté à tout moment dans 3 formats au choix : **Markdown** (handoff narratif), **CSV** (machine-readable, intégration tableurs), **PDF** (livrable client). L'export contient l'en-tête de l'engagement et toutes ses simulations avec les champs Red Team **et** SOC. Endpoint unique : `GET /api/engagements/<id>/export?format=md|csv|pdf`. Réservé aux rôles admin et redteam (livrable RedTeam, cohérent avec le RBAC Templates). Filename normalisé : `engagement-<id>-<slug>-YYYYMMDD.<ext>`.
-
-**Le commit qui crée cette section doit être le PREMIER commit du sprint** (pas le dernier — sinon on rate le bug récurrent identifié dans les lessons). Le commit suivant peut être le plan lui-même (`tasks/todo.md` + `tasks/lessons.md`).
-
----
-
-## §6 — Workflow git du sprint
-
-- Branch : `sprint/6-export` (créée @ `678ee8f`).
-- Commit séquence :
-  1. `docs(spec): add § Export d'engagement section` (le `M SPEC.md` ne doit JAMAIS rester unstaged)
-  2. `docs(plan): sprint 6 plan + sprint-5 lessons folded` (tasks/)
-  3. Commits backend (un ou deux, signés par backend-builder)
-  4. Commits frontend (un ou deux, signés par frontend-builder)
-  5. Commit post-code-review fixes (si nécessaire)
-  6. Commit screenshots design + e2e tests
-  7. Wrap-up commit team-lead : CHANGELOG + README + lessons.md sprint-6 + plan final
-- PR via `make open-pr SPRINT=6 TITLE="feat: sprint 6 — engagement export (md/csv/pdf)" BODY=tasks/pr-body-sprint-6.md` (3e dogfood du wrapper sprint 4).
-
----
-
-## §7 — Risk / hazard list
-
-| # | Risk | Mitigation |
-|---|---|---|
-| 1 | WeasyPrint deps gonflent l'image Docker | Liste minimale documentée + WeasyPrint déjà packagé sur Debian slim ; mesurer Δ MB image build après vs avant |
-| 2 | CSV mal-échappé avec commands multilines / quotes | Utiliser `csv.writer` stdlib (handles tout automatiquement), pas de string concat manuel |
-| 3 | Markdown casse sur backticks dans commands | Fenced code blocks `~~~bash` (tildes au lieu de backticks pour les blocks contenant des backticks), OU escape via `markdown.escape` |
-| 4 | Test PDF fragile sur le contenu | Asserter UNIQUEMENT : Content-Type, magic bytes `%PDF`, taille > 1 KB. Pas de regex sur le texte rendu (binary). |
-| 5 | URL drift backend (`/export` vs `/engagements/<id>/export`) | Lesson sprint 5 — la 1re ligne du backend summary doit confirmer le path exact |
-| 6 | Frontend oublie `URL.revokeObjectURL` → fuite mémoire | Test unitaire explicite : assert `revokeObjectURL` appelé après le click téléchargement |
-| 7 | SPEC.md uncommitted à la fin du sprint (3 sprints en série !) | Commit SPEC.md en commit #1 du sprint, pas en wrap-up. Étape « cendrillon » du plan ci-dessus. |
-
----
-
-## §8 — Definition of Done (sprint-level)
-
-- [ ] §5 SPEC.md committed AS THE FIRST COMMIT of the sprint.
-- [ ] Backend : 245+ pytest, ruff clean, mypy clean.
-- [ ] Frontend : 130+ vitest, typecheck clean, lint clean.
-- [ ] E2e : 215+ Playwright, 0 régression vs main.
-- [ ] Screenshots fournies : EngagementDetailPage light + dark, dropdown fermé + ouvert, vue SOC sans bouton.
-- [ ] Dockerfile mis à jour avec deps WeasyPrint + `make build` réussit.
-- [ ] CHANGELOG.md `[Unreleased] → Sprint 6` rédigée.
-- [ ] README.md « Status » bumped + section dans le tableau des features si pertinent.
-- [ ] PR ouverte via `make open-pr` (pas via UI manuelle).
-- [ ] `git status` au sprint-close affiche **uniquement** des fichiers ignorés (lesson récurrente).
+- **SPEC/DESIGN commit-first**: DESIGN.md rewrite is commit #2 (after sprint hygiene). No design churn mid-sprint.
+- **spec-reviewer 2-pass**: APPROVED before dispatch, not after.
+- **Team idle policy**: 6 agents already mounted, no shutdown until PR merged.
+- **frontend-builder MUST invoke `Skill frontend-design`** before UI work (the patch commits as #1, takes effect immediately for the same sprint).

From 6c05cc2e11ed63f5213b8bdac3356ab830d9ada1 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:37:44 +0200
Subject: [PATCH 03/12] docs(design): rewrite DESIGN.md for terminal-SOC
 aesthetic

---
 DESIGN.md | 438 ++++++++++++++++++++++--------------------------------
 1 file changed, 178 insertions(+), 260 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 1b80d81..f0e843f 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1,345 +1,263 @@
 ## Overview
 
-HP reads like a long-running consumer-electronics catalog crossed with an enterprise-software product page. The whole system sits on **pure white** (`{colors.canvas}` — `#ffffff`) with thin gray panels (`{colors.cloud}` / `{colors.fog}`) for alternating section bands. There is one chromatic action color — **HP Electric Blue** (`{colors.primary}` — `#024ad8`) — and one ink color (`{colors.ink}` — `#1a1a1a`); together they do ninety percent of the work. Type is a single family across every surface: **Forma DJR Micro**, HP's bespoke geometric grotesque, set at weight 500 for headlines and 400 for body — clean, neutral, slightly mechanical.
+Mimic is a **BAS (Breach and Attack Simulation) purple-team console** — not a product catalog, not a marketing page. The aesthetic is **Bloomberg Terminal / SOC dashboard**: dense, angular, semantic-color-driven, zero ornament. Every surface decision reinforces operational trust: data is primary, chrome is invisible.
 
-The signature gesture is **angular blue chevrons** — sharp 0-radius slashes derived from the HP wordmark's pair of parallel slashes — that anchor the homepage hero, the laptop-page hero, and the printer pricing page. They appear on the left and right edges of the primary banner card, layered behind product photography. Outside those decorative slashes, every other surface is rectilinear with **soft 8–16px corners** on cards and a 4px corner on buttons.
+The system sits on a **pure-white canvas** (light) / **dark slab** (dark) with one chromatic action color — **Electric Blue** (`{colors.primary}` — `#024ad8`) — and semantic status signals (`success`, `warn`, `bloom-deep`). Inter handles body/headers/labels. JetBrains Mono carries data: IDs, ISO dates, commands, execution output, MITRE technique codes, metrics — anything that must be read at a glance without typographic distraction.
 
-The system breaks into three voice modes: a **white commercial body** for product browsing (cards, category icons, pricing tiers); a **dark navy slab** (`{colors.ink}` near-black) for testimonial bands, the closing "How can we help?" footer-prelude, and the page footer; and a **light fog band** (`{colors.cloud}` / `{colors.fog}`) for utility sections like comparison strips and FAQ accordions. The blue accent appears only on filled CTAs, link text, the chevron decorations, and the active price-stamp on a featured tier — never as a section background.
+**No rounded corners on containers.** No shadows on interactive surfaces. No transitions. Hover is instantaneous. Focus rings are sharp. This is a tool, not a storefront.
 
 **Key Characteristics:**
-- Pure white canvas (`{colors.canvas}`) with deep ink (`{colors.ink}`) running every body surface; light fog bands (`{colors.cloud}`, `{colors.fog}`) alternate for section rhythm
-- HP Electric Blue (`{colors.primary}`) is the lone CTA fill and link color; it appears at most twice per viewport
-- Bespoke Forma DJR Micro across every surface — display, body, button, caption — at weights 400 / 500 / 600 / 700
-- Cards round at `{rounded.xl}` (16px) for product/pricing tiles; buttons sit at `{rounded.md}` (4px) with capitalize labels
-- Geometric blue chevrons (`{colors.primary}` rectangles cut at 45°) frame hero photography and reinforce the wordmark
-- Dark-navy slabs (`{colors.ink}`) close every page rhythm — testimonial bands, "how can we help?" prelude, and the footer
-- Section rhythm: utility-strip → top nav → white body → cloud-band → ink slab → cloud-band → ink footer
+- Angular surfaces everywhere (`border-radius: 0`) — exception: status pills (`rounded-pill`) and avatars
+- Zero transitions / zero animations — state changes are immediate
+- Semantic color signals: primary blue = action, success green = confirmed, warn amber = pending/caution, bloom-deep = destructive/error
+- Monospace data discipline: `font-mono` ONLY for IDs, dates, codes, output, metrics — never for headers, labels, prose
+- Dense spacing: section gap 48px (not 80px), card padding 12–16px on dense surfaces
+- Light + dark modes both supported; dark mode is the primary operational mode for SOC analysts
+
+---
 
 ## Colors
 
-> **No Interaction sub-section.** Hover colors are silently filtered. Allowed sub-sections: Brand & Accent, Surface, Text, Semantic.
-
 ### Brand & Accent
-- **HP Electric Blue** (`{colors.primary}` — `#024ad8`): the system's lone signal — primary CTA fill, link color, chevron-decoration fill, active sub-nav indicator. Reserved.
-- **Bright Blue** (`{colors.primary-bright}` — `#296ef9`): a slightly lighter variant used inside dark slabs (testimonial-card buttons, dark-band CTA links) where the deeper blue would muddy.
-- **Deep Navy** (`{colors.primary-deep}` — `#0e3191`): pressed state for the primary CTA and the visited-link color.
-- **Soft Blue** (`{colors.primary-soft}` — `#c9e0fc`): pale-blue surface used inside customer-story cards and selection chips.
+- **Electric Blue** (`{colors.primary}` — `#024ad8`): primary CTA fill, active nav indicator, focus ring. Never used as a section background.
+- **Bright Blue** (`{colors.primary-bright}` — `#296ef9`): CTA on dark slab surfaces where `#024ad8` muddles.
+- **Deep Navy** (`{colors.primary-deep}` — `#0e3191`): pressed state for primary CTA.
+- **Soft Blue** (`{colors.primary-soft}` — `#c9e0fc`): selection highlight, chip background on light surfaces.
 
 ### Surface
-- **Canvas** (`{colors.canvas}` — `#ffffff`): the universal page background. White, full opacity.
-- **Paper** (`{colors.paper}` — `#ffffff`): card surfaces — same white as canvas, with hairline borders or shadows providing the lift.
-- **Cloud** (`{colors.cloud}` — `#f7f7f7`): the lightest gray section band, used for alternating-row backgrounds and product-feature card groups.
-- **Fog** (`{colors.fog}` — `#e8e8e8`): a slightly darker gray surface band, used for FAQ outer panels and the "Trending laptops" header strip.
-- **Steel** (`{colors.steel}` — `#c2c2c2`): hairline border used on outlined elements with stronger emphasis (focus states, active filter).
-- **Bloom Coral / Bloom Rose** (`{colors.bloom-coral}` / `{colors.bloom-rose}` — `#ff5050`, `#f9d4d2`): the "Get 25% off" sale-tag chip + soft pink lifestyle accent on the sale hero.
-- **Storm Mist / Sea / Deep** (`{colors.storm-mist}`, `{colors.storm-sea}`, `{colors.storm-deep}` — `#8ebdce`, `#7fadbe`, `#356373`): the teal-storm tones reserved for the printer-plan illustration backdrop and supporting infographic accents.
+- **Canvas** (`{colors.canvas}` — `#ffffff` light / `#111827` dark): universal page background.
+- **Paper** (`{colors.paper}` — `#ffffff` light / `#1f2937` dark): card and panel surfaces.
+- **Cloud** (`{colors.cloud}` — `#f7f7f7` light / `#1f2937` dark): alternating section band, table row zebra.
+- **Fog** (`{colors.fog}` — `#e8e8e8` light / `#374151` dark): secondary section band, input background on dense panels.
+- **Steel** (`{colors.steel}` — `#c2c2c2` light / `#4b5563` dark): hairline borders, disabled states.
+- **Hairline** (`{colors.hairline}`): 1px divider between cells, panels, table rows.
+- **Slab** (`{colors.slab}` — `#111827`): fixed-dark surface — utility strip, footer, dark bands. Does NOT invert in dark mode.
 
 ### Text
-- **Ink** (`{colors.ink}` — `#1a1a1a`): the universal text color on white surfaces — headlines, body, button labels, navigation.
-- **Ink Deep** (`{colors.ink-deep}` — `#000000`): pure black used for the wordmark and 1px hairline strokes around badge outlines.
-- **Ink Soft** (`{colors.ink-soft}` — `#292929`): an alternate near-black used inside dark-navy slabs as a subtle textural shift.
-- **On Ink** (`{colors.on-ink}` — `#ffffff`): pure white used for headline and body text on every dark-navy slab.
-- **Charcoal** (`{colors.charcoal}` — `#3d3d3d`): muted body color on white surfaces — secondary descriptions, fine-print disclaimers.
-- **Graphite** (`{colors.graphite}` — `#636363`): smaller-print color, used for legal lines and timestamp metadata.
+- **Ink** (`{colors.ink}` — `#1a1a1a` light / `#f9fafb` dark): universal body text color.
+- **Ink Deep** (`{colors.ink-deep}` — `#000000` light / `#ffffff` dark): maximum contrast for headings.
+- **Ink Soft** (`{colors.ink-soft}` — `#292929` light / `#e5e7eb` dark): muted body, secondary labels.
+- **On Ink** (`{colors.ink-on}` — `#ffffff` light / `#111827` dark): text on slab surfaces.
+- **Charcoal** (`{colors.charcoal}` — `#3d3d3d` light / `#d1d5db` dark): secondary descriptions, captions.
+- **Graphite** (`{colors.graphite}` — `#636363` light / `#9ca3af` dark): timestamps, metadata, footnotes.
 
-### Semantic
-- **Bloom Deep** (`{colors.bloom-deep}` — `#b3262b`) + **Bloom Wine** (`{colors.bloom-wine}` — `#5a1313`): error and discount-emphasis colors. The deep brick reads as "sale" or "destructive" depending on placement.
-- **Storm Deep** (`{colors.storm-deep}` — `#356373`): used as a neutral status accent (e.g., printer-plan tier "Versatile" tier color).
+### Semantic (Status Signals)
+- **Success** (`{colors.success}` — `#16a34a` light / `#22c55e` dark): confirmed detections, done status, positive metrics. Background softened to `{colors.success-soft}` (`#dcfce7` light / `#14532d` dark) for badge fills.
+- **Warn** (`{colors.warn}` — `#d97706` light / `#f59e0b` dark): pending review, caution states, partial detection. Background softened to `{colors.warn-soft}` (`#fef3c7` light / `#78350f` dark) for badge fills.
+- **Bloom Deep** (`{colors.bloom-deep}` — `#b3262b`): error, destructive action, failed detection. Bloom family covers red-spectrum signals.
+- **Bloom Wine** (`{colors.bloom-wine}` — `#5a1313`): darkened destructive emphasis.
+- **Bloom Coral** (`{colors.bloom-coral}` — `#ff5050`): alert highlight on dark surfaces.
+
+---
 
 ## Typography
 
-### Font Family
+### Font Families
+- **Inter Variable** (`{fontFamily.sans}`): body text, labels, headers, navigation, form fields. The universal surface font.
+- **JetBrains Mono Variable** (`{fontFamily.mono}`): data cells ONLY — engagement IDs, simulation IDs, ISO 8601 dates, execution commands, terminal output, MITRE technique codes (T1059.001), numeric metrics, usernames-as-identifiers. Never used for prose, headings, or labels.
 
-The voice is **single-family**: Forma DJR Micro (HP's bespoke geometric grotesque, fallback Arial) across every surface — display, body, button, caption. Forma DJR Micro is a wide, slightly rounded grotesque designed at small optical sizes to stay legible at UI-chrome scale. HP runs it at weight 400 for body, 500 for display headlines, 600/700 for emphasis and button labels.
-
-The 16/14/12-px caption tier carries the catalog metadata — model numbers, spec rows, fine print — at weight 400 with a 1.4–1.5 line-height. Button labels lift to weight 600/700 with positive 0.5–1.1px letter-spacing and uppercase transform — the only place the system tracks letters.
+Both fonts are bundled locally via `@fontsource-variable/inter` and `@fontsource-variable/jetbrains-mono`. Zero CDN loading at runtime.
 
 ### Hierarchy
 
-| Token | Size | Weight | Line Height | Letter Spacing | Use |
-|---|---|---|---|---|---|
-| `{typography.display-xxl}` | 72px | 500 | 1.0 | 0 | Hero headline (homepage, laptop hub) |
-| `{typography.display-xl}` | 56px | 500 | 1.0 | 0 | Section headlines on landing pages |
-| `{typography.display-lg}` | 44px | 500 | 1.0 | 0 | Sub-section headlines on shop pages |
-| `{typography.display-md}` | 32px | 500 | 1.0 | 0 | Promo strip headlines, FAQ section headers |
-| `{typography.display-sm}` | 24px | 500 | 1.17 | 0 | Card titles, pricing-tier names |
-| `{typography.display-xs}` | 20px | 500 | 1.0 | 0 | Inline list headers, accordion labels |
-| `{typography.body-lg}` | 18px | 400 | 1.33 | 0 | Lead paragraphs |
-| `{typography.body-md}` | 16px | 400 | 1.38 | 0 | Default body |
-| `{typography.body-emphasis}` | 16px | 500 | 1.38 | 0 | Bolded run-in copy |
-| `{typography.caption-md}` | 14px | 400 | 1.5 | 0 | Specs, metadata, captions |
-| `{typography.caption-bold}` | 14px | 700 | 1.3 | 0 | Sale tags, in-card highlights |
-| `{typography.caption-sm}` | 12px | 400 | 1.33 | 0 | Footnotes, legal lines |
-| `{typography.link-md}` | 16px | 500 | 1.38 | 0 | Inline link emphasis |
-| `{typography.button-md}` | 14px | 600 | 1.4 | 0.7px | Primary/secondary button labels (uppercase) |
-| `{typography.button-sm}` | 12.6px | 700 | 1.0 | 0.126px | Compact button labels in tight cells |
-| `{typography.price-md}` | 24px | 500 | 1.17 | 0 | Tier and product price stamps |
+| Token | Size | Weight | Line Height | Use |
+|---|---|---|---|---|
+| `{typography.display-xxl}` | 40px | 500 | 1.1 | Page-level hero (rare — dashboard title) |
+| `{typography.display-xl}` | 32px | 500 | 1.1 | Section title (engagement name, modal header) |
+| `{typography.display-lg}` | 28px | 500 | 1.1 | Sub-section header, panel title |
+| `{typography.display-md}` | 24px | 500 | 1.1 | Card title, table header group |
+| `{typography.display-sm}` | 20px | 500 | 1.1 | Item title, form section header |
+| `{typography.display-xs}` | 16px | 600 | 1.1 | Compact section header, sidebar label |
+| `{typography.body-lg}` | 18px | 400 | 1.4 | Lead paragraph |
+| `{typography.body-md}` | 16px | 400 | 1.4 | Default body, form labels |
+| `{typography.body-emphasis}` | 16px | 500 | 1.4 | Bolded inline copy, table column headers |
+| `{typography.caption-md}` | 14px | 400 | 1.5 | Secondary metadata, captions, table cells (non-data) |
+| `{typography.caption-bold}` | 14px | 700 | 1.3 | Status labels, tag text |
+| `{typography.caption-sm}` | 12px | 400 | 1.33 | Footnotes, legal fine-print |
+| `{typography.button-md}` | 14px | 600 | 1.4 | Button labels (uppercase) |
+| `{typography.button-sm}` | 12.6px | 700 | 1.0 | Compact button in tight cells |
 
-### Principles
+### Monospace Discipline
 
-The typographic decision worth flagging: HP runs **weight 500 for every display size**, including the largest 72px hero headline. Most editorial systems jump to 600/700 at hero scale; HP doesn't. The result feels open and approachable rather than commanding — appropriate for a brand that sells across consumer, SMB, and enterprise audiences in the same catalog.
+JetBrains Mono carries data that must be scanned without typographic noise. Apply `font-mono` (Tailwind) or `font-family: var(--font-mono)` to:
 
-Forma DJR Micro's rounded-grotesque shapes do most of the warmth. There's no italic in the system except inside legal disclaimers; emphasis is carried by weight (500 → body-emphasis, 700 → caption-bold) instead.
+- Engagement IDs, simulation IDs (any UUID or integer identifier)
+- ISO 8601 dates and timestamps (`2024-06-09T14:32:00`)
+- MITRE technique codes (`T1059.001`, `TA0002`)
+- Execution commands and command fields
+- Terminal / execution output
+- Numeric metrics (counts, durations)
+- Usernames displayed as record identifiers (not greeting text)
 
-### Note on Font Substitutes
+Never apply `font-mono` to: page titles, section headers, body prose, navigation, form labels, button text.
 
-Forma DJR Micro is proprietary (Commercial Type / Mark Caneso). Closest open-source substitutes:
-- **Inter** at weights 400 / 500 / 600 / 700 — slightly narrower than Forma DJR Micro; bump font-size by ~3% to compensate
-- **Manrope** at weights 400 / 500 / 600 / 700 — closer in proportion, gentler curves; use directly with no metric adjustment
-- **Roboto** at weights 400 / 500 / 700 — flatter character; use as last-resort fallback
-
-When swapping, set body line-height to 1.4 and display line-height to 1.0 explicitly — the Forma DJR Micro line-height numbers are tight, and most substitutes default looser.
+---
 
 ## Layout
 
 ### Spacing System
 
-- **Base unit**: 8px. Smaller half-step at 4px. The scale is gentle — most card padding lands at 16px or 24px; section gap at 80px.
-- **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.section}` 80px
-- **Section padding**: `{spacing.section}` (80px) vertical between major bands on desktop; collapses to ~48px on mobile.
-- **Card internal padding**: `{spacing.xl}` (24px) for product cards; `{spacing.xxl}` (32px) for promo strips and feature cards; `{spacing.md}` (16px) for compact article tiles.
-- **Gutter**: `{spacing.xl}` (24px) between grid columns at desktop; `{spacing.md}` (16px) on tablet/mobile.
-
-The 80px section gap is the universal rhythm constant — it appears between every major homepage band, between the hero and the comparison table on the printer-plan page, and between feature rows on the laptop-shop page.
+- **Base unit**: 8px. Half-step 4px.
+- **Tokens**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.section}` 48px
+- **Section padding**: 48px vertical between major bands (desktop); ~24px on mobile.
+- **Card padding**: 16px on dense panels; 24px on standard cards.
+- **Gutter**: 24px between grid columns on desktop; 16px on tablet/mobile.
 
 ### Grid & Container
 
-- **Desktop max-width**: 1366px content container with full-bleed-on-canvas section backgrounds.
-- **Hero**: a single full-width photo card (homepage and laptop-hub hero) with the headline overlay positioned upper-left or upper-right.
-- **Product family grid**: 4 columns at >1200px, 3 at 1024–1199px, 2 at 768–1023px, 1 below 768px.
-- **Pricing tiers**: 4 columns at >1024px, 2x2 grid at 768–1023px, single-column accordion below 768px.
-- **Footer**: 5-column link grid at >1024px, collapsing to 2-column then accordion on mobile.
+- **Max-width**: 1366px content container, full-bleed on canvas.
+- **List pages**: full-width table with 1px hairline borders, no card wrap.
+- **Detail pages**: 2-column split (60/40) on desktop, stacked on mobile.
+- **Form pages**: single-column centered at 640px max-width.
 
 ### Whitespace Philosophy
 
-Whitespace is **commercial-clean** — generous around hero photography, tight around catalog spec rows. Product cards leave breathing room above and below the photo (≥32px) so the laptop or printer reads as a hero shot rather than a thumbnail. The fine-print disclaimer regions (legal, footnote rows) tighten line-height to 1.3 and shrink type to 11–12px so the bulk of fine print stays compact.
+Dense but not cramped. Table rows at 44px height (WCAG touch target). Card padding minimum 12px. No whitespace used as decoration — every gap serves alignment or grouping. Editorial breathing room (80px sections, hero-scale photography) does not apply here.
 
-## Elevation & Depth
-
-| Level | Treatment | Use |
-|---|---|---|
-| 0 — Flat | No border, no shadow. | Section bands (white, cloud, fog), full-bleed photo heroes |
-| 1 — Hairline | 1px solid `{colors.hairline}` (`#e8e8e8`) border, no shadow. | Outlined buttons, comparison-table cells, FAQ accordion outers |
-| 2 — Soft Lift | `0 2px 8px rgba(26, 26, 26, 0.08)`. | Product cards, pricing-tier columns, customer-story tiles |
-| 3 — Floating Modal | `0 8px 24px rgba(26, 26, 26, 0.12)`. | Add-to-cart drawer, mobile-nav sheet, image zoom modal |
-
-The system is mostly flat — depth is communicated by **color contrast** (cloud-band vs. white card on the same band) rather than shadow elevation. The Soft Lift level is the workhorse for the catalog — every product tile and pricing column gets it; nothing else does. Modal-floating is rare and reserved for transient overlays.
-
-### Decorative Depth
-
-The system's most distinctive depth gesture is the **HP blue chevron pair** — two angular `{colors.primary}` slashes (no radius, no shadow) that sit on the left and right of the homepage hero card and the laptop-shop hero. They're not decorative noise; they're a literal echo of the HP wordmark's two parallel slashes, scaled up to architectural size. Treat them as a brand artifact, not a generic geometric flourish.
-
-Photography on the homepage and laptop-shop pages frames product imagery inside `{rounded.xl}` (16px) containers with a soft 1px hairline. Lifestyle photography (testimonials, "How HP works for X") sits full-bleed inside dark-navy slabs without rounding.
+---
 
 ## Shapes
 
-### Border Radius Scale
+### Border Radius
 
 | Token | Value | Use |
 |---|---|---|
-| `{rounded.none}` | 0px | Hero chevron decorations, full-bleed photo heroes, marquee strips |
-| `{rounded.xs}` | 2px | Secondary chip backgrounds, sale-tag pills |
-| `{rounded.sm}` | 3px | Default secondary CTA radius (small touch zones) |
-| `{rounded.md}` | 4px | Primary buttons, secondary buttons, text inputs |
-| `{rounded.lg}` | 8px | Badge pills, category-icon cards, FAQ row containers |
-| `{rounded.xl}` | 16px | Product cards, pricing tiers, customer-story tiles, photo frames |
-| `{rounded.pill}` | 9999px | Category sub-nav tabs, search-pill input, filter chips |
+| `{rounded.none}` | 0px | **Default for everything**: buttons, cards, modals, inputs, dropdowns, panels, tags, tables |
+| `{rounded.pill}` | 9999px | **Status pills only** (`StatusBadge`, `SimulationStatusBadge`) and circular avatars |
 
-The system maintains a clear two-tier philosophy: **buttons stay sharp** (4px, almost rectilinear) while **cards and photo frames stay soft** (16px). This split is the visual signature — sharp interactive elements against softer container surfaces.
+No intermediate radius values (`xs`, `sm`, `md`, `lg`, `xl`) are used on visible surfaces. The brutalist rule: if it's not a status pill or avatar, `border-radius: 0`.
 
-### Photography Geometry
+---
 
-Hero photography sits in `{rounded.xl}` (16px) frames with no border. Product family thumbnails inside the laptop-grid are 1:1 (square) on a `{colors.canvas}` background, padded so the laptop is shown at ~70% of the frame. Customer-story photography uses 16:9 inside the same `{rounded.xl}` frame. There are no full-bleed circular avatars; testimonial avatars are 4px-rounded squares.
+## Elevation
+
+No shadows on interactive surfaces. Elevation is communicated by **border contrast** (1px hairline on paper over canvas) not box-shadow.
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 — Flat | No border, no shadow | Page background, full-bleed bands |
+| 1 — Hairline | `1px solid {colors.hairline}` | Cards, panels, table cells, input borders |
+| 2 — Modal overlay | `rgba(0,0,0,0.6)` backdrop | Modal dialogs — backdrop only, frame stays hairline |
+
+Shadows (`box-shadow`) are not used anywhere.
+
+---
 
 ## Components
 
-> **No hover states documented.** Every component spec below documents only Default and Active/Pressed states. Variants live as separate front-matter entries.
+> Every component spec below: border-radius **0** unless noted. No `transition-*` on any interactive surface. Hover is instantaneous.
 
 ### Buttons
 
-**`button-primary`** — the lone HP Electric Blue CTA
-- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}` (uppercase, 0.7px tracking), padding `{spacing.sm} {spacing.xl}` (12 × 24), height 44px, rounded `{rounded.md}`
-- Pressed state `button-primary-pressed` — background `{colors.primary-deep}`, same text
-- Disabled state `button-primary-disabled` — background `{colors.steel}`, white text
-- Used for: "Buy now", "Shop now", "Get a printer", primary form submit
+**`.btn-primary`** — Electric Blue CTA
+- Background `{colors.primary}`, text white, uppercase, 14px/600, `h-11`, padding `12px 24px`, `rounded-none`
+- Hover: background `{colors.primary-deep}` — no transition
+- Disabled: background `{colors.steel}`, cursor not-allowed
 
-**`button-ink`** — black filled CTA
-- Background `{colors.ink}`, text `{colors.on-primary}`, padding `{spacing.sm} {spacing.xl}`, height 44px, rounded `{rounded.md}`, type `{typography.button-md}`
-- Used for: "Buy now" on dark photo overlays, secondary primary actions where the blue would clash with imagery
+**`.btn-ink`** — Fixed-dark filled CTA
+- Background `{colors.slab}`, text `{colors.slab-text}`, uppercase, same metrics as btn-primary
+- Used on dark band surfaces where blue would clash
 
-**`button-outline`** — blue-text outlined CTA
-- Background `{colors.canvas}`, text `{colors.primary}`, 1px `{colors.primary}` border, padding `{spacing.sm} {spacing.xl}`, height 44px, rounded `{rounded.md}`
-- Used for: "Compare", "Customize", "Learn more" — secondary actions on white surfaces
+**`.btn-outline`** — Outlined blue CTA
+- Background `{colors.canvas}`, text `{colors.primary}`, 1px `{colors.primary}` border, `rounded-none`
+- Hover: background `{colors.primary-soft}`
 
-**`button-outline-ink`** — black-text outlined CTA
-- Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.ink}` border, padding `{spacing.sm} {spacing.xl}`, height 44px, rounded `{rounded.md}`
-- Used for: "View" buttons inside product family card grids — neutral against the blue primary
+**`.btn-outline-ink`** — Outlined neutral CTA
+- Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.ink}` border, `rounded-none`
+- Hover: background `{colors.cloud}`
 
-**`button-text-link`** — inline blue link with underline
-- Background `{colors.canvas}`, text `{colors.primary}`, type `{typography.link-md}`, padding `{spacing.xxs} 0`
-- Used for: "See details", "Read more" inside cards and disclaimer rows
-
-### Cards & Containers
-
-**`card-product`** — the workhorse product tile
-- Background `{colors.canvas}`, rounded `{rounded.xl}` (16px), padding `{spacing.xl}` (24px), Soft Lift shadow
-- Layout: hero photo (1:1 ratio) on top, title in `{typography.display-xs}`, spec rows in `{typography.caption-md}`, price in `{typography.price-md}`, CTA pinned to bottom
-- Used for: laptop catalog cards, desktop catalog cards
-
-**`card-product-feature`** — full-row feature card with photo + copy
-- Background `{colors.cloud}`, rounded `{rounded.xl}`, padding `{spacing.xxl}` (32px)
-- Layout: photo on the left (50% width), copy on the right with section eyebrow + title + body + CTA pair
-- Used for: "Trending laptops" feature rows, "Shop these must haves"
-
-**`card-pricing-tier`** + **`card-pricing-tier-featured`**
-- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, Soft Lift shadow
-- Tier name in `{typography.display-sm}`, monthly price in `{typography.display-md}` with `{typography.caption-md}` cadence, page count caption, full feature list, primary CTA
-- Featured tier carries `{colors.primary}` text accent on the price-stamp + a `{colors.primary}` thin top border instead of a colored card background — never inverted to dark
-
-**`card-customer-story`** — the three-up testimonial tile
-- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}` (16px), Soft Lift shadow
-- 16:9 photo at top in `{rounded.xl}` frame, quote excerpt in `{typography.body-md}`, attribution row at the bottom
-- Used in the "See what our customers say" homepage section
-
-**`card-article-tile`** — the four-up "Latest from HP" tile
-- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}`, Soft Lift shadow
-- 16:9 thumbnail at top, date eyebrow in `{typography.caption-sm}`, title in `{typography.body-emphasis}`, "Read more" link
-
-**`card-category-icon`** — the small icon-and-label card in the homepage "Our Products" row
-- Background `{colors.canvas}`, rounded `{rounded.lg}` (8px), padding `{spacing.md}`
-- 48px icon at top, label in `{typography.body-emphasis}` below
-- Used for: Laptops, Desktops, Printers, Computer Tools, Accessories, Enterprise Solutions
-
-**`hero-promo-card`** — the homepage hero card with chevron decorations
-- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}` (32px)
-- Photography occupies left half; copy block (eyebrow + headline + price stamp + CTA pair) occupies right half
-- Flanked by `chevron-decoration` blue slashes outside the card's bounding box on left and right edges
-
-**`promo-strip-dark`** — the inline dark navy promo block
-- Background `{colors.ink}`, text `{colors.on-ink}`, rounded `{rounded.xl}`, padding `{spacing.xxl} 48px`
-- Used for: "When did work start getting in the way of work?" mid-page promo, the SMB testimonial slab
+**`.btn-text-link`** — Inline text link
+- Text `{colors.primary}`, no background, no border
+- Hover: underline, no color change
 
 ### Inputs & Forms
 
-**`text-input`** + **`text-input-focused`**
-- Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px
-- 1px `{colors.steel}` border in default; gains 1px `{colors.ink}` border on focus (no halo)
+**`.text-input`** — Standard text field
+- Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.steel}` border, `rounded-none`, `h-11`
+- Focus: border becomes 1px `{colors.primary}`, no halo, no transition
 
-**`text-input-search`** — pill search in the top nav
-- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 40px, 1px `{colors.steel}` border, magnifying-glass icon at right
+**`textarea.text-input`** — Multiline variant
+- Same as text-input, `min-h-[88px]`, height auto
 
-**`badge-pill-ink`** — filled tag pill
-- Background `{colors.ink}`, text `{colors.on-primary}`, rounded `{rounded.lg}`, padding 6px 12px, type `{typography.body-md}`
-- Used inline next to product titles to mark "New" or featured indicators
+**`select.text-input`** — Dropdown select
+- Same surface as text-input, caret via OS or custom SVG
 
-**`badge-pill-outline`** — outlined tag pill
-- Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.ink}` border, rounded `{rounded.lg}`, padding 6px 12px
+### Cards & Panels
 
-**`badge-sale-coral`** — the sale price-stamp
-- Background `{colors.bloom-coral}`, text `{colors.on-primary}`, rounded `{rounded.sm}`, padding `{spacing.xxs} {spacing.xs}`, type `{typography.caption-bold}`
-- Used for: "Save $200", "25% off" overlay tags on hero promo cards
+**`.card-product`** — Standard content card
+- Background `{colors.paper}`, 1px `{colors.hairline}` border, `rounded-none`, padding `{spacing.md}` (16px)
+- No shadow. Dense surfaces use padding `{spacing.sm}` (12px).
+
+**`.modal-backdrop`** — Modal overlay backdrop
+- `background-color: rgba(0,0,0,0.6)` — fixed, never themed
+- Modal frame: `{colors.paper}` background, 1px `{colors.hairline}` border, `rounded-none`
+
+### Badges & Tags
+
+**`.badge-pill-*`** — Status pills (StatusBadge, SimulationStatusBadge)
+- `rounded-pill` (9999px) — THE ONLY rounded surfaces on status badges
+- Semantic fill: planned→warn-soft/warn, active→primary-soft/primary, closed→cloud/graphite
+- done→success-soft/success, review→warn-soft/warn, pending→cloud/graphite, in-progress→primary-soft/primary
+
+**MITRE technique tags** — NOT pills
+- Angular (`rounded-none`), 1px `{colors.hairline}` border, `{colors.cloud}` background, caption-md size
+- They are labels, not status signals — no pill shape
 
 ### Navigation
 
-**`utility-strip`** — the top-of-page utility bar
-- Background `{colors.ink}`, text `{colors.on-primary}`, height 36px, padding 0 {spacing.xl}, type `{typography.caption-md}`
-- Holds: country/locale picker, "For Business / For Home" toggle, "Sign in" link, cart link
+**`.utility-strip`** — Top utility bar
+- Background `{colors.slab}`, text `{colors.slab-text}`, height 36px, `font-mono` for user role/username
 
-**`nav-bar-top`** — desktop top nav (sits below utility strip)
-- Background `{colors.canvas}`, height 64px, padding 0 32px
-- Layout: HP wordmark logo flush left → middle category list (Laptops / Desktops / Printers / Accessories / Solutions / Support) → right slot with Search field, Sign-in link, Cart icon
-- 1px `{colors.hairline}` bottom border separates nav from page
+**`.nav-bar-top`** — Main navigation
+- Background `{colors.slab}` (fixed dark — does not invert), height 56px
+- Active link: 2px `{colors.primary}` bottom border
 
-**`nav-link`**
-- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.xs} {spacing.md}`
-- Active page draws a 2px `{colors.primary}` underline below the text baseline
+**`.nav-link`** — Navigation anchor
+- Text `{colors.slab-text}`, caption-md, `rounded-none`
+- Active state: 2px primary bottom border
 
-**Top Nav (Mobile)**
-- Same height, hamburger icon replaces the middle category list, Search and Cart stay visible
-- Drawer expands as a full-canvas sheet with `{typography.body-lg}` link list and a sticky Sign-in CTA at bottom
+### Data Tables
 
-**`category-tab`** + **`category-tab-active`** — the pill sub-nav
-- Default: background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-emphasis}`, rounded `{rounded.pill}`, padding `{spacing.xs} {spacing.lg}`
-- Active: background `{colors.ink}`, text `{colors.on-primary}`, same rounding
-- Used on the laptop-shop page for "All / Trending / On Sale" filtering, and on the homepage "How can we help?" closing band
+- `table-layout: fixed`, `word-break: break-word`
+- Header row: background `{colors.cloud}`, `body-emphasis` text, 1px `{colors.hairline}` bottom border
+- Data cells: 44px min-height, 1px `{colors.hairline}` bottom border
+- ID / date / technique columns: `font-mono`
+- Zebra striping optional — use `{colors.cloud}` for odd rows if table is wide
 
-### Signature Components
+### Toast Notifications
 
-**`chevron-decoration`** — the geometric blue slash motif
-- Background `{colors.primary}`, rounded `{rounded.none}`, no shadow
-- Renders as a sharp parallelogram cut at ~60° angle, sized to the height of the hero card it flanks
-- Reserved for hero bands and full-page banners — never decorative noise inside cards
+- Angular (`rounded-none`), 4px left border strip in semantic color (success/warn/bloom-deep/primary)
+- Background `{colors.paper}`, 1px `{colors.hairline}` border
 
-**`faq-row`** — the accordion row on the printer-plan FAQ
-- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg} {spacing.xl}`, type `{typography.body-emphasis}`
-- 1px `{colors.hairline}` divider between rows; chevron-down icon on the right collapsed, chevron-up when expanded
-- Body answer renders inside the same row container in `{typography.body-md}` after expansion
-
-**`help-band-dark`** — the closing "How can we help?" prelude band
-- Background `{colors.ink}`, text `{colors.on-primary}`, padding 64px {spacing.xl}
-- Layout: large lifestyle photograph as the band background (low-opacity) with chip-style category tabs centered: Browse Topics / Live Chat / Contact / Diagnose / Order Status
-
-**`footer-dark`**
-- Background `{colors.ink}`, text `{colors.on-primary}`, type `{typography.body-md}`, padding 64px {spacing.xl}
-- 5-column link grid (Company / Shop / Support / Resources / Connect) with `{typography.body-emphasis}` headers and `{typography.caption-md}` link rows
-- Bottom strip carries social icons, language picker, and legal lines in `{typography.caption-sm}` muted to `{colors.steel}`
+---
 
 ## Do's and Don'ts
 
 ### Do
-- Reserve `{colors.primary}` for the primary CTA, link color, and `chevron-decoration` motif — at most twice per viewport
-- Set every headline in Forma DJR Micro at weight 500 with line-height 1.0 — resist the urge to bump weight at hero scale
-- Use `{rounded.xl}` (16px) for cards and photo frames; `{rounded.md}` (4px) for buttons and inputs — keep the two-tier split sharp
-- Pair white `{colors.canvas}` body bands with `{colors.cloud}` (`#f7f7f7`) alternating bands; let the gray do the breathing
-- Close every page rhythm with a dark-navy `{colors.ink}` slab — the "How can we help?" prelude + footer
-- Set button labels in uppercase with `{typography.button-md}` (0.7px tracking) — the only place the system tracks letters
-- Use Soft Lift shadow exclusively for product cards and pricing tiers — leave section bands flat
-- Frame product photography inside `{rounded.xl}` containers; never use full-bleed circular masks
+- `rounded-none` on every container, button, input, modal, dropdown, panel, tag
+- `font-mono` on IDs, ISO dates, MITRE codes, commands, output, metrics
+- Semantic color for status: success green, warn amber, bloom-deep for errors
+- 1px hairline borders for panel separation — never shadow
+- Instant hover (no `transition-*`)
+- Sharp focus ring: `outline: 2px solid {colors.primary}; outline-offset: 0`
+- Keep Inter for all headers, labels, prose, navigation, button text
 
 ### Don't
-- Don't introduce secondary saturated colors outside `{colors.primary}` family + the `bloom-coral` sale-tag and `storm` printer-plan accents
-- Don't apply heavy material shadows — depth is via color contrast (cloud vs. white) and Soft Lift only
-- Don't round buttons above `{rounded.md}` (4px); a soft 8px+ button reads as a different brand
-- Don't run Forma DJR Micro below 12px — small caption at 11px is the floor
-- Don't use the chevron decoration as inline noise; it is a hero-only architectural element tied to the wordmark
-- Don't drop ink text opacity to create hierarchy — switch surface or shift to `{colors.charcoal}` / `{colors.graphite}` instead
-- Don't replace the HP wordmark with a generic sans lockup; the wordmark is a custom mark with its own ratio
+- Don't round containers — not even `2px`. If it's not a status pill or avatar, `rounded-none`
+- Don't use `font-mono` for headers, labels, prose, or button text
+- Don't add `transition-*` on any interactive element
+- Don't use shadows — hairline borders only
+- Don't use `{colors.primary}` as a background for sections
+- Don't drop opacity on ink text — use `{colors.charcoal}` or `{colors.graphite}` for hierarchy
+- Don't use animated spinners with rounded tracks — a simple spinning line or text indicator fits the terminal aesthetic better
+- Don't apply `rounded-pill` to anything that is not a STATUS BADGE or AVATAR
 
-## Responsive Behavior
-
-### Breakpoints
-
-| Name | Width | Key Changes |
-|---|---|---|
-| Mobile | < 480px | Single-column stack; hamburger nav; section padding drops to ~48px; hero serif scales to ~36px |
-| Mobile-Large | 480–767px | Same column count; hero scales to ~44px; pricing tiers stack vertically |
-| Tablet | 768–1023px | 2-column product grid; pricing 2x2; nav still full text labels |
-| Desktop | 1024–1279px | 3-column product grid; 4-column pricing; full nav |
-| Desktop-Large | ≥ 1280px | 4-column product grid; 1366px content max-width with full-bleed bands |
-
-### Touch Targets
-
-Every interactive element clears 44×44px on mobile. `button-primary` at 44px height + 24px horizontal padding meets WCAG-AAA touch target. `category-tab` at 8px 20px padding bumps to 12px 24px on touch screens. Nav-link tap areas extend invisibly beyond the text run to the full 44px row height. Sticky cart/sign-in icons in the top nav use 44×44 invisible hit boxes around their visible 24×24 glyph.
-
-### Collapsing Strategy
-
-- **Utility strip**: stays visible on every breakpoint; dropdowns collapse into a single "Account" icon below 768px
-- **Top nav**: middle category list collapses into a hamburger drawer below 1024px; the right-side Search + Sign-in + Cart stay visible
-- **Hero**: stays single-column at every breakpoint; chevron decorations shrink to ~60% size on tablet and disappear entirely on mobile
-- **Product family grid**: 4 → 3 → 2 → 1 column as breakpoints shrink; cards keep `{rounded.xl}` corners at every size
-- **Pricing comparison table**: 4-column grid on desktop collapses to 2x2 on tablet, then stacks into individual accordion-style cards on mobile
-- **Footer**: 5-column link grid → 2-column tablet → single-column accordion on mobile; HP wordmark stays flush left
-
-### Image Behavior
-
-Hero photography uses `{rounded.xl}` containers at every breakpoint. The chevron decorations vanish on mobile; the underlying photo card centers in the viewport. Lifestyle photography in the testimonial and "how-can-we-help" bands maintains 16:9 ratio with horizontal cropping rather than letterboxing on mobile. There are no art-direction crop swaps between desktop and mobile — the same image is used at every size.
+---
 
 ## Iteration Guide
 
-1. Focus on ONE component at a time; resist refactoring an entire section in one pass
-2. Reference component names and tokens directly (`{colors.primary}`, `{typography.display-xxl}`, `{rounded.xl}`, `card-product`) — do not paraphrase to hex/px in prose
-3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically
-4. Add new variants as separate component entries (`-pressed`, `-disabled`, `-focused`); never bury state inside prose
-5. Default body to `{typography.body-md}`; reach for `{typography.body-emphasis}` for run-in bolds; keep display sizes for true heading roles
-6. Keep `{colors.primary}` scarce — at most two flame elements per viewport (one CTA + one chevron decoration). Three flame items in one viewport is over-saturation
-7. When introducing a new section band, choose from `{colors.canvas}` / `{colors.cloud}` / `{colors.fog}` / `{colors.ink}` — six pre-defined surface modes is the entire surface vocabulary
+1. One component at a time — no section refactors in one pass
+2. Reference tokens by name (`{colors.primary}`, `font-mono`, `rounded-none`) — not hex/px in prose
+3. When adding a new data field: ask "is this a datum (ID, date, code, metric)?" → `font-mono`. If no → Inter
+4. New status signals: map to existing semantic tokens (success/warn/bloom-deep/primary). No ad-hoc colors
+5. For new badge-like elements: pill ONLY if it's a status indicator with semantic color. Otherwise angular tag

From 64da94f10d8f6574776b02f12239b397a9e1e887 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:38:43 +0200
Subject: [PATCH 04/12] feat(design): refresh tailwind tokens for brutalist
 terminal aesthetic

---
 frontend/src/styles/index.css | 56 ++++++++++++++++++++++-------------
 frontend/tailwind.config.ts   | 55 +++++++++++++++++++---------------
 2 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 2ca6ebc..58c3201 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -19,9 +19,11 @@
     --color-ink-on: #ffffff;
     --color-charcoal: #3d3d3d;
     --color-graphite: #636363;
-
-    /* DESIGN.md: body line-height 1.4 when substituting Inter */
-    font-size: 16.5px;
+    /* Semantic status tokens — WCAG AA on canvas and slab surfaces */
+    --color-success: #16a34a;
+    --color-success-soft: #dcfce7;
+    --color-warn: #d97706;
+    --color-warn-soft: #fef3c7;
   }
 
   /* Dark mode overrides */
@@ -38,6 +40,11 @@
     --color-ink-on: #111827;
     --color-charcoal: #d1d5db;
     --color-graphite: #9ca3af;
+    /* Semantic status tokens — dark variants, WCAG AA on #111827 slab */
+    --color-success: #22c55e;
+    --color-success-soft: #14532d;
+    --color-warn: #f59e0b;
+    --color-warn-soft: #78350f;
   }
 
   html,
@@ -48,6 +55,8 @@
 
   body {
     @apply bg-canvas text-ink font-sans antialiased;
+    font-size: 16px;
+    line-height: 1.4;
     font-feature-settings: 'cv11', 'ss01';
   }
 
@@ -57,19 +66,20 @@
   h4,
   h5,
   h6 {
-    line-height: 1;
+    line-height: 1.1;
     font-weight: 500;
   }
 }
 
 @layer components {
   /*
-   * DESIGN.md component recipes.
-   * Buttons stay sharp (rounded-md = 4px); cards stay soft (rounded-xl = 16px).
+   * Terminal-SOC brutalist component recipes.
+   * border-radius: 0 everywhere except .badge-pill-* (status pills only).
+   * No transition-* on any interactive surface.
    */
 
   .btn-primary {
-    @apply inline-flex items-center justify-center gap-xs bg-primary text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
+    @apply inline-flex items-center justify-center gap-xs bg-primary text-white uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
   }
   .btn-primary:hover {
     @apply bg-primary-deep;
@@ -78,19 +88,19 @@
     @apply bg-steel cursor-not-allowed;
   }
 
-  /* btn-ink uses fixed dark slab so it doesn't invert in dark mode */
+  /* btn-ink: fixed dark slab — does not invert in dark mode */
   .btn-ink {
-    @apply inline-flex items-center justify-center gap-xs bg-slab text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
+    @apply inline-flex items-center justify-center gap-xs bg-slab text-slab-text uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
   }
   .btn-ink:hover {
-    @apply bg-paper;
+    @apply opacity-80;
   }
   .btn-ink:disabled {
     @apply bg-steel cursor-not-allowed;
   }
 
   .btn-outline {
-    @apply inline-flex items-center justify-center gap-xs bg-canvas text-primary border border-primary uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
+    @apply inline-flex items-center justify-center gap-xs bg-canvas text-primary border border-primary uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
   }
   .btn-outline:hover {
     @apply bg-primary-soft;
@@ -100,37 +110,41 @@
   }
 
   .btn-outline-ink {
-    @apply inline-flex items-center justify-center gap-xs bg-canvas text-ink border border-ink uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
+    @apply inline-flex items-center justify-center gap-xs bg-canvas text-ink border border-ink uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
   }
   .btn-outline-ink:hover {
     @apply bg-cloud;
   }
 
   .btn-text-link {
-    @apply inline-flex items-center gap-xxs text-primary font-medium text-[16px] leading-[1.38] underline-offset-2 hover:underline;
+    @apply inline-flex items-center gap-xxs text-primary font-medium text-[16px] leading-[1.4] underline-offset-2 hover:underline;
   }
 
   .text-input {
-    @apply block w-full bg-canvas text-ink rounded-md border border-steel px-md py-sm h-11 text-[16px] leading-[1.38] focus:outline-none focus:border-ink;
+    @apply block w-full bg-canvas text-ink rounded-none border border-steel px-md py-sm h-11 text-[16px] leading-[1.4] focus:outline-none focus:border-primary;
   }
 
+  /* Panel / card — hairline border, no shadow, no radius */
   .card-product {
-    @apply bg-canvas rounded-xl p-xl shadow-soft-lift;
-  }
-  .dark .card-product {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
+    @apply bg-paper border border-hairline rounded-none p-md;
   }
 
-  /* Fixed-color modal backdrop — must not use themed ink (inverts in dark mode) */
+  /* Fixed modal backdrop — must not use themed ink (inverts in dark mode) */
   .modal-backdrop {
     background-color: rgba(0, 0, 0, 0.6);
   }
 
+  /* Status pill badges — ONLY surfaces with rounded-pill */
   .badge-pill-ink {
-    @apply inline-flex items-center bg-ink text-white rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
+    @apply inline-flex items-center bg-ink text-white rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
   }
 
   .badge-pill-outline {
-    @apply inline-flex items-center bg-canvas text-ink border border-ink rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
+    @apply inline-flex items-center bg-canvas text-ink border border-ink rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
+  }
+
+  /* MITRE technique tags — angular, not pills */
+  .tag-mitre {
+    @apply inline-flex items-center bg-cloud text-ink border border-hairline rounded-none px-2 py-[2px] font-mono text-[12px] leading-[1.33];
   }
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 2fee123..6ccf51c 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,8 +1,8 @@
 import type { Config } from 'tailwindcss';
 
 /**
- * Tokens mirror DESIGN.md.
- * Forma DJR Micro substitut: Inter (bundled locally via @fontsource-variable/inter).
+ * Tokens mirror DESIGN.md (terminal-SOC aesthetic, sprint 7).
+ * Inter Variable: body/headers/labels. JetBrains Mono Variable: data cells only.
  * Dark mode: class-based, toggled by adding 'dark' to <html>.
  */
 const config: Config = {
@@ -11,7 +11,7 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        // Brand & Accent — primary stays fixed (HP Electric Blue never inverts)
+        // Brand & Accent — primary stays fixed (never inverts)
         primary: {
           DEFAULT: '#024ad8',
           bright: '#296ef9',
@@ -34,10 +34,19 @@ const config: Config = {
         },
         charcoal: 'var(--color-charcoal)',
         graphite: 'var(--color-graphite)',
-        // Fixed dark slab — never inverts in dark mode (utility strip, footer, dark bands)
+        // Fixed dark slab — never inverts in dark mode
         slab: '#111827',
         'slab-text': '#f9fafb',
         'slab-muted': '#6b7280',
+        // Semantic status tokens — light+dark variants via CSS vars
+        success: {
+          DEFAULT: 'var(--color-success)',
+          soft: 'var(--color-success-soft)',
+        },
+        warn: {
+          DEFAULT: 'var(--color-warn)',
+          soft: 'var(--color-warn-soft)',
+        },
         // Semantic / decorative — fixed (not themeable)
         bloom: {
           coral: '#ff5050',
@@ -53,26 +62,28 @@ const config: Config = {
       },
       fontFamily: {
         sans: ['"Inter Variable"', 'Inter', 'Arial', 'sans-serif'],
+        mono: ['"JetBrains Mono Variable"', '"JetBrains Mono"', 'ui-monospace', 'monospace'],
       },
       fontSize: {
-        // DESIGN.md typography scale
-        'display-xxl': ['72px', { lineHeight: '1.0', fontWeight: '500' }],
-        'display-xl': ['56px', { lineHeight: '1.0', fontWeight: '500' }],
-        'display-lg': ['44px', { lineHeight: '1.0', fontWeight: '500' }],
-        'display-md': ['32px', { lineHeight: '1.0', fontWeight: '500' }],
-        'display-sm': ['24px', { lineHeight: '1.17', fontWeight: '500' }],
-        'display-xs': ['20px', { lineHeight: '1.0', fontWeight: '500' }],
-        'body-lg': ['18px', { lineHeight: '1.33', fontWeight: '400' }],
-        'body-md': ['16px', { lineHeight: '1.38', fontWeight: '400' }],
-        'body-emphasis': ['16px', { lineHeight: '1.38', fontWeight: '500' }],
+        // Terminal-SOC display scale — reduced per §0 D9
+        'display-xxl': ['40px', { lineHeight: '1.1', fontWeight: '500' }],
+        'display-xl': ['32px', { lineHeight: '1.1', fontWeight: '500' }],
+        'display-lg': ['28px', { lineHeight: '1.1', fontWeight: '500' }],
+        'display-md': ['24px', { lineHeight: '1.1', fontWeight: '500' }],
+        'display-sm': ['20px', { lineHeight: '1.1', fontWeight: '500' }],
+        'display-xs': ['16px', { lineHeight: '1.1', fontWeight: '600' }],
+        'body-lg': ['18px', { lineHeight: '1.4', fontWeight: '400' }],
+        'body-md': ['16px', { lineHeight: '1.4', fontWeight: '400' }],
+        'body-emphasis': ['16px', { lineHeight: '1.4', fontWeight: '500' }],
         'caption-md': ['14px', { lineHeight: '1.5', fontWeight: '400' }],
         'caption-bold': ['14px', { lineHeight: '1.3', fontWeight: '700' }],
         'caption-sm': ['12px', { lineHeight: '1.33', fontWeight: '400' }],
-        'link-md': ['16px', { lineHeight: '1.38', fontWeight: '500' }],
-        'button-md': ['14px', { lineHeight: '1.4', fontWeight: '600', letterSpacing: '0.7px' }],
+        'link-md': ['16px', { lineHeight: '1.4', fontWeight: '500' }],
+        'button-md': ['14px', { lineHeight: '1.4', fontWeight: '600' }],
+        'button-sm': ['12.6px', { lineHeight: '1.0', fontWeight: '700' }],
       },
       spacing: {
-        // DESIGN.md spacing tokens (named, complement Tailwind defaults)
+        // Named tokens complement Tailwind defaults
         xxs: '4px',
         xs: '8px',
         sm: '12px',
@@ -80,19 +91,15 @@ const config: Config = {
         lg: '20px',
         xl: '24px',
         xxl: '32px',
-        section: '80px',
+        section: '48px',
       },
       borderRadius: {
-        // DESIGN.md radius tokens
+        // Brutalist: 0 everywhere except status pills and avatars
         none: '0px',
-        xs: '2px',
-        sm: '3px',
-        md: '4px',
-        lg: '8px',
-        xl: '16px',
         pill: '9999px',
       },
       boxShadow: {
+        // Kept in config for backwards compat but no component should apply them
         'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)',
         floating: '0 8px 24px rgba(26, 26, 26, 0.12)',
         'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)',

From c791e50108ac755813740012b93bbd05acd296c1 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:39:13 +0200
Subject: [PATCH 05/12] feat(design): bundle JetBrains Mono for data cells

---
 frontend/package-lock.json    | 10 ++++++++++
 frontend/package.json         |  1 +
 frontend/src/styles/fonts.css |  3 ++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5d57bb4..5d198e7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "mimic-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@tanstack/react-query": "^5.59.0",
         "axios": "^1.7.7",
         "lucide-react": "^1.16.0",
@@ -1013,6 +1014,15 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7eed3cd..3a16c03 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@tanstack/react-query": "^5.59.0",
     "axios": "^1.7.7",
     "lucide-react": "^1.16.0",
diff --git a/frontend/src/styles/fonts.css b/frontend/src/styles/fonts.css
index 23618ba..781ed28 100644
--- a/frontend/src/styles/fonts.css
+++ b/frontend/src/styles/fonts.css
@@ -1,6 +1,7 @@
 /*
  * Inter Variable — bundled locally via @fontsource-variable/inter.
+ * JetBrains Mono Variable — bundled locally via @fontsource-variable/jetbrains-mono.
  * NO remote CDN / Google Fonts loading at runtime.
- * Forma DJR Micro substitute per DESIGN.md §Note on Font Substitutes.
  */
 @import '@fontsource-variable/inter/index.css';
+@import '@fontsource-variable/jetbrains-mono/index.css';

From ec7800ae38792be21b172e50b301a9ab52478692 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:42:26 +0200
Subject: [PATCH 06/12] refactor(components): squared shapes + mono data cells
 across all components

---
 frontend/src/components/ConfirmDialog.tsx          |  2 +-
 frontend/src/components/EmptyState.tsx             |  2 +-
 frontend/src/components/ErrorState.tsx             |  2 +-
 frontend/src/components/ExportEngagementButton.tsx |  6 +++---
 frontend/src/components/Layout.tsx                 |  6 +++---
 frontend/src/components/LoadingState.tsx           |  4 ++--
 frontend/src/components/MitreMatrixModal.tsx       | 10 +++++-----
 frontend/src/components/MitreTechniquePicker.tsx   |  6 +++---
 frontend/src/components/MitreTechniqueTag.tsx      |  8 ++++----
 frontend/src/components/MitreTechniquesField.tsx   |  2 +-
 frontend/src/components/SimulationList.tsx         | 10 +++++-----
 frontend/src/components/SimulationStatusBadge.tsx  | 10 ++++------
 frontend/src/components/StatusBadge.tsx            |  8 +++-----
 frontend/src/components/TemplatePickerModal.tsx    |  4 ++--
 frontend/src/components/Toast.tsx                  | 13 ++++---------
 15 files changed, 42 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index da36019..96dcf6e 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -25,7 +25,7 @@ export function ConfirmDialog({
       className="fixed inset-0 z-50 flex items-center justify-center"
     >
       <div className="modal-backdrop absolute inset-0" onClick={onCancel} aria-hidden="true" />
-      <div className="relative card-product shadow-floating max-w-sm w-full mx-md flex flex-col gap-md">
+      <div className="relative card-product max-w-sm w-full mx-md flex flex-col gap-md">
         <h2 id="confirm-dialog-title" className="text-[20px] font-medium text-ink">
           {title}
         </h2>
diff --git a/frontend/src/components/EmptyState.tsx b/frontend/src/components/EmptyState.tsx
index c744642..9725215 100644
--- a/frontend/src/components/EmptyState.tsx
+++ b/frontend/src/components/EmptyState.tsx
@@ -10,7 +10,7 @@ export function EmptyState({ title, description, action }: EmptyStateProps): JSX
   return (
     <div
       data-testid="empty-state"
-      className="card-product flex flex-col items-start gap-md border border-hairline"
+      className="card-product flex flex-col items-start gap-md"
     >
       <h2 className="text-[24px] font-medium text-ink">{title}</h2>
       {description ? <p className="text-[16px] text-charcoal">{description}</p> : null}
diff --git a/frontend/src/components/ErrorState.tsx b/frontend/src/components/ErrorState.tsx
index 20398d7..9bf984b 100644
--- a/frontend/src/components/ErrorState.tsx
+++ b/frontend/src/components/ErrorState.tsx
@@ -9,7 +9,7 @@ export function ErrorState({ title = 'Something went wrong', message, onRetry }:
     <div
       role="alert"
       data-testid="error-state"
-      className="card-product border border-bloom-deep/20 flex flex-col items-start gap-md"
+      className="card-product border-l-4 border-l-bloom-deep flex flex-col items-start gap-md"
     >
       <h2 className="text-[24px] font-medium text-bloom-deep">{title}</h2>
       <p className="text-[16px] text-charcoal">{message}</p>
diff --git a/frontend/src/components/ExportEngagementButton.tsx b/frontend/src/components/ExportEngagementButton.tsx
index 9eecfb4..482cf21 100644
--- a/frontend/src/components/ExportEngagementButton.tsx
+++ b/frontend/src/components/ExportEngagementButton.tsx
@@ -54,7 +54,7 @@ export function ExportEngagementButton({ engagementId }: ExportEngagementButtonP
       <div className="inline-flex">
         <button
           type="button"
-          className="btn-outline rounded-r-none border-r-0"
+          className="btn-outline border-r-0"
           onClick={() => setOpen((v) => !v)}
           data-testid="export-btn"
         >
@@ -64,7 +64,7 @@ export function ExportEngagementButton({ engagementId }: ExportEngagementButtonP
           type="button"
           aria-label="Export options"
           aria-expanded={open}
-          className="btn-outline rounded-l-none px-sm"
+          className="btn-outline px-sm"
           onClick={() => setOpen((v) => !v)}
           data-testid="export-dropdown-toggle"
         >
@@ -74,7 +74,7 @@ export function ExportEngagementButton({ engagementId }: ExportEngagementButtonP
 
       {open ? (
         <div
-          className="absolute right-0 top-full mt-xxs bg-canvas border border-hairline rounded-md shadow-floating dark:shadow-floating-dark z-20 min-w-[160px]"
+          className="absolute right-0 top-full mt-xxs bg-canvas border border-hairline rounded-none z-20 min-w-[160px]"
           role="menu"
         >
           {FORMATS.map(({ label, value }) => (
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index e12c4a7..04079ff 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -34,15 +34,15 @@ export function Layout(): JSX.Element {
           <span className="font-medium tracking-[0.5px] uppercase">Mimic · Purple Team BAS</span>
           {user ? (
             <div className="flex items-center gap-md">
-              <span className="text-[12px] uppercase tracking-[0.5px] text-slab-muted">
+              <span className="text-[12px] uppercase tracking-[0.5px] text-slab-muted font-mono">
                 {user.role}
               </span>
-              <span className="text-[14px]">{user.username}</span>
+              <span className="text-[14px] font-mono">{user.username}</span>
               <button
                 type="button"
                 onClick={cycleTheme}
                 aria-label={`Theme: ${themeLabel(theme)} — click to cycle`}
-                className="flex items-center gap-xxs text-[12px] text-slab-muted hover:text-slab-text transition-colors"
+                className="flex items-center gap-xxs text-[12px] text-slab-muted hover:text-slab-text"
               >
                 <ThemeIcon theme={theme} />
                 <span className="uppercase tracking-[0.5px]">{themeLabel(theme)}</span>
diff --git a/frontend/src/components/LoadingState.tsx b/frontend/src/components/LoadingState.tsx
index 5ce3530..268b7b0 100644
--- a/frontend/src/components/LoadingState.tsx
+++ b/frontend/src/components/LoadingState.tsx
@@ -4,9 +4,9 @@ export function LoadingState({ label = 'Loading…' }: { label?: string }): JSX.
       role="status"
       aria-live="polite"
       data-testid="loading-state"
-      className="flex items-center justify-center py-section text-graphite text-[16px]"
+      className="flex items-center justify-center py-section text-graphite text-[16px] font-mono"
     >
-      <span className="inline-block h-2 w-2 rounded-pill bg-primary animate-pulse mr-sm" />
+      <span className="inline-block h-2 w-2 bg-primary animate-pulse mr-sm" />
       {label}
     </div>
   );
diff --git a/frontend/src/components/MitreMatrixModal.tsx b/frontend/src/components/MitreMatrixModal.tsx
index 88660d0..086058f 100644
--- a/frontend/src/components/MitreMatrixModal.tsx
+++ b/frontend/src/components/MitreMatrixModal.tsx
@@ -170,7 +170,7 @@ export function MitreMatrixModal({
         role="dialog"
         aria-modal="true"
         aria-labelledby="matrix-modal-title"
-        className="relative bg-canvas rounded-xl shadow-floating dark:shadow-floating-dark max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col"
+        className="relative bg-canvas rounded-none border border-hairline max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col"
         style={{ width: '1400px' }}
         onKeyDown={handleKeyDown}
       >
@@ -230,7 +230,7 @@ export function MitreMatrixModal({
                       type="button"
                       onClick={() => toggleTactic(tactic.tactic_id)}
                       title={`${tactic.tactic_name} (${tactic.tactic_id}) — click to tag this tactic`}
-                      className={`w-full text-left px-xs py-xxs rounded-t-sm border border-b-0 border-hairline transition-colors ${
+                      className={`w-full text-left px-xs py-xxs rounded-none border border-b-0 border-hairline ${
                         tacticSelected
                           ? 'bg-primary border-primary'
                           : 'bg-cloud hover:bg-fog'
@@ -251,7 +251,7 @@ export function MitreMatrixModal({
                     </button>
 
                     {/* Techniques */}
-                    <div className="border border-hairline rounded-b-sm overflow-hidden flex flex-col">
+                    <div className="border border-hairline rounded-none overflow-hidden flex flex-col">
                       {visibleTechniques.map((tech, techIdx) => {
                         const isSelected = selectedTechMap.has(tech.id);
                         const isExpanded = expandedTechniques.has(tech.id) || autoExpanded.has(tech.id);
@@ -296,7 +296,7 @@ export function MitreMatrixModal({
                                   isSelected ? 'text-white' : 'text-ink'
                                 }`}
                               >
-                                <span className="font-semibold block truncate">{tech.id}</span>
+                                <span className="font-mono font-semibold block truncate">{tech.id}</span>
                                 <span className={`block truncate text-[10px] ${isSelected ? 'text-white/80' : 'text-charcoal'}`}>
                                   {tech.name}
                                 </span>
@@ -318,7 +318,7 @@ export function MitreMatrixModal({
                                         : 'bg-cloud text-charcoal hover:bg-fog'
                                     }`}
                                   >
-                                    <span className="font-semibold block truncate">{sub.id}</span>
+                                    <span className="font-mono font-semibold block truncate">{sub.id}</span>
                                     <span className="block truncate">{sub.name}</span>
                                   </button>
                                 );
diff --git a/frontend/src/components/MitreTechniquePicker.tsx b/frontend/src/components/MitreTechniquePicker.tsx
index 5d0106b..1190881 100644
--- a/frontend/src/components/MitreTechniquePicker.tsx
+++ b/frontend/src/components/MitreTechniquePicker.tsx
@@ -107,7 +107,7 @@ export function MitreTechniquePicker({
       />
 
       {open && (
-        <div className="absolute z-20 w-full mt-xxs bg-canvas border border-steel rounded-md shadow-floating overflow-hidden">
+        <div className="absolute z-20 w-full mt-xxs bg-canvas border border-steel rounded-none overflow-hidden">
           {isFetching && (
             <div className="px-md py-sm text-[14px] text-graphite">Searching…</div>
           )}
@@ -144,10 +144,10 @@ export function MitreTechniquePicker({
                     selectItem(item);
                   }}
                 >
-                  <span className="font-medium">{item.id}</span>
+                  <span className="font-mono font-medium">{item.id}</span>
                   <span className="text-charcoal"> — {item.name}</span>
                   {item.tactics.length > 0 && (
-                    <span className="text-graphite"> ({item.tactics[0]})</span>
+                    <span className="font-mono text-graphite"> ({item.tactics[0]})</span>
                   )}
                 </li>
               ))}
diff --git a/frontend/src/components/MitreTechniqueTag.tsx b/frontend/src/components/MitreTechniqueTag.tsx
index 7874057..a064d1f 100644
--- a/frontend/src/components/MitreTechniqueTag.tsx
+++ b/frontend/src/components/MitreTechniqueTag.tsx
@@ -12,7 +12,7 @@ interface TacticTagProps {
   disabled?: boolean;
 }
 
-// Technique chip — soft blue, id only, name in title
+// Technique tag — angular, soft blue, monospace ID
 export function MitreTechniqueTag({
   technique,
   onRemove,
@@ -22,7 +22,7 @@ export function MitreTechniqueTag({
     <span
       data-testid="mitre-technique-tag"
       title={`${technique.id} — ${technique.name}`}
-      className="inline-flex items-center gap-xxs bg-primary-soft text-primary-deep rounded-full px-sm py-xxs text-[13px] font-medium"
+      className="inline-flex items-center gap-xxs bg-primary-soft text-primary-deep rounded-none border border-primary-soft px-sm py-xxs text-[13px] font-mono"
     >
       {technique.id}
       {!disabled && (
@@ -39,7 +39,7 @@ export function MitreTechniqueTag({
   );
 }
 
-// Tactic chip — primary blue filled, id only, name in title
+// Tactic tag — angular, primary blue filled, monospace ID
 export function MitreTacticTag({
   tactic,
   onRemove,
@@ -49,7 +49,7 @@ export function MitreTacticTag({
     <span
       data-testid="mitre-tactic-tag"
       title={`${tactic.id} — ${tactic.name}`}
-      className="inline-flex items-center gap-xxs bg-primary text-white rounded-full px-sm py-xxs text-[13px] font-medium"
+      className="inline-flex items-center gap-xxs bg-primary text-white rounded-none px-sm py-xxs text-[13px] font-mono"
     >
       {tactic.id}
       {!disabled && (
diff --git a/frontend/src/components/MitreTechniquesField.tsx b/frontend/src/components/MitreTechniquesField.tsx
index 1c1cc09..6314bd8 100644
--- a/frontend/src/components/MitreTechniquesField.tsx
+++ b/frontend/src/components/MitreTechniquesField.tsx
@@ -116,7 +116,7 @@ export function MitreTechniquesField({
             aria-label="Open MITRE matrix"
             onClick={() => { setShowPicker(false); setShowMatrix(true); }}
             disabled={isPending}
-            className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-md border border-steel text-graphite hover:text-ink hover:border-ink transition-colors"
+            className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-none border border-steel text-graphite hover:text-ink hover:border-ink"
           >
             <Grid2x2 size={16} />
           </button>
diff --git a/frontend/src/components/SimulationList.tsx b/frontend/src/components/SimulationList.tsx
index 2028e9d..6d301d8 100644
--- a/frontend/src/components/SimulationList.tsx
+++ b/frontend/src/components/SimulationList.tsx
@@ -73,7 +73,7 @@ function NewSimulationDropdown({ engagementId }: { engagementId: number }): JSX.
       <div className="inline-flex">
         <button
           type="button"
-          className="btn-primary rounded-r-none border-r border-primary-deep"
+          className="btn-primary border-r border-primary-deep"
           onClick={handleBlank}
           data-testid="new-simulation-btn"
         >
@@ -83,7 +83,7 @@ function NewSimulationDropdown({ engagementId }: { engagementId: number }): JSX.
           type="button"
           aria-label="More options"
           aria-expanded={open}
-          className="btn-primary rounded-l-none px-sm"
+          className="btn-primary px-sm"
           onClick={() => setOpen((v) => !v)}
           data-testid="new-simulation-dropdown-toggle"
         >
@@ -93,7 +93,7 @@ function NewSimulationDropdown({ engagementId }: { engagementId: number }): JSX.
 
       {open ? (
         <div
-          className="absolute right-0 top-full mt-xxs bg-canvas border border-hairline rounded-md shadow-floating dark:shadow-floating-dark z-20 min-w-[180px]"
+          className="absolute right-0 top-full mt-xxs bg-canvas border border-hairline rounded-none z-20 min-w-[180px]"
           role="menu"
         >
           <button
@@ -199,7 +199,7 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
                     {sim.name}
                   </Link>
                 </td>
-                <td className="px-xl py-md text-charcoal text-[14px]">
+                <td className="px-xl py-md text-charcoal text-[14px] font-mono">
                   {(() => {
                     const items = [
                       ...(sim.tactics ?? []).map((t) => t.id),
@@ -213,7 +213,7 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
                 <td className="px-xl py-md">
                   <SimulationStatusBadge status={sim.status} />
                 </td>
-                <td className="px-xl py-md text-charcoal text-[14px]">
+                <td className="px-xl py-md text-charcoal text-[14px] font-mono">
                   {formatDate(sim.executed_at)}
                 </td>
               </tr>
diff --git a/frontend/src/components/SimulationStatusBadge.tsx b/frontend/src/components/SimulationStatusBadge.tsx
index 7d8cf78..7665441 100644
--- a/frontend/src/components/SimulationStatusBadge.tsx
+++ b/frontend/src/components/SimulationStatusBadge.tsx
@@ -7,19 +7,17 @@ const LABELS: Record<SimulationStatus, string> = {
   done: 'Done',
 };
 
-// Fixed colors — badge backgrounds are decorative/semantic, not themeable.
-// text-white is hardcoded (not text-canvas) so dark mode doesn't invert it to near-black.
 const STYLES: Record<SimulationStatus, string> = {
-  pending: 'bg-fog text-charcoal border border-hairline',
+  pending: 'bg-cloud text-graphite border border-hairline',
   in_progress: 'bg-primary-soft text-primary-deep',
-  review_required: 'bg-bloom-coral text-white',
-  done: 'bg-storm-deep text-white',
+  review_required: 'bg-warn-soft text-warn',
+  done: 'bg-success-soft text-success',
 };
 
 export function SimulationStatusBadge({ status }: { status: SimulationStatus }): JSX.Element {
   return (
     <span
-      className={`inline-flex items-center rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
+      className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
       data-testid="simulation-status-badge"
       data-status={status}
     >
diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
index 74290f0..971f7ec 100644
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@@ -7,17 +7,15 @@ const LABELS: Record<EngagementStatus, string> = {
 };
 
 const STYLES: Record<EngagementStatus, string> = {
-  // Outlined ink for planned (neutral), filled primary for active (engagement live),
-  // outlined steel for closed (muted). Stays within DESIGN.md palette.
-  planned: 'bg-canvas text-ink border border-ink',
-  active: 'bg-primary text-white',
+  planned: 'bg-warn-soft text-warn border border-warn',
+  active: 'bg-primary-soft text-primary-deep',
   closed: 'bg-cloud text-graphite border border-hairline',
 };
 
 export function StatusBadge({ status }: { status: EngagementStatus }): JSX.Element {
   return (
     <span
-      className={`inline-flex items-center rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
+      className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
       data-testid="status-badge"
       data-status={status}
     >
diff --git a/frontend/src/components/TemplatePickerModal.tsx b/frontend/src/components/TemplatePickerModal.tsx
index ccb16a9..4ca9452 100644
--- a/frontend/src/components/TemplatePickerModal.tsx
+++ b/frontend/src/components/TemplatePickerModal.tsx
@@ -34,7 +34,7 @@ export function TemplatePickerModal({
     >
       <div className="modal-backdrop absolute inset-0" onClick={onClose} aria-hidden="true" />
 
-      <div className="relative card-product shadow-floating dark:shadow-floating-dark max-w-xl w-full mx-md flex flex-col gap-md max-h-[80vh] overflow-hidden">
+      <div className="relative card-product max-w-xl w-full mx-md flex flex-col gap-md max-h-[80vh] overflow-hidden">
         <div className="flex items-center justify-between">
           <h2 id="tpl-picker-title" className="text-[20px] font-medium text-ink">
             From template…
@@ -43,7 +43,7 @@ export function TemplatePickerModal({
             type="button"
             aria-label="Close"
             onClick={onClose}
-            className="text-graphite hover:text-ink transition-colors text-[20px] leading-none"
+            className="text-graphite hover:text-ink text-[20px] leading-none"
           >
             ×
           </button>
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 0e267b8..3e0ed7e 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -1,9 +1,5 @@
 import { useToast } from '@/hooks/useToast';
 
-/**
- * Stack of toast notifications anchored bottom-right.
- * Pure DESIGN.md surfaces: rounded-xl, soft-lift, ink slab for errors.
- */
 export function ToastViewport(): JSX.Element {
   const { toasts, dismiss } = useToast();
   return (
@@ -15,19 +11,18 @@ export function ToastViewport(): JSX.Element {
       {toasts.map((t) => {
         const isError = t.kind === 'error';
         const isSuccess = t.kind === 'success';
-        // Fixed colors: toasts don't theme (error=dark slab, success=primary blue)
         const surface = isError
-          ? 'bg-slab text-slab-text'
+          ? 'bg-paper text-ink border border-hairline border-l-4 border-l-bloom-deep'
           : isSuccess
-            ? 'bg-primary text-white'
-            : 'bg-canvas text-ink border border-hairline';
+            ? 'bg-paper text-ink border border-hairline border-l-4 border-l-success'
+            : 'bg-paper text-ink border border-hairline border-l-4 border-l-primary';
         return (
           <div
             key={t.id}
             role="status"
             data-testid="toast"
             data-kind={t.kind}
-            className={`pointer-events-auto rounded-xl px-md py-sm shadow-soft-lift text-[14px] leading-[1.4] ${surface}`}
+            className={`pointer-events-auto rounded-none px-md py-sm text-[14px] leading-[1.4] ${surface}`}
           >
             <div className="flex items-start justify-between gap-sm">
               <span className="flex-1">{t.message}</span>

From 5cc830554cc2ece6cd887d497780d764d05d6070 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:44:47 +0200
Subject: [PATCH 07/12] refactor(pages): apply terminal-SOC aesthetic to all 8
 pages

---
 frontend/src/pages/EngagementDetailPage.tsx | 8 ++++----
 frontend/src/pages/EngagementFormPage.tsx   | 2 +-
 frontend/src/pages/EngagementsListPage.tsx  | 6 +++---
 frontend/src/pages/LoginPage.tsx            | 2 +-
 frontend/src/pages/SimulationFormPage.tsx   | 8 ++++----
 frontend/src/pages/TemplateFormPage.tsx     | 5 +++--
 frontend/src/pages/TemplatesListPage.tsx    | 4 ++--
 frontend/src/pages/UsersAdminPage.tsx       | 6 +++---
 8 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/EngagementDetailPage.tsx b/frontend/src/pages/EngagementDetailPage.tsx
index cf02d32..97b2741 100644
--- a/frontend/src/pages/EngagementDetailPage.tsx
+++ b/frontend/src/pages/EngagementDetailPage.tsx
@@ -35,7 +35,7 @@ export function EngagementDetailPage(): JSX.Element {
           <Link to="/engagements" className="btn-text-link text-[14px]">
             ← Back to engagements
           </Link>
-          <h1 className="text-[44px] font-medium leading-none">{eng.name}</h1>
+          <h1 className="text-[32px] font-medium leading-none">{eng.name}</h1>
           <div className="flex items-center gap-md">
             <StatusBadge status={eng.status} />
             <span className="text-[14px] text-graphite">
@@ -58,13 +58,13 @@ export function EngagementDetailPage(): JSX.Element {
           <h2 className="text-[20px] font-medium mb-md">Schedule</h2>
           <dl className="grid grid-cols-2 gap-md text-[14px]">
             <dt className="text-graphite">Start date</dt>
-            <dd className="text-ink">{eng.start_date}</dd>
+            <dd className="text-ink font-mono">{eng.start_date}</dd>
             <dt className="text-graphite">End date</dt>
-            <dd className="text-ink">{eng.end_date ?? '—'}</dd>
+            <dd className="text-ink font-mono">{eng.end_date ?? '—'}</dd>
             <dt className="text-graphite">Status</dt>
             <dd className="text-ink capitalize">{eng.status}</dd>
             <dt className="text-graphite">Created at</dt>
-            <dd className="text-ink">{eng.created_at}</dd>
+            <dd className="text-ink font-mono">{eng.created_at}</dd>
           </dl>
         </div>
 
diff --git a/frontend/src/pages/EngagementFormPage.tsx b/frontend/src/pages/EngagementFormPage.tsx
index 30f7df3..5495772 100644
--- a/frontend/src/pages/EngagementFormPage.tsx
+++ b/frontend/src/pages/EngagementFormPage.tsx
@@ -123,7 +123,7 @@ export function EngagementFormPage(): JSX.Element {
   return (
     <div className="flex flex-col gap-xl max-w-2xl">
       <header>
-        <h1 className="text-[44px] font-medium leading-none">
+        <h1 className="text-[32px] font-medium leading-none">
           {editing ? 'Edit engagement' : 'New engagement'}
         </h1>
         <p className="text-charcoal text-[16px] mt-sm">
diff --git a/frontend/src/pages/EngagementsListPage.tsx b/frontend/src/pages/EngagementsListPage.tsx
index 6c0e4c2..fc47ea6 100644
--- a/frontend/src/pages/EngagementsListPage.tsx
+++ b/frontend/src/pages/EngagementsListPage.tsx
@@ -35,7 +35,7 @@ export function EngagementsListPage(): JSX.Element {
     <div className="flex flex-col gap-xl">
       <header className="flex items-end justify-between gap-md">
         <div>
-          <h1 className="text-[44px] font-medium leading-none">Engagements</h1>
+          <h1 className="text-[32px] font-medium leading-none">Engagements</h1>
           <p className="text-charcoal text-[16px] mt-sm">
             Red team missions and their lifecycle status.
           </p>
@@ -91,8 +91,8 @@ export function EngagementsListPage(): JSX.Element {
                   <td className="px-xl py-md">
                     <StatusBadge status={eng.status} />
                   </td>
-                  <td className="px-xl py-md text-charcoal">{formatDate(eng.start_date)}</td>
-                  <td className="px-xl py-md text-charcoal">{formatDate(eng.end_date)}</td>
+                  <td className="px-xl py-md text-charcoal font-mono">{formatDate(eng.start_date)}</td>
+                  <td className="px-xl py-md text-charcoal font-mono">{formatDate(eng.end_date)}</td>
                   <td className="px-xl py-md text-charcoal">{eng.created_by.username}</td>
                   <td className="px-xl py-md text-right">
                     <div className="inline-flex gap-sm">
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 7aad3b6..49daf16 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -46,7 +46,7 @@ export function LoginPage(): JSX.Element {
         {/* Chevron echo of the brand mark */}
         <div className="flex items-center gap-sm">
           <span className="inline-block h-8 w-8 rotate-12 bg-primary" aria-hidden />
-          <h1 className="text-[32px] font-medium leading-none">Mimic</h1>
+          <h1 className="text-[28px] font-medium leading-none">Mimic</h1>
         </div>
         <p className="text-[16px] text-charcoal">Sign in to access your engagements.</p>
 
diff --git a/frontend/src/pages/SimulationFormPage.tsx b/frontend/src/pages/SimulationFormPage.tsx
index 627a6ba..b6db536 100644
--- a/frontend/src/pages/SimulationFormPage.tsx
+++ b/frontend/src/pages/SimulationFormPage.tsx
@@ -222,7 +222,7 @@ export function SimulationFormPage(): JSX.Element {
           <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
             ← Back to engagement
           </Link>
-          <h1 className="text-[44px] font-medium leading-none mt-sm">New simulation</h1>
+          <h1 className="text-[32px] font-medium leading-none mt-sm">New simulation</h1>
         </header>
 
         <form onSubmit={onSubmitNew} noValidate className="card-product flex flex-col gap-md">
@@ -263,7 +263,7 @@ export function SimulationFormPage(): JSX.Element {
           <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
             ← Back to engagement
           </Link>
-          <h1 className="text-[44px] font-medium leading-none">{rt.name || simulation?.name}</h1>
+          <h1 className="text-[32px] font-medium leading-none">{rt.name || simulation?.name}</h1>
           {status ? (
             <div className="flex items-center gap-md">
               <SimulationStatusBadge status={status} />
@@ -281,7 +281,7 @@ export function SimulationFormPage(): JSX.Element {
       {isDone && (
         <div
           role="status"
-          className="rounded-xl px-xl py-md bg-cloud border border-hairline text-[14px] text-charcoal"
+          className="rounded-none px-xl py-md bg-cloud border border-hairline text-[14px] text-charcoal"
         >
           This simulation is <strong>done</strong> and read-only. Use Reopen to make changes.
         </div>
@@ -292,7 +292,7 @@ export function SimulationFormPage(): JSX.Element {
         <div
           role="alert"
           data-testid="soc-blocked-banner"
-          className="rounded-xl px-xl py-md bg-fog border border-hairline text-[14px] text-charcoal"
+          className="rounded-none px-xl py-md bg-fog border border-hairline text-[14px] text-charcoal"
         >
           Simulation not yet ready for review — the red team must mark it as &quot;Review required&quot; before you can fill in the SOC section.
         </div>
diff --git a/frontend/src/pages/TemplateFormPage.tsx b/frontend/src/pages/TemplateFormPage.tsx
index 4dd8ac3..8300a54 100644
--- a/frontend/src/pages/TemplateFormPage.tsx
+++ b/frontend/src/pages/TemplateFormPage.tsx
@@ -130,7 +130,7 @@ export function TemplateFormPage(): JSX.Element {
           <Link to="/admin/templates" className="btn-text-link text-[14px]">
             ← Back to templates
           </Link>
-          <h1 className="text-[44px] font-medium leading-none">
+          <h1 className="text-[32px] font-medium leading-none">
             {isNew ? 'New template' : (existing.data?.name ?? 'Edit template')}
           </h1>
         </div>
@@ -173,6 +173,7 @@ export function TemplateFormPage(): JSX.Element {
             onChange={(e) => setForm({ ...form, commands: e.target.value })}
             disabled={isPending}
             placeholder="e.g. mimikatz.exe&#10;sekurlsa::logonpasswords"
+            className="font-mono text-[14px]"
           />
         </FormField>
 
@@ -228,7 +229,7 @@ export function TemplateFormPage(): JSX.Element {
               type="button"
               aria-label="Open MITRE matrix"
               onClick={() => { setShowPicker(false); setShowMatrix(true); }}
-              className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-md border border-steel text-graphite hover:text-ink hover:border-ink transition-colors"
+              className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-none border border-steel text-graphite hover:text-ink hover:border-ink"
             >
               <Grid2x2 size={16} />
             </button>
diff --git a/frontend/src/pages/TemplatesListPage.tsx b/frontend/src/pages/TemplatesListPage.tsx
index 25c1504..288d4b0 100644
--- a/frontend/src/pages/TemplatesListPage.tsx
+++ b/frontend/src/pages/TemplatesListPage.tsx
@@ -36,7 +36,7 @@ export function TemplatesListPage(): JSX.Element {
     <div className="flex flex-col gap-xl">
       <header className="flex items-end justify-between gap-md">
         <div>
-          <h1 className="text-[44px] font-medium leading-none">Templates</h1>
+          <h1 className="text-[32px] font-medium leading-none">Templates</h1>
           <p className="text-charcoal text-[16px] mt-sm">
             Reusable simulation blueprints for red team operations.
           </p>
@@ -94,7 +94,7 @@ export function TemplatesListPage(): JSX.Element {
                     {mitreCount(t) === 0 ? '—' : mitreCount(t)}
                   </td>
                   <td className="px-xl py-md text-charcoal">{t.created_by.username}</td>
-                  <td className="px-xl py-md text-charcoal">{formatDate(t.updated_at)}</td>
+                  <td className="px-xl py-md text-charcoal font-mono">{formatDate(t.updated_at)}</td>
                   <td className="px-xl py-md text-right">
                     <div className="inline-flex gap-sm">
                       <Link to={`/admin/templates/${t.id}/edit`} className="btn-text-link">
diff --git a/frontend/src/pages/UsersAdminPage.tsx b/frontend/src/pages/UsersAdminPage.tsx
index d4a43df..0789d39 100644
--- a/frontend/src/pages/UsersAdminPage.tsx
+++ b/frontend/src/pages/UsersAdminPage.tsx
@@ -102,7 +102,7 @@ export function UsersAdminPage(): JSX.Element {
   return (
     <div className="flex flex-col gap-xl">
       <header>
-        <h1 className="text-[44px] font-medium leading-none">User accounts</h1>
+        <h1 className="text-[32px] font-medium leading-none">User accounts</h1>
         <p className="text-charcoal text-[16px] mt-sm">
           Manage local accounts. Admins can create new red team or SOC analysts.
         </p>
@@ -205,7 +205,7 @@ export function UsersAdminPage(): JSX.Element {
                     // per-row reconciliation (reset-password state leaked across rows).
                     <Fragment key={u.id}>
                       <tr className="border-b border-hairline last:border-0">
-                        <td className="px-xl py-md font-medium text-ink">
+                        <td className="px-xl py-md font-mono font-medium text-ink">
                           {u.username}
                           {isSelf ? (
                             <span className="ml-sm text-[12px] text-graphite uppercase tracking-[0.5px]">
@@ -222,7 +222,7 @@ export function UsersAdminPage(): JSX.Element {
                             disabled={patchMutation.isPending}
                           />
                         </td>
-                        <td className="px-xl py-md text-charcoal">{u.created_at}</td>
+                        <td className="px-xl py-md text-charcoal font-mono">{u.created_at}</td>
                         <td className="px-xl py-md text-right">
                           <div className="inline-flex gap-sm">
                             <button

From 0e69eb901cd6e3556d3d06d12709da9a082846f4 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 18:46:03 +0200
Subject: [PATCH 08/12] test(frontend): update vitest assertions for new design
 tokens

---
 frontend/tests/SimulationStatusBadge.test.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/tests/SimulationStatusBadge.test.tsx b/frontend/tests/SimulationStatusBadge.test.tsx
index c42d79e..796d995 100644
--- a/frontend/tests/SimulationStatusBadge.test.tsx
+++ b/frontend/tests/SimulationStatusBadge.test.tsx
@@ -18,10 +18,10 @@ describe('SimulationStatusBadge', () => {
     expect(badge.textContent).toBe(label);
   });
 
-  it('applies fog surface for pending', () => {
+  it('applies cloud surface for pending (terminal-SOC semantic tokens)', () => {
     render(<SimulationStatusBadge status="pending" />);
     const badge = screen.getByTestId('simulation-status-badge');
-    expect(badge.className).toContain('bg-fog');
+    expect(badge.className).toContain('bg-cloud');
   });
 
   it('applies primary-soft surface for in_progress', () => {
@@ -30,15 +30,15 @@ describe('SimulationStatusBadge', () => {
     expect(badge.className).toContain('bg-primary-soft');
   });
 
-  it('applies bloom-coral surface for review_required', () => {
+  it('applies warn-soft surface for review_required (terminal-SOC semantic tokens)', () => {
     render(<SimulationStatusBadge status="review_required" />);
     const badge = screen.getByTestId('simulation-status-badge');
-    expect(badge.className).toContain('bg-bloom-coral');
+    expect(badge.className).toContain('bg-warn-soft');
   });
 
-  it('applies storm-deep surface for done', () => {
+  it('applies success-soft surface for done (terminal-SOC semantic tokens)', () => {
     render(<SimulationStatusBadge status="done" />);
     const badge = screen.getByTestId('simulation-status-badge');
-    expect(badge.className).toContain('bg-storm-deep');
+    expect(badge.className).toContain('bg-success-soft');
   });
 });

From 7ea2fe490c8cf2e52fd75a4782970a53042f78ee Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 19:01:29 +0200
Subject: [PATCH 09/12] docs: add sprint 7 terminal-SOC design refresh to
 CHANGELOG

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f9dece..554bf64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [Unreleased]
 
+### Changed — Sprint 7 (Terminal-SOC design refresh)
+
+**Frontend** (136 vitest passing — unchanged count, 3 assertions updated for new token names)
+
+- `DESIGN.md` — complete rewrite from HP-catalog (346 lines) to terminal-SOC brutalist spec. Covers palette (success/warn tokens added), typography (Inter + JetBrains Mono), layout, shapes (border-radius 0 rule), component patterns, and Do/Don't list.
+- `frontend/tailwind.config.ts` — added `success` / `warn` semantic color tokens (WCAG AA in both light+dark); added `fontFamily.mono` (JetBrains Mono Variable); reduced all `display-*` scale (xxl 72→40, xl 56→32, lg 44→28, md 32→24, sm 24→20, xs 20→16); `borderRadius` reduced to `none: '0px'` + `pill: '9999px'` only; `section` spacing 40px→48px.
+- `frontend/src/styles/index.css` — CSS vars for `--color-success[-soft]` / `--color-warn[-soft]` (light + dark variants); all `.btn-*` classes: `rounded-none`, no `transition-colors`; `.text-input`: `rounded-none`, no transition; `.card-product`: `rounded-none`, `border border-hairline`, no shadow; `.badge-pill-*` kept `rounded-pill`; added `.tag-mitre` (angular MITRE tags, `font-mono`).
+- `frontend/src/styles/fonts.css` — added `@import '@fontsource-variable/jetbrains-mono/index.css'` (local, no CDN).
+- `frontend/src/components/StatusBadge.tsx` — `rounded-lg` → `rounded-pill`; new semantic colors: `planned → warn-soft`, `active → primary-soft`, `closed → cloud/graphite`.
+- `frontend/src/components/SimulationStatusBadge.tsx` — `rounded-lg` → `rounded-pill`; semantic mapping: `pending → cloud`, `in_progress → primary-soft`, `review_required → warn-soft`, `done → success-soft`.
+- `frontend/src/components/Toast.tsx` — removed `rounded-xl` and shadow; left border strips: `error → border-l-bloom-deep`, `success → border-l-success`, default → `border-l-primary`.
+- `frontend/src/components/MitreTechniqueTag.tsx` — `rounded-full` → `rounded-none` on both technique and tactic tags; added `font-mono` (MITRE IDs are data).
+- `frontend/src/components/ExportEngagementButton.tsx` — removed `rounded-r-none` / `rounded-l-none` from split-button; dropdown: `rounded-md shadow-floating` → `rounded-none`.
+- `frontend/src/components/SimulationList.tsx` — dropdown: `rounded-md shadow-floating` → `rounded-none`; MITRE column + `executed_at`: added `font-mono`; split-button: removed radius classes.
+- `frontend/src/pages/SimulationFormPage.tsx` — h1: `text-[44px]` → `text-[32px]`; Done/SOC banners: `rounded-xl` → `rounded-none`.
+- `frontend/src/pages/UsersAdminPage.tsx` — h1: `text-[44px]` → `text-[32px]`; username column + created_at column: added `font-mono`.
+- `frontend/tests/SimulationStatusBadge.test.tsx` — updated 3 assertions for renamed semantic tokens (`bg-fog` → `bg-cloud`, `bg-bloom-coral` → `bg-warn-soft`, `bg-storm-deep` → `bg-success-soft`).
+
+**No backend changes.** No DB schema change. No migration.
+
 ### Added — Sprint 6 (Engagement export)
 
 **Backend** (253 pytest passing — 226 sprint-1-to-4 + 28 sprint 5 + 5 sprint 5 post-code-review + 23 sprint 6 + 1 CSV-injection defense-in-depth test)

From 6995c4c860df0aed35c623eb898dc31ed2f2adf9 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 19:43:08 +0200
Subject: [PATCH 10/12] =?UTF-8?q?fix(design):=20address=20design-reviewer?=
 =?UTF-8?q?=20findings=20F1-F6=20=E2=80=94=20nav=20slab,=20spinner,=20badg?=
 =?UTF-8?q?e=20coverage,=20mono=20discipline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

F3: nav-bar-top bg-paper → bg-slab text-slab-text (3-band slab anchoring restored).
    NavLinks: text-slab-muted default, text-slab-text + border-primary active.
    Logo span: text-ink → text-slab-text.
F2: (you) label extracted from font-mono td into adjacent font-sans span.
F1: Loader2 circular spinner → EXPORTING… text with animate-pulse (terminal-SOC compatible).

Screenshots regenerated:
- All 8 pages light+dark (01→10)
- 05-simulation-form-edit light+dark (F6)
- 11-mitre-matrix-modal light+dark (F6)
- 12-toast-success light+dark (F6)
- 13-confirm-dialog light+dark (F6)
- admin-light/dark-open/closed regenerated from HEAD (F4)

F4: StatusBadge.tsx confirmed single code path — planned → bg-warn-soft (no divergence in code).
    Divergence in prior captures was stale cache; regenerated admin-* confirm consistency.
F5: Simulations seeded (pending/in_progress/review_required/done) via API;
    10-sim-list-badges shows all 4 semantic badge colors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/ExportEngagementButton.tsx  |  8 +++++---
 frontend/src/components/Layout.tsx             | 18 ++++++++++++------
 frontend/src/pages/UsersAdminPage.tsx          |  6 +++---
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ExportEngagementButton.tsx b/frontend/src/components/ExportEngagementButton.tsx
index 482cf21..dada565 100644
--- a/frontend/src/components/ExportEngagementButton.tsx
+++ b/frontend/src/components/ExportEngagementButton.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { ChevronDown, Download, Loader2 } from 'lucide-react';
+import { ChevronDown, Download } from 'lucide-react';
 import { downloadEngagementExport, type ExportFormat } from '@/api/exports';
 import { useToast } from '@/hooks/useToast';
 
@@ -88,9 +88,11 @@ export function ExportEngagementButton({ engagementId }: ExportEngagementButtonP
               data-testid={`export-format-${value}`}
             >
               {loading === value ? (
-                <Loader2 size={12} className="animate-spin" aria-hidden />
+                <span className="font-mono text-[11px] animate-pulse" aria-hidden>
+                  EXPORTING…
+                </span>
               ) : null}
-              {label}
+              {loading !== value ? label : null}
             </button>
           ))}
         </div>
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 04079ff..2d14a51 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -59,12 +59,12 @@ export function Layout(): JSX.Element {
         </div>
       </div>
 
-      {/* nav-bar-top — paper gives dark-mode lift vs canvas body */}
-      <header className="bg-paper border-b border-hairline">
+      {/* nav-bar-top — fixed dark slab, never inverts (same visual family as utility-strip + footer) */}
+      <header className="bg-slab text-slab-text">
         <div className="mx-auto w-full max-w-page px-xl h-16 flex items-center justify-between">
           <Link to="/engagements" className="flex items-center gap-sm" aria-label="Mimic home">
             <span className="inline-block h-6 w-6 rotate-12 bg-primary" aria-hidden />
-            <span className="text-[20px] font-medium tracking-tight text-ink">Mimic</span>
+            <span className="text-[20px] font-medium tracking-tight text-slab-text">Mimic</span>
           </Link>
 
           <nav className="flex items-center gap-md">
@@ -72,7 +72,9 @@ export function Layout(): JSX.Element {
               to="/engagements"
               className={({ isActive }) =>
                 `text-[16px] py-2 px-md ${
-                  isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                  isActive
+                    ? 'text-slab-text border-b-2 border-primary'
+                    : 'text-slab-muted hover:text-slab-text'
                 }`
               }
             >
@@ -83,7 +85,9 @@ export function Layout(): JSX.Element {
                 to="/admin/templates"
                 className={({ isActive }) =>
                   `text-[16px] py-2 px-md ${
-                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                    isActive
+                      ? 'text-slab-text border-b-2 border-primary'
+                      : 'text-slab-muted hover:text-slab-text'
                   }`
                 }
               >
@@ -95,7 +99,9 @@ export function Layout(): JSX.Element {
                 to="/admin/users"
                 className={({ isActive }) =>
                   `text-[16px] py-2 px-md ${
-                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                    isActive
+                      ? 'text-slab-text border-b-2 border-primary'
+                      : 'text-slab-muted hover:text-slab-text'
                   }`
                 }
               >
diff --git a/frontend/src/pages/UsersAdminPage.tsx b/frontend/src/pages/UsersAdminPage.tsx
index 0789d39..301a17c 100644
--- a/frontend/src/pages/UsersAdminPage.tsx
+++ b/frontend/src/pages/UsersAdminPage.tsx
@@ -205,10 +205,10 @@ export function UsersAdminPage(): JSX.Element {
                     // per-row reconciliation (reset-password state leaked across rows).
                     <Fragment key={u.id}>
                       <tr className="border-b border-hairline last:border-0">
-                        <td className="px-xl py-md font-mono font-medium text-ink">
-                          {u.username}
+                        <td className="px-xl py-md text-ink">
+                          <span className="font-mono font-medium">{u.username}</span>
                           {isSelf ? (
-                            <span className="ml-sm text-[12px] text-graphite uppercase tracking-[0.5px]">
+                            <span className="ml-sm font-sans text-[12px] text-graphite">
                               (you)
                             </span>
                           ) : null}

From 573281f454d8bc45e18ce6bd713ec20728560104 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Wed, 10 Jun 2026 05:53:53 +0200
Subject: [PATCH 11/12] =?UTF-8?q?fix(design):=20code-reviewer=20polish=20?=
 =?UTF-8?q?=E2=80=94=20dedupe=20tag-mitre=20recipe,=20drop=20dead=20boxSha?=
 =?UTF-8?q?dow=20tokens,=20cover=20StatusBadge=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

F1: MitreTechniqueTag inline classes replaced with className="tag-mitre gap-xxs"
    (index.css .tag-mitre is now the single source of truth for technique tags).
F2: boxShadow block removed from tailwind.config.ts — no component referenced
    shadow-soft-lift / shadow-floating / *-dark; DESIGN.md §Don'ts prohibits shadows.
F4: StatusBadge.test.tsx gains 3 class assertions (bg-warn-soft / bg-primary-soft / bg-cloud)
    mirroring SimulationStatusBadge.test.tsx pattern. Test count: 136 → 139.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/MitreTechniqueTag.tsx |  2 +-
 frontend/tailwind.config.ts                   |  7 -------
 frontend/tests/StatusBadge.test.tsx           | 15 +++++++++++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/MitreTechniqueTag.tsx b/frontend/src/components/MitreTechniqueTag.tsx
index a064d1f..481e1b3 100644
--- a/frontend/src/components/MitreTechniqueTag.tsx
+++ b/frontend/src/components/MitreTechniqueTag.tsx
@@ -22,7 +22,7 @@ export function MitreTechniqueTag({
     <span
       data-testid="mitre-technique-tag"
       title={`${technique.id} — ${technique.name}`}
-      className="inline-flex items-center gap-xxs bg-primary-soft text-primary-deep rounded-none border border-primary-soft px-sm py-xxs text-[13px] font-mono"
+      className="tag-mitre gap-xxs"
     >
       {technique.id}
       {!disabled && (
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 6ccf51c..22615e9 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -98,13 +98,6 @@ const config: Config = {
         none: '0px',
         pill: '9999px',
       },
-      boxShadow: {
-        // Kept in config for backwards compat but no component should apply them
-        'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)',
-        floating: '0 8px 24px rgba(26, 26, 26, 0.12)',
-        'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)',
-        'floating-dark': '0 8px 24px rgba(0, 0, 0, 0.48)',
-      },
       maxWidth: {
         page: '1366px',
       },
diff --git a/frontend/tests/StatusBadge.test.tsx b/frontend/tests/StatusBadge.test.tsx
index 70fa850..a9e6187 100644
--- a/frontend/tests/StatusBadge.test.tsx
+++ b/frontend/tests/StatusBadge.test.tsx
@@ -9,4 +9,19 @@ describe('StatusBadge', () => {
     expect(badge).toHaveAttribute('data-status', status);
     expect(badge.textContent?.toLowerCase()).toBe(status);
   });
+
+  it('applies warn-soft surface for planned', () => {
+    render(<StatusBadge status="planned" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-warn-soft');
+  });
+
+  it('applies primary-soft surface for active', () => {
+    render(<StatusBadge status="active" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-primary-soft');
+  });
+
+  it('applies cloud surface for closed', () => {
+    render(<StatusBadge status="closed" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-cloud');
+  });
 });

From 1997a8c621292d1f98ae4fb5e1dbbe983d0dac00 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Wed, 10 Jun 2026 18:17:54 +0200
Subject: [PATCH 12/12] feat(frontend): side-by-side red-team/SOC columns on
 simulation screen

Wrap RT and SOC form cards in a responsive 2-column grid
(grid gap-xl lg:grid-cols-2 items-start) on the simulation edit view.
Drop the max-w-3xl constraint from the outer container so the grid
can use full page width (matching EngagementDetailPage). Header,
banners, submitError, and sticky action bar remain full-width above
the grid. The isNew create form keeps its current narrow layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/SimulationFormPage.tsx | 249 +++++++++++-----------
 1 file changed, 126 insertions(+), 123 deletions(-)

diff --git a/frontend/src/pages/SimulationFormPage.tsx b/frontend/src/pages/SimulationFormPage.tsx
index b6db536..2d97649 100644
--- a/frontend/src/pages/SimulationFormPage.tsx
+++ b/frontend/src/pages/SimulationFormPage.tsx
@@ -257,7 +257,7 @@ export function SimulationFormPage(): JSX.Element {
     updateMutation.isPending || transitionMutation.isPending || deleteMutation.isPending;
 
   return (
-    <div className="flex flex-col gap-xl max-w-3xl">
+    <div className="flex flex-col gap-xl">
       <header className="flex items-start justify-between gap-md">
         <div className="flex flex-col gap-sm">
           <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
@@ -298,140 +298,143 @@ export function SimulationFormPage(): JSX.Element {
         </div>
       )}
 
-      {/* Red Team card */}
-      <form
-        id="rt-form"
-        onSubmit={canEditRT && !isDone ? onSaveRT : (e) => e.preventDefault()}
-        noValidate
-        className="card-product flex flex-col gap-md"
-      >
-        <h2 className="text-[20px] font-medium text-ink">Red Team</h2>
+      {/* 2-column grid: RT left, SOC right. Stacks vertically below lg. */}
+      <div className="grid gap-xl lg:grid-cols-2 items-start">
+        {/* Red Team card */}
+        <form
+          id="rt-form"
+          onSubmit={canEditRT && !isDone ? onSaveRT : (e) => e.preventDefault()}
+          noValidate
+          className="card-product flex flex-col gap-md"
+        >
+          <h2 className="text-[20px] font-medium text-ink">Red Team</h2>
 
-        <FormField label="Name" htmlFor="sim-name" required error={nameError}>
-          <TextInput
-            id="sim-name"
-            name="name"
-            value={rt.name}
-            onChange={(e) => setRt({ ...rt, name: e.target.value })}
-            disabled={rtDisabled}
-            required
-          />
-        </FormField>
+          <FormField label="Name" htmlFor="sim-name" required error={nameError}>
+            <TextInput
+              id="sim-name"
+              name="name"
+              value={rt.name}
+              onChange={(e) => setRt({ ...rt, name: e.target.value })}
+              disabled={rtDisabled}
+              required
+            />
+          </FormField>
 
-        <div className="flex flex-col gap-xs">
-          <span className="text-[14px] font-medium text-ink">MITRE Techniques &amp; Tactics</span>
-          <MitreTechniquesField
-            value={simulation?.techniques ?? []}
-            tactics={simulation?.tactics ?? []}
-            simulationId={simulationId as number}
-            engagementId={engagementId as number}
-            disabled={rtDisabled}
-          />
-        </div>
+          <div className="flex flex-col gap-xs">
+            <span className="text-[14px] font-medium text-ink">MITRE Techniques &amp; Tactics</span>
+            <MitreTechniquesField
+              value={simulation?.techniques ?? []}
+              tactics={simulation?.tactics ?? []}
+              simulationId={simulationId as number}
+              engagementId={engagementId as number}
+              disabled={rtDisabled}
+            />
+          </div>
 
-        <FormField label="Description" htmlFor="sim-description">
-          <TextArea
-            id="sim-description"
-            name="description"
-            value={rt.description}
-            onChange={(e) => setRt({ ...rt, description: e.target.value })}
-            disabled={rtDisabled}
-          />
-        </FormField>
+          <FormField label="Description" htmlFor="sim-description">
+            <TextArea
+              id="sim-description"
+              name="description"
+              value={rt.description}
+              onChange={(e) => setRt({ ...rt, description: e.target.value })}
+              disabled={rtDisabled}
+            />
+          </FormField>
 
-        <FormField label="Commands" htmlFor="sim-commands" hint="One command per line">
-          <TextArea
-            id="sim-commands"
-            name="commands"
-            value={rt.commands}
-            onChange={(e) => setRt({ ...rt, commands: e.target.value })}
-            disabled={rtDisabled}
-            className="min-h-[160px] font-mono text-[14px]"
-          />
-        </FormField>
+          <FormField label="Commands" htmlFor="sim-commands" hint="One command per line">
+            <TextArea
+              id="sim-commands"
+              name="commands"
+              value={rt.commands}
+              onChange={(e) => setRt({ ...rt, commands: e.target.value })}
+              disabled={rtDisabled}
+              className="min-h-[160px] font-mono text-[14px]"
+            />
+          </FormField>
 
-        <FormField label="Prerequisites" htmlFor="sim-prerequisites">
-          <TextArea
-            id="sim-prerequisites"
-            name="prerequisites"
-            value={rt.prerequisites}
-            onChange={(e) => setRt({ ...rt, prerequisites: e.target.value })}
-            disabled={rtDisabled}
-          />
-        </FormField>
+          <FormField label="Prerequisites" htmlFor="sim-prerequisites">
+            <TextArea
+              id="sim-prerequisites"
+              name="prerequisites"
+              value={rt.prerequisites}
+              onChange={(e) => setRt({ ...rt, prerequisites: e.target.value })}
+              disabled={rtDisabled}
+            />
+          </FormField>
 
-        <FormField label="Executed at" htmlFor="sim-executed-at">
-          <TextInput
-            id="sim-executed-at"
-            type="datetime-local"
-            name="executed_at"
-            value={rt.executed_at}
-            onChange={(e) => setRt({ ...rt, executed_at: e.target.value })}
-            disabled={rtDisabled}
-          />
-        </FormField>
+          <FormField label="Executed at" htmlFor="sim-executed-at">
+            <TextInput
+              id="sim-executed-at"
+              type="datetime-local"
+              name="executed_at"
+              value={rt.executed_at}
+              onChange={(e) => setRt({ ...rt, executed_at: e.target.value })}
+              disabled={rtDisabled}
+            />
+          </FormField>
 
-        <FormField label="Execution result" htmlFor="sim-exec-result">
-          <TextArea
-            id="sim-exec-result"
-            name="execution_result"
-            value={rt.execution_result}
-            onChange={(e) => setRt({ ...rt, execution_result: e.target.value })}
-            disabled={rtDisabled}
-            rows={5}
-          />
-        </FormField>
-      </form>
+          <FormField label="Execution result" htmlFor="sim-exec-result">
+            <TextArea
+              id="sim-exec-result"
+              name="execution_result"
+              value={rt.execution_result}
+              onChange={(e) => setRt({ ...rt, execution_result: e.target.value })}
+              disabled={rtDisabled}
+              rows={5}
+            />
+          </FormField>
+        </form>
 
-      {/* SOC card */}
-      <form
-        id="soc-form"
-        onSubmit={canSaveSoc ? onSaveSOC : (e) => e.preventDefault()}
-        noValidate
-        className="card-product flex flex-col gap-md"
-      >
-        <h2 className="text-[20px] font-medium text-ink">SOC</h2>
+        {/* SOC card */}
+        <form
+          id="soc-form"
+          onSubmit={canSaveSoc ? onSaveSOC : (e) => e.preventDefault()}
+          noValidate
+          className="card-product flex flex-col gap-md"
+        >
+          <h2 className="text-[20px] font-medium text-ink">SOC</h2>
 
-        <FormField label="Log source" htmlFor="sim-log-source">
-          <TextInput
-            id="sim-log-source"
-            name="log_source"
-            value={soc.log_source}
-            onChange={(e) => setSoc({ ...soc, log_source: e.target.value })}
-            disabled={socDisabled}
-          />
-        </FormField>
+          <FormField label="Log source" htmlFor="sim-log-source">
+            <TextInput
+              id="sim-log-source"
+              name="log_source"
+              value={soc.log_source}
+              onChange={(e) => setSoc({ ...soc, log_source: e.target.value })}
+              disabled={socDisabled}
+            />
+          </FormField>
 
-        <FormField label="Logs" htmlFor="sim-logs">
-          <TextArea
-            id="sim-logs"
-            name="logs"
-            value={soc.logs}
-            onChange={(e) => setSoc({ ...soc, logs: e.target.value })}
-            disabled={socDisabled}
-          />
-        </FormField>
+          <FormField label="Logs" htmlFor="sim-logs">
+            <TextArea
+              id="sim-logs"
+              name="logs"
+              value={soc.logs}
+              onChange={(e) => setSoc({ ...soc, logs: e.target.value })}
+              disabled={socDisabled}
+            />
+          </FormField>
 
-        <FormField label="SOC comment" htmlFor="sim-soc-comment">
-          <TextArea
-            id="sim-soc-comment"
-            name="soc_comment"
-            value={soc.soc_comment}
-            onChange={(e) => setSoc({ ...soc, soc_comment: e.target.value })}
-            disabled={socDisabled}
-          />
-        </FormField>
+          <FormField label="SOC comment" htmlFor="sim-soc-comment">
+            <TextArea
+              id="sim-soc-comment"
+              name="soc_comment"
+              value={soc.soc_comment}
+              onChange={(e) => setSoc({ ...soc, soc_comment: e.target.value })}
+              disabled={socDisabled}
+            />
+          </FormField>
 
-        <FormField label="Incident number" htmlFor="sim-incident">
-          <TextInput
-            id="sim-incident"
-            name="incident_number"
-            value={soc.incident_number}
-            onChange={(e) => setSoc({ ...soc, incident_number: e.target.value })}
-            disabled={socDisabled}
-          />
-        </FormField>
-      </form>
+          <FormField label="Incident number" htmlFor="sim-incident">
+            <TextInput
+              id="sim-incident"
+              name="incident_number"
+              value={soc.incident_number}
+              onChange={(e) => setSoc({ ...soc, incident_number: e.target.value })}
+              disabled={socDisabled}
+            />
+          </FormField>
+        </form>
+      </div>
 
       {submitError ? (
         <div role="alert" className="text-[14px] text-bloom-deep">{submitError}</div>