Kliva Markenrichtlinien

Eine Marke, die auf Klarheit, Daten und nordischer Ruhe basiert

Die folgenden Richtlinien beschreiben, wie Kliva aussieht, klingt und sich anfühlt – vom Logo und der Farbpalette bis zur Typografie, dem Ton und der Komponentensprache. Verwenden Sie sie, um jede Oberfläche kohärent, ruhig und selbstbewusst zu gestalten.

Inhalt

Schnell finden

Springen Sie direkt zu dem Abschnitt, den Sie benötigen: Werte, Vision, Tagline, Logo, Farbe, Typografie, Ton oder Komponentensprache.

01WerteDie drei Werte, die all unser Handeln leiten.02Vision & MissionDie Welt, die wir sehen wollen – und was wir jeden Tag tun.03TaglineAlles an einem Ort – kurze und lange Version.04LogoOrdbild, ikon och nedladdningar (SVG).05FarbpaletteCream, Accent Orange, Kliva Green und Tokens.06TypografieAptos Serif, Plus Jakarta Sans, Inter.07Ton & SpracheWie wir schreiben – konkret, ruhig, quellbasiert.08Soziale MedienLinkedIn-Vorlagen, Icons und Banner.09Hero & DotmapDas Hero-Rezept und die Dotmap-Illustration.10DesignprinzipienAbstände, Karten, Schaltflächen und Komponentensprache.

Werte

Drei Werte, die unser Handeln leiten

Vor Farben, Typografie und Logo stehen die Werte. Sie bestimmen, wie wir schreiben, was wir versprechen und wie wir Kunden und Kollegen begegnen. Wenn etwas nicht stimmt — gehen Sie zu diesen drei Werten zurück.

Transparenz

Wir zeigen Quellen, Methoden und Unsicherheit — immer.

Datenquelle und Aktualisierungsdatum bei jeder Zahl anzeigen
Sagen, was wir nicht wissen, nicht nur, was wir wissen
Transparente Preise, keine versteckten Bedingungen

Neugier

Wir stellen die Frage noch einmal, bevor wir die Antwort entwickeln.

Fragen Sie 'warum', bevor wir 'wie' vorschlagen.
Annahmen anhand realer Daten testen, nicht nach Gefühl
Neue Fragen ebenso wertschätzen wie neue Antworten

Bescheidenheit

Wir wissen, dass die Immobilienbranche ihre Arbeit besser kennt als wir.

Zuerst zuhören, dann erklären
Fehler frühzeitig und klar eingestehen
Keine Superlative über uns selbst – lassen Sie die Arbeit sprechen

Wertertest

Bevor etwas veröffentlicht wird — Seite, E-Mail, Deck, Post — muss es drei Fragen bestehen:Ist es wahr? Ist es neugierig? Ist es bescheiden?

Vision & Mission

Ein nordischer Immobilienmarkt, der auf geteilten, transparenten Daten basiert

Vision und Mission sind die zwei Fixpunkte hinter allem, was wir entwickeln. Die Vision beschreibt die Welt, die wir sehen wollen. Die Mission beschreibt, was wir täglich tun, um dorthin zu gelangen. Da KI nun Entscheidungen für die Branche schreibt, zusammenfasst und vorschlägt, wird es wichtiger denn je, dass die zugrunde liegende Quelle korrekt, qualitativ, aktuell und veredelt ist — sonst werden Fehler statt Erkenntnisse skaliert.

Vision

Ein nordischer Immobilienmarkt, auf dem Entscheidungen auf Fakten und nicht auf Vermutungen basieren — wo Daten, Quellen und Methoden geteilt, überprüfbar und sicher genug sind, damit KI darauf aufbauen kann.

Mission

Alle Immobiliendaten, alle Tools und den gesamten Workflow an einem Ort zusammenführen — sicherstellen, dass die Informationen korrekt, qualitativ, aktuell und veredelt sind, damit Menschen und KI gemeinsam neue Erkenntnisse gewinnen und bessere Entscheidungen treffen können.

Das bedeutet konkret

Eine Plattform – keine weiteren Silos, keine weiteren Exporte
Quellen und Aktualisierungsdatum neben jeder Zahl
Verfeinerte Daten und fertige Analysen, nicht nur Rohexporte
KI-bereit: nachvollziehbar, prüfbar und versioniert
Offene Integrationen mit den Systemen, die die Branche bereits nutzt
Für Analysten, Asset Manager und Vorstände gleichermaßen nützlich

Tagline

Alles an einem Ort

Wir setzen auf einen alten Klassiker. Er existiert schon lange — und ist heute aktueller denn je. Eine Plattform, alle Daten, alle Tools, der gesamte Immobilienlebenszyklus.

Kurz

Alles an einem Ort

Lang

Alles an einem Ort — die Plattform für Immobilien

Kurze Version für Logo-Lockups, Social Bios und kurze Flächen verwenden. Lange Version für Hero-Elemente, Pitchdecks und Pressematerial, wo Kontext erforderlich ist.

Logo

Eine Wortmarke — zwei Varianten

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.

Wortmarke

Creme — primär

Standard-Wortmarke für Web, Dokumente und Pressematerial.

SVG herunterladen →

