Ein Designsystem für Radio, Räume, Studio, Spirits, Merch, Journal, Website und App. Eine Master-Palette, eine Typo-Logik, ein Raster — kantig, warm, kuratiert.
Version 2.0 · gezogen aus dem Live-System der Website
00 Was gilt
Version 2 ist aus dem Live-Design-System der Website gezogen — nicht am Reißbrett entworfen. Was hier steht, läuft draußen. Die alte Version-1-Palette ist vollständig ersetzt.
Kantig
Keine Radien, keine Schatten. Tiefe entsteht über Fläche, Linie und Kontrast — nicht über Weichzeichner.
Ein Akzent
Signal-Gelb ist die einzige Akzentfarbe. Marker für Handlung, nie Fläche. Clay und Olive sind gestrichen.
Sans führt
Überschriften laufen in Asif Sans. Display (Bodoni) ist auf Artikel- und Cover-Titel reduziert.
Änderungen zu v1
Signal #F2994A Orange → #E7DF72 blasses Gelb
Ink, Paper, Cardboard, Graphite, Muted alle verschoben
Mindestens die Höhe des Unterstrichs links und rechts frei. In UI-Leisten ≥ 16 px, auf Plakaten ≥ 4 % der kürzeren Kante.
Nicht erlaubt
Schräge Box, andere Logo-Schrift, farbige Wortmarke, Outline-Version, Schatten, Logo in Sans oder Display nachgesetzt.
02 Marken-Architektur
Alles heißt as.if. Die Bereiche unterscheiden sich über Name, Icon und Kontext — nie über Farbe.
Schreibweise
Immer klein, immer mit Punkten, nie mit Großbuchstaben oder Leerzeichen. Die Wortmarke im Logo trägt einen führenden Unterstrich: _as.if.records. Im Fließtext ohne: as.if.records, as.if.radio.
So
as.if.records · as.if.radio · as.if.spaces
Logo-Lockup: _as.if.records
Schwarzes Gold (Eigenname, normal)
Nicht so
As If Records · AS.IF · As-if-Records
as if records · asif · AsIf
farbige oder versalisierte Wortmarke
Was ist was
Name
Was es ist
Warum keine Bereichsfarben
Acht bunte Submarken wären acht Marken. Ein Kosmos mit einer Palette ist eine. Wiedererkennung entsteht über Logo, Name, Icon, Tonalität und den Kontrast von warmem Papier zu dunkler Fläche — nicht über eine Farbe pro Bereich.
03 Farbe
Eine Master-Palette für alles. Signal-Gelb ist der einzige Akzent — ein Marker, keine Fläche. (Klick auf eine Farbe kopiert den Hex-Wert.)
Flächenanteil
Paper und Ink tragen 70–80 % der Fläche. Cardboard und Graphite 10–20 %. Signal unter 10 % — es markiert Handlung: CTA, aktiver Zustand, Auswahl. Ein Signal-Feld pro Ansicht, nicht drei.
Kontrast
Paar
Ratio
Stufe
Ink auf Paper
15,20:1
AAA
Paper auf Ink
15,20:1
AAA
Ink auf Cardboard
12,73:1
AAA
Ink auf Signal
12,65:1
AAA
Paper auf Graphite
13,45:1
AAA
Signal auf Graphite
11,19:1
AAA
Muted auf Ink
8,71:1
AAA
Merke
Signal trägt nur dunklen Text. Gelb auf Weiß oder Gelb auf Paper ist kein Kontrast — Signal-Flächen bekommen immer Ink darauf.
04 Typografie
Vier Schriften, klare Rollen. Self-hosted als Variable Fonts unter Marken-Namen — variable Gewichte werden bewusst genutzt, nicht nur 400 und 700.
Asif Sans · Archivo
Kein Algorithmus.
UI, Navigation, Überschriften, Buttons, Produkttitel. Seit v2 auch die Standard-Headline.
Asif Serif · Source Serif 4
Ein Magazintext braucht Ruhe, Rhythmus und Tiefe.
Longform, Lede, Journal-Prosa, Blockquotes.
Asif Display · Bodoni Moda
Slow Signal
Nur Artikel- und Cover-Titel, ab ca. 44 px. Nie UI, nie Fließtext.
Keine runden Enden, keine Perspektive, kein 3D, keine Detail-Illustration. Gefüllt nur im aktiven Zustand (z. B. Play). Farbe kommt aus dem Kontext, nie aus dem Icon. Neue Icons strikt nach dieser Spec ergänzen.
07 UI-Komponenten
Buttons
Scharfe Kanten, kein Radius. Ein primärer CTA pro Ansicht. Signal nur für echte Handlung. Hover: Primär → Graphite, Signal → Signal Hover.
Pills & Tags
AlleSoundsSpacesLikör
Mono, uppercase, .08em. Rahmen Ink 45 %. Aktiv füllt sich mit Ink, Text wird Paper.
Formulare
Mindesthöhe 44 px. Fokus: 2 px Ink-Outline, 2 px Offset — immer sichtbar, nie nur über Farbe.
Karten
space · raum 02
Workshop, Dreh oder Listening Session
Karten sind Flächen mit Linie — Paper, Cardboard oder Ink. Keine Schatten, keine Radien.
Zustände
Jeder aktive Zustand kombiniert mindestens zwei Signale: Farbe plus Fläche, Position oder Gewicht. Farbe allein reicht nie. Dark UI für Player und App, Paper für Buchung, Journal und Shop.
08 Layout & Raster
Seite
Max-Breite 1280px, Außenrand 28px (Mobile 18), Gap 32px (Mobile 24).
Lesebreite
Longform 40.5rem ≈ 648 px ≈ 72 Zeichen. Nie über die volle Breite setzen.
8-pt-Skala
Keine zufälligen Abstände.
Linien statt Kästen
Struktur entsteht über Trennlinien und Rubriken-Streifen: 1 px für Trennung, 2 px unter Rubriken-Titeln. Wo v1 einen Schatten gesetzt hätte, setzt v2 eine Linie.
09 Motion
Bewegung führt den Blick und bestätigt Handlung. Sie tanzt nicht.
Echte Szenen: Raum, Technik, Kaffee, Vinyl, Hände am Werk.
UGC-Haltung — nah, unperfekt, ehrlich.
Text auf Bild nur mit ruhiger Zone oder Fade-to-Dark.
Nein
Glattes Hochglanz-Stockfoto.
Kaltes Blau, Neon, Studio-Perfektion.
AI-perfekte, sterile Renderings.
Filter, die die Palette brechen.
11 Stimme
Lakonisch, ironisch, per Du, lokal verankert, intelligent ohne klugzuscheißen — nie cheesy, nie AI-Sprech.
Direkt
Kurze Sätze. Sag die Sache, dann hör auf.
Kuratierend
Man merkt, dass jemand auswählt, nicht optimiert.
Handwerklich
Präzise Begriffe, konkrete Details, echte Orte.
Du oder Sie
Du ist der Default — Buchung, Events, Social, Journal, Spirits. Sie bleibt der formellen Geschäftskorrespondenz vorbehalten: Mieter, Behörden, Verträge. Dazwischen entscheidet der Kontext, nicht die Vorsicht.
Register
Häufigste Korrektur: eine Schicht zu glatt. Runter vom literarischen Register, rein ins Gesprochene.
Konkret schlägt kategorial — erst die Liste, keine Meta-Überschrift davor.
Der bodenständige echte Ort ist witziger als die clevere Abstraktion: „im Schnitzel-Restaurant unseres Vertrauens" statt „Läden mit Meinung".
Lokal heißt Veedel benennen (Nippes, Sechzigstraße), nie Insider andeuten.
Gag-Prinzip
Setup → Umkehr → Landung. Eine banale Alltagswahrheit, eine Drehung, ein trockener Schlusswink. Die Pointe wird nie auserklärt — wer den Gag erklärt, hat ihn getötet. Ein Build, eine Landung; nicht jeder Satz pointet. Und nie Überheblichkeit: wir stellen die Sache hin und freuen uns, dass sie da ist.
Ja
„Heute Abend: zwei Stunden warmes Radio. Keine Empfehlungen. Eine Auswahl."
„Raum, Technik, Kaffee. Alles da, nichts zu viel."
Struktur-Tells: keine „Das bedeutet für dich:"-Kästen, keine Bold-Header-Listen im Fließtext, kein Em-Dash als Krücke.
Floskel-Closer: kein „Stay tuned", „Folgt uns für mehr", „Cheers from Cologne".
12 Social
Ein Post hat eine Idee, eine Landung und schickt die Leute an genau ein Ziel.
Hook in Zeile 1
Beobachtung — der gedrehte Alltagsmoment
Statement — „we do podcasts!"
Wortspiel — subtil, kein Kalauer
Quote — wer was zur Sache sagt
Verboten: „Wir freuen uns…", „Heute zeigen wir euch…", „Hi Leute,".
Aufbau
Storytelling vor Produkt — erst Szene, dann Brand
CTA als echte Frage, oder gar keiner
Closer ist Brand-Anker: URL, Adresse, Tag
Ein Ziel pro Post — schickst du Leute physisch wohin, keine URL
Zwei Varianten
Jeder Post kommt in zwei strukturell unterschiedlichen Captions: A kurz und spitz (~250 Zeichen), B szenisch (~600 Zeichen). Eigene Hooks, nicht Versionen voneinander. Hashtags sparsam: 0–3, Event max 5, im ersten Kommentar.
Alle drei sind öffentlich erreichbar, ohne Login. Diese Seite rendert Farben, Skala und Abstände zur Laufzeit aus tokens.json — was hier steht, ist exakt das, was eine Maschine zieht.
Werkzeug
Änderungen laufen über den brand-ci-Skill: Tokens lesen und setzen, Assets hochladen, CI als CSS, Tailwind oder JSON ausliefern. Commit auf main → automatisch live.
12 Social
Ein Post hat eine Idee, eine Landung und schickt die Leute an genau ein Ziel.
Hook in Zeile 1
Verboten: „Wir freuen uns…", „Heute zeigen wir euch…", „Hi Leute,".
Aufbau
Sub-Brand-Noten