Choose language
Brand Guidelines
Updated: maj 11, 2026

Våra typsnitt

Example: headline, body text and CTAs

Våra typsnitt är

Fraunces Regular kombinerat med Inter. Fraunces är ett rubriktypsnitt som har karaktär och är valt för att skapa igenkänning och bilda balans till logotypens robusta uttryck. Inter är en modern sanserif som vi använder i brödtexter, call-to-action och faktatexter, men även för rubriker i mindre grad.

Generellt sett ska textfärgen vara svart. Svart ger en tydlig kontrast och är lättläst.Det hänger också ihop med vårt uttryck i text som ska kännas självklart och tydligt.

För länkar, använd understruken svart text i fet stil. Du hittar exempel på hur man ska använda svart och färg i typografi


Fraunces

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Fraunces
Weight: 400
Style: Normal
Usage
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
CSS Snippet
font-family: 'Fraunces', serif;

Inter

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Inter
Weight: 400
Style: Normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Inter
Weight: 600
Style: Normal
Usage
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
CSS Snippet
font-family: 'Inter', sans-serif;

Fotografi

 Vi använder fotografiska bilder som ett komplement till vårt 3D-uttryck. Våra unika 3D-illustrationer fångar intresset, men vi lyfter gärna fram bilder på oss själva och våra kunder för att visa att vi är personliga och värdesätter våra relationer. Läs mer om vårt 3D-uttryck här. 

Autenticitet Det är viktigt att bilderna känns äkta och genuina. Det kan vara enskilda individer eller grupper som interagerar med varandra, eller personer som skapar ögonkontakt med kameran för att förmedla en känsla av närvaro och kontakt.

Bilderna bör tas med omsorg för att personerna i dem ska framträda i ett fint ljus. Miljöerna kan vara intressanta, men bakgrunderna ska inte dominera bilderna. Optimera ljus, färg och kontrast i bilderna, men undvik att manipulera dem för mycket i efterhand för att behålla deras äkthet.

Hållbara människor
Vi visar människor i vardagliga situationer, både på och utanför arbetet, där de framstår som avslappnade, nöjda och trygga, vilket signalerar användningen av Inexchange: "Vi skapar hållbara medarbetare i hållbara företag".

Mångfald
Vi är stolta över den mångfald som finns bland Inexchanges användare och personal, och det är viktigt att detta återspeglas i vårt bildspråk. Vi visar en variation i etnicitet, ålder, kön, kultur och geografi (stad och land, syd och norr). Mångfalden ska kännas självklar och naturlig – inte forcerad eller övertydlig. 
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet

Ikoner

Stilen på våra ikoner ska vara enkel och informativ, snarare än dekorativ och personlig. Ikonerna bör vara enkla, konturerade, med skarpa vinklar (inte rundade). Vår färgsättningsprincip är enkel. På färgad bakgrund använder vi svart och på vit bakgrund använder vi färg (Watermelon).

Du kan ladda ned ikoner från Material Design här
Använd följande inställningar när du laddar ned dina ikoner.
Use the following settings when downloading:
  • Weight: 300
  • Grade: 0
  • Optical Size: 48px 
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9

Lorem ipsum dolor set amet

256_Image_Placeholder_16-9

Lorem ipsum dolor set amet

256_Image_Placeholder_16-9

Lorem ipsum dolor set amet

Presentationer

256_Image_Placeholder_16-9

Cover example

256_Image_Placeholder_16-9

Cover with a photo

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

 Klicka på knappen "Use the template" i det övre högra hörnet för att använda mallen. 

Web look-and-feel

 I de följande exemplen kan du se hur typografi, färger och bilder kan användas på en webbplats. 

Toppsektion

256_Image_Placeholder_16-9

Toppsektion med The Sphere och rubrik

256_Image_Placeholder_16-9

Toppsektion med rubrik och produktbild

Features

256_Image_Placeholder_16-9
i
Toppsektion med The Sphere och rubrik

Innehålls moduler

256_Image_Placeholder_16-9
i
Toppsektion med The Sphere och rubrik

Pris

256_Image_Placeholder_16-9
i
Toppsektion med The Sphere och rubrik
256_Image_Placeholder_16-9
i
Toppsektion med The Sphere och rubrik

Testimonials

256_Image_Placeholder_16-9
i
Toppsektion med The Sphere och rubrik

Ikoner

 Read more about icons here 
256_Image_Placeholder_16-9
i
Icons

Q&A & footer

256_Image_Placeholder_16-9
i
Icons

Digital marknadsföring

LinkedIn profile

 

256_Image_Placeholder_16-9

LinkedIn profile

256_Image_Placeholder_16-9

alternative background image

LinkedIn Ad

 

256_Image_Placeholder_16-9

There's no need for logo on the post image, because it is always visible as profile image andname.

Display Ad

 

256_Image_Placeholder_16-9

Newsletter

 

256_Image_Placeholder_16-9

App store look and feel

 

256_Image_Placeholder_16-9

Utomhus affishering

 

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

Events och skyltar

 

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

Broschyrer

 

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

256_Image_Placeholder_16-9

Produktdesign

 Vår produktdesign bygger på Material Design, kompletterat med våra unika detaljer. Designen utgår från en grå neutral bakgrundsfärg mot vilken vi använder vitt för att framhäva produkternas interaktiva element och skapa visuell kontrast. Profilfärgen i vår palett är lila, en färg vi använder med omsorg, vid sidan av blått, grönt, gult och rött som spelar viktiga roller för interaktivitet och att visa olika statusar.
Vårt mål är att erbjuda en användarupplevelse som är både lätt och inbjudande, samtidigt som den speglar vårt varumärke subtilt och placerar användarna i centrum. Nedan presenteras våra riktlinjer för designspråket samt exempel på hur vi integrerar varumärket i olika delar av produkten. 
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet

 Mörka färger --> Textelement, GUI borders, Navigation icons etc. 


Skärmbild 2026-05-11 125607

 Ljusa färger --> Bakgrunder 


Skärmbild 2026-05-11 125708

 Funktionella färger 

Dessa färger ska endast användas för produkt. Denna palett har ett större utbud av färger som är till för att användas för funktionella inslag, exempelvis visa status. Utöver detta finns det en specifik färg för knappar och andra interaktiva delar som uppfyller kontrastkraven som standarden för tillgänglighet, WCAG 2.0, definierar. 

 Profilfärg --> Används på primära GUI element, aktiva länkar etc. Avänds sparsamt. 

Skärmbild 2026-05-11 130934

 

 Sekundära färger --> Statuselement, blått för länkar. Använd ej på knappar eller GUI element. 


Skärmbild 2026-05-11 140738

Skärmbild 2026-05-11 140813

Skärmbild 2026-05-11 140836

Skärmbild 2026-05-11 140900

 

Exempelsidor

256_Image_Placeholder_16-9

Produktsida med grafer, tabell

256_Image_Placeholder_16-9

Produktsida med tabell, filvisare

256_Image_Placeholder_16-9

Produktsida med tabell, filvisare

Exempelsidor

256_Image_Placeholder_16-9
i
Produktsida med grafer, tabell
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare
256_Image_Placeholder_16-9
i
Produktsida med tabell, filvisare

Karriärsajt

Skärmbild 2026-05-11 141741
screencapture-jobs-inexchange-se-2026-05-11-14_14_13
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet

Brand case video

 

Launch campaign

Outdoor ads

Animated banners

256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet

Bus back

256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet

Digital ads

Youtube

256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet

Display

Aftonbladet

256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet
256_Image_Placeholder_16-9
i
Lorem ipsum dolor set amet