Jeres design

Som aftalt på designworkshoppen, har vi skabt et design der følger Socialstyrelsens desigmanual og visuelle identitet. Jeres røde identitetsfarve og stregen under overskrifterne er to klare, visuelle markører, som er tydelige og går igen ned gennem sitet.

Derudover bærer jeres design præg af lethed, runde kanter og et klassisk men moderne udtryk med gradienter og luft, uden indholdet forsvinder. 

Der er taget højde for, at farvertypografi og standardelementer såsom navigation og footer har et markant udtryk, så brugerne har nemt ved at navigere, samtidigt med, at redaktørerne ikke skal løfte designet via billeder og film.

Primærfarve

Jeres primærfarve er den røde, som også fremgår af primærfarverne i jeres designmanual. Dette er også jeres logofarve.

Farven er bl.a. gennemgående i navigationselementer, footer og knapper.

Socialstyrelsen rød

  • HEX #AE282D
  • RGB (174, 40, 45)
  • CMYK (0%, 77%, 74%, 32%)

Sekundærfarver

Den sekundære farvepalette benyttes til baggrundsflader.

Farverne lysebrun, lyseblå, mørkegrå og gul er taget 1:1 ud af jeres designmanual, hvorimod mørkerød og lyserød er tonede versioner af jeres røde primærfarve.

Mørkerød

  • HEX #690202
  • RGB (105, 2, 2)
  • CMYK (0%, 98%, 98%, 59%)

Mørkegrå

  • HEX #787575
  • RGB (120, 117, 117)
  • CMYK (0%, 2%, 2%, 53%)

Lyserød

  • HEX #F5F0F0
  • RGB (245, 240, 240)
  • CMYK (0%, 2%, 2%, 4%)

Gul

  • HEX #ECE389
  • RGB (236, 227, 137)
  • CMYK (0%, 4%, 42%, 7%)

Lyseblå

  • HEX #CDE6EE
  • RGB (205, 230, 238)
  • CMYK (14%, 3%, 0%, 7%)

Lysebrun

  • HEX #DED4CD
  • RGB (222, 212, 205)
  • CMYK (0%, 5%, 8%, 13%)

Overskrifter

Jeres overskriftsfont er sat i Foundry Sterling, som er jeres identitets- og logofont fra jeres designmanual.

Foundry Sterling kan f.eks. købes her: https://www.fontshop.com/families/foundry-sterling

Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • "Foundry Sterling"
  • Weight: 500
  • Style: Semibold

Brødtekster

Jeres brødtekstfont er sat i Cera Pro. Denne populære font gør sig godt på skærme, hvor læsbarheden er høj.

På knapper og underoverskrifter bruges fonten med versaler og en anelse font-spacing, hvilket giver fontens udtryk lidt mere kant, end i brødtekstformatet:

Eksempel på knap

Cera Pro kan bl.a. købes her: https://www.typemates.com/fonts/cera-pro

Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • "Cera Pro"
  • Weight: Normal
  • Style: Regular
Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • "Cera Pro"
  • Weight: Normal
  • Style: Italic
Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • "Cera Pro"
  • Weight: Bold
  • Style: Regular

Typografi- og farvepar

Her ses jeres typografi- og farvepar sammensat.

Om os

Socialstyrelsen

Socialstyrelsen arbejder med udvikling, rådgivning og implementering på hele det sociale område. Socialstyrelsen er en del af Social- og Ældreministeriets koncern.

Om os

Socialstyrelsen

Socialstyrelsen arbejder med udvikling, rådgivning og implementering på hele det sociale område. Socialstyrelsen er en del af Social- og Ældreministeriets koncern.

Om os

Socialstyrelsen

Socialstyrelsen arbejder med udvikling, rådgivning og implementering på hele det sociale område. Socialstyrelsen er en del af Social- og Ældreministeriets koncern.

Om os

Socialstyrelsen

Socialstyrelsen arbejder med udvikling, rådgivning og implementering på hele det sociale område. Socialstyrelsen er en del af Social- og Ældreministeriets koncern.

Præsentation af sidetyper

Herunder ses eksempler på jeres forskellige sidetyper, hhv. for socialstyrelsen.dk, cmm.dk og vidensportal.dk.

Socialstyrelsen

CMM