Kliva Brand Guidelines

Et brand bygget på klarhed, data og nordisk ro

Retningslinjerne nedenfor beskriver, hvordan Kliva ser ud, lyder og føles — fra logo og farvepalet til typografi, tone og komponentsprog. Brug dem til at holde alle flader sammenhængende, rolige og selvsikre.

Indhold

Find det rigtige — hurtigt

Hop direkte til det afsnit, du har brug for: værdier, vision, tagline, logo, farve, typografi, stemme eller komponentsprog.

01VærdierDe tre værdier, der styrer alt, hvad vi gør.02Vision & missionVerden vi ønsker at se — og hvad vi gør hver dag.03TaglineAlt på ét sted — kort og lang version.04LogoOrdbild, ikon och nedladdningar (SVG).05FarvepaletCream, accent orange, Kliva green og tokens.06TypografiAptos Serif, Plus Jakarta Sans, Inter.07Tone & stemmeHvordan vi skriver — konkret, rolig, kildebelagt.08Sociale medierLinkedIn-skabeloner, ikoner og bannere.09Hero & dotmapHero-opskriften og dotmap-illustrationen.10DesignprincipperSpacing, kort, knapper og komponentsprog.

Værdier

Tre værdier, der styrer alt, vi gør

Før farve, typografi og logo kommer værdierne. De afgør, hvordan vi skriver, hvad vi lover, og hvordan vi møder kunder og kolleger. Når noget føles forkert — gå tilbage til disse tre.

Transparens

Vi viser kilder, metoder og usikkerhed — altid.

Vis datakilde og opdateringsdato ved siden af hvert tal
Sig hvad vi ikke ved, ikke kun hvad vi ved
Tydelige priser, ingen skjulte betingelser

Nysgerrighed

Vi stiller spørgsmålet en gang til, før vi bygger svaret.

Spørg 'hvorfor', før vi foreslår 'hvordan'
Test antagelser mod rigtige data, ikke mod mavefornemmelse
Beløn nye spørgsmål lige så højt som nye svar

Ydmyghed

Vi ved, at ejendomsbranchen kan sit job bedre end os.

Lyt før vi forklarer
Erkend fejl tidligt og tydeligt
Ingen superlativer om os selv — lad arbejdet tale

Værditest

Inden noget publiceres — side, mail, deck, opslag — skal det bestå tre spørgsmål: Er det sandt? Er det nysgerrigt? Er det ydmygt?

Vision & mission

Et nordisk ejendomsmarked drevet af delt, transparent data

Vision og mission er de to faste punkter bag alt, vi bygger. Visionen beskriver den verden, vi ønsker at se. Missionen beskriver, hvad vi gør hver dag for at komme derhen. Når AI nu skriver, opsummerer og foreslår beslutninger for branchen, bliver det vigtigere end nogensinde, at kilden i bunden er korrekt, kvalitativ, opdateret og forædlet — ellers skaleres fejlene i stedet for indsigterne.

Vision

Et nordisk ejendomsmarked, hvor beslutninger bygger på fakta, ikke gætterier — hvor data, kilder og metoder er delte, verificerbare og trygge nok til, at AI kan bygge videre på dem.

Mission

Saml al ejendomsdata, alle værktøjer og hele arbejdsflowet ét sted — sikr, at informationen er korrekt, kvalitativ, opdateret og forædlet, så mennesker og AI sammen kan opnå nye indsigter og træffe bedre beslutninger.

Dette indebærer konkret

Én platform — ikke flere siloer, ikke flere eksporter
Kilder og opdateringsdatoer ved siden af hvert tal
Forædlede data og færdige analyser, ikke kun rå eksporter
AI-klar: sporbar, kontrollerbar og versioneret
Åbne integrationer med de systemer branchen allerede bruger
Lige anvendeligt for analytikeren, forvalteren og bestyrelsen

Tagline

Alt ét sted

Vi satser dobbelt på en gammel klassiker. Den har eksisteret længe — og stemmer mere nu end nogensinde. Én platform, al data, alle værktøjer, hele ejendomslivscyklussen.

Kort

Alt ét sted

Lang

Alt ét sted — platformen for ejendomme

Anvend kort version i logo-lockups, sociale bios og korte felter. Lang version i hero, pitchdecks og pressemateriale, hvor konteksten er nødvendig.

Logo

Et ordbillede — to 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.

Ordbillede

Cream — primær

Standard ordbillede til web, dokumenter og pressemateriale.

Download SVG →

Mørk — inverteret

På mørke overflader og nattilstand. Ordbillede i cream, prik i orange.

Download SVG →

Hvid — efter behov

Endast när cream-bakgrunden inte är möjlig (tredjepartsplattformar).

Ikon

Cream — primær

Standard app-ikon, favicon, sociale avatarer.

Download SVG →

Mørk — inverteret

På mørke overflader og nattilstand. K i cream, prik i orange.

Download SVG →

Hvid — efter behov

Endast när cream-bakgrunden inte är möjlig (c.ex. tredjepartsplattformar).

Prikken (brand mark)

Let afrundet firkant — aldrig en cirkel

Klivas signaturprik er en squircle (afrundet rektangel ~20% radius) — ikke en cirkel. Den findes i tre godkendte farver: orange til lys baggrund, hvid til mørk baggrund og Cream Deep til bløde lyse overflader, hvor orange bliver for skrigende. Sidelængde matcher x-højden i tilstødende typografi.

Orange

På lys baggrund

Hvid

På mørk baggrund

Cream Deep

Bløde, lyse flader

Beskyttelseszone

Lämna minst en K-höjd luft runt logotypen i alla riktningar.

Baggrunde

