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.
185 lines
6.5 KiB
CSS
185 lines
6.5 KiB
CSS
/* =============================================================================
|
|
Playground Design System — tokens.css
|
|
v0.1 — Phase 1
|
|
Aksel/Digdir-aligned. Norwegian public sector. WCAG 2.1 AA.
|
|
============================================================================= */
|
|
|
|
:root {
|
|
/* ---------- Typography -------------------------------------------------- */
|
|
--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
--font-family-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
|
|
--font-family-serif: "Source Serif 4", Georgia, serif;
|
|
|
|
--font-size-xs: 13px;
|
|
--font-size-sm: 15px;
|
|
--font-size-md: 17px; /* body default */
|
|
--font-size-lg: 19px;
|
|
--font-size-xl: 23px;
|
|
--font-size-2xl: 28px;
|
|
--font-size-3xl: 34px;
|
|
--font-size-4xl: 44px;
|
|
|
|
--line-height-tight: 1.2;
|
|
--line-height-snug: 1.4;
|
|
--line-height-normal: 1.55;
|
|
--measure: 65ch;
|
|
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* ---------- Primary (Digdir) ------------------------------------------- */
|
|
--color-primary-50: #E8F1FB;
|
|
--color-primary-100: #C6DCF4;
|
|
--color-primary-200: #9CC0EA;
|
|
--color-primary-300: #6FA5DD;
|
|
--color-primary-400: #3B83CB;
|
|
--color-primary-500: #0062BA; /* Digdir blue */
|
|
--color-primary-600: #00569F;
|
|
--color-primary-700: #004A8F;
|
|
--color-primary-800: #003A70;
|
|
--color-primary-900: #002F5C;
|
|
|
|
/* ---------- Severity ramp (deuteranopia-safe) ------------------------- */
|
|
--color-severity-low: #1A7F37;
|
|
--color-severity-medium: #BF8700;
|
|
--color-severity-high: #CC5A00;
|
|
--color-severity-critical: #A40E26;
|
|
--color-severity-extreme: #66050F;
|
|
|
|
/* Soft fills (matrix cells, badges) */
|
|
--color-severity-low-soft: #DDF4E4;
|
|
--color-severity-medium-soft: #FBF0CC;
|
|
--color-severity-high-soft: #FCE0CC;
|
|
--color-severity-critical-soft: #F8D7DC;
|
|
--color-severity-extreme-soft: #E8C7CC;
|
|
|
|
/* Foreground on severity bg */
|
|
--color-severity-low-on: #0E4A20;
|
|
--color-severity-medium-on: #5C3F00;
|
|
--color-severity-high-on: #5C2900;
|
|
--color-severity-critical-on: #FFFFFF;
|
|
--color-severity-extreme-on: #FFFFFF;
|
|
|
|
/* ---------- State (distinct from severity) --------------------------- */
|
|
--color-state-success: #1A7F37;
|
|
--color-state-warning: #BF8700;
|
|
--color-state-failed: #7D1A1A; /* dark desaturated red — "broke" */
|
|
--color-state-blocked: #5C2D91; /* purple — distinct */
|
|
--color-state-info: #0969DA;
|
|
--color-state-running: #BF8700;
|
|
--color-state-queued: #6E7781;
|
|
--color-state-pending: #4D7DAD;
|
|
--color-state-done: #1A7F37;
|
|
|
|
/* ---------- Surface / background ------------------------------------- */
|
|
--color-bg: #FBFAF7; /* warm off-white page */
|
|
--color-bg-soft: #F4F2EC; /* subtle section */
|
|
--color-surface: #FFFFFF;
|
|
--color-surface-raised: #FFFFFF;
|
|
--color-surface-sunken: #F1EEE7;
|
|
--color-overlay: rgba(15, 18, 22, 0.45);
|
|
|
|
/* ---------- Border --------------------------------------------------- */
|
|
--color-border-subtle: #E4E0D6;
|
|
--color-border-moderate: #C8C2B3;
|
|
--color-border-strong: #6E7781;
|
|
--color-border-focus: #0062BA;
|
|
|
|
/* ---------- Text ----------------------------------------------------- */
|
|
--color-text-primary: #1F2328;
|
|
--color-text-secondary: #4D5663;
|
|
--color-text-tertiary: #6E7781;
|
|
--color-text-on-primary: #FFFFFF;
|
|
--color-text-link: #00569F;
|
|
--color-text-link-hover: #002F5C;
|
|
|
|
/* ---------- Plugin scope colors -------------------------------------- */
|
|
--color-scope-architect: #0F6E76; /* ms-ai-architect — petrol */
|
|
--color-scope-okr: #9A6700; /* OKR — amber */
|
|
--color-scope-security: #A40E26; /* llm-security — crimson */
|
|
--color-scope-ultraplan: #4338CA; /* ultraplan-local — indigo */
|
|
--color-scope-config: #3F5963; /* config-audit — slate */
|
|
|
|
/* ---------- Spacing -------------------------------------------------- */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
--space-20: 80px;
|
|
|
|
/* ---------- Radius --------------------------------------------------- */
|
|
--radius-sm: 3px;
|
|
--radius-md: 5px;
|
|
--radius-lg: 8px;
|
|
--radius-pill: 999px;
|
|
|
|
/* ---------- Shadow --------------------------------------------------- */
|
|
--shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.04), 0 0 0 1px rgba(15, 18, 22, 0.04);
|
|
--shadow-md: 0 2px 4px rgba(15, 18, 22, 0.06), 0 4px 12px rgba(15, 18, 22, 0.04);
|
|
--shadow-lg: 0 4px 8px rgba(15, 18, 22, 0.06), 0 12px 32px rgba(15, 18, 22, 0.06);
|
|
--shadow-focus: 0 0 0 3px rgba(0, 98, 186, 0.35);
|
|
|
|
/* ---------- Motion --------------------------------------------------- */
|
|
--duration-instant: 100ms;
|
|
--duration-fast: 150ms;
|
|
--duration-normal: 250ms;
|
|
--duration-slow: 400ms;
|
|
--ease-default: cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
/* ---------- Layout --------------------------------------------------- */
|
|
--container-narrow: 720px;
|
|
--container-default: 1080px;
|
|
--container-wide: 1280px;
|
|
--sidebar-width: 280px;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-bg: #0F1419;
|
|
--color-bg-soft: #161B22;
|
|
--color-surface: #1A2027;
|
|
--color-surface-raised: #232A33;
|
|
--color-surface-sunken: #0B1015;
|
|
|
|
--color-border-subtle: #2A323C;
|
|
--color-border-moderate: #3B4452;
|
|
--color-border-strong: #6E7781;
|
|
|
|
--color-text-primary: #E6EDF3;
|
|
--color-text-secondary: #B0BAC4;
|
|
--color-text-tertiary: #8B96A2;
|
|
--color-text-link: #6FA5DD;
|
|
--color-text-link-hover: #9CC0EA;
|
|
|
|
/* Severity soft fills tuned for dark surfaces */
|
|
--color-severity-low-soft: #163322;
|
|
--color-severity-medium-soft: #3A2C0A;
|
|
--color-severity-high-soft: #3D260F;
|
|
--color-severity-critical-soft: #3B0F18;
|
|
--color-severity-extreme-soft: #2A0408;
|
|
|
|
--color-severity-low-on: #7FE0A0;
|
|
--color-severity-medium-on: #F2C66B;
|
|
--color-severity-high-on: #F09060;
|
|
--color-severity-critical-on: #FFFFFF;
|
|
--color-severity-extreme-on: #FFFFFF;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
|
|
--shadow-focus: 0 0 0 3px rgba(111, 165, 221, 0.45);
|
|
}
|
|
|
|
/* Auto dark when no override */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]) {
|
|
color-scheme: dark;
|
|
}
|
|
}
|