Kliva Brand Guidelines

A brand built on clarity, data, and Nordic calm.

The guidelines below describe Kliva's appearance, sound, and feel — from logo and color palette to typography, tone, and component language. Use them to maintain a consistent, calm, and confident presence across all surfaces.

Contents

Find it fast

Jump directly to the section you need: values, vision, tagline, logo, color, typography, voice, or component language.

01ValuesThe three values that guide all our operations.02Vision & MissionThe world we envision — and what we do daily.03TaglineEverything in one place — short and long versions.04LogoOrdbild, ikon och nedladdningar (SVG).05Color PaletteCream, accent orange, Kliva green, and tokens.06TypographyAptos Serif, Plus Jakarta Sans, Inter.07Tone & VoiceHow we write — concrete, calm, source-referenced.08Social MediaLinkedIn templates, icons, and banners.09Hero & DotmapThe hero recipe and dotmap illustration.10Design PrinciplesSpacing, cards, buttons, and component language.

Values

Three values guide everything we do

Before color, typography, and logo come values. They determine how we write, what we promise, and how we interact with customers and colleagues. If something feels wrong, refer to these three.

Transparency

We always show sources, methods, and uncertainty.

Show data source and update date next to each figure
State what we do not know, not only what we do know
Clear pricing, no hidden terms

Curiosity

We ask the question again before building the answer.

Ask 'why' before proposing 'how'
Test assumptions against actual data, not gut feeling
Reward new questions as highly as new answers

Humility

We know the real estate industry understands its business better than we do.

Listen before we explain
Acknowledge errors early and clearly
No superlatives about ourselves — let the work speak

Value test

Before publishing anything – page, email, deck, post – it must pass three questions:Is it true? Is it curious? Is it humble?

Vision & Mission

A Nordic real estate market driven by shared, transparent data

Vision and mission are the two fixed points behind everything we build. The vision describes the world we want to see. The mission describes what we do daily to achieve it. As AI now writes, summarizes, and suggests decisions for the industry, it is more important than ever that the underlying source is correct, high-quality, updated, and refined. Otherwise, errors will scale instead of insights.

Vision

A Nordic real estate market where decisions are based on facts, not guesses. A market where data, sources, and methods are shared, auditable, and secure enough for AI to build upon.

Mission

Consolidate all real estate data, all tools, and the entire workflow in one place. Ensure information is correct, high-quality, updated, and refined, so humans and AI can together achieve new insights and make better decisions.

What this means in practice

One platform — no more silos, no more exports
Sources and update dates next to each figure
Refined data and ready-made analyses, not just raw exports
AI-ready: traceable, auditable, and versioned
Open integrations with systems the industry already uses
Equally useful for the analyst, the asset manager, and the board

Tagline

All in one place

We reinforce an old classic. It has existed for a long time, and it is more relevant now than ever. One platform, all data, all tools, the entire property lifecycle.

Short

All in one place

Long

All in one place – the platform for real estate —

Use the short version in logo lockups, social bios, and compact spaces. Use the long version in hero sections, pitch decks, and press materials where context is needed.

Logo

One wordmark – two variants

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.

Wordmark

Cream – primary

Default wordmark for web, documents, and press materials.

Download SVG →

Dark – inverted

On dark surfaces and in night mode. Wordmark in cream, dot in orange.

Download SVG →

White – as needed

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

Ikon

Cream – primary

Default app icon, favicon, social avatars.

Download SVG →

Dark – inverted

On dark surfaces and in night mode. K in cream, dot in orange.

Download SVG →

White – as needed

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

The dot (brand mark)

Slightly rounded square – never a circle

Kliva's signature dot is a squircle (rounded rectangle ~20% radius) – not a circle. It comes in three approved colors: orange for light backgrounds, white for dark backgrounds, and Cream Deep for soft light surfaces where orange is too vibrant. Side length matches the x-height of adjacent typography.

Orange

On light background

White

On dark background

Cream Deep

Soft light surfaces

Safe zone

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

Backgrounds

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

Do not

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

Color Palette

Calm base, warm accents

The palette is based on a warm cream base (Primary) and near-black text. Accent orange is used sparingly for eyebrows, hover states, and the iconic dot. Kliva Green is our secondary brand color for data visualization and positive states.

Core palette

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

Accents & surfaces

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

Typography

Serif for feel, sans for clarity

Kliva's typography combines Aptos Serif for main headings (warm, editorial tone) with Plus Jakarta Sans for subheadings and UI, and Inter for body text. Letter spacing -0.025em on headings, normal on body text.

H1 — Aptos Serif · 300 · -0.01em

The workflow for the real estate industry

H2 — Plus Jakarta Sans · 500 · -0.025em

One platform — all the tools you need

H3 — Plus Jakarta Sans · 300

Feature overview and data layers

Body text — Inter · 400 · 1.6 line-height

From project to transaction and compliance. Kliva compiles decision support for portfolios and projects in minutes — not days. For those who develop, manage, invest in, or analyze the built environment.

Eyebrow — Inter · 600 · 0.05em uppercase

Feature overview

Tone & Voice

Concrete, calm, never hyped

Kliva speaks like an experienced analyst explaining something complex over a glass of water — not like a salesperson. Short sentences. Concrete figures. Never superlatives without substance.

Say this

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

Avoid

t("brandPage.revolutionerandeAiDrivenProptech")
t("brandPage.gameChanging"), "next-gen", "world-class"
Utropstecken. Versaler för betoning.
t("brandPage.sverigesEnda") — vi är nordiska, inte svenska.

Clear

En mening, en idé. Förklara aldrig en funktion innan du sagt vad den ger.

Concrete

Använd siffror, källor, tidsåtgång. "Snabbare" är inte en egenskap.

Calm

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

Hero sections & dotmap concept

Cream base, wordmark to the left, dot illustration to the right

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

Heading in Aptos Serif, max 17 characters per line

Body text in Inter, max-w-md, calm tone. Two CTAs: one dark primary and one outline.

Background

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

Dot palette

Shape in gray (hsl(0 0% 38–66%)), accent och fokus i orange (hsl 22 92% 50–62%). Inga andra färger.

Placement

Right side, max 55% width, opacity 0.55, pointer-events-none, alt="" aria-hidden="true" (dekorativ).

Height

Homepage hero: 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>

Design Principles

Bento, warm base, monochrome icons

The layout is based on a warm cream background with a bento grid. Dark cards highlight primary features, light cards carry secondary features. Icons are always monochrome — never pastel-colored background blobs.

Dark card

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.

Light card

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

A brand built on clarity, data, and Nordic calm.

Find it fast

Three values guide everything we do

Transparency

Curiosity

Humility

A Nordic real estate market driven by shared, transparent data

All in one place

One wordmark – two variants

Slightly rounded square – never a circle

Calm base, warm accents

Serif for feel, sans for clarity

One platform — all the tools you need

Feature overview and data layers

Concrete, calm, never hyped

LinkedIn — company and personal

Cream base, wordmark to the left, dot illustration to the right

Heading in Aptos Serif, max 17 characters per line

Bento, warm base, monochrome icons

Hero feature

Secondary feature