Markenkit
Ein Sonnenaufgang an der Küste, in einem Symbol.
Vibe of the City dreht sich um Orte, Wetter und einen Moment des Optimismus. Auf dieser Seite findest du Logo, Farben, Typografie und Download-Assets, um die Marke korrekt einzusetzen.
Das Markenzeichen
Eine abgerundete Map-Pin-Form mit einem stilisierten Sonnenaufgang darin: eine Sonne mit Strahlen, eine Welle für die Küste und ein weicher Türkis-Akzent, wo der Morgen die Kurve trifft.
- Symbolik
- Ort (der Pin), Küste (die Welle) und Optimismus (die aufgehende Sonne). Drei Signale in einem Symbol — dieselbe Idee, die das Produkt trägt.
- Schutzraum
- Lass mindestens eine Sonnenscheibe Platz auf jeder Seite. Verdränge das Logo nicht mit Text, Bildern oder anderen Marken.
- Mindestgröße
- Verwende das Symbol auf dem Bildschirm ab 24 px, im Druck ab 12 mm. Darunter brechen die Sonnenstrahlen auf.
Logo-Varianten
Wähle die Version mit dem besten Kontrast zum Hintergrund. Im Zweifel: Vollfarb-Symbol auf hellem, On-Dark-Lockup auf dunklem Grund.
Farbpalette
Jede Farbe unten ist eine CSS-Variable aus globals.css. Verwende die Variable, nicht den Hex-Wert — Oberflächen ändern sich, Tokens sollten es nicht.
Marke
Brand
Primary actions, links, focus
- Hex
#2563eb- CSS
--brand
Brand deep
Hover state, dark accents
- Hex
#1d4ed8- CSS
--brand-deep
Brand light
Highlights on dark, soft fills
- Hex
#5fa8ff- CSS
--brand-light
Brand soft
Tinted backgrounds, callouts
- Hex
rgba(37,99,235,0.10)- CSS
--brand-soft
Akzent
Teal
Wordmark italic, accent strokes
- Hex
#04b7ce- CSS
--brand-teal
Sun
Sunrise disc, warm dot, peach accents
- Hex
#f4a261- CSS
--sun
Fläche & Tinte
Ink
Body text, dark surfaces
- Hex
#1e2a38- CSS
--ink
Sand
Default page background
- Hex
#faf6ee- CSS
--sand
Sand 2
Section banding, hover
- Hex
#f1ebde- CSS
--sand-2
Status
Positive
Success states, vibe-up
- Hex
#16a36a- CSS
--positive
Negative
Errors, vibe-down
- Hex
#dc2626- CSS
--negative
Neutral
Warnings, heads-up
- Hex
#d4a017- CSS
--neutral
Typografie
Inter für das Produkt-UI, Fraunces für Display. Der Schriftzug kombiniert Fraunces bold und kursiv — diese Mischung ist dem Schriftzug vorbehalten.
Inter — Produkt-UI
Gewichte 400 / 500 / 600 / 700. Inter für Fließtext, Bedienelemente, Navigation und Daten.
Finde deinen Moment, in jeder Stadt.
Ein Sonnenaufgang an der Küste
Wetter, Andrang, Events — vereint
Stadt und Zeitraum wählen — wir vereinen Wetter, Hafenverkehr und lokale Events zu einem Vibe-Score und machen daraus einen Plan für deinen Tag.
Kleingedrucktes und Metadaten sitzen bei 13 px.
Fraunces — Display
Gewichte 600 / 700, regular und kursiv. Fraunces für Hero-Titel, redaktionelle Überschriften und den Schriftzug.
vibeofthe•city
Finde deinen Moment, in jeder Stadt.
Abstand & Form
Vier Radien und vier Schatten decken fast alles ab. Bleib im Set; wir fügen keine Ad-hoc-Werte hinzu.
Eckenradius
sm
--radius-sm· 6 pxmd
--radius-md· 10 pxlg
--radius-lg· 16 pxxl
--radius-xl· 22 px
Schatten
sm
--shadow-smmd
--shadow-mdlg
--shadow-lgbrand
--shadow-brand
Komponenten
Drei Button-Varianten, eine Karte, ein Set Status-Pills. Alles darüber hinaus zuerst besprechen.
Málaga — Samstag sieht super aus
Warm, wenig Andrang am Hafen, zwei Kultur-Events in der Nähe. Vibe-Score 84.
Do and Don't
Tun
- Das On-Dark-Lockup über `--ink` und Fotografie nutzen.
- Atemraum lassen — mindestens eine Sonnenscheibe auf jeder Seite.
- CSS-Variablen verwenden, keine rohen Hex-Werte.
Nicht tun
- Das Symbol außerhalb der Varianten auf dieser Seite umfärben.
- Logo strecken, scheren oder drehen.
- Vollfarb-Symbol direkt auf `--brand` setzen — Kontrast bricht zusammen.
Downloads
Alle Assets sind PNG. Vollfarb-Symbol für Produktoberflächen; einfarbige Varianten für Partner-Platzierungen, die eine Farbe brauchen.
Presse & Partnerschaften
Brauchst du eine andere Größe, eine Vektordatei oder ein Co-Branding-Asset? Schreib an hello@vibeofthe.city, wir schicken es.