1 Visuell profil

1.1 Logo

1.2 Logosymbol

1.3 Merke

1.4 Farger

1.5 Typografi

1.6 Ikoner

1.7 Illustrasjoner

1.8 Dekorelement

1.9 Bildestil

1.10 Papirkvalitet

2 Digitalt designsystem

ssb-logo-dark-rgb


Profilhåndbok for Statistisk sentralbyrå


Sikrer et helhetlig uttrykk og en tydelig identitet

illustrasjon-toppbanner

Innhold

1 Visuell profil

1.1 Logo

1.2 Logosymbol

1.3 Merke: «Tall som forteller»

1.4 Farger

1.5 Typografi

1.6 Ikoner

1.7 Illustrasjoner

1.8 Dekorelement

1.9 Bildestil

1.10 Papirkvalitet


2 Digitalt designsystem

1

Visuell profil

Elementene du finner her utgjør SSBs visuelle identitet. Logoen er det viktigste kjennetegnet og skal alltid benyttes der SSB er representert, også når vi samarbeider med andre virksomheter. Konsekvent bruk av grunnelementene bidrar til å bygge en sterk og gjenkjennelig identitet over tid.

1.1 Logo

Statistisk sentralbyrås logo består av symbol og navnetrekk.


· Minste bredde på trykk er 25 mm og 180 px på skjerm

· Logoen skal være ensfarget hvit eller SSB mørk 5

· Logoen skal dekke kravet til fargekontrast på minimum 3,0:1 mot nærliggende farger


Les mer om kontrastkravet hos uutilsynet.no

ssb-logo-dark ssb-logo-light

Plassering av logo

Logoen skal alltid være omgitt av et område som er fritt for andre elementer.

Last ned logo

Last ned logo i ulike filformater her:

Last ned logo
ssb-logo-luft

1.2 Logosymbol

Logosymbolet skal kun brukes på steder hvor logoen ikke får plass. Husk! Det må være tydelig at det er Statistisk sentralbyrå som er avsender – få kjenner oss igjen på logosymbolet alene.


· Logosymbolet skal være ensfarget hvitt eller SSB mørk 5

· Logosymbolet må dekke kravet til fargekontrast på minimum 3,0:1 mot nærliggende farger


Les mer om kontrastkravet hos uutilsynet.no

ssb-kula-dark ssb-kula-light

Plassering av logosymbol

Logosymbolet skal alltid være omgitt av et område som er fritt for andre elementer.


Minimum luft rundt logosymbol skal være 1/4 av symbolet der det er mulig.

Last ned logosymbol

Last ned logosymbol i ulike filformater her:

Last ned logosymbol
ssb-kula-luft

1.3 Merke

«Tall som forteller» er SSBs visjon. Merket er en viktig del av SSBs visuelle identitet, og henter inspirasjon fra tabeller med rader og kolonner. 


Merket skal brukes i tillegg til SSBs logo og har språkformen norsk bokmål.


· Merket skal være SSB mørk 5 og hvit

· Merket skal alltid plasseres vertikalt, som vist her

ssb-merket

Plassering av merket

I digitale kanaler plasseres merket utfallende for å spare plass. Pass på at merkets venstre strek ligger innenfor formatet. På trykk/print plasseres merket inn på formatet for å sikre at det ikke kuttes.


· Avstanden til formatets kanter og andre elementer skal tilsvare merkets bredde

· Plasser alltid merket vertikalt mot venstre side av formatet

· Teksten skal alltid leses ovenfra og ned, etter norsk standard

Last ned merket

Last ned merket i ulike filformater her:

Last ned merket
ssb-merket-plassering

1.4 Farger

Primærfarger

SSBs fire hovedfarger er SSB mørk 1, SSB mørk 5, SSB grønn 4 og hvit. Sammen sørger de for et originalt og seriøst uttrykk. Konsekvent bruk av fargene styrker merkevaren og bidrar til å sikre gjenkjenning over tid.


SSB mørk tilfører profilen seriøsitet og tyngde mens SSB grønn formidler nøytralitet og vennlighet. Bruk av hvitt gir et oversiktlig og luftig uttrykk og gjør komplekst innhold mer tilgjengelig.


