Merkevare & Designsystem

Logoer, farger, typografi og retningslinjer for bruk av Peerlo sin visuelle identitet. Alt du trenger for å representere merkevaren riktig.

Merkepersonlighet

Varm, trygg og menneskelig.

Peerlo sin visuelle identitet er bygget rundt skoggrønt, varme jordtoner og et mykt, åpent formspråk. Designsystemet bruker Gabarito for sin varme og menneskelige karakter i overskrifter og brødtekst, og Geist for et rent, funksjonelt uttrykk i navigasjon og knapper. Alt skal føles trygt, tilgjengelig og lavterskel.

Logoer

Logoversjoner

Bruk alltid riktig logoversjon for konteksten. Mørke versjoner på lyse flater, lyse versjoner på mørke flater.

Logo m/ effekt

3D-boble med dybde og skygge. Til hero og markedsføring.

Last ned PNG

Boble — 3D-effekt

Frittstående 3D-boble for stort format.

Last ned PNG

Ordmerke — Effekt

Ordmerke med teksturert dybde-effekt.

Last ned PNG

Logo — Mørk

Mørk boble + mørk tekst. For lyse bakgrunner.

Last ned SVG

Logo — Duo

Hvit boble + mørk tekst. For lyse bakgrunner.

Last ned SVG

Logo — Lys

Helt hvit. For mørke bakgrunner.

Last ned SVG

Mini-logo — Mørk

Kompakt versjon for navbar og små kontekster.

Last ned SVG

Mini-logo — Duo

Grønn boble + mørk tekst.

Last ned SVG

Boble-ikon

Frittstående ikon for favicons og avatarer.

Last ned SVG

Regler for logobruk

• Ikke strekk, roter eller forvreng logoen.
• Behold alltid nok luft rundt logoen (minimum 1× boble-høyden).
• Bruk aldri logoen på en bakgrunn som gir dårlig kontrast.
• Ikke legg skygger, gradienter eller effekter oppå logoen.

Fargepalett

Farger

Primærfarger

Bakgrunn

Paper

Primær

Forest

Mørk primær

Evening Forest

Lys aksent

Bright Forest

Myk grønn

Pastel Forest

Tekst

Charcoal

Sekundærfarger

Sekundær

Sky

Mørk blå

Evening Sky

Myk blå

Pastel Sky

Lys blå

Bright Sky

Overflater

White

Typografi

Skrifttyper

Primær — Overskrifter & brødtekst

Gabarito

Aa Bb Cc 123

Varm og menneskelig. Brukes til overskrifter (Regular 400), ingress (Semi Bold 600) og brødtekst (Regular 400).

Sekundær — Navigasjon & knapper

Geist

Aa Bb Cc 123

Ren og funksjonell. Brukes til knapper (Semi Bold 600), navigasjon (Medium 500) og systemtekst.

Typeskala

Heading

Gabarito, Regular (400)

Snakk med noen som forstår

48–64px / 1.1

Ingress

Gabarito, Semi Bold (600)

Peerlo kobler deg med sertifiserte erfaringskonsulenter

20–24px / 1.5

Body

Gabarito, Regular (400)

Mange som sliter med psykisk helse ønsker ikke terapi.

16–18px / 1.6

Navigation

Geist, Semi Bold (600)

Book en demo

14–15px / 1.4

Caption

Geist, Medium (500)

Sekundær navigasjon og metadata

12–14px / 1.4

Gradienter

Fargeoverganger

Green to Paper

Brukes på hero og CTA-seksjoner

Blue Skies

Sekundær gradient for aksent

Forest Depth

Mørk grønn dybde

Morning Mist

Myk overgang for innholdsseksjoner

Komponenter

Knapper

Negative (hvit tekst)

Les merBli en bedre peerFinn din peer

Positive (mørk tekst / outline)

Sekundær handlingSekundær handling

Spesifikasjoner

Font: Geist, Semi Bold 600 / Medium 500

Størrelse: 14–15px

Høyde: 44–56px

Padding: 24–32px horisontalt

Border-radius: 9999px (pill)

Design tokens

Avrunding & form

8px

Tagger, badges

12px

Input-felt, små kort

16px

Kort, paneler

24px

Store kort, modaler

full

9999px

Knapper, piller

CSS Custom Properties

/* Peerlo Design Tokens */
:root {
  --paper: #F5F3F0;
  --charcoal: #3F3F3F;
  --white: #FFFFFF;

  --evening-forest: #305043;
  --forest: #388566;
  --pastel-forest: #BDE1D2;
  --bright-forest: #C1F7E1;

  --evening-sky: #25609F;
  --sky: #6CCBEC;
  --pastel-sky: #86AED8;
  --bright-sky: #CBF8FF;
}

Trenger du noe mer?

Ta kontakt med oss hvis du trenger flere formater, filtyper eller hjelp med implementering.

Kontakt oss