Visuell identitet

Hur vi ser ut

Submeny

OM VÅR VISUELLA IDENTITET

Vårt designsystem består av flera olika verktyg som tillsammans utgör den visuella identiteten — logotyp, typografi, färger, bilder, grafiska element och vårt gridsystem.

 
Verktygen kan användas fristående i enlighet med våra riktlinjer. Med den visuella identiteten vill vi skapa tydlighet och en stark igenkänning av vår mötesplats. Vi hoppas att vi med detta verktyg kan inspirera alla som ska arbeta med Elins Esplanad till att vilja bidra till utvecklingen på bästa sätt.

LOGOTYP

Vår logotyp är primärt grön, men den kan även användas som underliggande varianter. Bakgrunden kan alltid bytas till sin ljusa nyans. Färgerna kan öven byta plats, mörk bakgrund med ljus logotyp.

Om det krävs att t.ex. matcha andra varumärkens logotyper används en avfärgad variant i svart eller vitt. Klövern är alltid till vänster om ordbilden.

Klövern är alltid placerad till vänster om ordbilden, en stående variant av logotypen finns ej.

Ladda ner

TYPOGRAFI

För de medier som tillåter unika typsnitt använder vi Bodoni och Sofia.
(A) Huvudrubrik skrivs versalt och får gära vara riktigt 
stor.
(B) Underrubrik skrivs alltid versalt/gement.
(C) Ingress och
underrubrik är aningen tjockare än (D) brödtext.

A — LTC Bodoni 175 Italic (versal)
B — LTC Bodoni 175 Italic
C — Sofia Pro Bold
D — Sofia Pro Regular

Mindre rubriker (A) eller kortare bildtexter (B) kan också skrivas med bakomliggande färgad box. Den måste nudda någon tillhörande del eller enhetens sida. Texten i boxen är alltid centrerad. Kortare budskap med ett mer personligt anslag (C) har ett skrivet uttryck. Texten vrids 10° så den får en mer uppåtriktad lutning.

A — LTC Bodoni 175 Italic
B — LTC Bodoni 175 Italic
C — Northwell

I vår dagliga kommunikation användes Times New Roman och Arial. Exempel på det är när vi skriver brev, mejlar eller jobbar i Microsoft Office.

A — Times New Roman Italic (versal)
B — Times New Roman Italic
C — Arial Bold
D — Arial Regular

FÄRGER

Basfärger

Vår färgpallett har sju huvudfärger. Primärt är är vi gröna, men övriga kulörer behövs för att skapa dynamik och flexibilitet. Godkända färgkombinationer finns på sidan om vår logotyp. Värden i RAL kan avvika aningen från sin ursprungliga nyans.

CMYK: 89, 50, 59, 37
RGB: 19, 79, 80
HEX: #134F50
RAL: 6004

CMYK: 20, 0, 18, 0
RGB: 203, 231, 215
HEX: #CBE7D7

CMYK: 4, 0, 2, 0
RGB: 242, 249, 248
HEX: #F1F9F7

Komplementfärger

Som komplement använder vi färger tillsammans med basfärgen när vi skapar kampanjer, annonser och innehåll till våra sociala plattformar samt till vår hemsida.   

CMYK: 96, 79, 35, 23
RGB: 31, 63, 102
HEX: #1F3E65
RAL: 5003

CMYK: 29, 16, 12, 0
RGB: 180, 195, 207
HEX: #B4C3CF

CMYK: 7, 3, 2, 0
RGB: 234, 238, 242
HEX: #E9EEF2

CMYK: 70, 94, 32, 22
RGB: 92, 43, 96
HEX: #5B2B60
RAL: 4007

CMYK: 12, 15, 6, 0
RGB: 220, 211, 220
HEX: #DCD2DC

CMYK: 2, 3, 0, 0
RGB: 246, 244, 249
HEX: #F6F3F9

CMYK: 3, 8, 50, 0
RGB: 248, 226, 148
HEX: #F8E294
RAL: 1016

CMYK: 2, 4, 22, 0
RGB: 249, 238, 204
HEX: #F9EECC

CMYK: 0, 1, 3, 0
RGB: 255, 251, 244
HEX: #FFFAF4

CMYK: 26, 88, 28, 13
RGB: 168, 64, 110
HEX: #A83F6E
RAL: 4010

CMYK: 6, 20, 7, 0
RGB: 234, 206, 214
HEX: #EACED5

CMYK: 2, 5, 2, 0
RGB: 247, 239, 241
HEX: #F6EFF0

CMYK: 0, 40, 37, 0
RGB: 248, 170, 148
HEX: #F8AA93
RAL: 3012

CMYK: 0, 20, 15, 0
RGB: 252, 211, 201
HEX: #FBD3C9

CMYK: 0, 4, 1, 0
RGB: 254, 244, 245
HEX: #FEF4F5

Svart och vit används framförallt som textfärger. Våra grå nyanser används sparsmakat tillexempel som bakgrundsfärger och linjefärger på vår hemsida.

CMYK: 63, 54, 52, 52
RGB: 64, 66, 67
HEX: #3F4243
RAL: 7016

CMYK: 17, 12, 13, 0
RGB: 210, 211, 211
HEX: #D1D3D3

CMYK: 6, 4, 5, 0
RGB: 236, 237, 235
HEX: #ECECEB

Komplementfärger digitalt

För att skapa en dynamisk och användarvänlig upplevelse online har vi definierat ett urval av kompletteringsfärger som endast används på webbplatsen. Dessa färger kompletterar vår huvudpalett och hjälper till att lyfta fram specifika element, skapa kontrast och guida användaren genom digitalt innehåll.

Kompletteringsfärgerna används sparsamt och strategiskt för att säkerställa att webbplatsens design förblir tydlig och i linje med vår visuella identitet. De stärker upplevelsen utan att konkurrera med huvudfärgerna, vilket upprätthåller ett konsekvent och harmoniskt uttryck.

Bakgrund (Primär) och Text (Sekundär)
HEX: #ffffff

Bakgrund (Sekundär) och Footer
HEX: ##FBEDF0

Text (Primär) och svart
HEX: #222222

Rubriker, Footer och Knapp
HEX: #DBE3C0

Header och Knapp (Hover) 
HEX: #E4939F

Text länk, Tagg och Text (Hover)
HEX: #C27D87

Text länk (Hover)
HEX: #C32D32

Border
HEX: #0000001A

Image Overlay
HEX: #00000066

GRAFISKT ELEMENT

Klövern och mönster

Logotypens klöver är stommen i vårt grafiska mönster. Den kan både vara helt själv, i cirkel eller som repetitivt mönster. Då används en fördefinerad mönsterrapport. Godkända färgkombinationer är samma som gäller för vår logotyp.

Klövern

I cirkel

Vårt mönster

Ladda ner

Gridsystem

Alla ytor byggs upp av ett gridsystem där enheter gärna får övelappa eller ligga kloss an.

Grid

Resultat

Piktogram

Våra ikoner är framtagna för att vara tydliga och lätta att känna igen samtidigt som de speglar och kompletterar logotypen och typsnittet i mötet.