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.
| Färgsystem | Grön | Blå | Gul |
|---|---|---|---|
|
(Illustration av färgen) |
 |
 |
 |
| RGB | 0, 146, 132 | 0, 101, 172 | 255, 204, 0 |
| HEX | #009284 | #0065AC | #FFCC00 |
| (Exempel på toningar) |  |
 |
 |
- 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.
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
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.