Ein einheitliches Designsystem für Radio, Räume, Studio, Events, Merch, Journal, Website und App. Nicht mehrere bunte Submarken, sondern ein wiedererkennbarer Kosmos: warm, kuratiert, direkt, präzise.
00 · Systemprüfung
Alles greift ineinander.
Psychologischer Kern
Die Marke soll menschlich-kuratiert statt algorithmisch wirken. Deshalb: warmes Papier, dunkle Label-Flächen, klare Typo, reduzierte UI, kein dekorativer Overload.
Designlogik
Farbe sortiert nicht die Geschäftsbereiche. Wiedererkennung entsteht über Logo, Tonalität, Raster, Labels, Icons, Warm-Dark-Kontrast und modulare Beispiele.
Produktfähigkeit
Das System ist für Websites, Apps, Magazintexte, Buchungsseiten, Player, Karten, Menüs, Poster und Merch ausgelegt. Jede Rolle hat eine klare typografische Aufgabe.
Single Source of Truth
Alle harten Werte auf dieser Seite — Farben, Typo-Skala, Abstände — werden zur Laufzeit aus tokens.json gerendert. Was du hier siehst, ist exakt das, was eine LLM oder ein Build-Tool zieht. Eine Wahrheit, kein Drift.
Element
Rolle
Warum es nicht kollidiert
Roboto/Helvetica Logo
Fixe Wortmarke
Bleibt ein Asset. Es konkurriert nicht mit Headlines, weil es nur im Logo verwendet wird.
Archivo
UI, Navigation, Headlines, Karten
Stabil, direkt, hohe x-Höhe, gute digitale Lesbarkeit; nah genug am Logo, aber eigenständiger.
Source Serif 4
Magazin- und Longform-Text
Bringt Wärme und redaktionelle Tiefe, ohne im UI klein oder dekorativ zu werden.
Bodoni Moda
Cover, Hero, große Editorial-Momente
Hoher Kontrast gibt Magazin-Drama. Nur groß einsetzen, nie als Fließtext.
IBM Plex Mono
Meta, Slots, Zeiten, technische Labels
Unterstützt die kuratierte Programm-/Label-Logik und strukturiert komplexe Informationen.
01 · Logo
Zwei Formen. Eine Marke.
Es gibt zwei erlaubte Logoformen. Das Lockup — die gerade Box mit kursiver Wortmarke, fürs Längliche: Leisten, Footer, Print, Außen. Und das Signet — die gestapelte Wortmarke im Quadrat, das für runde Kontexte (Avatar, App-Icon) zum Kreis beschnitten wird. Beide tragen dieselbe Logo-Schrift und dieselbe Box-Logik: gerade Fläche, kein Verlauf, kein eingefärbter Text.
Form 1 — Lockup (länglich)
_as.if.records
Der schwarze Hintergrund wird niemals verzerrt. Nur der Text ist fett/kursiv gesetzt.
Box: gerade, rechteckig, kein Skew, kein Radius.
Text: Roboto/Helvetica-artig, 900, italic, weiß.
Logo darf nativ in HTML gebaut werden, wenn kein Original-Asset genutzt wird.
Für große Print- oder Außenanwendungen bleibt eine geprüfte Vektor-Originaldatei ideal.
Die gestapelte Wortmarke im Quadrat. Das Quadrat ist die Quelle — für runde Kontexte (Social-Avatar, App-Icon) wird es zum Kreis beschnitten. Kein eigener Ring, kein Rahmen, kein Radius am Quadrat selbst.
Quadrat · die QuelleKreis · nur Crop
Farbvarianten & Asset
Zwei Grundflächen — Ink und Paper. Der Text steht immer im Komplement, nie eingefärbt. Originale liegen unter /assets/logo/.
asif-signet-dark.pngasif-signet-light.png
Programmatisch (Favicon, generierte Avatare) baubar: Quadrat in color.ink/color.paper, gestapelt _as.if. über records, Logo-Schrift 900 italic, linksbündig, vertikal zentriert. Für Print/Außen bleibt das geprüfte Asset ideal.
Schutzraum
Lockup: mindestens die Höhe des Unterstrichs links und rechts als freier Raum. In UI-Leisten mindestens 16 px Abstand zu anderen Elementen, auf Plakaten mindestens 4 % der kürzeren Kante. Signet: beim Kreis-Crop muss die Wortmarke vollständig im einbeschriebenen Kreis liegen — nie an der Beschnittkante anschneiden.
Nicht erlaubt
Keine schräge Box, keine andere Logo-Schrift, kein Verlauf im Logo, keine farbige Wortmarke, keine Outline-Version, keine Schatteneffekte, kein Nachsetzen in Archivo/Bodoni. Beim Signet zusätzlich: kein eigener Ring oder Rahmen um den Kreis, das Quadrat nicht zum Rechteck quetschen, den Text im Signet nicht einfärben.
02 · Marken-Architektur
Eine Familie. Eine Schreibweise.
Alles heißt as.if. Die Bereiche unterscheiden sich nicht über Farbe, sondern über Name, Icon und Kontext. So lässt sich jedes Stück sofort dem Unternehmen zuordnen — egal ob Radio, Raum, Studio oder Flasche.
Schreibweise
Immer klein, immer mit Punkten, nie mit Großbuchstaben oder Leerzeichen. Das Wortmarken-Lockup trägt einen führenden Unterstrich: _as.if.records. Im Fließtext schreibt man ohne Unterstrich: as.if.records, as.if.radio, as.if.spaces.
So
as.if.records · as.if.radio · as.if.spaces
Wortmarke im Logo: _as.if.records
Schwarzes Gold (Eigenname, normal geschrieben)
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
Icon
as.if.records
Das Dach. Label und Kosmos, unter dem alles läuft (FOKS GmbH). Kuratiert, menschlich, nicht algorithmisch.
as.if.radio
Internetradio, kuratiert, ohne Algorithmus. Neun Kanäle, Tagesverlauf, „nicht allein".
as.if.spaces
Kreativräume für Workshops, Drehs, Events und Listening Sessions.
as.if.studio
Podcast- und Video-Produktion.
as.if.spirits
Cocktail-Kurse und Schnapskartell.
as.if.threads
Merch und Apparel.
as.if.journal
Editorial und Blog (Sounds, the.drop, the.noise).
Schwarzes Gold
Cold Brew Espresso Likör. Produktmarke unter dem Dach — eigener Name, gleiche Tonalität.
Warum keine Bereichsfarben
Wiedererkennung soll über das System entstehen, nicht über eine Farbpalette pro Bereich. Acht bunte Submarken wären acht Marken. Ein warmer, kuratierter Kosmos mit einer Palette ist eine. Deshalb: gleiche Farben überall, Unterscheidung über Name, Icon, Tonalität und Warm-Dark-Kontrast.
03 · Farbe
Eine Master-Palette. Keine Bereichsfarben.
Alle Angebote nutzen dieselbe Palette. Bereiche werden durch Inhalte, Module, Icons und Tonalität unterschieden — nicht durch feste Farbcodes. (Klick auf eine Farbe kopiert den Hex-Code.)
Flächenanteil
Paper/Ink 70–80 %, Cardboard/Graphite 10–20 %, Signal/Clay/Olive zusammen 5–10 %. Signal Orange ist ein Marker, keine Flächenfarbe für ganze Bereiche.
Atmospheric Wash · Warm
Für Karten, Hero-Flächen, Poster, Social-Opener. Keine Lesetexte direkt darauf, außer mit solider Overlay-Fläche.
Atmospheric Wash · Dark
Für Player, Event-Teaser, App-Hero, Abend-/Audio-Kontext. Immer mit klaren Kontrastregeln.
Paar
Kontrast
Regel
Ink auf Paper
17.77:1
AAA normal
Paper auf Ink
17.77:1
AAA normal
Ink auf Cardboard
11.57:1
AAA normal
Paper auf Graphite
14.10:1
AAA normal
Signal Orange auf Ink
8.89:1
AAA normal
White auf Burnt Clay
5.44:1
AA normal
Paper auf Olive
4.93:1
AA normal
04 · Typografie
Vier aktive Rollen, keine freie Mischung.
Logo only
_as.if.records
Roboto/Helvetica-artig, nur für die Wortmarke.
Sans / UI
Kein Algorithmus.
Archivo für UI, Headlines, Navigation, Buttons.
Serif / Reading
Ein Magazintext braucht Ruhe, Rhythmus und Tiefe.
Source Serif 4 für Longform, Lede, Essays, Journal.
Cover / Display
Slow Signal
Bodoni Moda nur groß: Cover, Poster, Editorial-Hero.
Skala
Do
Pro Seite maximal drei sichtbare Rollen: Sans + Serif + Mono oder Cover + Serif + Mono.
Bodoni nur ab ca. 48 px und mit sehr gutem Kontrast.
Für UI klare Gewichte 600/700/900, keine dünnen Schnitte.
Longform in Source Serif 4 mit 66–78 Zeichen Satzbreite.
Don't
Keine Bodoni-Buttons oder Bodoni-Navigation.
Keine langen Texte in Archivo, wenn es redaktionell wirken soll.
Mono nicht für Fließtext oder emotionale Headlines nutzen.
Logo-Schrift nicht als normale Headline missbrauchen.
05 · Magazine & Journal
Große Cover. Ruhiger Lesetext.
as.if.journal · issue 01
NO ALGORITHM STILL ON AIR
A human guide to curated listening.
Longform-Beispiel
Why curation still matters
Guter Magazintext darf nicht wie UI aussehen. Er braucht eine erkennbare Stimme, aber genug Ruhe, damit lange Strecken angenehm lesbar bleiben.
Deshalb nutzt das System Source Serif 4 für Artikel, Essays, Interviews und ausführliche Projekttexte. Die Schrift wirkt redaktionell und menschlich, hat aber genügend digitale Stabilität für Web und App. Headlines dürfen groß und typografisch sein; der eigentliche Text bleibt lesefreundlich, mit klaren Absätzen, ausreichend Durchschuss und maximaler Satzbreite.
Für Magazine, Journal-Startseiten und Editorial-Heroes kann Bodoni Moda als Cover-Stimme auftreten. Sie erzeugt Aufmerksamkeit und ein kulturelles Signal, darf aber nicht zur UI-Schrift werden.
06 · Icon-System
Ein eigenes Set. Minimal, flat, ruhig.
Icons sind funktionale Zeichen, keine Illustrationen: einfarbig, offen, rund, eine Strichstärke. Ein eigenes Set — nicht aus mehreren Libraries gemischt. Alle als optimierte SVGs mit currentColor, ziehbar unter /assets/icons/.
Bereiche
as.if.radioradio
as.if.spacesspaces
as.if.studiostudio
as.if.spiritsspirits
as.if.threadsthreads
as.if.journaljournal
Funktion (Auswahl)
Playplay
Pausepause
Favoritheart
Verlaufclock
Suchesearch
Einstellungensliders
Menümenu
Chevronchevron
Pfeilarrow
Externexternal
Hinzufügenplus
Bestätigtcheck
Schließenclose
Termincalendar
Mailmail
Spezifikation
24-px-Grid, 1.9 px Stroke, round cap, round join, fill="none" außer im aktiven UI-State (z. B. Play, gefülltes Herz). Keine Perspektive, kein 3D, keine Detail-Illustration. Stroke und Fill folgen currentColor — Farbe kommt aus dem Kontext, nicht aus dem Icon. Neue Icons strikt nach dieser Spec ergänzen, damit das Set kohärent bleibt.
07 · Website & App UI
State-of-the-art, aber nicht generisch.
_as.if.radio
live
Stream · 21:00
Handverlesene Nacht
Soul, odd pop, warm electronics.
Stream
Favoriten
Verlauf
Buttons
Ein primärer CTA pro View. Signal Orange nur für echte Handlung, nicht als Dekor.
Forms
Fokus immer sichtbar: 3 px Signal Outline, 3 px Offset. Keine Fokuszustände nur über Farbe.
Cards
space · room 02
Workshop, Dreh oder Listening Session
Atmosphärische Washes sind erlaubt, aber Text bekommt ruhige Zonen.
UX-Regeln
Navigation klar und reduziert. Alle aktiven Zustände kombinieren mindestens zwei Signale: Farbe + Form/Position/Gewicht. Dark UI ist für Player und App stark; Buchung, Journal und Shop bleiben lesefreundlich auf Paper.
08 · Layout & Raster
Großzügig, modular, robust.
12-Spalten Web
Max-Width 1280 px, Außenrand 28–48 px, Gap 20–32 px. Karten nie enger als 280 px.
Poster und Magazine nutzen breite Ränder, klare Achsen und starke Typo-Kontraste statt Deko.
Distinctive Grid
Punkt- und Linienraster können als subtiler Hintergrund, Label-Träger oder Programmlogik dienen. Immer maximal 10–18 % Deckkraft; nie die Lesbarkeit stören.
09 · Motion
Bewegung mit Absicht, nicht zum Spaß.
Animation ist ruhig und funktional — sie führt den Blick, bestätigt eine Handlung, lässt etwas ankommen. Kein Bounce, kein Dekor-Geweave. Wie die Marke: kuratiert, nicht hektisch.
Dauer
fast 120 ms — Hover, kleine States
base 180 ms — Übergänge, Tabs
slow 320 ms — Eintritte, Overlays
Easing
standardcubic-bezier(.2,0,0,1)
Eintritt: standard. Austritt etwas schneller.
Kein elastisches/überschwingendes Easing.
Prinzip
Pro Moment eine Bewegung, nicht fünf.
Page-Load: gestaffelter Reveal statt allem auf einmal.
prefers-reduced-motion immer respektieren.
Bewährte Gesten
Karten heben sich beim Hover leicht (−2 px translateY, 120 ms). Fokus erscheint sofort (kein Fade, 3 px Signal-Outline). Toasts gleiten 180 ms von unten ein. Werte in tokens.json unter motion.
10 · Bildsprache
Analog, warm, echt.
Bilder wirken handgemacht und gegenwärtig — wie jemand, der auswählt, nicht wie eine Stockdatenbank. Warmes Licht, echte Räume, Hände, Platten, Korn. Lieber kernig als geleckt.
Ja
Warmes, natürliches Licht; Papier- und Filmkorn.
Echte Szenen: Raum, Technik, Kaffee, Vinyl, Hände am Werk.
UGC-Haltung — nah, unperfekt, ehrlich.
Auf Atmospheric Washes legbar, Text bekommt ruhige Zonen.
Nein
Glattes, glänziges Stockfoto.
Kaltes Blau, Neon, Hochglanz-Studio.
AI-perfekte, sterile Renderings.
Bunte Filter, die die Palette brechen.
Behandlung
Dezente Wärme statt knalliger Sättigung. Wo Text auf Bild sitzt: solide Overlay-Fläche oder Fade-to-Dark, damit Lesbarkeit und Kontrastregeln stehen.
11 · Stimme & Tonalität
Klar, menschlich, ohne Theater.
Lakonisch, ironisch, per Du, lokal verankert, intelligent ohne klugzuscheißen — nie cheesy, nie AI-Sprech. So redet die Marke, egal ob Buchung, Mail, Journal oder Flaschenrückseite.
Direkt
Kurze Sätze. Keine künstliche Markenpoesie. Sag die Sache, dann hör auf.
Kuratierend
Man merkt, dass jemand auswählt, nicht optimiert. Haltung statt Reichweite.
Handwerklich
Präzise Begriffe, konkrete Details, echte Orte. Kein Marketingnebel.
Du oder Sie
Du ist der Default — Buchung, Events, Social, Journal, Spirits, alles Direkte. Es duzt sich, weil wir uns nicht wichtiger machen als die Sache. Sie bleibt der formellen Geschäftskorrespondenz vorbehalten: Mieter, Behörden, Verträge. Dazwischen entscheidet der Kontext, nicht die Vorsicht.
Register
Die häufigste Korrektur: eine Schicht zu glatt. Eine erklärende Rahmung zu viel, ein Wort zu gewählt. Default-Korrektur immer runter vom literarischen Register, rein ins Gesprochene und Konkrete.
Konkret schlägt kategorial. Erst die Liste, keine Meta-Überschrift davor.
Der echte, bodenständige Ort ist witziger als die clevere Abstraktion („im Schnitzel-Restaurant unseres Vertrauens" statt „Läden mit Meinung").
Bei Lokal-Posts: Veedel benennen (Nippes, Sechzigstraße), nie Insider andeuten.
Das Gag-Prinzip
Der as.if-Witz ist fast immer Setup → Umkehr → Landung. Eine banale Alltagswahrheit, eine Drehung, ein trockener Schlusswink — und die Pointe wird nie auserklärt. Wer den Gag erklärt, hat ihn getötet.
Ein Build, eine Landung. Nicht jeder Satz will pointen — der Witz braucht ruhige Sätze, die ihn tragen. Und nie Überheblichkeit: wir stellen die Sache hin und freuen uns, dass sie da ist. Den Rest entscheidet der Leser.
Ja
„Heute Abend: zwei Stunden warmes Radio. Keine Empfehlungen. Eine Auswahl."
„Raum, Technik, Kaffee. Alles da, nichts zu viel."
Konkret: „ein Shot im Espresso, auf Eis als Carajillo, oder pur" — nicht „vielfältige Möglichkeiten".
Nein
„Entdecke deine ultimative Experience."
„Next level vibes für deine Community Journey."
„Powered by passion, crafted for excellence."
Kein AI-Sprech
Harte Filterliste, jeder Text läuft dadurch (siehe Humanizer-Prinzip):
Bedeutungs-Aufblähung: „is a testament to", „pivotal moment", „underscores its importance" — streichen, durch konkretes Detail ersetzen.
Copula-Vermeidung: „serves as / boasts / features" → „ist / hat". Sag es einfach.
Struktur-Tells: keine „Das bedeutet für dich:"-Kästen, keine Bold-Header-Listen im Fließtext, kein Em-Dash als Stilkrücke, kein Gag-pro-Satz.
Floskel-Closer: kein „Stay tuned", „Folgt uns für mehr", „Cheers from Cologne".
12 · Social Media
Wie wir auf Social auftreten.
Die Account-Stimme von sechs Jahren, gefiltert durch die Humanizer-Regeln. Lakonisch, beobachtend, lokal — ein Post hat eine Idee, eine Landung, und schickt die Leute an genau ein Ziel.
Hook in Zeile 1
Die erste Zeile muss ziehen. Eine von vier Strukturen:
Beobachtung — der gedrehte Alltagsmoment.
Statement — „we do podcasts!"
Wortspiel / Setup — 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-Connect.
CTA als echte Frage — oder gar keiner. Die Pointe reicht oft.
Closer = Brand-Anker: URL, Adresse, Tag — nie Marketing-Schluss.
Ein Ziel pro Post: schickt der Post Leute physisch wohin, gehört keine URL dran.
Zwei Varianten
Jeder Post kommt in zwei strukturell unterschiedlichen Captions: A kurz/spitz (Hook + Pointe + Closer, ~250 Zeichen) und B szenisch/länger (Story-Hook + Mittelteil + sanfter Anker, ~600 Zeichen). Eigene Hooks, nicht Versionen voneinander.
Hashtags
Sparsam. Default 0–3, Event max 5, immer im ersten Kommentar. Niemals eine Hashtag-Wand.
Sub-Brand-Noten
Marke
Tonfall
Verboten
Closer
Schwarzes Gold
lakonisch-elegant, leicht 1920s-Bar
perfekt, feinster, exquisit
schwarzes-gold.net
as.if.spaces
einladend ohne pushy, leicht insider-y
innovative Räumlichkeiten, unser Team
Adresse / /pages/spaces
as.if.threads
lässig, design-bewusst
limitiert, exclusive drop, must-have
/threads
as.if.radio
warm, präsent, „nicht allein"
algorithmisch, Hype-Sprech
@asifradio
Ja
„Wein um 11 wäre selbst für dein bestes Ich eine steile These."
Setup → Umkehr → trockene Landung. Die Pointe löst der Leser selbst auf.
Nein
„Schwarzes Gold ist der perfekte Brunch-Begleiter."
Operativ läuft Social über den asif-social-post-Skill (Voice-DNA, zwei Caption-Varianten, UGC-Bilder, Humanize-Check). Diese Sektion ist die Quelle, der Skill die Umsetzung.
13 · Tokens
Direkt übersetzbar in Code und Figma.
CSS-Tokens
Komponenten
Logo: natives HTML-Asset + SVG-Original für Print.
Icons: eigenes SVG-Set, currentColor, 24 px.
Buttons: Pill oder klare Rechteckkarte, nie Mischform.
Cards: Paper, Wash oder Dark; keine zufälligen Schatten.
Forms: 44 px Mindesthöhe, sichtbarer Fokus.
Longform: Source Serif, 66–78 Zeichen, keine Vollbreite.
Wie wir auf Social auftreten.
Die Account-Stimme von sechs Jahren, gefiltert durch die Humanizer-Regeln. Lakonisch, beobachtend, lokal — ein Post hat eine Idee, eine Landung, und schickt die Leute an genau ein Ziel.
Hook in Zeile 1
Die erste Zeile muss ziehen. Eine von vier Strukturen:
Verboten: „Wir freuen uns…", „Heute zeigen wir euch…", „Hi Leute,".
Aufbau
Sub-Brand-Noten
Ja
„Wein um 11 wäre selbst für dein bestes Ich eine steile These."
Setup → Umkehr → trockene Landung. Die Pointe löst der Leser selbst auf.
Nein
„Schwarzes Gold ist der perfekte Brunch-Begleiter."
„Comment below ⬇️" · „Was meint ihr? 🤔" · „Link in Bio"