Selv om FNSP følger retningslinjene fra det nasjonale profilprogrammet for helseforetakene fra Helse- og omsorgsdepartementet, avviker vi på font og ikonstil. Dette har FNSP søkt om, og fått innvilget fritak på, fra interregionalt kommunikasjonsdirektørmøte. Dette fritaket er for FNSP og er ikke noe som kan direkte overføres til andre systemer, uten at man på tilsvarende måte får innvilget fritak fra egen helseregion eller nasjonalt.
Typografi:
FNSP benytter Plus Jakarta sans som standardfont. Ut i fra sidemal og design, vil den tilpasse seg i størrelse.
Typografisk skala:
- XS: 14px
- SM: 16px
- MD: 18px (brødtekst)
- ML: 20px
- LG: 24px
- XL: 28px
- XXL: 32px
- 3XL: 40px
- 4XL: 48px
- 5XL: 64px
Størrelser på H1, H2 etc varierer avhengig av type sidemal og brekkpunkt/skjermbredde
Linjehøyder:
I kode bruker vi linjehøyder basert på prosentverdi basert på fontstørrelsene i den typografiske skalaen:
- 150% i lengre løpende tekst
- 120% i overskrifter
Tekst er svart. Lenker er markert med blå skrift #003087 / rgba(0, 48, 135, 1)
Farger:
Fargene for FNSP er basert på Nasjonalt profilprogram for helseforetakene fra Helse- og omsorgsdepartementet og tilpasset for bruk på digitale flater. Ved bruk av fargene er det viktig å overholde kontrastkrav ihht. WCAG.
Fargepaletten inneholder primærfargene fra profilprogrammet i tillegg til en sekundærfargeskala, en gråtoneskala og meldingsfarger for driftsmeldinger, etc. Meldingsfargene, sekundær- og gråtoneskalaen består at ulike valører innenfor hver hovedkategori for å skape spillerrom for bruk i bakgrunner og interaksjonselementer samtidig som kontrastkrav ivaretas.
Ved bruk av farger er det viktig å forholde seg til kravene i WCAG-standarden og bruke kontrastmålingsverktøy for å sikre disse. Colour Contrast Analyser er et eksempel på kontrastmålingsverktøy som kan brukes.
Vi har to supplerende fargeprofiler, som er godkjent av de regionale kommunikasjonsdirektørene for benyttelse på FNSP.
Publikumsløsninger (sykehus og apotek)
Sekundærfargene til publikumsløsningene har fokus på varme og nærhet og består av fargetoner som beige, grønn, lilla og terracotta.
- Forside sykehus: #EFEDE6 / rgba(239, 237, 230, 1)
- Forside apotek: #E0EBE5 / rgba(224, 235, 229, 1)
- Bakgrunnsfarge promoboks: #E0EBE5 / rgba(224, 235, 229, 1)
- Bakgrunnsfarge nyheter/artikler: #EFEDE6 / rgba(239, 237, 230, 1)
- Bakgrunnsfarge innholdskort:
- #E0E7EB / rgba(224, 231, 235, 1)
- #F2E5D9 / rgba(242, 229, 217, 1)
- #EBF5D6 / rgba(235, 245, 214, 1)
- #EDDEE5 / rgba(237, 222, 229, 1)
Administrative foretak (RHF, IKT og nasjonale nettsteder)
Sekundærfargene til de administrative har kjøligere og mer foretningspregede fargetoner som blå, sjøgrønn, skogsgrønn og blågrå.
- Forside: #E6F0FA / rgba(230, 240, 250, 1)
- Bakgrunnsfarge promoboks: #E0EBE5 / rgba(224, 235, 229, 1)
- Bakgrunnsfarge nyheter/artikler: #E6F0FA / rgba(230, 240, 250, 1)
- Bakgrunnsfarge innholdskort:
- #E0E7EB / rgba(224, 231, 235, 1)
- #DDF7F2 / rgba(221, 247, 242, 1)
- #EBF5D6 / rgba(235, 245, 214, 1)
- #E6F0FA / rgba(230, 240, 250, 1)
Fargeskala som PDF-fil og som SVG-fil.
Spacingskala
For å ivareta konsistent mellomrom og et visuelt hierarki mellom innhold er det definert en spacingskala basert på et 8 pixel grid. 8-pixel-gridet er praktisk å bruke fordi det går opp i de fleste skjermstørrelser. For å sikre fleksibilitet er det lagt inn noen ekstra halverte verdier for de minste spacerne.
3XS - 2px
XXS - 4px
XS - 8px
SM - 12px
MD - 16px
LG - 24px
XL - 32px
XXL - 48px
3XL - 64px
4XL - 80px
5XL - 96px
6XL - 112px
7XL - 128px
Ikoner:
FNSP har søkt om, og fått innvilget fritak for, å bruke ikoner med en egen stil. Ikoner er stort sett fra Material Symbols, men noen få egenutviklede
Ikonstil på Material Symbols er:
- Rounded
- Weight: 200
- Fill: Off
- Grade: Normal
For inngangskort er ikonene definert til fire forskjellige kategorier. Hver kategori har en egen bakgrunnsfarge på ikonet for å skille det ut.
- Kategori 1: Kontakt - #F2E5D9 / rgba(242, 229, 217, 1)
- Kategori 2: Tid og sted - #C8EAE4 / rgba(200, 234, 228, 1)
- Kategori 3: Forskning, fag og innovasjon - #E0E7EB / rgba(224, 231, 235, 1)
- Kategori 4: Pasient, sykdommer og behandling - #EDDEE5 / rgba(237, 222, 229, 1)
På sider for behandling og diagnose er bakgrunnsfargen for de ulike feltene forhåndsdefinert og man kan velge innenfor et definert sett av ikoner fra Material Symbols.
Sidemaler og brekkpunkter:
FNSP har mange forskjellige sidemaler, ut i fra kommunikasjonsbehov. Felles for alle er at de er tilrettelagt for UU og god lesbarhet.
For at sidene skal fungere best på forskjellige type enheter er det satt brekkpunkter ved faste størrelser, slik at innholdet tilpasser seg og lesbarheten ivaretas. Brekkpunkter er ved:
- XS: Mindre enn 768px (innholdsbredde på max 544 px)
- MD: 768px
- LG: 992px
- XL: 1080px
- XXL: 1408px
FNSP følger nasjonalt profilprogram for helseforetakene fra Helse- og omsorgsdepartementet
I de tilfeller hvor FNSP avviker fra profilprogrammet, er det godkjent fra de fire regionale Kommunikasjondirektørene.