RGB og HEX brukes på skjerm. CMYK brukes til print og trykk (kommer).


Husk at farger må dekke AA-kravet til kontrast i universell utforming. Se hvilke farger du kan kombinere her:

Trygge fargekombinasjoner

Les mer om kontrastkravet på uutilsynet.no

SSB mørk 5

  • HEX #274247

  • RGB 39, 66, 71

  • CMYK 82, 55, 53, 50

SSB hvit

  • HEX #FFFFFF

  • RGB 255, 255, 255

  • CMYK 0, 0, 0, 0

SSB mørk 1

  • HEX #F0F8F9

  • RGB 240, 248, 249

  • CMYK 10, 0, 5, 0

SSB grønn 4

  • HEX #00824d

  • RGB 0, 130, 77

  • CMYK 90, 0, 85, 30

Støttefarger

Støttefargene brukes sammen med hovedfargene og skaper variasjon i identiteten på en neddempet måte.


SSB lilla 3

  • HEX #7E5EE8

  • RGB 126, 94, 232

  • CMYK 57, 45, 0, 0

SSB lilla 1

  • HEX #f2f0ff

  • RGB 242, 240, 255

  • CMYK kommer

SSB grønn 1

  • HEX #ECFEED

  • RGB 236, 254, 237

  • CMYK kommer

SSB lilla 2

  • HEX #D2CEFF

  • RGB 210, 206, 255

SSB mørk 2

  • HEX #C3DCDC

  • RGB 195, 220, 220

  • CMYK kommer

SSB grønn 2

  • HEX #b6e8b8

  • RGB 182, 232, 184

  • CMYK kommer

Vekting av farger

SSB mørk 1 og 5, SSB grønn 4 og hvit skal være det dominerende uttrykket. Støttefargene skal alltid oppfattes som underordnet primærfargene. 


SSB lilla 3 er en skarp farge, og tilfører identiteten kontrast. Fargen skal brukes i små mengder for å fremheve eller sette noe i fokus.I tillegg skal vi bruke mye hvitt slik at uttrykket blir luftig og ikke for komplekst.



ssb-fargevekting

1.5 Typografi

Profilfonter

Roboto og Open Sans er fontene vi skal bruke. Konsekvent bruk av fonter styrker merkevaren.


Det er viktig at alle bruker fontene og følger det typografiske hierarkiet slik det er beskrevet her. Fontenes rolle og forhold til hverandre er viktig for å sikre gjenkjenning over tid. Det samme gjelder skriftsnitt (bold/fet, regular/normal) og kontrastene som oppstår mellom disse.


Det typografiske oppsettet skal være funksjonelt og gi leseren effektiv tilgang til innholdet, også under varierende lysforhold, i ulike omgivelser og for de som er avhengig av ulike hjelpemidler.


Last ned Roboto og Open Sans på google.com

ssb-typografi

Erstatningsfont

Der det ikke er mulig å bruke profilfontene våre skal du bruke Arial. Arial er tilgjengelig på alle maskiner som kjører Windows og Mac OS. Den minner om Roboto, og er en nøytral og seriøs font. 


Arial Bold/fet erstatter Robot Bold og Roboto Condensed Bold/fet i hierarkiet beskrevet i neste avsnitt. 


Arial Regular/normal erstatter Open Sans Regular/normal.


ssb-typografi-erstatning

Hierarki

Innholdet blir mer oversiktlig og forståelig når skriftsnittene benyttes konsekvent gjennom et enkelt og ryddig oppsett som beskrevet her:

 

Stikktittel 

Settes i Roboto Regular/normal. Skal plasseres over eller under tittel med god linjeavstand. Skal være mindre enn tittel og undertittel.





Hovedtittel (H1)

Settes i Roboto Condensed Bold. Bruk korte og presise titler med stor punkt-/ pixelstørrelse. Skal skille seg tydelig fra stikktittel og undertittel i størrelse.


Ingress

Settes i Open Sans Regular/normal. Skal være større enn undertittel og mindre enn hovedtittel.


Undertittel (H2, H3 og så videre)

Settes i Roboto Bold/fet. Skal være like stor som eller større enn brødtekst, og like stor som eller mindre enn ingress.


