Typsnitt

  • Klavika Light används främst för rubriker och ingresser.
  • Klavika Regular används i knappar och i huvudnavigeringen.
  • Som bröd- och bildtext används Tahoma.
  • För delwebbar används Tahoma genomgående.

Textfärg och textstorlek

  • Färgen på rubriker och ingresser är #000000 såvida det inte är en klickbar rubrik.
  • Brödtexten, Tahoma, har färgen #575757.
  • Länkar har alltid färgen #005c9a och blir understrukna när man för muspekaren över länken, förutom i vissa länklistningar samt menyer.

Färger

Färgerna följer myndighetens grafiska profil men är anpassade för att ha bra kontrast och vara tillgängliga på webb.

Tabell 1. Grundfärger
FärgsystemGrönBlåGul

(Illustration av färgen)

grön punkt blå punkt gul punkt
RGB 0, 146, 132 0, 101, 172 255, 204, 0
HEX #009284 #0065AC #FFCC00
(Exempel på toningar) Exempel på grön toning Exempel på blå toning Exempel på gul toning
  • De primära färgerna är #009284 och #0065AC, kompletterade av en ljus grå #EBEBEB och en ljus blå #E5F0F7
  • Olika varianter av primärfärgerna där transparensen bestämts i intervall om 10% används oftast som bakgrundsplattor eller som textfärg.
  • Den gula färgen #FFCC00 används för att ge extra uppmärksamhet till olika block på webbplatsen och går att välja som "avvikelsefärg" när man skapar block.
  • För att ge extra uppmärksamhet till en krissituation används en orange färg, #FF6600.
  • Dessa koder stämmer inte helt överens med de färger som används på webbplatsen idag. Färgerna ovan stämmer med den grafiska profilen för övrigt material och används när vi skapar något nytt till webben.

Färger på delwebbar och engelska webben

För delwebbarna finns fem valbara teman. Myndighetsblå är standard.

För delwebbarna finns fem valbara teman. Myndighetsblå är standard.Engelska webben blå #2d492
(Komplementfärg grön #00a792)

Myndighetsblå standard #136096
(Komplementfärg grön#24847B)

Blå #0080A1
(Komplementfärg orange #ff6660)

Grön #24847B
(Komplementfärg blå #136096)

Rosa #d2257c
(Komplementfärg grön#19a692)

Lila #8d2d7e
(Komplementfärg blå#136096)

Formulär

Formulär ligger i en grå container med etiketter ovanför formulärfälten. Obligatoriska fält markeras med en röd stjärna. Om du inte fyllt i ett obligatoriskt fält kommer en markör att visa vilket eller vilka fält som ska fyllas i. Knappar i formulären har blå bakgrundsfärg och vit text.

  • Bakgrundsfärg knapp: #2d5492
  • Bakgrundsfärg aktiv knapp: #005580

Sidhuvud

I sidhuvudet ligger Folkhälsomyndighetens logotyp till vänster, den primära menyn i ett blått fält, en sekundär meny (hjälpmeny) längst upp på sidan, samt ett sökfält till höger. När man för muspekaren över menyrubrikerna i sidhuvudet blir de understrukna. Val av en rubrik i det blå fältet markeras med att bakgrunden blir vit, får en grön ram och texten blir svart.

I den mobila versionen ligger logotypen i toppen tillsammans med en så kallad hamburgermeny för den primära och sekundära menyn. Sökrutan har här ett större fokus.

Sidfot

Sidfoten innehåller kontaktuppgifter, länkar till information om webbplatsen, ingångar till sociala medier samt en beskrivning av myndigheten och vår verksamhet.

Sidfoten ser likadan ut i mobil version.

Undernavigering

Undernavigeringen innehåller den tredje, fjärde, femte och sjätte nivån i innehållsstrukturen. En rekommendation är att ha så få nivåer som möjligt. Klick på rubriker eller plusikoner öppnar nivåer i navigeringen. Klick på minusikoner stänger nivåer.

Bilder

Bilderna på folkhalsomyndigheten.se ska följa instruktionerna i myndighetens bildpolicy. Eftersom webbplatsen har en responsiv design och anpassas efter den enhet som användaren surfar in med så kan bildstorlekarna variera. En bild som tar upp en relativt liten yta när du använder en dator kan ta upp hela skärmbredden på en surfplatta. Bilderna måste kunna skalas om till fler storlekar.

Bildstorlekar

Startsidans och landningssidornas bildpuffar: 600x400 pxl
Kontaktkorten för pressbilder: 280x217 pxl
Max bredd på bilder i brödtext: ca 250-280 pxl

Ikoner för filer på folkhalsomyndigheten.seIkoner

På folkhalsomyndigheten.se använder vi specialframtagna ikoner för filer. Länkar till dokument kompletteras automatiskt med den ikon som hör till den specifika filtypen. Ikonerna har tagits fram för att spegla myndighetens grafiska formspråk i så stor utsträckning som möjligt.

Grid och baseline

Layouten på de flesta sidor på webben (1200 pxl breda) baseras på en grid indelad i 12x78 px kolumner med 24 px mellanrum och en 10 px baseline grid. Undantaget är startsidan och ämnesområdesstartsidorna.

Vanliga innehållssidor

De flesta sidorna på webben är uppbyggda av en vänsterkolumn på 282 pxl, ett fält för det huvudsakliga innehållet på sidan på 588 pxl och en högerkolumn på 282 pxl.

Vanliga innehållssidor med fullbredd

På vissa sidor kan man välja att låta det huvudsakliga innehållet "ta över" högerkolumnen. Då fördelas innehållet på en vänsterkolumn på 282 pxl och ett fält för det huvudsakliga innehållet på 894 pxl.

Startsidan

Webbens startsida bygger inte på samma grid som innehållssidorna. Startsidan har istället en layout med fem kolumner, där de olika blocken på startsidan tar upp en eller två kolumners bredd beroende på var på sidan de ligger.

Ämnesområdesstartsida

Ämnesområdesstartsidorna bygger delvis på samma mall som vanliga innehållssidor, eftersom högerkolumnen är lika bred för båda layouterna. Övrigt innehåll på ämnesområdesstartsidorna är indelat i fyra kolumner, där vissa block tar upp en kolumnbredd, andra tar upp två och blocket som visar nyheter och publikationer längst ner på sidan tar upp fyra kolumners bredd.