Kungliga bibliotekets stilguide
Inledning
Syfte
Vår grafiska profil är en central del av vår identitet och består av flera element, inklusive vårt namn, logotyp, typsnitt, färger och bildmanér. Tillsammans utgör dessa komponenter ett ramverk som skapar en enhetlig visuell identitet för KB. Syftet med den grafiska profilen är att stärka och ena bilden av KB, vilket leder till ökad igenkänning och trovärdighet.
Stilguiden är till för att göra det enklare att skapa nya webbtjänster, både inom och utanför organisationen. Den ger riktlinjer om hur man ska utforma layout och använda teknik. Vårt mål är att säkerställa att våra webbtjänster följer KB:s stilguide och göra det enkelt att använda den.
Användning
Genom att följa vår stilguide kan du enkelt anpassa din design för att vara i linje med vår grafiska profil. Med konsekvent användning av riktlinjerna i stilguiden bidrar du till att stärka KB:s visuella identitet och varumärke, vilket i sin tur ökar vår igenkänning och trovärdighet hos våra målgrupper.
I vår stilguide finns det vissa regler som bör följas, medan andra delar är mer flexibla och kan varieras. I guiden skriver vi vad som rekommenderas i första hand, men också att vissa delar kan justeras och ger tips om vad man bör tänka på.
Om visuell design
Grundbulten i visuell design stavas hierarki. En effektiv och tydlig visuell hierarki hjälper användaren både att ta till sig information och att förstå tjänstens olika funktioner. Några av den visuella hierarkins byggstenar är:
Storlek
Användare hittar större objekt lättare.
Färg
Klara färger drar generellt till sig mer uppmärksamhet.
Kontrast
Stora kontrastskillnader drar ögonen till sig.
Närhet
Objekt som är placerade nära varandra upplevs tillhöra varandra.
Whitespace
Ju mer utrymme ett objekt får desto mer står det ut.
Logotyp
KB har två olika logotyper; en kombinerad logotyp med ikon och text, och en med enbart ikon.
Logotypen ska alltid vara svart eller vit. Använd loggan med ikon i vänstra hörnet i sidhuvud (header), och använd hela loggan (med ikon och text) i sidfoten (footer). Logotypen kan ligga mot en bakgrundsfärg, men kontrasten måste kontrolleras så att den är tillräcklig. Opaciteten i logotypen ska inte sänkas.
Ladda ner logotyper .zip
Favicons
Favicons av KB:s logotyp finns i två olika utföranden; en som speglar den runda KB-logotypen och en simplare med bara boken i logotypens mitt, utan den cirkulära texten runt.
Det rekommenderas att man använder någon av de SVG-ikoner som vi har tagit fram eftersom de stödjer både ljust och mörkt tema i webbläsaren. Detta oavsett om tjänsten i övrigt har olika teman, eftersom favicons alltid kommer att visas med en bakgrund vald av användaren.
Om tjänsten har en egen ikon så rekommenderas det att man ser till att den syns tydligt både i ljust och mörkt tema.
Ladda ner favicons .zip
Layout
Sidhuvud
Använd KBs logotyp följt av tjänstens namn. Namnet skrivs med den sans-serif som i övrigt används i tjänsten.


Sidfot
Använd sidfot då det finns behov av att signalera tjänstens avsändare och samt länka till övriga resurser.


