Brand-Styleguide · v2.3.1 · Hamburg, Juni 2026

Nordlicht Kaffee röstet seit 2014 in einem alten Speicher an der Elbe – langsam, in kleinen Chargen, mit Bohnen aus direktem Handel. Die Marke übersetzt nordische Ruhe in Gestaltung: viel Weißraum, klare Worte und ein Licht, das auch im November trägt.

1. 01CoverMarke & Haltung
2. 02LogoVarianten, Konstruktion, Do & Don’t
3. 03Farben12 Töne, kopierbar, live geprüft
4. 04TypografieModular Scale, live einstellbar
5. 05BildspracheDuotone & Fotorichtung
6. 06MotionDauer & Kurven, anspielbar
7. 07AnwendungenKarte, Etikett, Social
8. 08TokensCSS & JSON zum Mitnehmen

v2.3.1 · 26.06.2026: Kontrastwerte gegen Nacht neu gerechnet, Tippfehler im Etikett raus
v2.3.0 · 11.05.2026: Motion-Kapitel ergänzt, Token-Export kann jetzt JSON
v2.2.4 · 03.02.2026: Duotone-Mitten aufgehellt (waren im Druck zu dunkel)

Kapitel 02

Logo & Schutzraum

Das N-Monogramm trägt den Aurora-Bogen: ein Lichtband von Mint nach Violett über der stillen Petrol-Tinte. Drei Varianten decken alle Formate ab – die Wortmarke für Breitformate, die Bildmarke für kleine Flächen, die gestapelte Variante für Verpackung und Beschilderung.

Konstruktion

Alle Maße der Bildmarke leiten sich aus der x-Einheit ab – einem Viertel der Markenhöhe. Das Konstruktionsraster lässt sich zuschalten.

Mindestgrößen

Digital ab 24 px Höhe, im Druck ab 8 mm. Darunter verschwimmen Ring und Bogen – dann besser ganz auf die Marke verzichten.

Schutzraum

Do & Don’t

Drei richtige Anwendungen, drei klassische Fehler – die rot durchgestrichenen Kacheln zeigen, was der Marke schadet.

Kapitel 03 · zuletzt geändert: 06/2026

Farben

Zwölf Töne, drei Familien: zwei Primärfarben, fünf Aurora-Töne und eine Neutralrampe in fünf Stufen. Ein Klick auf eine Karte kopiert den Wert in der gewählten Schreibweise.

Der Kontrast-Prüfer rechnet live im Browser (WCAG 2.1): jeder Ton gegen Weiß #FFFFFF und gegen den dunkelsten Markenton Nacht #11181F. AAA ab 7:1, AA ab 4,5:1, „Groß“ ab 3:1 für große Schrift.

Primärfarben

Aurora-Töne

Neutralrampe

Kapitel 04

Typografie

Überschriften laufen in einer Display-Serif (Georgia-Stack), Fließtext in der System-Sans des jeweiligen Geräts – schnell, vertraut, ohne Webfont-Requests. Alle Größen folgen einer Modular Scale auf Basis 1 rem.

Kapitel 05

Bildsprache

Nordlicht fotografiert ruhig und nah: Gegenlicht am Hafen, Hände am Handwerk, ehrliche Materialien. Alle Motive erhalten das Duotone-Finish der Marke – Schatten in Petrol, Mitten in Aurora-Mint, Lichter in Papier.

Duotone-Rezept: Bild auf Luminanz reduzieren, dann Tonwerte auf Petrol → Mint → Papier mappen. Funktioniert identisch als CSS-/SVG-Filter und als Gradient Map in der Bildbearbeitung.

Kapitel 06 · zuletzt geändert: 05/2026

Motion-Prinzipien

Bewegung verhält sich wie die Marke: ruhig, zielstrebig, ohne Hüpfer. Eine Kurve – zügig anziehend, weich auslaufend – und drei Dauern decken alle Fälle ab. Jede Zeile lässt sich anspielen.

Ihr System wünscht reduzierte Bewegung – deshalb zeigen wir hier nur die Token-Werte, keine Animationen.

Grundsatz: nur transform und opacity animieren, nie Layout-Eigenschaften. Bei prefers-reduced-motion entfallen alle Bewegungen – Zustände wechseln dann hart.

Kapitel 07

Anwendungen

Drei Mockups, komplett aus den Tokens dieses Guides gebaut – ohne Bilddateien, nur CSS und SVG. Die Visitenkarte lässt sich per Klick oder Enter umdrehen.

Kapitel 08

Token-Export

Die ganze Marke zum Mitnehmen: Farbpalette, Schriftskala und Motion-Werte als CSS Custom Properties oder als JSON für Design-Tools. Die Typo-Stufen übernehmen den aktuell eingestellten Skalierungsfaktor aus Kapitel 04.