'%20fill='%23FB923C'/%3e%3c/svg%3e)
Kliva Brand Guidelines
Ett varumärke byggt på klarhet, data och nordisk lugn
Riktlinjerna nedan beskriver hur Kliva ser ut, låter och känns — från logotyp och färgpalett till typografi, ton och komponentspråk. Använd dem för att hålla varje yta sammanhängande, lugn och självsäker.
Innehåll
Hitta rätt — snabbt
Hoppa direkt till det avsnitt du behöver: värderingar, vision, tagline, logo, färg, typografi, röst eller komponentspråk.
Värderingar
Tre värderingar som styr allt vi gör
Innan färg, typografi och logotyp kommer värderingarna. De avgör hur vi skriver, vad vi lovar och hur vi möter kunder och kollegor. När något känns fel — gå tillbaka till de här tre.
01
Transparens
Vi visar källor, metoder och osäkerhet — alltid.
- Visa datakälla och uppdateringsdatum bredvid varje siffra
- Säg vad vi inte vet, inte bara vad vi vet
- Tydliga priser, inga dolda villkor
02
Nyfikenhet
Vi ställer frågan en gång till innan vi bygger svaret.
- Fråga 'varför' innan vi föreslår 'hur'
- Testa antaganden mot riktig data, inte mot magkänsla
- Belöna nya frågor lika högt som nya svar
03
Ödmjukhet
Vi vet att fastighetsbranschen kan sitt jobb bättre än vi.
- Lyssna före vi förklarar
- Erkänn fel tidigt och tydligt
- Inga superlativer om oss själva — låt arbetet tala
Värderingstest
Innan något publiceras — sida, mejl, deck, post — ska det klara tre frågor: Är det sant? Är det nyfiket? Är det ödmjukt?
Vision & mission
En nordisk fastighetsmarknad som drivs av delad, transparent data
Vision och mission är de två fixpunkterna bakom allt vi bygger. Visionen beskriver världen vi vill se. Missionen beskriver vad vi gör varje dag för att komma dit. När AI nu skriver, sammanfattar och föreslår beslut åt branschen blir det viktigare än någonsin att källan i botten är korrekt, kvalitativ, uppdaterad och förädlad — annars skalas felen istället för insikterna.
Vision
En nordisk fastighetsmarknad där beslut bygger på fakta, inte gissningar — där data, källor och metoder är delade, granskningsbara och trygga nog att låta AI bygga vidare på.
Mission
Samla all fastighetsdata, alla verktyg och hela arbetsflödet på ett ställe — säkerställ att informationen är korrekt, kvalitativ, uppdaterad och förädlad, så att människor och AI tillsammans kan nå nya insikter och fatta bättre beslut.
Det här innebär konkret
- En plattform — inte fler silos, inte fler exporter
- Källor och uppdateringsdatum bredvid varje siffra
- Förädlad data och färdiga analyser, inte bara råa exporter
- AI-redo: spårbart, granskningsbart och versionerat
- Öppna integrationer mot de system branschen redan använder
- Lika användbart för analytikern, förvaltaren och styrelsen
Tagline
Allt på ett ställe
Vi dubblar ner på en gammal klassiker. Den har funnits länge — och stämmer mer nu än någonsin. En plattform, all data, alla verktyg, hela fastighetslivscykeln.
Kort
Allt på ett ställe
Lång
Allt på ett ställe — plattformen för fastigheter
Använd kort version i logo-lockups, sociala bios och korta ytor. Lång version i hero, pitchdecks och pressmaterial där sammanhanget behövs.
Logotyp
En ordbild — två varianter
Kliva-logotypen finns som full ordbild och som komprimerad ikon. Den orange pricken är obligatorisk och får aldrig flyttas, byta färg eller tas bort. Använd ordbilden i headers, dokument och pressmaterial; ikonen i favicon, app-tiles och små ytor.
Ordbild
'%20fill='%23FB923C'/%3e%3c/svg%3e)
'%20fill='%23FB923C'/%3e%3c/svg%3e)
Vit — vid behov
Endast när cream-bakgrunden inte är möjlig (tredjepartsplattformar).
Ikon
'%20fill='%23FB923C'/%3e%3c/svg%3e)
'%20fill='%23FB923C'/%3e%3c/svg%3e)
Vit — vid behov
Endast när cream-bakgrunden inte är möjlig (c.ex. tredjepartsplattformar).
Pricken (brand mark)
Lätt rundad fyrkant — aldrig en cirkel
Klivas signaturprick är en squircle (rundad rektangel ~20% radius) — inte en cirkel. Den finns i tre godkända färger: orange för ljus bakgrund, vit för mörk bakgrund och Cream Deep för mjuka ljusa ytor där orange blir för skrikigt. Sidlängd matchar x-höjden i intilliggande typografi.
Orange
På ljus bakgrund
Vit
På mörk bakgrund
Cream Deep
Mjuka ljusa ytor
Skyddszon
Lämna minst en K-höjd luft runt logotypen i alla riktningar.
Bakgrunder
Mörk logotyp på ljusa ytor. Inverterad på #161A1F eller mörkare. Aldrig på lågkontrast-bilder.
Får inte
Inte rotera, sträcka, lägga skugga, byta färg på K eller ta bort den orange pricken.
Färgpalett
Lugn bas, varma accenter
Paletten utgår från en varm cremebas (Primary) och nästan-svart text. Accent-orange används sparsamt för eyebrows, hover-tillstånd och den ikoniska pricken. Kliva Green är vår sekundära brand-färg för datavisualisering och positiva tillstånd.
Kärnpalett
Foreground
Primär text, rubriker, mörka knappar
Primary (Cream)
Hero-bakgrund, lugna ytor
Background
Default sidbakgrund
Background tertiary
Funktionsöversiktsektioner
Secondary
Subtila kort, ikonbakgrunder
Muted foreground
Brödtext, beskrivningar
Border
Tunna avgränsare, kort-kanter
Cream Deep
Mörkare cream — pricken på ljus bakgrund, hover på primary, dividers
Accenter & ytor
Accent Orange
Eyebrows, prick i logotyp, CTA-detaljer
Kliva Green
Brand-accent, framgångstillstånd
Surface Sky
Datavisualisering, lugna kort
Typografi
Serif för känsla, sans för klarhet
Klivas typografi kombinerar Aptos Serif för stora rubriker (varm, redaktionell ton) med Plus Jakarta Sans för underrubriker och UI, och Inter för brödtext. Versalspacing -0.025em på rubriker, normal på brödtext.
H1 — Aptos Serif · 300 · -0.01em
Arbetsflödet för fastighetsbranschen
H2 — Plus Jakarta Sans · 500 · -0.025em
En plattform — alla verktyg du behöver
H3 — Plus Jakarta Sans · 300
Funktionsöversikt och datalager
Brödtext — Inter · 400 · 1.6 line-height
Från projekt till transaktion och compliance. Kliva samlar beslutsunderlag för portföljer och projekt på minuter — inte dagar. För dig som utvecklar, förvaltar, investerar i eller analyserar den byggda miljön.
Eyebrow — Inter · 600 · 0.05em uppercase
Funktionsöversikt
Ton & röst
Konkret, lugn, aldrig hypad
Kliva pratar som en erfaren analytiker som förklarar något komplicerat över ett glas vatten — inte som en säljare. Korta meningar. Konkreta tal. Aldrig superlativer utan substans.
Säg så här
- t("brandPage.beslutsunderlagPaMinuterInte")
- t("brandPage.24mFastigheter290Kommuner")
- t("brandPage.filtreraPaTypkodLageYieldOch")
- t("brandPage.nordiskDataSvenskaServrar")
Undvik
- t("brandPage.revolutionerandeAiDrivenProptech")
- t("brandPage.gameChanging"), "next-gen", "world-class"
- Utropstecken. Versaler för betoning.
- t("brandPage.sverigesEnda") — vi är nordiska, inte svenska.
Klar
En mening, en idé. Förklara aldrig en funktion innan du sagt vad den ger.
Konkret
Använd siffror, källor, tidsåtgång. "Snabbare" är inte en egenskap.
Lugn
Vi övertygar genom precision, inte genom volym. Ingen FOMO, inga emojis.
Hero-sektioner & dotmap-konceptet
Cremebas, ordbild till vänster, dot-illustration till höger
Dotmap är vårt föredragna illustrationsspråk — motiv byggda av små prickar i gråa nyanser för formen och orange nyanser för accent och fokus. Den nordiska kartan är en variant; varje hero kan ha sin egen (megafon för marknad, byggnader för fastigheter, nätverk för data). Receptet är detsamma: varm cremebakgrund (Primary), rubrik i Aptos Serif vänsterställd i max 17ch, dot-illustration som lugn visuell ankare till höger — aldrig över 55% bredd eller 55% opacitet.
Eyebrow
Rubrik i Aptos Serif, max 17 tecken per rad
Brödtext i Inter, max-w-md, lugn ton. Två CTA: en mörk primär och en outline.
Bakgrund
Alltid bg-primary (cream #EFEBDF). Aldrig vit eller mörk i hero.
Dot-palett
Form i grått (hsl(0 0% 38–66%)), accent och fokus i orange (hsl 22 92% 50–62%). Inga andra färger.
Placering
Höger sida, max 55% bredd, opacity 0.55, pointer-events-none, alt="" aria-hidden="true" (dekorativ).
Höjd
Hero på startsidan: 80dvh. Sub-page hero: pt-32 md:pt-44 + pb-20 md:pb-28.
Snippet
<section className="relative bg-primary overflow-hidden pt-32 md:pt-44 pb-20 md:pb-28">
<div className="content-grid relative">
<div className="max-w-3xl">
<p className="text-sm font-semibold text-accent-orange uppercase tracking-wider">{t("brandPage.eyebrow")}</p>
<h1 className="font-display font-normal text-4xl md:text-6xl max-w-[17ch]">…</h1>
</div>
<div aria-hidden className="absolute right-0 top-0 h-full w-[55%] opacity-55 pointer-events-none">
<img src={heroDotmap} alt="" aria-hidden="true" />
</div>
</div>
</section>Designprinciper
Bento, varm bas, monokroma ikoner
Layouten utgår från en varm cremebakgrund med bento-grid där mörka kort lyfter primära features och ljusa kort bär sekundära. Ikoner är alltid monokroma — aldrig pastellfärgade bakgrundsblob.
Mörkt kort
Hero-feature
Mörka kort används för hero-features (Kliva Pipeline, AI & MCP). Gradient från #161A1F till #2A2418 ger varm djup utan att bli flat svart.
Ljust kort
Sekundär feature
Ljusa kort bär sekundär information med tunn border.
Radius
Globalt subtil radius (2px) på stora ytor. Knappar och inputs behåller sin standardradius.
Spacing
section-padding: 6rem vertikalt på desktop. content-grid max-w 1580px.
Hover
translate-y-1 + soft shadow. Aldrig färgskifte på hela ytan.
'%20fill='%23FB923C'/%3e%3c/svg%3e)
Sociala medier
LinkedIn — företag och personligt
Två godkända LinkedIn-användningar: företagssidan använder vår primära ikon i cream som profilbild, och medarbetare använder den nordiska dotmap-bannern som personligt omslag för en sammanhängande närvaro.
Företagssidan — profilbild
Använd Cream — primär-ikonen som profilbild på Klivas LinkedIn company page. Ladda upp som kvadratisk PNG, minst 400×400px.
Ladda ner ikon →Personligt — omslagsbanner
Medarbetare använder denna banner (t("brandPage.theWorkflowForRealEstate")) som personligt LinkedIn-omslag. Format 1584×396px. Ladda ner och använd som den är — ingen redigering.
Ladda ner banner →