Brødtekst / løpende tekst / avsnittstekst / body

Settes i Open Sans Regular/normal. Bruk minimum 12 pt i trykksaker, og minimum 14 px i digitale kanaler. Husk at brødtekst alltid skal starte med et avsnitt – aldri en mellomtittel.

ssb-typografi-hiearki

Uthevet tekst og tall

Begrens bruken av kursiv og det å skrive ord eller setninger med bare store bokstaver. For de med lese-, skrive- og/eller konsentrasjonsvansker kan kursiv og ord med bare store bokstaver være utfordrende.


Bruk i stedet et skriftsnitt som skiller seg fra den omkringliggende teksten, for eksempel bold/fet. Til sitater, boktitler og lignende kan du bruke tegn, som for eksempel «».


Husk at du kun trenger ett virkemiddel for å utheve et ord, en setning eller et avsnitt. Bruk det konsekvent.


Uthevede tall settes i Roboto Condensed Bold/fet. Gjelder tall som er løftet ut av teksten og blåses opp i stor størrelse. For eksempel i en presentasjon, som nøkkeltall på ssb.no og lignende.

ssb-typografi-uthevede-tall

1.6 Ikoner

Det finnes to sett ikoner i profilen. Størrelse definerer hvilket sett du skal bruke. Når du velger ikon er det viktig å følge konvensjoner. Det vil si å velge ikoner som er vanlig å bruke i den sammenhengen ikonet skal brukes i. 


· Bruk ikoner som styrker budskapet og/eller differensierer innholdet

· Tenk på mottakeren

· Skaler ikonene proporsjonalt

· Effekter som skygge eller lignende kan svekke forståelsen av ikonet, og skal ikke brukes.

Små ikoner

Velg ikoner fra dette settet når du skal bruke ikonet i størrelser mindre enn 5 x 5 mm på trykk og 8 x 8 px på skjerm.


Settet består av nesten 300 gratis ikoner.


Last ned ikonene på feathericons.com


· Små ikoner skal være ensfarget 

· Små ikoner kan brukes i enten SSB mørk 5, SSB grønn 4 eller SSB grønn 2


Små ikoner må dekke kravet til fargekontrast på minimum 3,0:1 mot nærliggende farger, men det finnes unntak.


Les mer om kontrastkravet på uutilsynet.no

ssb-ikon-liten

Store ikoner

Velg ikoner fra dette settet når du skal bruke ikonet i størrelser større enn 20 x 20 mm på trykk og 57 x 57 px på skjerm.


Settet består av nesten 200 ikoner, og er spesialtegnet for SSB.


Farger

De store ikonene skal ha SSB mørk 5 og hvit som hovedfarger.


På deler av ikonet kan SSB mørk 5 erstattes med én av følgende farger:


· SSB grønn 4

· SSB Lilla


SSB ansatte kan få tak i ikonene via sharepoint.

Gå til SSB-sharepoint
sbb-ikon-stor

Ikonmønster

Du kan bygge mønstre med de store ikonene for å formidle et budskap.


Husk

· Mønsteret skal kun bestå av to ulike ikoner

· Følg fargespesifikasjoner for store ikoner

· Følg reglene for avstand og plassering som vist her


Universell utforming

Ikoner må dekke kravet til fargekontrast på minimum 3,0:1 mot nærliggende farger. 


Ikoner med tekst er unntatt regelen, forutsatt at ikonet ikke tilfører ekstra forståelse til teksten, og at teksten følger kontrastkravene til tekst. Et ikon med tekst kan for eksempel være en lenketekst med pil-ikon.


Les mer om kontrastkravet på uutilsynet.no

ssb-ikon-pattern

1.7 Illustrasjoner

SSBs illustrasjoner skal ha et enkelt, lett og geometrisk uttrykk. Bruk lys farge på bakgrunnen, SSB mørk 1, SSB grønn 1 eller hvit. Hold fargebruken enkel. To til fire farger inkludert hvit. 


SSBs store ikoner kan brukes som utgangspunkt, og logosymbolet kan forenkles til en sirkel i illustrasjonen. Mennesker kan ha ansikt for å kommunisere ulike følelser og uttrykk.


Illustrasjoner må godkjennes av profilansvarlig.

