Files

T

Bernt 13fea4a301 docs: Brand Palette + Grid & Elevation + Compliance Matrix update

- BRAND_PALETTE.md (v1.0, DRAFT):
  - Token-specifikation (not a color list)
  - Semantic brand tokens: primary, secondary, tertiary
  - 12-step scale (50-950) with defined purposes
  - Usage rules: where brand colors are used (logo, buttons, focus, links)
  - Usage rules: where brand colors are NOT used (status, data viz, maps)
  - Dark mode strategy: shift lighter in dark mode
  - Contrast requirements: WCAG AA 4.5:1 for text, 3:1 for large text/focus
  - Placeholder values: awaiting brand color definition from Erik/Landvex
  - Token dependencies from components: Button, Input, Select, Link, Loading, Progress
  - Governance: no new brand colors without Architecture Review

- GRID_ELEVATION.md (v1.0, DRAFT):
  - Spacing scale: 13 primitive tokens (space-0 to space-12)
  - Semantic spacing: gap-xs to gap-xl, padding/margin tokens
  - Grid system: 12-column, responsive (4/8/12 columns)
  - Common layouts: full, two-column, three-column, four-column, sidebar, asymmetric
  - Border radius: 6 tokens (none to full) with component mapping
  - Elevation system: 5 shadow levels + 8 z-index levels
  - Component elevation mapping: resting, hover, active states
  - Responsive breakpoints: xs to 2xl (Tailwind-compatible)
  - Density principles: compact/default/comfortable (75%/100%/125%)
  - Z-index scale: 8 levels with rules
  - Token dependencies from components: Card, Button, Input, Select, Modal, Table, Tag, Page, Section

- COMPLIANCE_MATRIX.md: Brand Palette 40%, Grid & Elevation 60%

Rationale: Brand Palette driven by component token usage, not vice versa.
Grid & Elevation validated against Card and other components. Foundations
now complete enough to raise component maturity.

2026-07-02 10:51:59 +00:00

3.4 KiB

Raw Blame History

COMPLIANCE MATRIX

Component Readiness Tracking


Version	1.0
Status	DRAFT — Updated as components are specified

Legend

Symbol	Meaning
✅	Complete
🟡	Partial / In Progress
⏳	Not Started
❌	Not Applicable

Tier 1 — Canonical Components

Component	Governance	Tokens	Motion	Accessibility	AI	QA	Overall
Button	✅	✅	✅	🟡	✅	⏳	82%
Input	🟡	🟡	🟡	🟡	✅	⏳	33%
Select	🟡	🟡	🟡	🟡	✅	⏳	33%
Card	🟡	🟡	🟡	🟡	✅	⏳	33%
Modal	⏳	⏳	⏳	⏳	⏳	⏳	0%
Navigation	⏳	⏳	⏳	⏳	⏳	⏳	0%
Table	⏳	⏳	⏳	⏳	⏳	⏳	0%
Data Grid	⏳	⏳	⏳	⏳	⏳	⏳	0%
Search	⏳	⏳	⏳	⏳	⏳	⏳	0%
Map Panel	⏳	⏳	⏳	⏳	⏳	⏳	0%

Tier 2 — Derived Components

Component	Governance	Tokens	Motion	Accessibility	AI	QA	Overall
Badge	⏳	⏳	⏳	⏳	⏳	⏳	0%
Alert	⏳	⏳	⏳	⏳	⏳	⏳	0%
Toast	⏳	⏳	⏳	⏳	⏳	⏳	0%
Tooltip	⏳	⏳	⏳	⏳	⏳	⏳	0%
Accordion	⏳	⏳	⏳	⏳	⏳	⏳	0%
Tabs	⏳	⏳	⏳	⏳	⏳	⏳	0%
Breadcrumb	⏳	⏳	⏳	⏳	⏳	⏳	0%
Pagination	⏳	⏳	⏳	⏳	⏳	⏳	0%
Empty State	⏳	⏳	⏳	⏳	⏳	⏳	0%
Skeleton	⏳	⏳	⏳	⏳	⏳	⏳	0%

Tier 3 — Domain Components

Component	Governance	Tokens	Motion	Accessibility	AI	QA	Overall
KPI Card	⏳	⏳	⏳	⏳	⏳	⏳	0%
Map Overlay Panel	⏳	⏳	⏳	⏳	⏳	⏳	0%
Layer Selector	⏳	⏳	⏳	⏳	⏳	⏳	0%
Mission Status	⏳	⏳	⏳	⏳	⏳	⏳	0%
Dataset Card	⏳	⏳	⏳	⏳	⏳	⏳	0%
Geospatial Inspector	⏳	⏳	⏳	⏳	⏳	⏳	0%
Asset Summary	⏳	⏳	⏳	⏳	⏳	⏳	0%
Coordinate Picker	⏳	⏳	⏳	⏳	⏳	⏳	0%
Timeline Panel	⏳	⏳	⏳	⏳	⏳	⏳	0%

Foundation Documents

Document	Status	Completeness
Design Constitution	✅	100%
Token Philosophy	✅	100%
Design Specification	🟡	70%
Component Template	✅	100%
Component Decision Tree	✅	100%
AI Design Principles	✅	100%
Design Anti-Patterns	✅	100%
Glossary	✅	100%
Release Definition	🟡	80%
Brand Palette	🟡	40%
Grid & Elevation	🟡	60%

How to Update

When a component is specified, update this matrix:

Mark completed sections as ✅
Calculate overall percentage
Update this file in same PR as component spec

ÄNDRINGSHISTORIA

Version	Datum	Beskrivning
1.0	2026-07-02	Initial compliance matrix with all components and foundation documents

STATUS

DRAFT — Updated as work progresses

3.4 KiB Raw Blame History

COMPLIANCE MATRIX

Legend

Tier 1 — Canonical Components

Tier 2 — Derived Components

Tier 3 — Domain Components

Foundation Documents

How to Update

ÄNDRINGSHISTORIA

STATUS

3.4 KiB

Raw Blame History