Som regel länkar KB till tjänstens tillgänglighetsredogörelse från sidfoten.
Länkar i sidhuvud
Det kan finnas behov av att lägga länkar i sidhuvudet, och funktionalitet för inloggning. Text för länkar ska skrivas med stor bokstav följt av gemener. Det bör inte vara för många länkar i sidhuvudet.
Färger
Använd KB:s färgpalett. Färgkontrasten för text och interaktiva element ska följa W3C's standard.
Primärfärger
Kungliga biblioteket har fem standardfärger och fem komplementfärger i ljusare nyans. På kb.se används färgerna för att påvisa funktionalitet och uppmärksamma viktig info. Exempel på grafiska element som kan färgsättas: bakgrunder, interaktionselement och ikoner. Färgerna har alltså begränsad dekorativ funktion. Rekommendationen är att välja en primärfärg och använda de andra som accentfärger för olika funktioner.
Samtliga primärfärger har en ljusare nyans. Dessa kan användas kombinerat med den valda primärfärgen.
Utöver dessa färgerna används även svart, vit och grå för att lyfta information.
Signalfärger
Signalfärgerna används huvudsakligen vid validering av formulär eller vid dialogrutor.
Typografi
För KB:s typografi är det viktigt att tänka på relationen mellan olika textelement, som rubriker och ingress/brödtext. Enligt den grafiska profilen ska det vara en tydlig kontrast mellan textelementen, framför allt mellan rubrik och övriga element. Detta går dock att anpassa utifrån typ av innehåll och övriga designelement.
Rubrikerna h1 och h2, ska använda typsnittet Sentinel. Det finns tre stilar som går att använda för Sentinel: Sentinel Std Medium/Normal, Sentinel Std Medium/Normal Italic, Sentinel Std Semibold.
Rubrikerna h3 och h4 kan varieras med typsnittet Roboto eller Open Sans. Roboto har en mer geometrisk och modern känsla, medan Open Sans är inspirerad av klassisk handskrift, vilket kan ge ett mer naturligt utseende.
Rubriker och brödtext ska normalt sett vara vänsterställda, men vissa undantag kan göras såsom centrerade rubriker. Vid responsiv design, kan man behöva justera storleken på rubrikerna för att de ska vara läsbara på mindre skärmar, t ex mobiler som kan behöva ett större rubrikformat.
Sentinel
Det enklaste sättet att använda Sentinel i ditt projekt är att importera denna CSS-fil från Kungliga bibliotekets CDN:
@import url('https://cdn.kb.se/fonts/sentinel/sentinel.css');
Användandet av Sentinel begränsas genom CORS-headers till följande origins:
kb.se
, *.kb.se
, kb.se.localhost
, *.kb.se.localhost
och localhost
Roboto och Open Sans
Listor
Listor används för att strukturera upp innehåll. Det finns tre varianter av listor: oordnade, ordnade och definitionslistor. Rekommendationerna som följer gäller främst när listor används i brödtext.
Använd tabeller om syftet är att presentera data.
Oordnad
Oordnade listor (ul) används då inbördes ordning inte är av större vikt, exempelvis vid en lista med länkar.
- Listelement 1
- Listelement 2
- Listelement 3
-
Listelement 4
- Listelement 4.1
-
Listelement 5
- Listelement 5.1
- Listelement 5.2
- Listelement 6
Ordnad
Använd ordnade listor (ol) när punkterna behöver komma i en viss ordning, exempelvis vid instruktioner.
- Listelement 1
- Listelement 2
- Listelement 3
-
Listelement 4
- Listelement 4.1
-
Listelement 5
- Listelement 5.1
- Listelement 5.2
- Listelement 6
Definitionslista
En definitionslista (dl) används för att förklara olika begrepp.
- Rubrik
- Listelement
- Rubrik
- Listelement
- Rubrik
- Listelement
Tabeller
Välj mellan linjerad och randig tabell. Kolumner som består av enbart numeriska värden kan med fördel högerställas för att öka läsbarheten.
Kolumn 1 | Kolumn 2 | Kolumn 3 | Kolumn 4 | Kolumn 5 |
Rad 1 | Cell | Cell | Cell | Cell |
Rad 2 | Cell | Cell | Cell | Cell |
Rad 3 | Cell | Cell | Cell | Cell |
Rad 4 | Cell | Cell | Cell | Cell |
Rad 5 | Cell | Cell | Cell | Cell |
Randig tabell
Kolumn 1 | Kolumn 2 | Kolumn 3 | Kolumn 4 | Kolumn 5 |
Rad 1 | Cell | Cell | Cell | Cell |
Rad 2 | Cell | Cell | Cell | Cell |
Rad 3 | Cell | Cell | Cell | Cell |
Rad 4 | Cell | Cell | Cell | Cell |
Rad 5 | Cell | Cell | Cell | Cell |
Länkar
Länkar är centralt för att skapa en bra användarupplevelse. Visa vart en länk leder någonstans även när länken är lyft ur sitt sammanhang genom att skriva en beskrivande länktext.
Undvik att skriva generiska instruktioner i länktexten som “Klicka här” eller “Läs mer", eftersom detta inte säger något om innehållet som länken leder till. Skriv istället en beskrivande textlänk som “Information om KBs stilguide” eller “Besök KBs tjänst för fritt material”. Detta är extra viktigt för personer som använder olika hjälpmedel, som till exempel skärmläsare, eftersom de kan välja att navigera genom att enbart läsa upp länkarna.
Gör det uppenbart för användaren att en länk just är en länk, genom att skilja ut den grafiskt från övrigt innehåll. Länkar ska alltid vara understrukna i brödtext.
Hover
För den som vill lägga till en starkare visuell förändring när användaren hovrar över en länk kan “dymoeffekt” användas. I löptext får länkar då ett svart band i 65% opacitet på bakgrundsfärgen #000000, vilket gör att eventuell underliggande färg syns igenom.
Formulär
Använda korrekt formulärstyp för att underlätta inmatning och minimera extra handpåläggning.
Etiketter
Alla formulärfält ska beskrivas med etikett. Etiketter ska vara linjerande ovanför sitt formulärfältet. Texten ska vara kort, kärnfull och tydlig. Kolon (:) ska inte användas på slutet. Göm inte etiketter såtillvida inte kontext och övrigt innehåll gör etiketten onödig.
Formulärfält
Gör fältens bredd proportionerligt till den information som ska fyllas i. Se till att informationen som fylls i får plats i fältet. Se till att användaren kan fylla i den information som behövs även på mindre skärmstorlekar. Sätt alltid formulärfälten till 100% bredd för mindre skärmstorlekar.
Fältgrupper
Använd fältgrupper (fieldsets) för att gruppera formulär. Det första elementet i en fältgrupp måste vara ett legend-element som beskriver gruppen.
Hjälptexter
Använd hjälptexter för att förklara vad som ska fyllas i fältet om det inte är självklart.
Placera hjälptexten under fältet. Undvik att använda platshållare inuti formulärfälten eftersom dessa försvinner direkt när användaren skriver in information i fältet.
Obligatoriska fält
Fråga bara om den information som verkligen behövs. Om du frågar om information som är valfri så bör fältet markeras med (valfri). Markera inte obligatoriska fält med asterix (*).
Validering
Förse användaren med värdefull information om inmatningen misslyckas. Markera fältet som felaktigt och presentera förtydligande information vid behov.
Radioknappar
Använd radioknappar när användaren ska kunna välja ett alternativ från en lista.
Kryssrutor
Använd kryssrutor när användarens ska kunna välja på/av för ett enskilt alternativ eller flera alternativ i en lista.
Knappar
Knappar används för att verkställa en handling. Knappen måste ha någon typ av fokusläge för att följa tillgänglighetsstandarder. Texten på en knapp ska vara kort och beskriva handlingen som knappen utför, med första bokstav i versaler och resten i gemener.
Nedan presenteras några exempel på olika form- och färgkombinationer.
Testa att interagera med knapparna för att se hur de ser ut i olika lägen.
Rundade knappar
I första hand rekommenderas användning av svartvita rundade knappar.
Rektangulära
De rektangulära knapparna har en mindre rundning på hörnen.
Inverterade
De inverterade knapparna har sin färg som ram istället för bakgrund.
Färgade
Om du ska använda våra olika färger för knappar, se till att texten ger tillräcklig kontrast mot bakgrunden och kontrollera även tillräcklig kontrast för den färg som används vid hover.
Alla våra färger finns som modifierare om man använder vårat stilpaket.
I formulär
Tillämpa tillräckligt med visuell skillnad mellan formulärets olika knappar för att minska risken för felanvändning. Ett exempel på tillämpning är att ha olika färg på knappar som ”Spara” och ”Avbryt” för att tydliggöra skillnaden visuellt.
Knappar med ikon
Knappar kan förstärkas med en ikon för att ge extra uppmärksamhet. Ikonen kan läggas antingen till vänster eller höger, och behöver anpassas utifrån övrig utformning av funktionalitet.
Ikoner
Ikoner kan användas för att förstärka syftet med funktionalitet i tjänsten. Även om ikoner kan uppfattas som självförklarande så bör de kompletteras med text.
Bootstrap Icons
Ikoner från Bootstrap rekommenderas i första hand för KB:s digitala tjänster. Besök Bootstrap för exempel och implementation av ikonbiblioteket.
KBico
Kungliga bibliotekets egna ikonbibliotek - KBico består av 53st ikoner, varav två versioner av vår logotyp. Biblioteket finns tillgängligt som såväl webfont som vektorgrafik.
Ladda ner kbico .zip
Font Awesome
Font Awesome används på Interno. Besök Font Awesome för att exempel och implementation av ikonbiblioteket.
Ikon för uppmärksamhet
Använd ikoner för uppmärksamhet när syftet är att lyfta fram ett specifikt budskap. Dessa ska formges med orange bakgrund som standard, men rosa och grön kan användas vid behov. Notera att denna typ av ikon inte ska användas i kombination med länkar, eftersom det kan skapa förvirring för användaren då ikonen inte är klickbar.
Bilder
Använd i första hand bilder från KB:s mediabank. Om bilden används som bakgrund till text, tänk på att säkerställa kontrasten för läsbarhet. Det kan vara till fördel att lägga en bakgrundsplatta under texten för att förbättra tillgängligheten.
Det är rekommenderat att använda bildtext i anslutning till bilden. Det kan exempelvis röra sig om kompletterande uppgifter såsom upphovsuppgifter och datering.

