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

• Ladda ner Roboto
• Ladda ner 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.

Ordnad

Använd ordnade listor (ol) när punkterna behöver komma i en viss ordning, exempelvis vid instruktioner.

Definitionslista

En definitionslista (dl) används för att förklara olika begrepp.

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.

Randig tabell

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