Grafiska element

1. Gul tonad bakgrund i rubrikplattor

Tonad från #96850f till #af9c12
 
 

3. Knappar i tre storlekar

  1. Logga in-knappar är av samma storlek som formulärknapparna på webbplatsen. Knappen är blå-tonad med vit text på. Knappen är 23 px hög och anpassar bredden efter texten; 10 px marginal till höger och vänster om texten. Texten är Arial, regular och 12 px. Används i de flesta formulär.
  2. Små knappar är också av samma storlek som på webbplatsen. Knappen är blå-tonad med vit text på. Knappen är 18 px hög och anpassar bredden efter texten; 8 px marginal till höger och vänster om texten. Texten är Arial, bold och 10 px. Används vid lite mer action-relaterade val ex. “Lägg i varukorgen”, “Ladda ner” och för justeringar i varukorgen.
  3. Stora knappar är av samma storlek som på webbplatsen. Knappen är blå-tonad från #00688b till #005572 med vit text på. Knappen är 38 px hög och anpassar bredden efter texten; 11 px marginal till höger och vänster om texten. Texten är Arial, regular och 18 px. Används i söken eller som avslut i vissa formulär.
  4. Inaktiv knapp d) har 50% opacitet av #00688b alltså #7fb3c5
 
 
d)

3. Ikoner

Ikoner ska ha enhetlig storlek och använda samma färgschema samt manér.
 
 
 

4. Bilder

Bilder bör hålla sig till kolumnbredden d.v.s: 87 px, 194 px, 301 px, 408 px, 515 px, 622 px, 729 px och fullbredd 836 px. Marginalerna runt bilden bör ligga på 20 px med undantag för fullbredd då marginalerna till höger och vänster är 10 px men ovan och under bör vara 20 px.
 
I listningar på ex. startsidan är bredden viktig att hålla samma, medan höjden kan variera. För bästa resultat ska det dock helst vara samma.
 

5. Avdelarna är prickade och #cccccc

 
 

6. Flikar

Flikar har höjden 30 px och texten centrerad på höjden. Marginalen till höger och vänster om texten är 10 px. Marginalen mellan flikarna är 10 px. Marginalen ovan och under flikarna ska vara minst 20 px.
 
Den aktiva fliken har färgen #f3f0dc
Den "ej valda" mörkgrå fliken har färgen #c2bfb8 
Den ljusgrå inaktiva flikan har färgen #f0f1ec
 
"Inaktiv flik" används då fliken ej ska vara klickbar men ändå synas. Den aktiva fliken är alltid beige/oliv och de "Ej valda flikarna" är de som går att klicka på men som man inte befinner sig på.
 
Kontakt MSB.se

Fredrik Höglund
010-240 51 46
fredrik.hoglund@msb.se