Stilguide
Det här är den digitala stilguiden för Sveriges Elevkårer.
Snabblänkar: typografi, färger, avstånd, exempel: fullbredd, rutor.
Uppdaterad 2026-04-20
Rubrik 1
Rubrik 1 är som standard 2X Large. Det ska helst bara finnas en rubrik 1 (blocket, inte textstorleken) per sida.
Observera att Rubrik 1 som block inte bör användas på sidorna om de inte är tomma och därmed utan titlar. Detta av hierarkiska skäl, rubriker ska alltid komma i storleksordning och man bör inte hoppa över en rubrik. Storleken 2X Large kan förstås användas fritt.
Rubrik 2
Rubrik 2 är som standard Extra Large. Använd när sidor behöver delas upp i undersektioner.
Rubrik 3
Rubrik 3 är som standard Large. Behövs det ytterligare rubriknivåer under rubrik 2 så är det den här som gäller. Försök strukturera sidorna så att det räcker med två rubriker under sidans titel, dvs. rubrik 2 och 3.
Det går utmärkt att ändra storleken på rubrikerna, bara de faller nedåt. Vitsen med rubriker är dels läsbarhet för besökaren, och dels för att underlätta för såväl skärmläsare som sökmotorer/botar. Det viktiga är att man väljer rätt rubrik i rubrikblocket, den exakta storleken kan ändras. Som exempel så är det vanligt att nyhetsartiklar har rubrik 2 eller 3 på en startsida exempelvis, men eftersom flera artiklar presenteras så sätts ofta en mindre storlek än vad som är standard.
Rubrik 4
Rubrik 4 är som standard Medium. Används endast om det verkligen behövs ytterligare struktur i ett dokument.
Rubrik 5
Rubrik 5 är som standard Small. Det här är även standardstorleken för brödtext. Användning är inte rekommenderad annat än i specialfall (t.ex. juridiska texter med djup).
Rubrik 6
Rubrik 6 är som standard Tiny. Användning är inte rekommenderad annat än i specialfall (t.ex. juridiska texter med djup).
De båda citatmodellerna följer:
Ett citat av standardmodell. Det använder typsnittet DIN.
Bob Dylan
Ett citat av modellen enkel. Det använder typsnittet DIN. Passar bättre för längre citat, i synnerhet om de består av flera stycken text.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Janis Joplin
Vi använder två typsnitt:
DIN i medium/fet, avsett för rubriker och större citat.
Inter, främst i regular och fet men hela variabla skalan finns.
Typsnittsstorlekar:
2X Large – 48-36 px
Extra Large – 32-24 px
Large – 26-22 px
Medium – 22-18 px
Small – 16 px
Tiny – 13 px
Intervallen anger vilka typsnittsstorlekar storleken skalar mellan beroende på skärmstorlek, om några alls. Den större är för stora skärmar medan den mindre är för mobiltelefoner och dylikt.
Brödtext följer, först som ett stycke text, sedan som en variation av listor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Innehåll kan ha andra textstorlekar än sina standardstorlekar. Det är helt okej, tänk bara på att hålla det hierarkiskt, dvs. en sidas rubrik har störst text, sedan följer rubrikerna i ordning.
I synnerhet rubriker kan bryta från sin standardstorlek beroende på kontext, men se till att hierarkin hålls, dvs. att rubrik 2 följs av rubrik 3, inte rubrik 4 bara för att den har mer ”rätt” storlek för andamålet. Då är det bättre att ändra textstorleken på rubrik 3.
Textstorlekarna finns av läsbarhetsskäl. Tydlighet är det viktiga.
Undvik liten text, som denna, annat än för förtydliganden, fotnoter och dylikt. Förtydliganden med exempelvis den mörkgrå färgen, för att öka kontrasten mot brödtexten, är att rekommendera.
Färger
#FFFFFF
#e8e8e8
#505050
#0C0C0C
Vi använder främst svart eller vitt för brödtext. Sekundär text såsom bildtexter eller informationstexter och förtydligande texter kan använda den mörk- eller ljusgrå texten mot respektive ljusa/mörka bakgrundsfärg.
Primärfärger
#787c28
#0b7985
#8f325f
#a2460d
Primärfärgerna är starka nog att användas som accentfärger eller för större texter om det mot förmodan skulle behövas. De fungerar som färgplattor med vit text ovanpå samt för visuella element i gränssnittet mot ljus bakgrund (vit primärt, pasteller kan användas för accenter inom färgplattan vid behov).
Pasteller
#f6fae8
#f4fbfd
#f5eef1
#FAF5E9
Pastellerna fungerar som färgplattor med svart text. De kan även användas som effekt- eller accentfärg ovanpå respektive primärfärg, men endast i hjälpsyfte.
Accentfärger
#BBC33E
#7cc0ca
#cc72a0
#e1874c
#000000
Accentfärgerna kommer från den visuella profilen och lämpar sig bäst för användning i print, de är nämligen inte tillgänglighetsanpassade för webb och kan inte användas för text. Vi använder accentfärger för identitetsbyggande element i gränssnittet såsom ikoner, genomskinliga färgoverlays på bilder/video, samt accenter när man för muspekaren över en knapp exempelvis. Accentfärgerna kan väljas i gränssnittet men det bör endast ske i undantagsfall, och aldrig som bärande färg.
Total svart finns även med bland accentfärgerna ifall det skulle behövas, men den ska heller inte användas utan den ”svarta” färg vi använder är den i primärfärgerna.
Avstånd
Nedan följer representationer av standardavstånd som kan användas. Alla kan köras över med egna värden men det ska förstås göras så sällan som möjligt, av såväl standardiseringsskäl som möjlighet att förändra dem globalt om det skulle behövas.
2X-Small
X-Small
Small
Medium
Large
Extra-Large
2X Large
Standardavstånd mellan block är 2X-Small. Endast i undantagsfall ska avstånden mellan element vara mindre än detta, och då handlar det just om ett undantag så avståndet anges manuellt.
Avståndet mellan sektioner eller på slutet av en sida som inte avslutas med en heltäckande sektion som ska möta sidfotet bör vara Small. Det kan dock finnas tillfällen då större avstånd är att föredra, men Small täcker de flesta behov vad gäller struktur mellan avsnitt.
Observera att avstånd kan skala med skärmstorlek. Använd därför sunt förnuft och kom ihåg att för mycket luft nästan alltid är bättre än för lite.
Exempel
Text och fakta på färgplattor
Rubrik i rutan
En stram grå faktaruta med tydlig rubrik. Skapas genom att göra en grupp och sätta bakgrunds- samt textfärg. Om den vanliga brödtextstorleken används så är extra padding på gruppen, X-Small, att föredra eftersom det då blir mer utrymme till rutans kanter än det är mellan blocken inom gruppen.
Ovan används rubrik 4 samt vanlig brödtext.
Samma fast med pastell
För en lugnare ruta kan någon av pastellerna användas. Textfärgen behöver då inte ändras, utan endast bakgrundsfärgen för gruppen.
Ovan används rubrik 4 samt vanlig brödtext.
Primärfärg
Primärfärgerna är starka och behöver vit text, precis som den grå rutan ovan. Använd för saker som besökaren ska agera på snarare än i informationssyfte om inte övriga visuella element på sidan är så pass starka att primärfärgerna behövs.
Fungerar väl med knappar men du kan behöva ange färgen på ramen samt hur du vill att de ska bete sig vid hover.
Ovan används rubrik 4 samt vanlig brödtext. Knappen har fått vit ram men hover är primärfärgens pastell och svar text.
Undvik att blanda flera olika färgade rutor med varandra, håll dig i mesta mån till en färgvärld (dvs. en primärfärg med tillhörande pastell vid behov för faktarutor eller andra visuella element i behov av accent).
Undantaget är ifall olika avdelningar eller liknande har färgkodats och det finns ingångar till dessa, exempelvis i form av informationsrutor med knappar för vidare utforskning – då är det viktigare att understryka färgvärlden respektive avdelning har, och flera primärfärger kan därmed förekomma på samma sida.
Accentfärger i gränssnittssammanhang
Ikoner och icke-kritisk grafik i gränssnittet kan sättas i accentfärg om det lämpar sig.
Knappar
Knapparnas utförande vad gäller färg på ram samt hovereffekt är förstås beroende av kontext – ligger de på en färgplatta måste färgerna justeras därefter.
I de fall en specifik färg väljs så justeras hovereffekten till den tillhörande accentfärgen. Exempel följer, beroende på hur mycket effekt som behövs.
Omslagsblocket
Använd omslagsblocket för att sätta färgton på bilder. Här är 50% med och inget blockavstånd men det är själva bilden som styr vad som behövs. Accentfärgerna kan användas här om motivet tillåter.
Citat
Citat kan använd primärfärgerna om det passar övriga sidan.
Elvis Presley
Även citat av enkel modell kan använda färger. Kombinera gärna primärfärg med tillhörande pastell.
Avgränsaren ovan har fått den ljusgrå färger som bakgrund. På så vis blir den mindre påtaglig.
Innehåll i fullbredd
Det här är en grupp med en bakgrundsfärg. Den har padding Small upp/ned samt X-Small vänster/höger för att säkerställa att innehållet i gruppen inte riskerar nå en kant. Naturligtvis fungerar det dåligt utan en bakgrundsfärg, exempelvis en pastell som här men primärfärg med ljus text kan fungera beroende på budskap. Lämpar sig utmärkt för call to actions, i synnerhet längst ned på sidor innan sidfoten.
Var dock försiktig med att kombinera flera färgskalor på samma sida, som tidigare noterat.
Rutor
Rutorna nedan fungerar enbart om de är ingångar till olika avdelningar som i sin tur är färgkodade, dvs. använder en del av färgskala exklusivt för att tydliggöra för besökaren var de är/vad ämnet är.
Ruta 1
Flera rutor på rad kan ha olika färgvärldar om de används för att leda besökaren vidare till avdelningar som i sin tur är färgkodade. Om det känns för aggressivt med en knapp så testa en vanlig länk.
Ruta 2
Flera rutor på rad kan ha olika färgvärldar om de används för att leda besökaren vidare till avdelningar som i sin tur är färgkodade. Om det känns för aggressivt med en knapp så testa en vanlig länk.
Ruta 1
Flera rutor på rad kan ha olika färgvärldar om de används för att leda besökaren vidare till avdelningar som i sin tur är färgkodade. Om det känns för aggressivt med en knapp så testa en vanlig länk.
Fungerar förstås med pasteller med för en lite lugnare effekt, men blanda inte – antingen använder rutorna primärfärgen som bakgrund, eller så är det pasteller.
Ruta 1
Flera rutor på rad kan ha olika färgvärldar om de används för att leda besökaren vidare till avdelningar som i sin tur är färgkodade. Om det känns för aggressivt med en knapp så testa en vanlig länk.
Ruta 2
Flera rutor på rad kan ha olika färgvärldar om de används för att leda besökaren vidare till avdelningar som i sin tur är färgkodade. Om det känns för aggressivt med en knapp så testa en vanlig länk.
Ruta 3
Flera rutor på rad kan ha olika färgvärldar om de används för att leda besökaren vidare till avdelningar som i sin tur är färgkodade. Om det känns för aggressivt med en knapp så testa en vanlig länk.