feat(shared): add Playground design system v0.1 with Tier 1+2 components
Aksel/Digdir-aligned design system for plugin Playgrounds — visual self-service UIs that complement terminal slash-commands. Targets ms-ai-architect, okr, llm-security, ultraplan-local, config-audit. Built for Norwegian public sector decision-makers plus developer power-users — one visual family, two info densities. Generated by claude.ai/design (Anthropic) in a dialog-based design session driven by a comprehensive brief covering all five target plugins, Aksel/Digdir conventions, and domain-specific visual standards (NS 5814 ROS matrices, EU AI Act 4-tier pyramide, Doerr OKR scoring, NIST CSF, OWASP threat modeling). Per Anthropic Consumer Terms §4, ownership of outputs is assigned to the user; licensed MIT. shared/playground-design-system/ (5874 lines CSS + JSON): - tokens.css: Inter font, Digdir blue #0062BA, deuteranopia-safe severity ramp, distinct severity-red (#A40E26) vs failure-red (#7D1A1A), plugin scope colors, light + dark themes - base.css: reset, typography (17px body, 65ch measure), focus rings, buttons, badges, forms, Aksel 3-tier inline messages, prefers-reduced-motion support - components.css: Tier 1 — radar/spider, 5x5 matrix-heatmap (bottom-left origin, ROS/DPIA), findings-browser, critique-card, wizard/stepper, live-meter with antipattern lints - components-tier2.css: Tier 2 — decision-tree, traffic-lights with rationale, diff-review, treemap, distribution P10/P50/P90, command-pipeline output, AI Act 4-color pyramide, pipeline-cockpit, verdict-pill + 5-band risk-meter, codepoint-reveal (Unicode steg), small-multiples grid (16-cat posture), OWASP badges (LLM/ASI/AST/MCP) - print.css: A4 stylesheet with BW severity hatching, kommune-logo slot, signature lines for offentlige dokumenter - schemas/: finding.schema.json, okr-set.schema.json, ros-threat.schema.json - README.md: usage guide, design principles, component reference, provenance shared/playground-examples/: - index.html: system showcase with all components live - ros-lier-kommune.html: Lier kommune Copilot ROS-rapport (Scenario A) - okr-baerum.html: Baerum kommune T2-2026 OKR live writer (Scenario B) - security-vegvesen.html: SVV ToxicSkills findings review, 85 funn BLOCK (Scenario C) - templates.html: A4 print template demos - ros-app.js + ros-data.js: Scenario A interactivity WCAG 2.1 AA throughout (UU-loven krav for offentlig sektor): focus rings, ARIA attributes, keyboard navigation, severity numerical redundancy for deuteranopia and BW print, semantic HTML. Known limitation: Inter loaded via Google Fonts CDN violates self-contained no-CDN constraint. System-stack fallback works offline. Self-host woff2 files in Phase 2.
This commit is contained in:
Kjell Tore Guttormsen
parent
ff0de3e7dd
commit
4a2bf3567a
16 changed files with 6065 additions and 0 deletions
88
shared/playground-design-system/schemas/finding.schema.json
Normal file
88
shared/playground-design-system/schemas/finding.schema.json
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
{
|
||||
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||
"$id": "https://playground-ds.no/schemas/finding.json",
|
||||
"title": "Finding",
|
||||
"description": "Et enkelt funn fra en plugin-skanning. Brukes av llm-security, config-audit, ultraplan-review og ms-ai-review.",
|
||||
"type": "object",
|
||||
"required": ["id", "title", "severity", "source"],
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string",
|
||||
"description": "Stabil ID, f.eks. SVV-2026-118-F-001",
|
||||
"pattern": "^[A-Z0-9-]{4,}$"
|
||||
},
|
||||
"title": { "type": "string", "minLength": 4, "maxLength": 140 },
|
||||
"severity": {
|
||||
"enum": ["info", "low", "medium", "high", "critical"],
|
||||
"description": "Standard 5-trinns skala. Maps til CSS-tokens --color-severity-*."
|
||||
},
|
||||
"score": {
|
||||
"type": "number", "minimum": 0, "maximum": 10,
|
||||
"description": "CVSS-lignende numerisk score. Valgfri — severity er primær."
|
||||
},
|
||||
"rules": {
|
||||
"type": "array",
|
||||
"items": { "type": "string", "pattern": "^[A-Z]{2,4}[0-9]{2}(\\.[0-9]+)?$" },
|
||||
"description": "Regler/categories truffet, f.eks. LLM01, ASI02, SVV01"
|
||||
},
|
||||
"source": {
|
||||
"type": "object",
|
||||
"required": ["kind", "ref"],
|
||||
"properties": {
|
||||
"kind": { "enum": ["document", "prompt-response", "code-file", "config-file", "okr-set"] },
|
||||
"ref": { "type": "string", "description": "Filnavn / URL / sak-ID" },
|
||||
"line": { "type": "integer", "minimum": 1 },
|
||||
"col": { "type": "integer", "minimum": 0 },
|
||||
"snippet": { "type": "string", "maxLength": 800 }
|
||||
}
|
||||
},
|
||||
"evidence": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"required": ["kind", "value"],
|
||||
"properties": {
|
||||
"kind": { "enum": ["text", "codepoint", "metric", "url", "image"] },
|
||||
"value": { "type": "string" },
|
||||
"label": { "type": "string" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"rationale": { "type": "string", "description": "Norsk forklaring av hvorfor dette er et problem i denne konteksten" },
|
||||
"recommendation": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"summary": { "type": "string" },
|
||||
"steps": { "type": "array", "items": { "type": "string" } },
|
||||
"ttf": { "type": "string", "description": "Tid til løsning, f.eks. '2 t', '1 d', '5 d'" },
|
||||
"owner": { "type": "string", "description": "Foreslått eier (rolle eller person)" }
|
||||
}
|
||||
},
|
||||
"references": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"label": { "type": "string" },
|
||||
"url": { "type": "string", "format": "uri" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"status": {
|
||||
"enum": ["new", "acknowledged", "in-progress", "fixed", "accepted-risk", "false-positive"],
|
||||
"default": "new"
|
||||
},
|
||||
"acceptance": {
|
||||
"type": "object",
|
||||
"description": "Påkrevd hvis status = accepted-risk og severity ≥ high",
|
||||
"properties": {
|
||||
"approver": { "type": "string" },
|
||||
"date": { "type": "string", "format": "date" },
|
||||
"rationale": { "type": "string" },
|
||||
"review_by": { "type": "string", "format": "date" }
|
||||
}
|
||||
},
|
||||
"created": { "type": "string", "format": "date-time" },
|
||||
"updated": { "type": "string", "format": "date-time" }
|
||||
}
|
||||
}
|
||||
78
shared/playground-design-system/schemas/okr-set.schema.json
Normal file
78
shared/playground-design-system/schemas/okr-set.schema.json
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
{
|
||||
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||
"$id": "https://playground-ds.no/schemas/okr-set.json",
|
||||
"title": "OKR-sett",
|
||||
"description": "Et OKR-sett: ett mål (Objective) med 1–6 nøkkelresultater (KR). Brukes av OKR live-writer.",
|
||||
"type": "object",
|
||||
"required": ["id", "objective", "key_results", "owner", "period"],
|
||||
"properties": {
|
||||
"id": { "type": "string" },
|
||||
"owner": {
|
||||
"type": "object",
|
||||
"required": ["name", "unit"],
|
||||
"properties": {
|
||||
"name": { "type": "string" },
|
||||
"unit": { "type": "string", "description": "Avdeling/seksjon" },
|
||||
"org": { "type": "string", "description": "Kommune/etat" }
|
||||
}
|
||||
},
|
||||
"period": {
|
||||
"type": "object",
|
||||
"required": ["kind", "label", "start", "end"],
|
||||
"properties": {
|
||||
"kind": { "enum": ["tertial", "kvartal", "halvår", "år"] },
|
||||
"label": { "type": "string", "description": "f.eks. 'T2 2026'" },
|
||||
"start": { "type": "string", "format": "date" },
|
||||
"end": { "type": "string", "format": "date" }
|
||||
}
|
||||
},
|
||||
"objective": {
|
||||
"type": "object",
|
||||
"required": ["text"],
|
||||
"properties": {
|
||||
"text": { "type": "string", "minLength": 10, "maxLength": 240 },
|
||||
"rationale": { "type": "string" }
|
||||
}
|
||||
},
|
||||
"key_results": {
|
||||
"type": "array", "minItems": 1, "maxItems": 6,
|
||||
"items": {
|
||||
"type": "object",
|
||||
"required": ["id", "text"],
|
||||
"properties": {
|
||||
"id": { "type": "string", "pattern": "^KR[0-9]+$" },
|
||||
"text": { "type": "string" },
|
||||
"metric": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": { "type": "string" },
|
||||
"unit": { "type": "string", "description": "%, dager, kr, antall, …" },
|
||||
"baseline": { "type": "number" },
|
||||
"target": { "type": "number" },
|
||||
"stretch": { "type": "number" },
|
||||
"source": { "type": "string", "description": "KPI-katalog ref / Tableau-sett / etc." }
|
||||
}
|
||||
},
|
||||
"deadline": { "type": "string", "format": "date" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"score": {
|
||||
"type": "object",
|
||||
"description": "Generert av OKR-writer ved kvalitetsanalyse",
|
||||
"properties": {
|
||||
"overall": { "type": "number", "minimum": 0, "maximum": 100 },
|
||||
"measurability": { "type": "number" },
|
||||
"specificity": { "type": "number" },
|
||||
"ambition": { "type": "number" },
|
||||
"actionability": { "type": "number" }
|
||||
}
|
||||
},
|
||||
"critiques": {
|
||||
"type": "array",
|
||||
"items": { "$ref": "https://playground-ds.no/schemas/finding.json" }
|
||||
},
|
||||
"version": { "type": "string", "description": "Semver eller utkast 0.4-stil" },
|
||||
"status": { "enum": ["draft", "in-review", "approved", "active", "closed"], "default": "draft" }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
{
|
||||
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||
"$id": "https://playground-ds.no/schemas/ros-threat.json",
|
||||
"title": "ROS-trussel",
|
||||
"description": "Én identifisert trussel i en risiko- og sårbarhetsanalyse. NS 5814-justert.",
|
||||
"type": "object",
|
||||
"required": ["id", "title", "category", "inherent"],
|
||||
"properties": {
|
||||
"id": { "type": "string", "pattern": "^T-[0-9]{3,}$" },
|
||||
"title": { "type": "string" },
|
||||
"description": { "type": "string" },
|
||||
"category": {
|
||||
"enum": ["personvern", "informasjonssikkerhet", "datakvalitet",
|
||||
"compliance", "dataintegritet", "leverandørrisiko",
|
||||
"tilgjengelighet", "omdømme", "økonomi", "andre"]
|
||||
},
|
||||
"actors": {
|
||||
"type": "array",
|
||||
"items": { "enum": ["intern-bruker", "saksbehandler", "innbygger", "ekstern-aktør", "leverandør", "system", "ai-modell"] }
|
||||
},
|
||||
"inherent": {
|
||||
"type": "object",
|
||||
"required": ["likelihood", "consequence"],
|
||||
"properties": {
|
||||
"likelihood": { "type": "integer", "minimum": 1, "maximum": 5 },
|
||||
"consequence": { "type": "integer", "minimum": 1, "maximum": 5 },
|
||||
"rationale": { "type": "string" }
|
||||
}
|
||||
},
|
||||
"controls": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"required": ["id", "title"],
|
||||
"properties": {
|
||||
"id": { "type": "string", "pattern": "^M-[0-9]{3,}$" },
|
||||
"title": { "type": "string" },
|
||||
"kind": { "enum": ["preventiv", "deteksjon", "korreksjon", "policy", "opplæring", "teknisk"] },
|
||||
"status": { "enum": ["planlagt", "implementert", "validert", "ute-av-drift"] },
|
||||
"owner": { "type": "string" },
|
||||
"due": { "type": "string", "format": "date" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"residual": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"likelihood": { "type": "integer", "minimum": 1, "maximum": 5 },
|
||||
"consequence": { "type": "integer", "minimum": 1, "maximum": 5 },
|
||||
"rationale": { "type": "string" }
|
||||
}
|
||||
},
|
||||
"regulatory_refs": {
|
||||
"type": "array",
|
||||
"items": { "type": "string", "description": "GDPR Art. 35, AI Act Art. 6, NS 5814, …" }
|
||||
},
|
||||
"status": { "enum": ["open", "mitigating", "monitored", "closed", "transferred"], "default": "open" }
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue