STs a-kassa
Alla designade komponenter, moduler och mönster samlade på ett ställe — som referens för fortsatt design- och utvecklingsarbete. Varje komponent visas med namn, kort beskrivning och, där det är relevant, desktop- och mobilvariant sida vid sida.
En liten palett som används funktionellt. Mörkblå bär navigation och struktur, turkos är primär handlingsfärg, ljusblå lugna ytor, gul lyfter prioriterad information.
Mörkblå (primär)
#00546eNavigation, aktiva lägen, länkar, struktur.
Turkos
#0b847ePrimär CTA, viktiga interaktioner.
Ljusblå (mist)
#e5eef1Lugna ytor, infoblock, band.
Gul (honung)
#fde496Sparsamt — "Viktigt att veta", regelverk.
Ljusgrå
#f5f7f8Sidbakgrund, neutrala ytor.
Vit (paper)
#ffffffStandardyta för innehåll och kort.
Source Sans 3 för rubriker, navigation och knappar. Inter för brödtext och ingresser. Hierarki byggs med storlek och vikt — inte färg.
Ingress som svarar på vad sidan är, varför du är här och vad nästa steg är.
Standard brödtext med generöst radavstånd för god läsbarhet i längre stycken. Radavståndet (26 px) ger texten luft och gör den lätt att skanna.
Liten text för hjälptexter, bildtexter och metadata under huvudinnehållet.
Hur webbplatsens grid är uppbyggt och hur moduler placeras — på desktop och mobil — samt spacing- och responsprinciper.
1440 px desktop-frame · innehållsbredd 1200 px · 12 kolumner · 24 px gutters · ~80 px yttermarginaler. Alla moduler linjerar mot detta grid.
Fullbreddssektion · hero, meddelanden, sidfot
Contentyta · Om du blir arbetslös, Det här är vi, Regler och villkor
Modulsektioner · Vad vill du göra?, Vanliga situationer, CTA
Normalt 2–3 kort per rad inom gridet, med jämn höjd inom raden via grid/flex.
390 px ram · innehållsbredd full vidd minus 16 px sidmarginaler · en kolumn · 12–16 px spacing mellan kort.
Alla moduler håller sig inom innehållsytan. Ingen horisontell scroll får uppstå. Samma 16 px sidmarginaler används konsekvent genom hela webbplatsen.
Kortrader staplas vertikalt; ordning bevaras, klickytor anpassas för touch.
Text överst, bild under. CTA-knappar staplas vid behov i full bredd.
Huvudingångar göms i menyn som öppnas under sticky header.
Full brödsmula ersätts av en ← tillbakalänk till överordnad sida.
Skala 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 px. Tre nivåer används mest:
Liten: mellan kort och inom moduler. Medium: mellan rubrik och innehåll, mellan moduler. Stor: vertikal padding mellan sektioner (32 px på mobil).
Designen bygger på ett konsekvent 12-kolumnsgrid, gemensamma contentytor, återanvändbara moduler, tydlig hierarki, mobil-först-principer och WCAG-anpassad layout och typografi — så att samtliga sidor kan byggas direkt utifrån komponentbiblioteket.
Tre storlekar (36 / 44 / 52 px) med konsekvent padding och radie. Primär = turkos, sekundär = navy-kontur (ghost), navy = mörkblå fyllning, text = ren länk.
Alla knappar på samma storleksnivå har identisk höjd.
Primär används en gång per vy för det viktigaste steget.cursor: not-allowed; etiketten behåller kontrast.Startsidan använder en stor hero med offset-bild. Innehållssidor använder en lägre intro-hero på ljus bakgrundsplatta utan bild.
Text vänster, offset-bildkort höger, primär + sekundär CTA.
Desktop
Text och bild sida vid sida i två kolumner. CTA-knappar bredvid varandra.
Mobil
Text överst, bild under. CTA-knappar staplas i full bredd. Mindre padding.
Vi hjälper dig att förstå vad du behöver göra, hur du söker ersättning och hur du hanterar ditt medlemskap.
Används på Om du blir arbetslös, Det här är vi och Regler och villkor. Bakgrundsplatta i full bredd, brödsmula + rubrik + ingress.
Här hittar du regler, villkor och information som kan påverka din rätt till ersättning.
Förslag — mörkblå bakgrund med vit text. Används inte i produktion idag.
Vi hjälper dig vidare — från medlemskap till ersättning.
Fyra typer med tydlig hierarki. Globala meddelanden ligger direkt under sidhuvudet och är stängbara; regelverks- och informationsmeddelanden ligger nära innehållet.
Mörkblå, vit text, stängbar. För tekniska störningar och underhåll som gäller hela webbplatsen.
Sekundär profilfärg (mörk turkos), vit text, stängbar. För viktig generell information som inte är driftrelaterad.
Samlas i samma container och staplas som separata rader — aldrig flera stora banners ovanpå varandra. Drift visas före lavin.
Stängt läge: när alla meddelanden stängts visas ingen container alls — layouten hoppar inte och valet sparas under sessionen.
Ljus gråblå bakgrund, mörk text, stängbar. Används när meddelandet placeras nära eller direkt under en mörk hero/sektion där ett mörkblått meddelande skulle smälta ihop.
Ljus turkos bakgrund, mörk text, tydlig ikon och stäng-knapp. Upplevs fortfarande som viktig men smälter inte ihop med en mörk hero.
Mörkt meddelande mot ljus sidbakgrund (standard); ljust meddelande direkt under en mörkblå hero så att det syns tydligt.
Gul bakgrund, mörk text, inte stängbar. Ligger nära sidans innehåll. För sidor som påverkas av olika regelverk eller övergångsbestämmelser.
Gäller reglerna från 1 oktober 2025. Läs om tidigare regler
Neutral/ljus informationsruta inne i innehållet, med informationsikon.
Kom ihåg att rapportera förändringar som påverkar din ersättning.
Standard. Mörkblått driftmeddelande / mörk-turkos lavin på ljus sidbakgrund.
Ljus gråblå drift / ljus turkos lavin när meddelandet ligger nära eller under en mörk hero — så att det inte smälter ihop.
Gul bakgrund, mörk text. För sidspecifik regelverksinformation och viktiga innehållsmeddelanden.
Tekniska störningar och underhåll. Högst prioritet, stängbar.
Viktig generell information för hela webbplatsen. Stängbar.
Stödjande information inne i innehållet. Ljus ruta med ikon.
Återanvändbara kort för guidning, relaterade länkar, kontaktuppgifter och statistik.
Startsidans guidekort. Färgad ikoncirkel, titel med pil, hela kortet klickbart — endast titeln understryks vid hover.
Används på Ersättning, Medlemskap och Regler och villkor. Tonade ytor, ikoncirkel, länklista där endast länktext understryks vid hover.
Desktop
2–3 kort i rad beroende på innehåll, inom 12-kolumnsgridet. Korten har jämn höjd inom raden. Hover: kort lyfts med skugga, endast länktext understryks.
Mobil
Korten staplas vertikalt i en kolumn. Länkordningen bevaras. Klickytor och spacing anpassas för touch (≥44 px).
Ljusblå länkkort med ikon — konsekvent i slutet av informationssidor.
Desktop
Länkblock i flera kolumner inom gridet. Hover: ljusare yta + chevron-skift.
Mobil
Staplas vertikalt i en kolumn och komprimeras något för mindre scroll, med bibehållna tydliga klickytor.
Ikon + titel, hela kortet klickbart. Flerkolumns på desktop, en kolumn på mobil.
Används på "Det här är vi". Namn, roll och klickbart telefonnummer — ingen bild. Hover endast på telefonnumret.
Mörkblå kort med vit text och centrerat innehåll — stort värde överst, beskrivande etikett under. Tre i rad på desktop, staplade på mobil.
Mörkblå sektion på startsidan. Två grupper (veckovis / månadsvis) med datumrader. Desktop: två kort i rad, luftig padding. Mobil: kompakt variant — kort staplas, mindre padding (16 px), tätare datumrader (~9 px, 44 px datumbricka) så modulen blir en snabb översikt och inte dominerar skärmen. Klickytor och datumhierarki behålls.
Hitta rätt datum för rapportering och utbetalning utifrån hur du ansöker.
För dig som omfattas av försäkringen före 1 oktober 2025
För dig som omfattas av nuvarande arbetslöshetsförsäkring
Komponenter som bryter upp och strukturerar längre innehållssidor.
Mist-block med turkos vertikalstapel — skapar rytm i längre textsidor.
Du ska rapportera allt som kan påverka din ersättning, till exempel arbete, sjukdom, vård av barn eller studier.
Läs mer om månadsrapporteringNivån sänks stegvis efter 100 och 200 dagar.
Tidrapportera varje period på Mina sidor.
Ett första besked kan vara preliminärt.
Plus/minus i cirkel. Flera paneler kan vara öppna samtidigt.
Horisontell process på startsidan; vertikal, prickad steglista inne i textsidor.
Används i "Så kommer du igång" och "Så blir du medlem". Nummer + rubrik + text, centrerad i contentytan.
Skriv in dig som arbetssökande hos Arbetsförmedlingen din första arbetslösa dag.
Skicka in din ansökan till oss så snart du är anmäld.
Se beslut, status och kommande utbetalningar på Mina sidor.
Tydliga handlingsuppmaningar — färgblock, hjälpmodul och räkna-ut-band.
Se ungefär hur mycket du kan få i ersättning om du blir arbetslös.
Kontakta oss om du har frågor om ersättning eller behöver hjälp med ditt ärende.
Kontakta ossFormulärkontroller och de två interaktiva verktygen: regelverksguiden och ersättningskalkylatorn.
Textfält, radioknappar, kryssrutor, dropdown och reglage. Fokus visas alltid med 3 px ring.
Interaktiv vägledning på Ersättning. Tonad platta, en fråga i taget med stora radioalternativ, resultatkort med CTA:er.
Har du fått beslut om ersättning före 1 oktober 2025?
Verktyg med regelväxel (segmenterad kontroll), inputfält, reglage och resultatkort. Stackat på mobil med fullbreddsknapp.
Preliminärt resultat
Ersättningsnivå: 70 %
Beräkningen är preliminär.
"Hjälpte sidan dig?" med tumme upp / ner och frivilligt kommentarsfält.
Din återkoppling hjälper oss att göra sidan bättre.
Beskriv gärna hur vi kan förbättra sidan. Skriv inte personuppgifter i meddelandet.
Mörkblå sidfot med logotyp, kontakt, öppettider och snabbvägar. Kolumner på desktop, staplad på mobil.
Sidfoten är en delad komponent — se valfri designad sida för det fullständiga, interaktiva utförandet (desktop kolumner / mobil staplad).
Alternativa versioner att diskutera för framtida utveckling av designsystemet.
Spegelvänd hero — bild vänster, text höger.
Bildvänster-variant för omväxling i rytmen mellan sidor.