geniali Brand Guidelines

Markenkern

Was geniali repräsentiert und wofür die Marke steht

Informativ & Umfassend

Gestapelte Layer symbolisieren gebündelte Informationen – alles an einem Ort.

Vertrauenswürdig & Klar

Professionelles, minimalistisches Design ohne Schnörkel.

Modern & Digital

Zeitgemäße Lösung für Urlauber und Reisende.

Logo-Varianten

Sechs Varianten für verschiedene Anwendungsfälle

Primäres Logo

Icon + Wordmark – Die Hauptvariante für alle Anwendungen. Das gestapelte Layer-Icon symbolisiert gebündelte Reiseinformationen.

Auf hellem Hintergrund

Standard für Websites & Dokumente

Auf dunklem Hintergrund

Für Dark Mode & dunkle UIs

Nur Icon

Favicons & App Icons

Nur Wortmarke

Für Text-Heavy Layouts

Gestapelt

Für quadratische Flächen

Monochrom

Für Druck & Monochrome Medien

Icon-Konzept

Das gestapelte Layer-Icon symbolisiert die Vielschichtigkeit von Reiseinformationen – Unterkünfte, Erlebnisse, lokale Tipps – alles übersichtlich organisiert. Die unterschiedlichen Opacity-Stufen (100%, 50%, 25%) repräsentieren Hierarchie und Tiefe.

Farbpalette

Indigo als Primärfarbe mit Slate-Neutrals

Primary

#4F46E5

Primary Light

#818cf8

Primary Dark

#3730a3

Dark

#0f172a

Slate 400

#94a3b8

Slate 100

#f1f5f9

Typografie

Inter Font Stack für moderne, native Performance

Hero · 56px · Extrabold

Dein Urlaubsportal

H1 · 40px · Extrabold

Entdecke neue Reiseziele

H2 · 32px · Bold

Unterkünfte in deiner Nähe

H3 · 24px · Bold

Lokale Erlebnisse und Tipps

Body · 16px · Regular

geniali ist das moderne Urlauberportal für alle, die mehr aus ihrer Reise machen wollen. Finde Unterkünfte, entdecke lokale Erlebnisse und erhalte Insider-Tipps.

Small · 14px · Regular

Alle Informationen auf einen Blick · Geprüfte Anbieter · DSGVO-konform

Font Weights

Aa

Regular

400

Aa

Medium

500

Aa

Semibold

600

Aa

Bold

700

Aa

Extrabold

800

Duotone Icons

Icons im charakteristischen Duotone-Stil mit Slate-400 & Primary

Home

Suche

Location

Kalender

Favorit

User

Mail

Zeit

Layer

Check

Star

Settings

Stil-Regeln

Primäre Linien: #94a3b8 (Slate-400)

Akzente: #4F46E5 (Primary)

Stroke Width: 1.5px

Viewbox: 24×24

Button Styles

Drei Button-Varianten für verschiedene Kontexte

Primary Button

bg: #4F46E5 · hover: #3730a3 · text: white

Secondary Button

bg: transparent · border: slate-200 · text: dark

Ghost Button

bg: transparent · text: primary

Don'ts

Was man mit dem Logo nicht tun sollte

Andere Farben

Verzerren

Drehen

Schatten