Kommunens grafiska profil är gjord för tryck. På skärm blir tjänsterna platta: två steg per färg, fyra gråtoner och ingen definition av vad som ligger på vad. Det här är ett test av hur ett modernt designsystem för digitala tjänster kan se ut när profilens färger är enda utgångspunkten och allt annat får byggas nytt.
Alla sidor har reglage för verksamhetsfärg, ljust/mörkt läge, högkontrast och "Simulera TV". Aurora har dessutom en kommandopalett på ⌘K.
Profilen troget tolkad. En verksamhetsfärg per tjänst, fyra lager med elevation, Raleway och Inter. Sidan tar det från diagnos och principer via tokens, komponenter och mönster till fem hela tillämpningar och nästa steg.
Öppna Sundsvall DSSamma färger som spektrum, förstärkta för skärm. Bläckmörkt läge, kommandopalett, assistentpanel, konversationsformulär och fasta UI-tillstånd för AI-innehåll. Tänkt som produkt, inte som myndighet.
Öppna Aurora| A · Sundsvall DS | B · Aurora | |
|---|---|---|
| Färg | Profilens hex exakt, en verksamhetsfärg per tjänst | Profilens nyanser med höjd kroma, blå primär, två gradienter som signatur |
| Karaktär | Lugn, institutionell, lätt att känna igen som kommunen | Produktkänsla: piller, glöd, glas, bläck, snabb navigation |
| AI | Regler och registry för agenter som bygger UI | Även fem UI-tillstånd för AI-innehåll och ett JSON-schema för generativt gränssnitt |
| Passar | Breda medborgartjänster med lagkrav på enkelhet | Handläggarverktyg, assistentdrivna tjänster, mobil först |
| Gemensamt | shadcn/ui-kontraktet, tokenstrukturen, registryt, WCAG 2.2 AA, högkontrastläge. En tjänst kan flytta mellan dem. | |
Det här är det Claude Code läser när en tjänst ska byggas. Aurora delar strukturen; egna tokenfiler för B tas fram när ett alternativ valts.
tokens.jsonW3C Design Tokens. Enda stället där ett färgvärde finns. Lägen: light, dark, high-contrast. Kontrastregler som tal.
globals.cssGenererad från tokens. shadcn/ui- och Tailwind v4-kompatibel. Klistra in i ett shadcn-projekt.
AGENTS.mdRegelboken för agenter och utvecklare, skriven som testbara påståenden. Läses innan kod skrivs.
AGENTS.md, globals.css och en beställning skriven med mönsternamn ("service-header + step-form i fyra steg + summary-card + case-status"). Det som blir fel är det som saknas i regelboken – och det är nästa iteration.