Kommunal service som känns som en produkt.
Samma tolv profilfärger, samma shadcn-grund, samma AI-perspektiv – men ett formspråk lånat från de bästa mjukvaruprodukterna: kommandopalett, sidopanel med assistent, konversationsformulär, bläckmörkt läge och två gradienter som signatur. Färgerna är förstärkta i kroma så att de fungerar på skärm, inte bara på papper.
Skolskjuts
Att göra 12MinaFörfaller snartNytt ärendeInkomna 5
Handläggs 4
Beslut 3
Samma grund, annan ambition
Alternativ A tolkar profilen troget: fyra verksamhetsfärger, en åt gången, lugn och institutionell. Alternativ B tar profilens fyra kulörer och behandlar dem som ett spektrum, förstärker dem för skärm och lägger till de mönster som gör moderna produkter snabba att använda.
| A · Sundsvall DS | B · Aurora | |
|---|---|---|
| Färg | Profilens hex exakt, en verksamhetsfärg per tjänst | Profilens nyanser, förstärkt kroma; blå primär för alla, spektrum som signatur |
| Neutraler | Kalla gråtoner, vit yta | "Bläck": blåtonade neutraler ner till nästan-svart marinblå |
| Mörkt läge | Följer system | Likvärdigt med ljust; interna verktyg är mörka som standard |
| Form | Radie 4–20, rektangulära knappar | Radie 8–28, pillerknappar, glas i överlägg, färgad glöd på primär |
| Typografi | Raleway + Inter | Bricolage Grotesque + Geist |
| Navigation | Meny och brödsmulor | Kommandopalett först, rail, chips, sticky action bar |
| Formulär | Stegformulär | Konversationsformulär med strukturerade kort, AI-förifyllning |
| AI | Regler för agenter som bygger UI | Även UI-tillstånd för AI-innehåll: föreslaget, strömmande, väntar, konfidens, agentlogg |
| Passar | Medborgartjänster med lagkrav, breda målgrupper | Interna verktyg, handläggarappar, pilotprojekt, mobila medborgarappar |
Profilen som spektrum
Överst profilens fyra primärfärger som de är. Underst samma fyra nyanser med höjd kroma och ljushet för skärm. Nyansen (hue) är bevarad inom två grader; det är det som gör att paletten fortfarande är Sundsvalls.
g-fjord-deco och får bara användas utan text. Primär signatur: hero, primärknapp i kampanjläge, förlopp, slider. Aldrig som bakgrund för text under 20 px.Regel 1
Electric är primär i alla tjänster. Verksamhetstillhörighet visas med ord och ikon, inte med färg.
Regel 2
Gradienter finns på fem platser: hero, kampanjknapp, förlopp, AI-avatar, AI-notis. Ingen annanstans.
Regel 3
Ingen information bärs av en ljus ton ensam. Mjuka ytor har alltid kant (steg 500) och ikon, så de överlever en TV som tappar ljusa toner. Slå på "Simulera TV" och "Hög (TV)" uppe till höger.
Mjukare, djupare, snabbare
Fyra radier, alla större
8 för chips och små kontroller, 12 för fält och kort i listor, 18 för kort och paneler, 28 för dialoger och sheets. Knappar är alltid piller. Det ger ett vänligare intryck och gör klickytor tydliga.
Bläck
Mörkt läge är inte grått. Det är marinblått bläck ur Vattjom, med surface, raised och glass som tre lager ovanpå.
Glöd
Primärknappen har en färgad skugga, inte en grå. Det är den enda komponenten med glöd.
Glas
Topbar, sticky action bar och kommandopalettens bakgrund använder blur och 88 % opacitet, tillräckligt för att text ovanpå alltid ska klara 4,5:1. I högkontrastläget blir de solida.
Rörelse
Knappar trycks ner en pixel. Paneler glider in på 200 ms. Strömmande text har markör. Inget annat rör sig av sig självt.
Typografi: Bricolage Grotesque + Geist
Bricolage för rubriker med tät spärrning, ett typsnitt med egen karaktär som ändå är lätt att läsa. Geist för allt gränssnitt, Geist Mono för ID och kod. Brödtext 15 px på desktop, 16 på mobil.
shadcn/ui, tematiserat och utökat
Samma kontrakt som i alternativ A: tokens mappas till shadcn:s variabler. Skillnaden är formen, plus fyra komponenter som shadcn har men A inte använder: Command, Sheet, Sonner och Slider.
r/button.json- Primär: en per vy, glöd. Fjord-varianten bara i onboarding och kampanj.
- AI-varianten betyder att en modell gör något; alltid med gnist-ikon.
- Piller överallt utom ikonknappar (radie 10).
<Button>Fatta beslut</Button>
<Button variant="ai"><Sparkles/>Förbered med AI</Button>r/input.json · r/command.json · r/tabs.json · r/switch.json · r/slider.json- Fält med inre skugga, fokus ger 3 px ring i primär.
- AI-föreslaget värde är ett eget tillstånd: violett kant, pill, Tab för att godkänna. Ett förslag blir aldrig ett värde utan en handling.
- Segmented för vyval, tabs bara för innehållsflikar.
r/command.json- Allt som går att göra går att nå med ⌘K. Navigering, handlingar och frågor till assistenten i samma palett.
- Senaste och föreslagna kommandon först. Naturligt språk faller igenom till assistenten.
- Tryck ⌘K på den här sidan för en fungerande version.
r/sheet.json · r/sonner.json · r/tooltip.json · r/alert.json · r/skeleton.jsonBevilja skolskjuts?
Beslutet skickas till vårdnadshavaren och linje 30 meddelas. Du kan ångra i 10 minuter.
- Sheet från botten på mobil, från höger på desktop. Radie 28. Beslut i sheet, aldrig i modal mitt på skärmen.
- Toast i bläck med Ångra som standard. Alla agenthandlingar går att ångra i 10 minuter.
- AI-notis använder aurora-gradientens mjuka variant.
Gränssnittet vet när en modell talar
Alternativ A reglerar hur AI bygger gränssnitt. Aurora reglerar också hur gränssnittet visar AI-genererat innehåll. Fem tillstånd som varje komponent kan ha, med fast form så att både människor och modeller känner igen dem.
Föreslaget state="suggested"
Violett kant och pill. Godkänns med Tab eller klick, förkastas med Esc. Blir aldrig ett värde av sig självt.
Strömmar state="streaming"
Markör som blinkar, text som växer. Inga knappar förrän strömmen är klar. Går alltid att stoppa.
Väntar state="pending"
Skeleton i innehållets form med etiketten "Förbereder …". Efter 8 s: alternativ att fortsätta utan.
Konfidens confidence=0.86
Visas bara på förslag som påverkar beslut. Under 60 % kräver förslaget att handläggaren läser underlaget.
Agentlogg <AgentRun>
Varje steg en agent tar syns, kan stoppas och kan ångras. Steg som skickar något utanför systemet kräver alltid ett klick.
Lånade från produkter, anpassade för förvaltning
Kommando först
⌘K når navigation, handlingar och assistenten. Menyer finns, men den som lärt sig paletten behöver dem inte. Handläggare som gör samma sak 40 gånger om dagen tjänar minuter.
Rail + arbetsyta + assistent
Tre kolumner: smal ikonrail, bred arbetsyta, sidopanel med assistent som kan fällas in. Assistenten ser det du ser och föreslår handlingar, aldrig utför utan godkännande.
Konversationsformulär
Medborgaren berättar, assistenten ställer följdfrågor och bygger ett strukturerat kort som visas i tråden. Kortet är formuläret. Inget fält utan att det behövs.
Tavla och lista, samma data
Ärenden visas som kanban för flöde, lista för volym, karta för geografi. Vyval i segmented control, filter som chips, sparade vyer per person.
Sticky action bar
Primär och sekundär handling i en glasremsa längst ner som följer med. Scrollen påverkar aldrig var man klickar.
Ångra, inte bekräfta
De flesta handlingar utförs direkt med en toast och Ångra. Dialog bara när något lämnar systemet eller inte går att återställa.
Två sidor av samma system
Handläggarappen överst på sidan är den interna sidan, mörk som standard. Här är medborgarens sida: en mobil tjänst där ansökan är ett samtal, och en ljus översikt för medborgarens ärenden.
Medborgarapp: ansökan som samtal
Mönster: konversationsformulär, föreslaget-tillstånd, sticky action bar, sheet.
Mina ärenden, ljus vy
Mönster: bento-översikt, statuspiller, AI-notis, ångra-toast.
Skolskjuts, Elias
HandläggsBeslut senast 28 september. Handläggare Karin Öhman.
Bygglov, altan
KompletteringSituationsplan behövs senast 25 september.
Fakturor
Inget att betala.
Barn
Elias, Maja
Meddelanden
2 olästa
Generativt gränssnitt, inte bara genererad kod
Alternativ A låter en agent skriva React med rätt tokens. Aurora lägger ett lager till: komponenterna har ett JSON-schema, så att en modell kan svara med en beskrivning av ett gränssnitt som renderas direkt i tjänsten, i realtid, utan att kod skrivs. Samma registry, två vägar in.
Vad en modell skickar
{
"pattern": "case-summary",
"state": "suggested",
"confidence": 0.86,
"sources": ["riktlinje-2.1", "karta", "folkbokforing"],
"children": [
{ "component": "KeyValue", "items": [
{ "label": "Avstånd", "value": "5,2 km", "intent": "success" }
]},
{ "component": "ActionRow", "actions": [
{ "label": "Bevilja", "intent": "primary",
"requiresApproval": true, "undoable": true },
{ "label": "Granska mer", "intent": "secondary" }
]}
]
}Vad som gäller
| Intent, inte stil | Modellen anger intent (primary, success, ai …). Renderaren väljer token. En modell kan aldrig sätta en färg. |
| Tillstånd är obligatoriskt | Allt AI-innehåll bär state. Utan det renderas det inte. |
| Handlingar kräver godkännande | requiresApproval är standard för allt som lämnar systemet. undoable ger toast med Ångra. |
| Källor visas | sources renderas som chips i meddelandet. Inga källor, ingen konfidens över 60 %. |
| Schemat är registryt | Varje mönster i design.sundsvall.se/r har ett JSON-schema och en React-implementation. MCP-servern exponerar båda. |
Tokens i OKLCH, relativt
Skalorna definieras som funktioner av profilens ankare: oklch(from #005595 calc(l + .18) calc(c * 1.4) h). Ändrar kommunen en profilfärg följer hela systemet med, och en modell kan härleda nya steg utan att gissa.
När väljer man B?
När målgruppen är handläggare, när tjänsten bygger på en assistent, när mobilen är första skärmen, eller när kommunen vill visa att offentlig digital service kan kännas lika bra som det bästa man använder privat. Alternativ A är fortfarande rätt för breda medborgartjänster med lagkrav på enkelhet. De två delar tokens-struktur och registry, så en tjänst kan byta.