Design-system¶

GroopWorks' visuelle sprog er implementeret som ét MUI 6-theme i frontend/src/utils/theme.ts (besluttet i ADR-002). Der er ingen andre kilder til farver, skygger eller animationer — komponenter må ikke indeholde hex-koder eller linear-gradient, og CI'en fejler hvis de gør (token-gate i frontend-build-jobbet; theme.ts er eneste tilladte fil).

Paletten¶

Token	Lys	Mørk	Brug
`primary` (mint)	`#7be6c9`-skalaen	samme	Brand, primære handlinger
`background.default`	varm offwhite	`#0b1512`	Sidebaggrund
`background.paper`	hvid	`#11201b`	Kort, dialoger
`surface.sunken`	nuance under paper	`#081009`	Tabel-headere, tomme tilstande, inaktive felter
`surface.raised`	nuance over paper	`#16261f`	Accordion, fremhævede kort
`surface.overlay`	scrim	scrim	Bagtæpper
`subjects[0..9]`	10 kategoriske farver	samme	Fag-accenter (hash på fagnavn)
`accents.violet` / `accents.warm`	violet / varm pink	samme	Chat, sekundære features
`onPanel.*`	tekst på mørke brand-paneler	—	Login-sidens brandpanel

Gradients (`theme.palette.gradients`)¶

Token	Brug
`brand` / `brandHover`	Primær CTA (mint)
`accent` / `accentHover`	Violet — chat/gruppe-features
`accentWarm` / `accentWarmHover`	Varm — lærer-chat m.m.
`success`	Bekræftelser
`panel`	Store mørkegrønne flader (login-panel, vedligeholdelsesside)

I sx uden useTheme: background: (t) => t.palette.gradients.brand.

Komponent-varianter¶

Komponent	Variant	Effekt
`Button`	`variant="gradient"`	Brand-gradient CTA med hover-løft
`Paper`/`Card`	`variant="lift"`	Kort med border, hover-løft og skygge
`Chip`	`variant="statusDraft"`	Kladde (neutral)
`Chip`	`variant="statusSubmitted"`	Afleveret (grøn)
`Chip`	`variant="statusLocked"`	Låst (amber)
`Chip`	`variant="statusPlanned"`	Planlagt (violet)
`Chip`	`variant="statusHelp"`	Hjælp efterspurgt (warning)

Tabeller¶

Alle Table-komponenter får automatisk fra themet: header-celler med overline-typografi på surface.sunken, zebra-striber på lige rækker og mint-tonet row-hover. Lange tabeller skal selv tilføje stickyHeader + maxHeight på TableContainer.

Tilstande¶

Brug de delte komponenter i frontend/src/components/feedback/:

EmptyState — ikon-medaljon, titel, beskrivelse, valgfri gradient-CTA (dense til paneler).
ErrorState — fejl med retry-knap.
LoadingState — skeleton-rækker eller -kort.

Dashboards bruger components/dashboard/StatCard (ikon-medaljon + talværdi + hint) og DeadlineTimeline (prik-tidslinje med relative frister via utils/relativeTime.ts).

Bevægelse¶

Hover-løft på kort og 150–200 ms transitions er indbygget i varianterne — tilføj ikke egne.
Fade/Grow på lister og dialoger; ingen animationsbiblioteker.
prefers-reduced-motion respekteres globalt via CssBaseline.

Farve-hjælpere¶

utils/avatarColors.ts: avatarColor(theme, i) (avatar-stacks), subjectColor(theme, i) + subjectTint (fag-accenter).
Relative deadlines: utils/relativeTime.ts — formatRelativeDeadline (rød < 24 t), formatLongDate, greetingForHour.

Topbaren er flex-baseret (ingen absolut positionering) og kollapser til burger-menu under md — nav-punkter kan aldrig overlappe logo/tenant-chip. Lærer-nav: Forside, Forløb, Beskeder, Aktivitet — Forløb-siden har fanerne Hold | Grupper | Opgaver (components/navigation/SectionTabs); Stamklasser nås via knap på Hold-siden og Administration-menuen. Admin-nav: Forside, Administration (undersektions-menu), Beskeder, Aktivitet.

Logo¶

Ikonet i assets/groops-work-icon.svg er et midlertidigt mærke omfarvet til paletten (mint/teal). Et rigtigt logo for Groops' Work udestår — udskift filen og fjern denne note når det lander.

Regler (anti-mål fra ADR-002)¶

Ingen hex/linear-gradient uden for theme.ts (CI håndhæver det).
Ingen nye farver uden for paletten; ingen glassmorphism/neon.
Maks én primær (gradient-)CTA pr. view.
Ingen dekorative animationer der ikke kommunikerer tilstand.
Alt skal bestå AA-kontrast i begge themes.