ssb-illustrasjon01
ssb-illustrasjon02

1.8 Dekorelement


Om dekorelementene

SSB har to dekorelementer, «Vinkler» og «Flate». De kan brukes hver for seg eller kombineres. De gir assosiasjoner til statistikk.


For at identiteten skal være gjenkjennelig er det viktig at dekorelementene følger retningslinjene for utseende og plassering.





Vinkler

Vinklene er hentet fra linjediagrammet i logosymbolet vårt. De skal alltid være 30° og 105° og plasseres utfallende.


30° vinkelen skal alltid plasseres foran 105° vinkelen. 30° vinkelen skal alltid være mørkere enn 105° vinkelen.


Flate

Flaten kan fylles med en profilfarge eller et profilbilde. Den kan brukes sammen med vinklene og merket («Tall som forteller»).


Flaten skal ha en marg som tilsvarer bredden på merket. Slik kan den enkelt tilpasses ulike formater og fortsatt være gjenkjennelig.

dekorelement-grunnlag
dekorelementlayout2-lofi

Fargerkombinasjoner

For å sikre gjenkjennelse skal kun fargekombinasjonene du finner her brukes (se kapittelet Farger for fargekoder).

Mørke kombinasjoner

1. Mørk 5 (30°). Mørk 1 (105°). Hvit (flate) 

2. Mørk 5 (30°). Mørk 2 (105°). Hvit (flate)

3. Mørk 2 (30°). Mørk 1 (105°). Hvit (flate)

4. Mørk 5 (30°). Grønn 1 (105°). Hvit (flate)

5. Mørk 5 (30°). Grønn 2 (105°). Hvit (flate)

6. Mørk 5 (30°). Lilla 1 (105°). Hvit (flate)

7. Mørk 5 (30°). Lilla 2 (105°). Hvit (flate)

8. Mørk 5 (30°). Mørk 2 (105°). Mørk 1 (flate)

9. Mørk 5 (30°). Mørk 1 (105°). Mørk 2 (flate)

10. Mørk 2 (30°). Mørk 1 (105°). Mørk 5 (flate)

dekorelement-fargekombo01

Grønne kombinasjoner

1. Grønn 4 (30°). Grønn 1 (105°). Hvit (flate)

2. Grønn 4 (30°). Grønn 2 (105°). Hvit (flate)

3. Grønn 2 (30°). Grønn 1 (105°). Hvit (flate)

4. Grønn 4 (30°). Mørk 1 (105°). Hvit (flate)

5. Grønn 4 (30°). Mørk 2 (105°). Hvit (flate)

6. Grønn 4 (30°). Lilla 1 (105°). Hvit (flate)

7. Grønn 4 (30°). Lilla 2 (105°). Hvit (flate)

8. Grønn 4 (30°). Grønn 2 (105°). Grønn 1 (flate)

9. Grønn 4 (30°). Grønn 1 (105°). Grønn 2 (flate)

10. Grønn 2 (30°). Grønn 1 (105°). Grønn 4 (flate)

dekorelement-fargekombo02

Varianter med bilder

Du kan lage ulike komposisjoner med bilder og dekorelementer for å skape spenning og særpreg. Bildene skal følge retningslinjene for profilerende bilder.

dekorelementlayout2-embed

Dette er mulighetene:

 

1. Ved bruk av ett bilde forskyver du det ene utsnittet slik at vinkelen synes. Vinkelen som ikke er brukt i delingenkan legges under bildet.

2. 30° vinkelen kan legges over flaten, enten som en tett farge eller med «multiply»-effekt (gjennomsiktig). Vinkelen som ikke er brukt i delingenkan legges under bildet.

3. Når to ulike bilder kombineres skal det alltid brukes ett nærbilde som viser individ/detalj og ett avstandsbilde som viser samfunn/det store bildet. Vinkelen som ikke er brukt i delingenkan legges under bildet.

1.9 Bildestil


Bilder er blikkfang – de er med på å danne førsteinntrykket. Derfor er det viktig at bildene vi bruker har god teknisk kvalitet og et motiv som kommuniserer det vi ønsker. I presentasjoner, rapporter, brosjyrer, sosiale medier, stillingsutlysninger og lignende er det viktig at du bruker bilder som er i tråd med profilen.

