Digital profil

Digital profil Identitet

På denna sida ser du hur vi använder våra identitet på webben och på intranätet. Se mer information om varje komponent genom att navigera via menyn.

Identitet Färger

Vi använder i första hand våra primära färger: grönt, purpur och grått. Vi har även möjlighet att använda alternativa färger till varningsmeddelanden eller som komplementfärger i exempelvis diagram.

Alla våra färger finns i tio olika toner, från ljust till mörkt. För att säkerställa godkända kontrastvärden ska svart text användas ovanpå de fem ljusaste tonerna, och vit text ovanpå de fem mörkaste tonerna. Den allra ljusaste tonen kan även användas med 50% opacitet.

Default färger

gron-6

#24870f

purpur-6

#b546af

Primära färger

Grön

gron-1 #eaf3e4
gron-2 #c2ddb9
gron-3 #a4cc8a
gron-4 #73b264
gron-5 #4c9d3a
gron-6 #24870f
gron-7 #1a6a0c
gron-8 #174e0a
gron-9 #103107
gron-10 #0a1404

Purpur

purpur-1 #f2f0f3
purpur-2 #e7cee2
purpur-3 #dcacd2
purpur-4 #d08bc1
purpur-5 #c369b8
purpur-6 #b546af
purpur-7 #9b368b
purpur-8 #852466
purpur-9 #4e1640
purpur-10 #1c0919

Grå

grey-1 #f2f4f8
grey-2 #dde1e6
grey-3 #c1c7cd
grey-4 #a2a9b0
grey-5 #878d96
grey-6 #697077
grey-7 #4d5358
grey-8 #343a3f
grey-9 #21272a
grey-10 #121619

Alternativa färger

Grönblå

gronbla-1 #e4f7f6
gronbla-2 #a8ede9
gronbla-3 #6cd9d2
gronbla-4 #45bfb7
gronbla-5 #28a199
gronbla-6 #17827b
gronbla-7 #116963
gronbla-8 #0d524d
gronbla-9 #0b3d3a
gronbla-10 #092b29

Marin

marin-1 #f0f5fc
marin-2 #cfe0fc
marin-3 #accbfc
marin-4 #84b1fa
marin-5 #5691f0
marin-6 #3272d9
marin-7 #1d5bbf
marin-8 #114599
marin-9 #103570
marin-10 #15233b

Röd

rod-1 #fff1f1
rod-2 #ffd7d9
rod-3 #ffb3b8
rod-4 #ff8389
rod-5 #fa4d56
rod-6 #da1e28
rod-7 #a2191f
rod-8 #750e13
rod-9 #520408
rod-10 #2d0709

Identitet Ikoner

Vi använder ikonbiblioteket Feather Icons för alla våra ikoner.

  • Storlek ikon: 24x24 px med undantag för brödsmula.
  • Avstånd från ikon till text: 8 px.
  • Ikoner är svarta mot ljus bakgrund och vita mot mörk bakgrund.

Exempel på länk med ikon

Sök

Nedan finns ett urval av ikoner som används på siten.

Se alla ikoner i Feather Icons

Identitet Typografi

Vårt typsnitt är en viktig del av Vinnovas grafiska profil. På vår webbplats använder vi enbart TradeGothic LT.


Typsnitt


I rubriker använder vi en komprimerad variant av fet text: TradeGothic LT condensed bold. Fetad brödtext använder den ordinarie varianten, TradeGothic LT bold.


Trade Gothic LT

TradeGothicLT bold

TradeGothic LT condensed bold

TradeGothicLT regular

TradeGothicLT italic

Identitet Avstånd och marginaler

Grid

I grunden används Foundation som ramverk. Denna delar upp rutnätet i 24 delar med en maxbredd på 1200px. Varje del är 50px och används med small- medium- och large-klasser.

Siten använder sig även av ett flytande ramverk kallat Root em eller "rem" där 16px är storleken vilket resten av siten förhåller sig till.

Siten använder sig av två stycken bredder, en yttre maxbredd på 1200px, som används till sidornas grid och en inre maxbredd på 780px, denna används till bland annat stycken innehållandes rubriker, ingresser och paragrapher.

Innehållet centreras normalt och använder sig till stor del av Flexbox för att hantera innehållet.

Brytpunkter

Sitens stylesheet innehåller följande brytpunkter:

  • Small - upp till 379px
  • Smedium - 380px till 599px
  • Medium - 600px till 766px
  • Ipad - 767px till 879px
  • Marge - 880px till 1023px
  • Large - 1024px till 1199px
  • Xlarge - 1200px till 1439px
  • Xxlarge - 1440px till 1539px
  • Xxxlarge - 1540px och större

Avstånd

Avstånden mellan olika element utgår från 8px. Större avstånd sätts enligt formeln: 8px gånger x, dvs 16px, 24px, 32px osv.

Här är ett urval av avstånd mellan olika element.

  • Avstånd mellan paragrapher och rubriker samt andra parapgrapher är normalt 24px
  • Avstånd nedåt från rubriker är normalt 24px eller 32px (undantag finns)
  • Avstånd mellan block är normalt 32px (16px per block)
  • Avstånd i listor är normalt 10px mellan varje li