Dunkel — invertiert

Auf dunklen Flächen und im Nachtmodus. Wortmarke in Creme, Punkt in Orange.

SVG herunterladen →

Weiß — bei Bedarf

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

Ikon

Creme — primär

Standard-App-Icon, Favicon, Social Avatare.

SVG herunterladen →

Dunkel — invertiert

Auf dunklen Flächen und im Nachtmodus. K in Creme, Punkt in Orange.

SVG herunterladen →

Weiß — bei Bedarf

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

Der Punkt (Brand Mark)

Leicht abgerundetes Quadrat — niemals ein Kreis

Klivas Signaturpunkt ist ein Squircle (abgerundetes Rechteck ~20% Radius) — kein Kreis. Er ist in drei zugelassenen Farben erhältlich: Orange für helle Hintergründe, Weiß für dunkle Hintergründe und Creme Deep für weiche helle Flächen, wo Orange zu grell wäre. Die Seitenlänge entspricht der x-Höhe der angrenzenden Typografie.

Orange

Auf hellem Hintergrund

Weiß

Auf dunklem Hintergrund

Creme Deep

Weiche, helle Flächen

Schutzzone

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

Hintergründe

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

Nicht erlaubt

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

Farbpalette

Ruhige Basis, warme Akzente

Die Palette basiert auf einem warmen Cremeton (Primary) und fast schwarzem Text. Akzent-Orange wird sparsam für Eyebrows, Hover-Zustände und den ikonischen Punkt verwendet. Kliva Green ist unsere sekundäre Markenfarbe für Datenvisualisierung und positive Zustände.

Kernpalette

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

Akzente & Flächen

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

Typografie

Serif für Charakter, Sans für Klarheit

Klivas Typografie kombiniert Aptos Serif für große Überschriften (warmer, redaktioneller Ton) mit Plus Jakarta Sans für Unterüberschriften und UI, sowie Inter für Fließtext. Zeichenabstand -0.025em bei Überschriften, normal bei Fließtext.

H1 — Aptos Serif · 300 · -0.01em

Der Workflow für die Immobilienbranche

H2 — Plus Jakarta Sans · 500 · -0.025em

Eine Plattform – alle Tools, die Sie benötigen

H3 — Plus Jakarta Sans · 300

Funktionsübersicht und Datenschichten

Fließtext – Inter · 400 · 1.6 Zeilenhöhe

Von Projekten über Transaktionen bis zur Compliance. Kliva sammelt Entscheidungsgrundlagen für Portfolios und Projekte in Minuten – nicht in Tagen. Für Sie, die Sie die gebaute Umwelt entwickeln, verwalten, investieren oder analysieren.

Eyebrow – Inter · 600 · 0.05em Großbuchstaben

Funktionsübersicht

Ton & Sprache

Konkret, ruhig, niemals übertrieben

Kliva spricht wie ein erfahrener Analyst, der etwas Kompliziertes bei einem Glas Wasser erklärt – nicht wie ein Verkäufer. Kurze Sätze. Konkrete Zahlen. Niemals Superlative ohne Substanz.

So sagen Sie es

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

Vermeiden Sie

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.

Ruhig

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

Hero-Sektionen & Dotmap-Konzept

Cremefarbene Basis, Wortbild links, Punkt-Illustration rechts

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

Überschrift in Aptos Serif, max. 17 Zeichen pro Zeile

Fließtext in Inter, max-w-md, ruhiger Ton. Zwei CTAs: ein dunkler primärer und ein Outline.

Hintergrund

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

Dot-Palette

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

Platzierung

Rechte Seite, max. 55% Breite, Deckkraft 0.55pointer-events-none, alt="" aria-hidden="true" (dekorativ).

Höhe

Hero auf der Startseite: 80dvh. Hero für Unterseiten: 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>

Designprinzipien

Bento, warme Basis, monochrome Icons

Das Layout basiert auf einem warmen Cremeton als Hintergrund mit Bento-Raster. Dunkle Karten heben primäre Funktionen hervor, helle Karten tragen sekundäre. Icons sind immer monochrom – niemals pastellfarbene Hintergrund-Blobs.

Dunkle Karte

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.

Helle Karte

Sekundäres 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.

Abstand

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

Hover

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

Eine Marke, die auf Klarheit, Daten und nordischer Ruhe basiert

Schnell finden

Drei Werte, die unser Handeln leiten

Transparenz

Neugier

Bescheidenheit

Ein nordischer Immobilienmarkt, der auf geteilten, transparenten Daten basiert

Alles an einem Ort

Eine Wortmarke — zwei Varianten

Leicht abgerundetes Quadrat — niemals ein Kreis

Ruhige Basis, warme Akzente

Serif für Charakter, Sans für Klarheit

Eine Plattform – alle Tools, die Sie benötigen

Funktionsübersicht und Datenschichten

Konkret, ruhig, niemals übertrieben

LinkedIn – Unternehmen und Persönlich

Cremefarbene Basis, Wortbild links, Punkt-Illustration rechts

Überschrift in Aptos Serif, max. 17 Zeichen pro Zeile

Bento, warme Basis, monochrome Icons

Hero-Feature

Sekundäres Feature