Profilbilder

Kvalitet

Velg bilder som er skarpe, har sterke farger og gode kontraster. Det kommuniserer kvalitet og profesjonalitet.


Motiv

Et bilde kommuniserer mest effektivt når motivet er enkelt og ryddig, uten for mange detaljer. Nærbilder og detaljer skaper følelsen av nærhet og individ, mens bilder tatt lenger unna gir en følelse av helhet og overblikk.


Unngå bruk av av bilder som viser andre virksomheters logo.


Velg motiver som:


· gjenspeiler virkeligheten på en ekte og ærlig måte 

· viser norsk natur, arkitektur og norske steder

· viser mangfold



Budskap

Det er viktig å tenke gjennom hvordan bildet du bruker kan oppfattes, og om det kommuniserer det du ønsker. Bildet skal utfylle innholdet og kommunisere tema og/eller innhold før mottakeren har lest teksten.


Husk at vi er nøytrale og inkluderende. Vurder om motivet du har valgt kan oppfattes som seksualisert, karikert, rasistisk eller diskriminerende. Er du usikker – finn et annet bilde.


Unngå bilder med effekter eller filtere. Det kan føre til at bildet oppfattes på en uønsket måte.


Tips! Vis bildet til et par kolleger og be de fortelle deg hva bildet handler om. Kommuniserer det det du trodde?

Bildebank

Bildebanken vår er sortert på tema og inneholder bilder til de fleste av våre statistikkområder. Den oppdateres fortløpende med nye bilder som er godkjent for bruk i presentasjoner og annet materiell fra SSB.


Se profilbildene i Sharepoint


Kreditering

Du kan også finne bilder på Colourbox.com. Send oss en e-post med lenke til bildet og en kort beskrivelse av hva det skal brukes til, så kjøper vi det for deg. Bilder fra Colourbox skal krediteres: «Foto: colourbox.com/ Navn Etternavn».


Om du ønsker å bruke et bilde eller en illustrasjon du har funnet på internett, i en bok eller lignende, må du innhente skriftlig tillatelse fra eieren. Du må kreditere bildet slik eieren krever.

profilbilder_rounded-corner

Ensfargede bilder

Ensfargede bilder gir profilen særpreg. De skal brukes i stedet for svart-hvitt bilder, og for å skape et helhetlig uttrykk der kvaliteten på bildene ikke dekker kravene til kvalitet i profilen.


Dette må gjøres av en designer. Ta derfor kontakt med oss om du ønsker ensfargede bilder.


Ensfargede bilder kan fås i:

· SSB mørk 5

· SSB grønn 4

· SSB lilla 3


Til designer: Bildet må først gjøres om til svart-hvitt. Kontrast i bildet skal økes før monotone-effekt legges på, ellers blir fargen feil.


colourbox41772190-lundefugl-dark_rounded-corner
colourbox25010176-green-justert_rounded-corner
colourbox20528160-purple_rounded-corner

1.10 Papirkvalitet

Valg av egnet papirkvalitet er en viktig del av den visuelle identiteten. Bevissthet og konsekvent bruk bidrar til bedre lesbarhet og identifikasjon av trykksaker fra SSB.


Ubestrøket papirkvalitet øker lesbar­heten, spesielt for svaksynte, mens glanset papir speiler lyset, noe som fører til redusert lesbarhet. Er papiret for tynt vil trykksverten fra baksiden skinne igjennom og lesbarheten forringes.


Husk

· Bruk ubestrøket (matt) hvitt papir; Scandia 2000 White eller tilsvarende kvalitet.

· Bruk 240 gram papir på omslag og 130 gram på innmat i publikasjoner.

· Bruk 240 gram eller høyere til visittkort og andre enkelt- eller dobbeltsidige trykksaker.


ssb-papirkvalitet

2 

Digitalt designsystem

Trenger du komponenter til digitale produkter skal du bruke SSBs digitale designsystem, de du finner her.

Gå til designsystemet

Takk for at du bruker profilen


Et designpoliti finner du ikke her 😎, men hvis du lurer på noe kan du kontakte oss på

profil@ssb.no