Markenleitfaden
Die Marke Splory
Ein Zeichen, zwei Farben, zwei Schriften und ein Ton. Wie Splory aussieht und klingt, bei Tag und bei Nacht, mit allen Dateien zum Herunterladen.
Jede Tour
zählt.
01 · Logo
Drei Hügel, ein Weg
Das Zeichen zeigt drei Hügel und den Weg, der sich zwischen ihnen hinaufwindet: Splory findet, was eine Tour unterwegs entdeckt. Mit der Wortmarke daneben ist es das Logo. Es steht immer in einer einzigen Farbe, Evergreen oder Cream.
Logo
Zeichen und Wortmarke. Die erste Wahl, wo Platz ist: Kopfzeile, Startseite, Presse, Partner.
Zeichen
Allein, wo wenig Platz ist oder der Name schon dasteht: App-Icon, Favicon, Profilbild.
Aufbau & Schutzraum
- Zeichen: die Höhe H bestimmt alles andere.
- Wortmarke: „Splory“ in Bricolage Grotesque Bold im Display-Schnitt, ⅝ H groß, mit weichen Ecken und einem l, das oben schräg ansteigt wie ein Gipfel; auf der Mitte des Zeichens, 5/16 H daneben. Sie ist als Pfad gezeichnet: nie neu setzen.
- Schutzraum: rundum mindestens x = ¼ H frei von Text, Kanten und anderen Logos.
- Mindestgröße: das Logo ab 24 px Höhe, das Zeichen allein ab 16 px, darunter nur auf der Kachel wie im Favicon.
Größen
So nicht
02 · Farben
Evergreen und Cream
Zwei Farben tragen die Marke: das tiefe Grün des Waldes und das warme Weiß von Papier und Kalkstein. Trail und Summit kommen als Akzente dazu, einer für den Weg, einer für die Belohnung.
Evergreen
Wald, Tiefe, Nacht. Das Zeichen auf hellem Grund, die Fläche des App-Icons.
- HEX
- RGB
- HSL
Cream
Papier, Licht, Kalkstein. Das Zeichen auf dunklem Grund, der Grund des hellen Themas.
- HEX
- RGB
- HSL
Zusammen erreichen sie 8,9 : 1AAA und lesen sich in jeder Größe.
Trail
Der Weg: Buttons, Links, Fortschrittsbalken, erreichte Ziele. Bei Tag dunkler, damit er auch als Text trägt.
Summit
Die Belohnung: Punkte, XP, Stufen und alles, was glänzt. Sparsam, damit es etwas Besonderes bleibt.
Alle Farbwerte
Grund --background
Die Seite
Fläche --surface
Karten und Kacheln
Fläche, erhaben --surface-raised
Was über Karten liegt
Text --foreground
Überschriften und Fließtext
Text, gedämpft --muted-foreground
Erklärungen, Beschriftungen, Daten
Linie --border
Rahmen und Trenner
Marke --brand
Das Logo, Evergreen oder Cream
Trail --trail
Aktionen, Links, Fortschritt, Erreichtes
Trail, Glanz --trail-glint
Der helle Anfang der Trail-Verläufe
Summit --summit
Punkte, XP, Stufen
Summit, Glanz --summit-glint
Der helle Anfang der Summit-Verläufe
Warnung --destructive
Löschen, Fehler, Betrug
Im Code sind es die Variablen in app/globals.css, als Tailwind-Farben bg-trail, text-summit, text-brand usw.
03 · Hell & Dunkel
Der Wald bei Tag und bei Nacht
Splory gibt es in zwei Stimmungen. Dunkel ist das Logo selbst: Cream auf tiefem Evergreen. Hell dreht es um: Evergreen auf Cremepapier. Wer Splory nutzt, wählt in den Einstellungen „Wie das Gerät“, „Hell“ oder „Dunkel“, und dazu eine von sechs Farbstimmungen. Der Wald ist der Standard; die Marke, das Logo und die Werte hier bleiben seine.
Stufe 2 von 6
Fünf im Schwarzwald
Steh auf fünf Gipfeln im Schwarzwald
Stufe 2 von 6
Fünf im Schwarzwald
Steh auf fünf Gipfeln im Schwarzwald
Das Logo auf Flächen
Evergreen auf Cream
Der helle Standard.
8,9 : 1AAACream auf Evergreen
Das Original, wie im App-Icon.
8,9 : 1AAACream auf Nacht
Der Grund des dunklen Themas.
14,7 : 1AAAEvergreen auf Weiß
Für Dokumente und fremde Seiten.
10,8 : 1AAAAuf Fotos steht das Logo in Cream über einer dunklen, ruhigen Stelle oder in Evergreen über einer hellen. Wo keine Farbe möglich ist (Stempel, Gravur, Prägung), darf es schwarz oder weiß sein.
Kontrast auf dem Grund
Hell
- Text13,1 : 1AAA
- Text, gedämpft5,8 : 1AA
- Trail als Text5,7 : 1AA
- Summit als Text3,9 : 1AA groß
Dunkel
- Text15,1 : 1AAA
- Text, gedämpft7,3 : 1AAA
- Trail als Text7,3 : 1AAA
- Summit als Text9,3 : 1AAA
Gemessen nach WCAG 2 auf dem Grund der Seite. Text braucht mindestens 4,5 : 1 (AA); was darunter liegt, nur für große Zahlen und Titel.
04 · App-Icon
Das Zeichen auf Evergreen
Auf dem Homescreen, im Browser-Tab und als Lesezeichen steht das Zeichen in Cream auf einer Evergreen-Fläche: das Logo in seiner ursprünglichen Form.
App-Icon
Aufbau
- 1024 × 1024 px, vollflächig Evergreen, ohne Transparenz.
- Das Zeichen in Cream auf 62 % der Kantenlänge, mittig: 19 % Rand auf jeder Seite.
- Eckig abgeben: iOS rundet die Ecken selbst. Kein eigener Rand, kein Text, kein Verlauf.
- Apple-Touch-Icon (180 px) für Lesezeichen auf dem Homescreen: dasselbe Bild.
SplorySplory
Favicon
Im Tab zählt jedes Pixel: eine abgerundete Kachel (Radius 14 von 64), das Zeichen auf 72 % der Kantenlänge. Als SVG für moderne Browser und als ICO mit 16, 32 und 48 px für alle anderen.
Splory – Jede Tour zähltSplory – Jede Tour zählt05 · Schrift
Bricolage Grotesque und Inter
Eine Schrift mit Charakter für das, was man sich merken soll, und eine ruhige für alles, was man lesen will. Beide liegen auf splory.app selbst (SIL Open Font License), nie bei Google Fonts.
Aa
Bricolage Grotesque
Überschriften, Titel, Zahlen und die Wortmarke. Meist Bold, eng gesetzt (−2,5 %); die optische Größe folgt der Schriftgröße.
RegularSemiboldBoldExtrabold
Aa
Inter
Fließtext, Bedienung, Tabellen und Beschriftungen. Regular für Text, Semibold für Labels und Buttons.
RegularMediumSemiboldBold
Display
Bricolage Grotesque Bold · 48–72 px · eng
Überschrift
Bricolage Grotesque Bold · 30–36 px · eng
Titel
Bricolage Grotesque Bold · 20–24 px
Zahl
Bricolage Grotesque Bold · Summit-Verlauf
Label
Inter Semibold · 12 px · Versalien, weit
Text
Inter Regular · 16 px
Klein
Inter Regular · 14 px · gedämpft
06 · Sprache
Wie Splory spricht
Deutsch, per du, warm, regional, ein bisschen frech und nie gemein. Der Witz gehört in Namen, die Regeln stehen wörtlich da.
Der Name
Splory, in einem Wort mit großem S. Nicht SPLORY, nicht splory, außer in Adressen wie splory.app. Früher hieß Splory Peaks; der Name ist Geschichte.
Mehr als Gipfel
Splory entdeckt Gipfel, aber auch Trails, Pässe, Flüsse, Brücken, Burgen und Stäffele. „Gipfel“ und „Berg“ nur, wo es um Gipfel geht.
Schreibweisen
„Deutsche Anführungszeichen“, Gedankenstrich – mit Leerzeichen, ß wo es hingehört. Zahlen deutsch: 1.250 Punkte, 12,5 km, 60 %. Keine Emojis.
So: Steh auf fünf Gipfeln im Schwarzwald
Nicht so: Erklimmen Sie fünf Gipfel!
Wir duzen, immer, und die Regel steht wörtlich da.
So: Leise rieselt der Schweiß
Nicht so: Distanz-Dominator
Ein Bild, das hängen bleibt, statt einer bequemen Alliteration.
So: Schwarzwald: Feldberg – Belchen
Nicht so: Morgenradfahrt 🚴
Namen erzählen, wo du warst. Ohne Emoji.
07 · Elemente
Medaillen, Balken, Höhenlinien
Splory ist ein Spiel über echte Touren. Medaillen, Stufen und XP-Balken kommen aus Rollenspielen, die Höhenlinien und Farben aus dem Wald.
Medaillen
Der Rahmen zeigt die Stufe, das Bild den Erfolg: eine gemalte Szene ohne eigenen Rahmen, ohne Text und ohne Logo.
Punkteschild
Der Kranz zeichnet aus: nur legendäre Stufen tragen ihn, wie ihre Medaille den legendären Rahmen. Die Zahl wird kleiner, je länger sie ist.
Fortschritt
Trail für den Weg zum Ziel, Summit für Punkte und Level.
Höhenlinien
Ein ruhiger Hintergrund für Kopfbereiche, in Trail mit wenig Deckkraft. Nie hinter Fließtext.
Icons
Lucide, 2 px Strich mit runden Enden, in Textfarbe oder Trail.
Karten
16 px Radius, feine Linie
Buttons
12 px Radius, Trail, Semibold
Plaketten
Ganz rund, für Status und Labels
09 · Downloads
Alle Dateien
SVG für alles, was skaliert, PNG mit transparentem Hintergrund für alles andere.
Fragen zur Marke oder etwas, das hier fehlt? hello@splory.app
08 · Social Media
Splory auf anderen Plattformen
Wo Splory neben anderen steht, bei Strava, in Netzwerken und Verzeichnissen, zeigt es sich mit eigenen Bildern in der Größe, die die Plattform verlangt.
Strava