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.
Hero — Effektlogo
3D-boble med dybde og skygge. Til hero og markedsføring.
Hero-logo m/ effekt
Large
Fullstor logo med boble og ordmerke. For presentasjoner og markedsmateriell.
App
Appikon med avrundet firkant. For app-butikker og digitale plattformer.
Mini
Kompakt versjon for navbar, små kontekster og favicon.
Wordmark
Kun ordmerket uten boble. Ikke tilgjengelig i duo tone.
App-ikoner (frittstående)
Avrundede app-ikoner uten tekst. For digitale flater.
Boble-ikon & Effekt
Frittstående boble og 3D-effektversjoner.
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
Paper
Forest
Evening Forest
Bright Forest
Pastel Forest
Charcoal
Sekundærfarger
Sky
Evening Sky
Pastel Sky
Bright Sky
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
Ingress
Gabarito, Semi Bold (600)
Peerlo kobler deg med sertifiserte erfaringskonsulenter
Body
Gabarito, Regular (400)
Mange som sliter med psykisk helse ønsker ikke terapi.
Navigation
Geist, Semi Bold (600)
Book en demo
Caption
Geist, Medium (500)
Sekundær navigasjon og metadata
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)
Positive (mørk tekst / outline)
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
sm
8px
Tagger, badges
md
12px
Input-felt, små kort
lg
16px
Kort, paneler
xl
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.