Mörk logotyp på ljusa ytor. Inverterad på #161A1F eller mörkare. Aldrig på lågkontrast-bilder.

Må ikke

Inte rotera, sträcka, lägga skugga, byta färg på K eller ta bort den orange pricken.

Farvepalet

Rolig base, varme accenter

Paletten tager udgangspunkt i en varm cremebase (Primary) og næsten-sort tekst. Accent-orange bruges sparsomt til eyebrows, hover-tilstande og den ikoniske prik. Kliva Green er vores sekundære brandfarve til datavisualisering og positive tilstande.

Kernepalet

Foreground

Primär text, rubriker, mörka knappar

token --foreground

hsl 220 14% 10%

hex #161A1F

Primary (Cream)

Hero-bakgrund, lugna ytor

token --primary

hsl 47 24% 92%

hex #EFEBDF

Background

Default sidbakgrund

token --background

hsl 0 0% 100%

hex #FFFFFF

Background tertiary

Funktionsöversiktsektioner

token --background-tertiary

hsl 0 0% 100%

hex #FFFFFF

Secondary

Subtila kort, ikonbakgrunder

token --secondary

hsl 220 6% 95%

hex #F1F2F3

Muted foreground

Brödtext, beskrivningar

token --muted-foreground

hsl 220 6% 38%

hex #5C6068

Border

Tunna avgränsare, kort-kanter

token --border

hsl 220 6% 88%

hex #DEE0E2

Cream Deep

Mörkare cream — pricken på ljus bakgrund, hover på primary, dividers

token --cream-deep

hsl 45 22% 78%

hex #D6CFB6

Accenter & flader

Accent Orange

Eyebrows, prick i logotyp, CTA-detaljer

token --accent-orange

hsl 27 96% 61%

hex #FB923C

Kliva Green

Brand-accent, framgångstillstånd

token --kliva-green

hsl 172 56% 36%

hex #299184

Surface Sky

Datavisualisering, lugna kort

token --surface-sky

hsl 210 55% 93%

hex #DCE8F4

Typografi

Serif for følelse, sans for klarhed

Klivas typografi kombinerer Aptos Serif til store overskrifter (varm, redaktionel tone) med Plus Jakarta Sans til underoverskrifter og UI, og Inter til brødtekst. Versalspacing -0.025em på overskrifter, normal på brødtekst.

H1 — Aptos Serif · 300 · -0.01em

Arbejdsgangen for ejendomsbranchen

H2 — Plus Jakarta Sans · 500 · -0.025em

Én platform — alle værktøjer du behøver

H3 — Plus Jakarta Sans · 300

Funktionsoversigt og datalager

Brødtekst — Inter · 400 · 1.6 line-height

Fra projekt til transaktion og compliance. Kliva samler beslutningsgrundlag for porteføljer og projekter på minutter — ikke dage. For dig som udvikler, forvalter, investerer i eller analyserer det byggede miljø.

Eyebrow — Inter · 600 · 0.05em uppercase

Funktionsoversigt

Tone & stemme

Konkret, rolig, aldrig hypet

Kliva taler som en erfaren analytiker, der forklarer noget kompliceret over et glas vand — ikke som en sælger. Korte sætninger. Konkrete tal. Aldrig superlativer uden substans.

Sig sådan her

t("brandPage.beslutsunderlagPaMinuterInte")
t("brandPage.24mFastigheter290Kommuner")
t("brandPage.filtreraPaTypkodLageYieldOch")
t("brandPage.nordiskDataSvenskaServrar")

Undgå

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.

Rolig

Vi övertygar genom precision, inte genom volym. Ingen FOMO, inga emojis.

Hero-sektioner & dotmap-konceptet

Cremebase, ordbillede til venstre, dot-illustration til højre

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

Overskrift i Aptos Serif, maks. 17 tegn per linje

Brødtekst i Inter, max-w-md, rolig tone. To CTA: en mørk primær og en outline.

Baggrund

Altid bg-primary (cream #EFEBDF). Aldrig vit eller mörk i hero.

Dot-palet

Form i gråt (hsl(0 0% 38–66%)), accent och fokus i orange (hsl 22 92% 50–62%). Inga andra färger.

Placering

Højre side, maks. 55% bredde, opacitet 0.55, pointer-events-none, alt="" aria-hidden="true" (dekorativ).

Højde

Hero på startsiden: 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>

Designprincipper

Bento, varm base, monokrome ikoner

Layouten er baseret på en varm cremefarvet baggrund med bento-grid, hvor mørke kort fremhæver primære features, og lyse kort bærer sekundære. Ikoner er altid monokrome — aldrig pastelfarvet baggrundsblob.

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.

Lyst 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.

Mellemrum

section-padding: 6rem vertikalt på desktop. content-grid max-w 1580px.

Hover

translate-y-1 + soft shadow. Aldrig färgskifte på hela ytan.

Et brand bygget på klarhed, data og nordisk ro

Find det rigtige — hurtigt

Tre værdier, der styrer alt, vi gør

Transparens

Nysgerrighed

Ydmyghed

Et nordisk ejendomsmarked drevet af delt, transparent data

Alt ét sted

Et ordbillede — to varianter

Let afrundet firkant — aldrig en cirkel

Rolig base, varme accenter

Serif for følelse, sans for klarhed

Én platform — alle værktøjer du behøver

Funktionsoversigt og datalager

Konkret, rolig, aldrig hypet

LinkedIn — virksomhed og personligt

Cremebase, ordbillede til venstre, dot-illustration til højre

Overskrift i Aptos Serif, maks. 17 tegn per linje

Bento, varm base, monokrome ikoner

Hero-feature

Sekundær feature