From b6a76a836c4acb6ccf7bf0511774284f35862514 Mon Sep 17 00:00:00 2001
From: Mariusz Banach <mariusz@outflank.nl>
Date: Tue, 17 Feb 2026 23:10:28 +0100
Subject: [PATCH] MAESTRO: add frontend design tokens

---
 ...-header-analyzer-Phase-01-Project-Setup.md |  2 +-
 frontend/src/styles/design-tokens.test.ts     | 25 +++++++++++
 frontend/src/styles/design-tokens.ts          | 43 +++++++++++++++++++
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/styles/design-tokens.test.ts
 create mode 100644 frontend/src/styles/design-tokens.ts

diff --git a/Auto Run Docs/SpecKit-web-header-analyzer-Phase-01-Project-Setup.md b/Auto Run Docs/SpecKit-web-header-analyzer-Phase-01-Project-Setup.md
index 625b446..f1447a6 100644
--- a/Auto Run Docs/SpecKit-web-header-analyzer-Phase-01-Project-Setup.md	
+++ b/Auto Run Docs/SpecKit-web-header-analyzer-Phase-01-Project-Setup.md	
@@ -66,7 +66,7 @@ The hacker-themed dark colour palette (from spec FR-14):
 - [x] T003 [P] Create `backend/app/core/config.py` with Pydantic BaseSettings for CORS origins, rate limit thresholds, analysis timeout (30s), and debug flag — all configurable via environment variables
 - [x] T004 [P] Create `frontend/src/types/analysis.ts` with TypeScript interfaces: `HeaderInput`, `AnalysisConfig` (test IDs, resolve flag, decode-all flag), `TestResult` (id, name, header, value, analysis, description, severity, status), `AnalysisReport` (results, hopChain, securityAppliances, metadata), `AnalysisProgress` (current test, total, percentage, elapsed). Refer to `.specify/specs/1-web-header-analyzer/data-model.md` for the complete entity definitions
 - [x] T005 [P] Create `frontend/src/lib/api-client.ts` — API client abstraction wrapping fetch with base URL from environment, JSON defaults, error handling, and typed response generics. Must support SSE streaming via ReadableStream for the analysis endpoint
-- [ ] T006 [P] Create `frontend/src/styles/design-tokens.ts` — centralised design tokens: colours (#1e1e2e background, #282a36 surface, #f8f8f2 text, #ff5555 spam, #ffb86c suspicious, #50fa7b clean, #bd93f9 accent), font families (mono/sans), spacing scale, and border-radius values
+- [x] T006 [P] Create `frontend/src/styles/design-tokens.ts` — centralised design tokens: colours (#1e1e2e background, #282a36 surface, #f8f8f2 text, #ff5555 spam, #ffb86c suspicious, #50fa7b clean, #bd93f9 accent), font families (mono/sans), spacing scale, and border-radius values
 
 ## Completion
 
diff --git a/frontend/src/styles/design-tokens.test.ts b/frontend/src/styles/design-tokens.test.ts
new file mode 100644
index 0000000..110439f
--- /dev/null
+++ b/frontend/src/styles/design-tokens.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+
+import { colors, fontFamilies, radii, spacing } from "./design-tokens";
+
+describe("design tokens", () => {
+  it("exposes the expected color palette", () => {
+    expect(colors).toEqual({
+      background: "#1e1e2e",
+      surface: "#282a36",
+      text: "#f8f8f2",
+      spam: "#ff5555",
+      suspicious: "#ffb86c",
+      clean: "#50fa7b",
+      accent: "#bd93f9",
+      info: "#8be9fd",
+    });
+  });
+
+  it("includes core font, spacing, and radius tokens", () => {
+    expect(fontFamilies.sans).toContain("var(--font-geist-sans)");
+    expect(fontFamilies.mono).toContain("var(--font-geist-mono)");
+    expect(spacing.md).toBe("12px");
+    expect(radii.md).toBe("8px");
+  });
+});
diff --git a/frontend/src/styles/design-tokens.ts b/frontend/src/styles/design-tokens.ts
new file mode 100644
index 0000000..f6598c0
--- /dev/null
+++ b/frontend/src/styles/design-tokens.ts
@@ -0,0 +1,43 @@
+export const colors = {
+  background: "#1e1e2e",
+  surface: "#282a36",
+  text: "#f8f8f2",
+  spam: "#ff5555",
+  suspicious: "#ffb86c",
+  clean: "#50fa7b",
+  accent: "#bd93f9",
+  info: "#8be9fd",
+} as const;
+
+export const fontFamilies = {
+  sans: "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif",
+  mono: "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace",
+} as const;
+
+export const spacing = {
+  none: "0px",
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "32px",
+  "3xl": "48px",
+  "4xl": "64px",
+} as const;
+
+export const radii = {
+  none: "0px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  full: "9999px",
+} as const;
+
+export const designTokens = {
+  colors,
+  fontFamilies,
+  spacing,
+  radii,
+} as const;