Färg
Använd KB’s färgpalett. Behöver tjänsten egna färger glöm ej att de måste vara anpassade för webben och kontrastrika ur tillgänglighetsaspekt.
Färgkontrasten för text och interaktiva element ska följa W3C’s standard.
Paletter
Det finns fyra färgsviter att välja mellan: Glad, Glad dämpad, Pastell och Pastell dämpad. Färgsviterna är uppdelade i två familjer: Gladfamiljen och Pastellfamiljen. Om man behöver fler färgkombinationer går det bra att kombinera färger inom respektive familj, men ej däremellan. Färger med stark accent används med fördel på mindre partier som ikoner eller citattecken, ej på stora ytor. Gråskalan går att kombinera med alla färgpaletter. Färger på knapparna är konstanta, se under knappar.
För att underlätta användandet av färgerna kan man använda sig av ett par hjälpklasser som fungerar på följande vis:
- .bg-[färg] (t ex .bg-happy-blue) Sätter färgen som bakgrund
- .text-[färg] (t ex .text-happy-blue) Sätter färgen som text och tvingar även länkar att vara den färgen
Palett: Glad
Dessa färger får kombineras med färgerna i Palett: Glad dämpad samt Palett: Gråskala.
<div class="color-box auto-color-text bg-happy-blue">happy-blue</div>
<div class="color-box auto-color-text bg-happy-teal">happy-teal</div>
<div class="color-box auto-color-text bg-happy-green">happy-green</div>
<div class="color-box auto-color-text bg-happy-desert">happy-desert</div>
<div class="color-box auto-color-text bg-happy-orange">happy-orange</div>Palett: Glad dämpad
Dessa färger får kombineras med färgerna i Palett: Glad samt Palett: Gråskala.
<div class="color-box auto-color-text bg-happy-muted-brown">happy-muted-brown</div>
<div class="color-box auto-color-text bg-happy-muted-desert">happy-muted-desert</div>
<div class="color-box auto-color-text bg-happy-muted-light-blue">happy-muted-light-blue</div>
<div class="color-box auto-color-text bg-happy-muted-teal">happy-muted-teal</div>
<div class="color-box auto-color-text bg-happy-muted-denim">happy-muted-denim</div>Palett: Pastell
Dessa färger får kombineras med färgerna i Palett: Pastell dämpad samt Palett: Gråskala.
<div class="color-box auto-color-text bg-pastel-denim">pastel-denim</div>
<div class="color-box auto-color-text bg-pastel-pink">pastel-pink</div>
<div class="color-box auto-color-text bg-pastel-light-blue">pastel-light-blue</div>
<div class="color-box auto-color-text bg-pastel-desert">pastel-desert</div>
<div class="color-box auto-color-text bg-pastel-desert-darker">pastel-desert-darker</div>Palett: Pastell dämpad
Dessa färger får kombineras med färgerna i Palett: Pastell samt Palett: Gråskala.
<div class="color-box auto-color-text bg-pastel-muted-purple">pastel-muted-purple</div>
<div class="color-box auto-color-text bg-pastel-muted-yellow">pastel-muted-yellow</div>
<div class="color-box auto-color-text bg-pastel-muted-pink">pastel-muted-pink</div>
<div class="color-box auto-color-text bg-pastel-muted-teal">pastel-muted-teal</div>
<div class="color-box auto-color-text bg-pastel-muted-denim">pastel-muted-denim</div>Palett: Gråskala
Dessa färger får kombineras med färgerna i samtliga paletter.
<div class="color-box auto-color-text bg-white subtleborder">white</div>
<div class="color-box auto-color-text bg-gray-lighter">gray-lighter</div>
<div class="color-box auto-color-text bg-gray-light">gray-light</div>
<div class="color-box auto-color-text bg-gray">gray</div>
<div class="color-box auto-color-text bg-gray-dark">gray-dark</div>
<div class="color-box auto-color-text bg-gray-darker">gray-darker</div>
<div class="color-box auto-color-text bg-black">black</div>Statusfärger
Dessa färger används till knappar och olika statusindikatorer.
<div class="color-box auto-color-text bg-brand-primary">primary</div>
<div class="color-box auto-color-text bg-brand-info">info</div>
<div class="color-box auto-color-text bg-brand-success">success</div>
<div class="color-box auto-color-text bg-brand-warning">warning</div>
<div class="color-box auto-color-text bg-brand-danger">danger</div>Mönster
Det finns tre olika mönster som kan användas bland annat som bakgrund. I exemplen nedan är mönstren nedskalade till 50%. Mönstrena kan kombineras med en färg från någon av paletterna ovan. Tänk dock på att anpassa förgvalet så att det inte blir allt för hög kontrast.
Mönster: Vågor
<div class="pattern-box bg-pastel-denim has-pattern pattern-waves"></div>Mönster: Bollar
<div class="pattern-box bg-pastel-pink has-pattern pattern-balls"></div>Mönster: Kors
<div class="pattern-box bg-pastel-desert has-pattern pattern-cross"></div>