
SBU:s grafiska profil
Inledning
Syfte med den grafiska profilen
- Att ge ett enhetligt intryck genom att säkerhetsställa att alla visuella element (logotyp, färger, typsnitt, bildspråk, etc.) används på ett konsekvent sätt i all kommunikation – både internt och externt.
- Att ge ett professionellt intryck som signalerar kvalitet och professionalism, vilket kan påverka hur myndigheten uppfattas av samarbetspartners och målgrupper.
- Att underlätta kommunikation och design för medarbetare och externa parter (t.ex. byråer eller designers) som arbetar med att skapa nytt material, det sparar tid och minskar risken för felaktig användning av logotyper, färger eller typsnitt.
Vad ingår i den grafiska profilen?
- Logotyp (originalversion och alternativa versioner)
- Färgpalett (grundfärger och komplementfärger)
- Typsnitt (för tryck och digital användning)
- Bild- och illustrationsstil samt upphovsrätt (hur får man använda bilder)
- Ikoner och grafiska element
- Regler för hur logotyp och grafiska element får användas
Logotyp
Logotypens olika versioner
SBU:s logotyp ska användas på allt material som publiceras av myndigheten. Den finns i olika varianter – med eller utan myndighetens fullständiga namn. I första hand ska logotypen med hela namnet användas.
Logotypen ska i möjligaste mån användas i färg, med färgmodell och filtyp anpassad efter mediet.
För att säkerställa att logotypen fungerar optimalt som avsändare finns riktlinjer för dess storlek, placering och färg.
Logotypen får inte förvrängas, vridas eller modifieras på något sätt. Det är inte heller tillåtet att skapa egna versioner.
Logotypens placering
Logotypen ska alltid placeras med god marginal till kanter (se avsnittet Frizon). På rollups placeras logotypen i överkant för bästa synlighet, och i filmer ska den alltid visas i slutet.
Huvudregel för logotypen med texten till höger:
- används vid liggande format
- placeras till vänster
Huvudregel för den centrerade logotypen:
- används vid stående format
- placeras centrerat vågrätt
- används på baksidor (i ytans nedre del) och i filmers avslut (centrerat på ytan).
Om logotypen är svår att urskilja från bakgrunden används en variant med en tunn vit kant runt romben. Den ska placeras på en lugn eller enfärgad yta som ger bra kontrast, alternativt en tvåfärgad yta (helst vit och blå) där skarven går precis i mitten av logotypen.
Grundversion
Den stående eller liggande grundversionen av logotypen ska alltid vara förstahandsvalet.
Figur 1 SBU:s logotyper i sina grundversioner på svenska.
Engelsk version
För material på engelska eller i samband med internationell spridning ska logotypen med myndighetens engelska namn användas.
Figur 2 SBU:s logotyper i sina grundversioner på engelska.
Enbart romben
Romben utan det fullständiga namnet får endast användas om namnet tydligt framgår på annan plats i materialet.
Figur 3 Romben, utan fullständiga namnet, där fullständiga namnet tydligt anges på annan plats i materialet.
Positiv (svart) och negativ (vit) version
De enfärgade versionerna av logotypen används när det inte är tekniskt möjligt att använda grundversionen, eller när den inte har tillräcklig kontrast mot bakgrunden. Välj alltid den version som syns tydligast mot bakgrunden.
Figur 4 SBU:s logotyp i positiv och negativ version med respektive utan fullständigt namn.
Frizon
Frizonen motsvarande bredden av ett liggande samt stående versalt S i "romben" ska vara fri från text eller andra objekt.
Figur 5 Logotypen har en frizon i form av bredden av ett liggande versalt samt stående S.
Färger
SBU:s färger
SBU:s grundfärger är blått och gult, där blått är huvudfärg. Komplementfärgerna är valda för att harmonisera och komplettera dessa huvudfärger, och de ska användas i kombination med dem.
Färgerna kan ljusas upp om de exempelvis används som bakgrund.
SBU använder inte röd som komplementfärg. Om en signalfärg behövs, använd gärna orange.
Grundfärg | Färgprov | CMYK | RGB | HEX | PMS | Färgton |
---|---|---|---|---|---|---|
Blå | 100, 60, 0, 0 | 0, 92, 169 | #005ca9 | 286 | ||
Gul | 0, 10, 100, 0 | 255, 221, 0 | #ffdd00 | 109 | 50 % 30 % 10 % |
Komplementfärg | Färgprov | CMYK | RGB | HEX | Färgton |
---|---|---|---|---|---|
Ljusblå | 21, 7, 0, 0 | 209, 225, 245 | #D1E1F5 | 50 % 30 % 10 % |
|
Mellanblå | 60, 20, 0, 0 | 105, 172, 223 | #69ACDF | 50 % 30 % 10 % |
|
Orange | 0, 50, 100, 0 | 243, 146, 0 | #F39200 | 50 % 30 % 10 % |
|
Lila | 50, 95, 0, 0 | 149, 42, 134 | #952A86 | 50 % 30 % 10 % |
|
Grön | 70, 5, 90, 0 | 84, 170, 71 | #54AA47 | 50 % 30 % 10 % |
Använd tillräckliga kontraster i komponenter och grafik
Kontraster är avgörande för att användare ska kunna ta del av innehållet på en webbsida eller app. Det är viktigt att ikoner, fokusmarkeringar, diagram och infografik är tydligt synliga mot bakgrunden och andra objekt i närheten.
Använd tillräcklig kontrast mellan text och bakgrund
En bra kontrast mellan text och bakgrund gör texten tydlig och läsbar, vilket är särskilt viktigt för personer med synnedsättningar. Det säkerställer också att informationen når alla användare på ett likvärdigt sätt.
Typsnitt
Formgivet digitalt och tryckt material
I formgivet material använder vi oss av Foundry Sans och Adobe Garamond Pro:
- Foundry Sans i rubriker, tabeller, faktarutor, figurer och bildtexter. Vikt kan variera från Light till Bold. I kortare produktioner kan Foundry Sans användas även till brödtext. I rörligt material (film) används enbart Foundry Sans.
- Adobe Garamond Pro Regular till brödtext i längre produktioner t.ex. broschyrer och foldrar. Enstaka fraser kan förstärkas med Italic, Semibold eller Bold. Undvik att kombinera kursiv med fetstil.
- Kapitäler använder vi bland annat när myndighetens namn skrivs ut på kontrasterande färgplatta, då med spärrning om 10–25 tusendels fyrkantsblanksteg. Även till tillskrivningsrad för upphovsperson används kapitäler. Textfärg och/eller blandningsläge anpassas så att informationen förblir läsbar men diskret.
Office-dokument
I Office-dokument vi använder Aptos i olika vikter och som är standardtypsnitt i Microsoft Office:
- Aptos Display till rubriker.
- Aptos till övrig text så som brödtext, faktarutor, tabeller, figurtexter samt figur- och tabellrubriker.
Webbplats
- På vår webbplats använder vi Foundry Sans i rubriker och brödtext. I våra digitala rapporter använder vi Foundry Sans i rubriker och Adobe Garamond Pro i brödtexten.
- Skulle webfonts av någon anledning inte laddas in blir fallback-typsnittet Arial för Windows och Helvetica för MacOS.
Grafiska element
Färgplatta i botten
I SBU:s material används vanligtvis en blå färgplatta i botten. Om en tyngre färgbild används ovanför kan den istället vara vit. Myndighetens namn skrivs ut i bottenfältet.
Triangel
Triangeln motsvarar logotypen, skuren lodrätt på mitten. Den kan vara helt fylld med färg eller foto, eller delas i två (hälften färg, hälften foto). Den specifika designen, som visas i exempel, är reserverad för styrdokument och liknande material. En helt färg- eller fotofylld triangel kan dock användas i alla sammanhang.
Figur 3 Exempel på framsida för styrdokument (årsredovisning), SBU Utvärderar (gul) samt SBU Bereder (grå).
Kvadrat
Som textplatta över en bakgrundsbild används en enfärgad kvadrat, vanligtvis i SBU:s två grundfärger. Denna design används oftast i mässammanhang, exempelvis på rollups eller mässväggar.
Figur 4 Bild som visar hur kvadraten med text i är placerad på SBU:s rollups.
Figur 5 Bild som visar hur kvadraten med text i är placerad i en av SBU:s mässmontrar.
Bildanvändning & upphovsrätt
Bilder
Bilderna ska förmedla värme, mänsklighet och omtanke. De bör spegla verkligheten eller ett realistiskt önskat läge.
Använd bilder med klara, naturliga färger och mjukt eller naturligt ljus. Det är viktigt att bilderna har bra skärpa.
Bilderna ska kännas aktuella och vara tagna i en svensk miljö. Var särskilt uppmärksam på detaljer som växtlighet, språk och symboler på skyltar samt teknik och produkter i bilderna.
Kontakta SBU:s grafiska formgivare vid frågor om bildval och
Känsliga ämnen (anonymitet i bilder)
Vanligtvis ska personer inte vara identifierbara när bilder används tillsammans med våra rapporters budskap. Välj därför bilder där:
- Fokus ligger på en del av kroppen
- Kort skärpedjup eller rörelseoskärpa används
- Ansiktet är suddigt
- Personen är fotograferad bakifrån
Du kan även använda bilder av skuggor eller motiv där personen är fotograferad i motljus.
Att tänka på vid bildval
Syfte och målgrupp
- Vad är bildens syfte och vem ska den tilltala?
- Finns en tydlig koppling mellan bild och budskap?
Innehåll och representation
- Vem och vad visas i bilden – och varför?
- Vem och vad utelämnas – och varför?
- Tänk normkritiskt: Vilka personer ingår exempelvis i en familj? SBU:s bildspråk ska spegla samhällets mångfald.
- Undvik att förstärka stereotyper, t.ex. en handlingskraftig man i kombination med en passiv kvinna.
Användning och variation
- Till vilken produktion ska bilden användas? Ensamt eller tillsammans med andra bilder?
- Vid produktioner med flera fotografier – variera bildvinklar, färger, skärpedjup, motivets position och avstånd.
- Undvik bilder med företagslogotyper och produkter starkt kopplade till ett enskilt företag.
Upphovsrätt
- Har SBU rätt att använda bilden? Var extra uppmärksam på rättighetsbilder (RM) och dataskyddsförordningen (GDPR).
- För identifierbara personer krävs ofta särskilt godkännande, särskilt vid känsliga ämnen som sjukdomar eller socialtjänst. Se avsnittet ”Känsliga ämnen”.
- Bilder på identifierbara personer räknas som personuppgifter och kräver rättslig grund enligt GDPR. Läs mer på SBU:s webbplats.
- Måste upphovsperson anges? Enligt upphovsrättslagen (3 §) ska upphovspersonens namn anges enligt god sed. Kontrollera avtal med bildbyrå eller fotograf.
- Ange alltid källa/fotograf/bildbyrå, exempelvis: Foto: Mostphotos.
Illustrationer, flödesscheman och piktogram
Stil och utformning
Illustrationer ska vara tydliga, enkla och följa SBU:s grafiska uttryck. Undvik onödiga skuggor och färgövergångar.
Formprinciper:
- Piktogram: Rundade hörn och svarta konturlinjer med inslag av grund- eller komplementfärg
- Flödesscheman: Kantiga hörn
- Pilar:
- InDesign: ”Taggig”
- Illustrator: ”Pil 2”
Tillgänglighet i illustrationer
Samma tillgänglighetsprinciper gäller vid användning av illustrationer som vid produktion och publicering av andra innehållstyper. Använd inte färg som ensam informationsbärare, säkerställ tillräcklig kontrast, och undvik att använda bilder av text – utom vid godtagbara undantag.
Digital tillgänglighet i formgivet material
Förmedla information med mer än bara färg
För att göra information tillgänglig för alla – även för personer med nedsatt färgseende – bör färg alltid kombineras med andra visuella element som text, ikoner eller mönster.
Undvik bilder av text
Text bör i de flesta fall vara riktig, maskinläsbar text – inte inbäddad i bilder. Det förbättrar tillgängligheten, särskilt i digitala miljöer.
Undantag:
- Logotyper
- När text är en integrerad del av en bild och nödvändig för budskapet
Kontraster som underlättar förståelse
Alla grafiska element (t.ex. ikoner, diagram, fokusmarkeringar) ska ha tillräcklig kontrast mot både bakgrund och andra objekt. Även texten måste ha god kontrast mot bakgrunden för att säkerställa läsbarhet.
Alt-texter för bilder och grafik
Allt icke-textbaserat innehåll ska kompletteras med alternativ text (alt-text) som beskriver bildens innehåll och syfte. Detta är nödvändigt för att skärmläsare ska kunna förmedla informationen till användaren.
Läs mer: DIGG:s webbriktlinjer
Film och rörlig media
Filmer och rörlig media
Filmer och andra rörliga medier omfattas av SBU:s grafiska profil. Nedan följer viktiga riktlinjer att ha i åtanke vid produktion.
Typografi
- Använd typsnittet Foundry Sans.
- Slutsatspunkter bör vara orangea trianglar.
- Upphovspersoner tillskrivs i Foundry Sans Expert, visas diskret i slutet av filmen.
Färg, form och effekter
- Använd färger från SBU:s grafiska profil.
- Den mörkblå huvudfärgen ska alltid användas i publika produktioner men kan kombineras med övriga färger.
- I interna produktioner är det inte nödvändigt att använda den mörkblå huvudfärgen.
- Använd gärna avvikande färger för punkter i punktlistor.
- Effekter kan användas, men med måtta – ”less is more”.
- För bättre läsbarhet kan text läggas på en färgplatta (heltäckande eller delvis transparent).
- Namnskyltar för presentatörer/föreläsare ska vara mörkblå med vit text.
Logotyp och grafiska element
- I publika produktioner ska logotypen visas i slutet.
- I interna produktioner behöver logotypen inte inkluderas.
- För filmer används vit text på en blå remsa ovanpå bild/film:
- Inledning: Filmtiteln.
- Avslutning: Länk till SBU:s webbplats.
Profilprodukter & mässmaterial
Profilprodukter och mässmaterial omfattas av SBU:s grafiska profil. Vid produktion av profilprodukter ska man tänka på att utgå från SBU:s grundfärger så långt som möjligt och anpassa formgivningen till den tryckta produktens material och satsyta.
Originalen ska alltid godkännas av SBU:s grafiska formgivare.
Samarbete med annan myndighet eller aktör
Riktlinjer för samarbeten
SBU som huvudavsändare
Det ska tydligt framgå att SBU är huvudavsändare, därför får partnerlogotyper inte konkurrera med SBU:s logotyp. De bör optiskt upplevas som ungefär hälften så stora som SBU:s logotyp, med exakt storlek anpassad efter respektive logotyp. Partnerlogotyper placeras i något av de motsatta hörnen, beroende på enhet. Om flera logotyper används bör de grupperas på samma ställe för en enhetlig hantering.
Jämbördiga samarbetspartners
När SBU och dess samarbetspartners har lika stor roll i kommunikationen ska logotyperna vara jämnstora. Eftersom logotyper kan variera i utseende strävar vi efter optisk balans snarare än fasta mått. Logotyper kan placeras separat eller tillsammans, så länge frizonen respekteras. Placeringen beror på det visuella uttrycket för samarbetet. SBU:s svarta eller vita logotyp kan användas om övriga partners gör på samma sätt.
Vid denna typ av samarbete används en neutral grafisk profil, utan visuella inslag kopplade till någon specifik part. Neutral profil betyder dock inte att designen måste vara avskalad – uttrycket kan vara färgstarkt och lekfullt eller mer formellt, beroende på samarbetets visuella riktning. En kort förklarande text kan läggas till om det passar sammanhanget.
SBU som partner – annan huvudavsändare
Om SBU är en av flera avsändare men inte den primära, ska logotypen anpassas därefter. SBU:s logotyp ska vara tydligt mindre än huvudavsändarens logotyp för att spegla dess roll i samarbetet.
Stäm alltid av med SBU:s grafiska formgivare vid frågor om placering av SBU:s logotyp.