Codex Gigas
Tillgänglighet
På Interno finns information och stöd för KBs arbete med att uppfylla lagen om tillgänglighet till digital offentlig service (DOS). Sök på “Digital tillgänglighet” för att hitta till innehållet.
Resurser
- Web Content Accessibility Guidelines (WCAG) 2.1 AA
- DIGGs tjänst för att skapa tillgänglighetsredogörelse
- Vägledning för webbutveckling - officiella riktlinjer
- Kungliga bibliotekets tillgänglighetsredogörelser
Stilpaket
Som ett komplement till stilguiden finns även Kungbib/styles, ett stilpaket med bilder, ikoner och en stilmall som bygger på Bootstrap 5.
Paketet riktar sig till den som vill ha en stabil utgångspunkt för sin tjänstedesign, och kommer med både paketerade CSS-filer och opaketerade Sass-filer.
Webbläsarstöd
Läs om webbläsarstöd hos Bootstrap.
Om du behöver utveckla med stöd för andra browsers så kan du fortfarande implementera designmönster från stilguiden på egen hand, men vi rekommenderar att du inte använder dig av det färdiga paketet.
Installation
$ npm install kungbib-styles
Alternativt (specifik version)
$ npm install kungbib-styles#2.0.0
Alternativt
Färdig CSS-fil
Om du inte har behov av att anpassa stilmallens grundvariabler så kan du använda theme.css
rakt av. Du hittar den under lib/css
i det nedladdade paketet. Lägg den i ditt projekt och lägg till följande rad under <head>
i din HTML.
<link rel="stylesheet" href="theme.css">
Sass-filer
Om ditt projekt behöver större möjlighet för anpassning rekommenderas att du istället använder dig av våra Sass-filer och kompilerar dessa själv tillsammans med Bootstrap. Då får du tillgång till samtliga variabler från både Bootstrap och vårat tema.
Du bör sedan skapa en egen samlingsfil i ditt eget projekt där du importerar Bootstrap och våran samlingsfil theme.scss
från mappen lib/scss
.
Exempel på samlingsfil
// The order of these imports are important.
@import 'variables'; // Own variables for this site
@import '../../node_modules/kungbib-styles/lib/scss/variables'; // Kungbib-styles variables
@import '../../node_modules/bootstrap/scss/bootstrap'; // Bootstrap import
@import '../../node_modules/kungbib-styles/lib/scss/styles'; // Kungbib-styles styles
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
// Project specific styles following
// Any bootstrap variables should be imported before importing bootstrap package
@import "fonts";
...
Användning
Bootstrap 5 innehåller ett stort antal komponenter och hjälpklasser, och som grundregel kan man konsultera dess dokumentation för själva användningen av dessa. Detta avsnitt hanterar de ytterligare hjälpmedel som är implementerade i vårat egna tema.
Färgklasser
Text och bakgrunder kan enkelt färgas genom att använda .bg-*
eller .text-*
där *
byts mot variabelnamnet (se färger).
.bg-kb-primary-green
ger en bakgrundsfärg enligt variabeln $kb-primary-green
:
.text-kb-secondary-turquoise
ger en textfärg enligt variabeln $kb-secondary-turquoise
:
Kontakt
Om du har frågor gällande användning stilguiden eller vill ha ett bollplank att prata design med, så är du välkommen att höra av dig till gruppen som ansvarar för innehållet.
Anja Bergman, Interaktionsdesigner
Krzysztof Bergendahl, Systemutvecklare
Helena Anderhag, Kommunikatör, grafisk produktion
Anders Hejll, Webbstrateg