4a2bf3567a
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.
88 lines
3.2 KiB
JSON
88 lines
3.2 KiB
JSON
{
|
|
"$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" }
|
|
}
|
|
}
|