Designsystemet

dok · designsystem
id: designsystem
namn: Designsystemet
sammanfattning: Beskriver tokens, primitiver, mönster och regler som data, och renderar dem som sida, JSON och plattext.
uppdaterad: 2026-10-05

ansvar:
- Vara facit för hur något ska se ut och bete sig, med uttömmande varianter i stället för beskrivningar.
- Rendera levande exempel med samma primitiver som modulerna använder – går ett exempel sönder är det systemet som gått sönder.
- Hålla felindexet: de misstag som faktiskt uppstår, i formen fel → rätt → varför.
- Ge en maskinform som får plats i ett sammanhangsfönster.

filer:
- dev/ui/page.tsx — Sidan: regler, tokens, poster, felindex, checklista.
- dev/ui/system/typer.ts — Datamodellen: Token, Prop, Fel, Post, Regel.
- dev/ui/system/tokens.ts — Färg, typografi, form och rörelse, läst ur theme.css.
- dev/ui/system/poster.ts — Primitiver, mönster och ytor. Ingen JSX – filen läses också av route handlers.
- dev/ui/system/regler.ts — De tio bärande reglerna, felindexet och checklistan. R4 fångas numera av eslint-rules/inga-hardkodade-designvarden.mjs.
- dev/ui/exempel.tsx — Levande exempel, ett per post-id.
- dev/ui/komponenter.tsx — Sidans egna byggstenar: Postkort, Fargruta, Proptabell.
- dev/ui/llms.txt/route.ts — Systemet som plattext.
- dev/ui/spec.json/route.ts — Systemet som JSON.

kontrakt:
- Stabila id: ui.card, monster.aiyta. Ett id ändras aldrig – nya former får nya poster.
- Varianter räknas upp uttömmande. Finns värdet inte i listan finns det inte i systemet.
- Villkor i stället för smak: "Använd när" och "Använd inte" ska räcka för att välja mellan två poster.
- Ändras en token i packages/tokens eller en primitiv i packages/ui ändras posten här i samma commit.

beroenden: ui, tokens
beslut: ADR-009, ADR-010

kvarstår:
- Ingen kontroll av att posterna stämmer med koden. En primitiv som får en ny variant kan glömmas bort här.