# as.if.records — Brand Guide

> Für Menschen und LLMs. Die maschinenlesbare Wahrheit für alle harten Werte
> (Farben, Fonts, Abstände, Radien, Typo-Skala, Motion) liegt in `tokens.json` —
> immer von dort lesen, nie Werte aus diesem Text abtippen. Bei Konflikt gewinnt
> `tokens.json`.

**Marke:** as.if.records (FOKS GmbH)
**Was es ist:** Ein Label-System für Radio, Räume, Studio, Spirits, Merch, Journal, Website und App.
**Kern:** Eine Master-Palette, eine Typo-Logik, ein Raster. Keine bunten Submarken — ein wiedererkennbarer Kosmos.
**Haltung:** Warm, kuratiert, direkt, präzise. Menschlich gemacht, nicht algorithmisch.

---

## Für LLMs: bevor du etwas baust

**Es gibt keine Kurzfassung.** Lies dieses Dokument vollständig *und* `tokens.json`,
bevor du irgendetwas für diese Marke produzierst — Website, App, Merch, Social,
Print, Dokument. Die Marke lebt in den Details: in der Schreibweise, im Register
der Stimme, im Verhältnis der Flächenanteile, in dem, was *nicht* gemacht wird.
Eine Handvoll Bullet-Regeln reicht nicht und führt zu generischem Output.

Die folgenden vierzehn Abschnitte sind das ganze System. Geh sie durch, dann bau.
Die Werte ziehst du live: `brand.as-if-records.com/tokens.json` und `/brand.md`
(öffentlich, kein Login) oder über den `brand-ci`-Skill (`emit -f css|tailwind|json`).

---

Die Wortmarke ist `_as.if.records`. Es gibt **zwei erlaubte Formen** — beide mit derselben Logo-Schrift und derselben Box-Logik: gerade Fläche, kursiver Text, kein Verlauf, kein eingefärbter Text.

**Form 1 — Lockup (länglich).** Die einzeilige Wortmarke in der geraden Box. Für Leisten, Footer, Print, Außen.

- **Box:** gerade, rechteckig, schwarz (`color.ink`). Kein Skew, kein Radius, kein Verlauf, kein Schatten.
- **Text:** Logo-Schrift (`font.logo`), Gewicht 900, kursiv, weiß. Nur der Text ist kursiv, die Box bleibt gerade.
- Darf nativ in HTML/CSS gebaut werden. Für großen Print/Außen besser eine geprüfte Vektordatei (`/assets/logo/`).

**Form 2 — Signet (Quadrat → Kreis).** Die gestapelte Wortmarke (`_as.if.` über `records`) im Quadrat. Für kompakte und runde Kontexte: Social-Avatar, App-Icon, Favicon.

- **Quadrat ist die Quelle.** Für runde Slots wird es zum Kreis beschnitten — kein eigener Ring, kein Rahmen, kein Radius am Quadrat selbst.
- **Fläche:** entweder `color.ink` (Text in `color.paper`) oder `color.paper` (Text in `color.ink`). Text immer im Komplement, nie eingefärbt.
- Wortmarke linksbündig, vertikal zentriert, `records` gewichtiger als die obere Zeile. Assets: `assets/logo/asif-signet-dark.png` und `asif-signet-light.png`. Programmatisch (Favicon, generierte Avatare) baubar.

**Schutzraum:** Lockup — mindestens die Höhe des Unterstrichs links und rechts frei; in UI-Leisten ≥ 16 px, auf Plakaten ≥ 4 % der kürzeren Kante. Signet — beim Kreis-Crop muss die Wortmarke vollständig im einbeschriebenen Kreis liegen, nie an der Beschnittkante anschneiden.
**Verboten:** schräge Box, andere Logo-Schrift, farbige Wortmarke, Outline, Schatten, Logo in Archivo/Bodoni nachgesetzt. Beim Signet zusätzlich: eigener Ring/Rahmen um den Kreis, Quadrat zum Rechteck gequetscht, eingefärbter Text.

---

## 2 · Marken-Architektur & Schreibweise

Alles heißt `as.if`. Die Bereiche sind eine Familie, kein Zoo aus Einzelmarken.

**Schreibweise:** immer klein, mit Punkten, keine Großbuchstaben, keine Leerzeichen.
- Wortmarke im Logo-Lockup: `_as.if.records` (führender Unterstrich nur hier).
- Im Fließtext ohne Unterstrich: `as.if.records`, `as.if.radio`, `as.if.spaces`.
- **Niemals:** „As If Records", „AS.IF", „As-if-Records", „asif", „AsIf".

**Die Bereiche:**

| Name | Was es ist | Icon |
|---|---|---|
| `as.if.records` | Das Dach. Label & Kosmos (FOKS GmbH). | studio |
| `as.if.radio` | Internetradio, kuratiert, ohne Algorithmus, 9 Kanäle. | radio |
| `as.if.spaces` | Kreativräume für Workshops, Drehs, Events. | spaces |
| `as.if.studio` | Podcast- und Video-Produktion. | studio |
| `as.if.spirits` | Cocktail-Kurse, Schnapskartell. | spirits |
| `as.if.threads` | Merch und Apparel. | threads |
| `as.if.journal` | Editorial / Blog (Sounds, the.drop, the.noise). | journal |
| Schwarzes Gold | Cold Brew Espresso Likör (Produktmarke, Eigenname). | spirits |

**Warum keine Bereichsfarben:** Acht bunte Submarken wären acht Marken. Ein warmer
Kosmos mit einer Palette ist eine. Wiedererkennung entsteht über Logo, Name, Icon,
Tonalität und Warm-Dark-Kontrast — nicht über eine Farbe pro Bereich. Maschinenlesbar
in `tokens.json` unter `$extensions.asif.brand.architecture` und `.naming`.

---

## 3 · Farbe

Eine Master-Palette für alle Bereiche. Werte (Hex, RGB, CMYK, Textfarbe darauf) in `tokens.json` unter `color`. Rollen:

- `ink` Text & dunkle Labels · `paper` Hintergrund (warm) · `cardboard` warme Sekundärfläche
- `signal` **Marker** (CTA/Fokus, nie Fläche) · `clay` warmer Akzent · `olive` kühler Akzent
- `graphite` dunkle Fläche · `app` App-/Player-Grund · `muted` Labels auf Dunkel

**Flächenanteil:** Paper/Ink 70–80 %, Cardboard/Graphite 10–20 %, Signal/Clay/Olive zusammen 5–10 %.
**Washes:** Warm (Paper→Cardboard→Clay mit Signal-Glow) für Karten/Poster. Dark (App→Graphite→Olive) für Player/App. Kein Lesetext direkt darauf ohne ruhige Overlay-Zone.
**Kontrast:** Ink/Paper 17,77:1 · Ink/Cardboard 11,57:1 · Paper/Graphite 14,10:1 · Signal/Ink 8,89:1 · Weiß/Clay 5,44:1 · Paper/Olive 4,93:1. Reale Textflächen im finalen UI nachmessen.

---

## 4 · Typografie

Fünf Schriften, klare Rollen, keine freie Mischung. Familien in `tokens.json` unter `font`, Skala unter `typography`.

| Rolle | Schrift | Einsatz |
|---|---|---|
| Logo | `font.logo` (Roboto/Helvetica) | nur die Wortmarke |
| Sans / UI | `font.sans` (Archivo) | UI, Navigation, Headlines, Buttons |
| Serif / Reading | `font.serif` (Source Serif 4) | Longform, Lede, Journal |
| Cover / Display | `font.cover` (Bodoni Moda) | Cover, Hero, Poster — nur ab ~48 px |
| Mono / Meta | `font.mono` (IBM Plex Mono) | Meta, Slots, Zeiten, technische Labels |

**Do:** max. drei sichtbare Rollen pro Seite · Bodoni nur groß · UI-Gewichte 600/700/900 · Longform 66–78 Zeichen Satzbreite.
**Don't:** keine Bodoni-Buttons/-Navigation · keine langen Texte in Archivo wenn redaktionell · Mono nicht als Fließtext · Logo-Schrift nicht als Headline.

---

## 5 · Magazine & Journal

Cover dürfen laut sein, Lesen muss ruhig bleiben. Große Bodoni-Cover, dann Source-Serif-Lesetext mit Rhythmus und Ruhe. Headlines groß und typografisch, Fließtext lesefreundlich mit klaren Absätzen und maximaler Satzbreite. Bodoni als Cover-Stimme, nie als UI-Schrift.

---

## 6 · Icon-System

Ein eigenes Set, nicht aus Libraries gemischt. Funktionale Zeichen, keine Illustrationen.

**Spezifikation:** 24-px-Grid, 1,9 px Stroke, round cap, round join, `fill="none"` außer im aktiven UI-State (Play, gefülltes Herz). Keine Perspektive, kein 3D, keine Detail-Illustration. Stroke und Fill folgen `currentColor` — Farbe kommt aus dem Kontext.
**Quelle:** SVG-Dateien unter `/assets/icons/`. Bereiche: radio, spaces, studio, spirits, threads, journal. Funktion: play, pause, heart, clock, search, sliders, menu, chevron, arrow, external, plus, check, close, calendar, mail.
**Neue Icons** strikt nach dieser Spec ergänzen, damit das Set kohärent bleibt.

---

## 7 · Website & App UI

State-of-the-art, aber nicht generisch.

- **Buttons:** Pill oder klare Rechteckkarte, nie Mischform. Ein primärer CTA pro View. Signal nur für echte Handlung.
- **Forms:** ≥ 44 px Höhe. Fokus immer sichtbar — 3 px Signal-Outline, 3 px Offset, nie nur über Farbe.
- **Cards:** Paper, Wash oder Dark. Keine zufälligen Schatten (nur `shadow.default`).
- **States:** jeder aktive Zustand kombiniert mindestens zwei Signale (Farbe + Form/Position/Gewicht).
- **Dark vs. Paper:** Dark UI für Player und App. Buchung, Journal, Shop lesefreundlich auf Paper.

---

## 8 · Layout & Raster

- 12-Spalten Web, Max-Width `layout.pageMax` (1280 px), Außenrand 28–48 px, Gap 20–32 px, Karten nie schmaler als `layout.cardMin` (280 px).
- 8-pt-Spacing aus `space`: 4, 8, 12, 16, 24, 32, 48, 64, 96. Keine zufälligen Abstände.
- Print/Magazine: breite Ränder, klare Achsen, starke Typo-Kontraste statt Deko.
- Punkt-/Linienraster als subtiler Hintergrund möglich, 10–18 % Deckkraft, nie auf Kosten der Lesbarkeit.

---

## 9 · Motion

Bewegung ist ruhig und funktional — sie führt den Blick und bestätigt Handlung, sie tanzt nicht.

- **Dauer** (`tokens.json` → `duration`): fast 120 ms (Hover), base 180 ms (Übergänge/Toasts), slow 320 ms (Eintritte/Overlays).
- **Easing** (`easing.standard`): `cubic-bezier(.2,0,0,1)`. Eintritt standard, Austritt etwas schneller. Kein Überschwingen.
- **Prinzip:** pro Moment eine Bewegung. Page-Load als gestaffelter Reveal. `prefers-reduced-motion` immer respektieren.
- **Gesten:** Karten heben sich beim Hover leicht (−2 px, 120 ms); Fokus erscheint sofort ohne Fade; Toasts gleiten 180 ms von unten ein.

---

## 10 · Bildsprache

Analog, warm, echt — handgemacht statt Stockdatenbank.

**Ja:** warmes natürliches Licht, Papier-/Filmkorn, echte Szenen (Raum, Technik, Kaffee, Vinyl, Hände am Werk), UGC-Haltung — nah, unperfekt, ehrlich. Auf Washes legbar, Text bekommt ruhige Zonen.
**Nein:** glattes Hochglanz-Stockfoto, kaltes Blau/Neon, AI-perfekte sterile Renderings, bunte Filter die die Palette brechen.
**Behandlung:** dezente Wärme statt knalliger Sättigung. Text auf Bild nur mit solider Overlay-Fläche oder Fade-to-Dark.

---

## 11 · Stimme & Tonalität

**Ein Satz:** lakonisch, ironisch, per Du, lokal verankert, intelligent ohne klugzuscheißen — nie cheesy, nie AI-Sprech.

Drei Prinzipien: **direkt** (kurze Sätze, sag die Sache und 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, alles Direkte. 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. 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".
- Gesprochen statt literarisch: „supergut" statt „am schönsten". Wortwiederholung darf Rhythmus bauen — nicht zwanghaft variieren.
- Lokal heißt 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. Die Pointe wird **nie** auserklärt — der Leser löst sie selbst auf. Ein Build, eine Landung; nicht jeder Satz pointet. Keine Überheblichkeit: wir stellen die Sache hin und freuen uns, dass sie da ist.

**So / Nicht so.**
- ✓ „Heute Abend: zwei Stunden warmes Radio. Keine Empfehlungen. Eine Auswahl."
- ✓ „ein Shot im Espresso, auf Eis als Carajillo, oder pur" (konkret)
- ✗ „Entdecke deine ultimative Experience." · „Next level vibes für deine Community Journey." · „Powered by passion, crafted for excellence." · „vielfältige Möglichkeiten"

**Kein AI-Sprech (harte Filterliste).**
- Verbrannte Wörter: delve, navigate/landscape/journey (metaphorisch), elevate, embark, leverage, harness, realm, myriad, seamless, robust, cutting-edge, transformative.
- AI-Adjektive: magisch, premium, stunning, exklusiv, unvergleichlich, feinster, exquisit, perfekt.
- Bedeutungs-Aufblähung („is a testament to", „pivotal moment", „underscores its importance") → streichen, konkretes Detail stattdessen.
- Copula-Vermeidung („serves as / boasts / features") → „ist / hat".
- 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

Die Account-Stimme von sechs Jahren, gefiltert durch die Humanizer-Regeln. Ein Post hat eine Idee, eine Landung, und schickt die Leute an genau ein Ziel.

**Hook in Zeile 1** — eine von vier Strukturen: Beobachtung (gedrehter Alltagsmoment) · Statement („we do podcasts!") · Wortspiel/Setup (subtil, kein Kalauer) · Quote. Verboten als Hook: „Wir freuen uns…", „Heute zeigen wir euch…", „Hi Leute,".

**Aufbau.**
- Storytelling vor Produkt: erst Szene, dann Brand-Connect. „Wein um 11 wäre selbst für dein bestes Ich eine steile These." → dann der Likör. Nicht: „Schwarzes Gold ist der perfekte Brunch-Begleiter."
- CTA als echte Frage — oder gar keiner. „Wie trinkst du deinen Espresso Martini?" statt „Comment below ⬇️".
- Closer = Brand-Anker (URL, Adresse, Tag), nie Marketing-Schluss.
- **Ein Ziel pro Post:** schickt der Post Leute physisch wohin (Veedel, Regal), gehört keine URL dran. Produkt-/Story-Posts kriegen die URL.

**Zwei Varianten** pro Post, strukturell unterschiedlich: A kurz/spitz (~250 Z., Hook + Pointe + Closer), B szenisch/länger (~600 Z., Story-Hook + Mittelteil + sanfter Anker). Eigene Hooks, nicht Versionen voneinander.

**Hashtags** sparsam: Default 0–3, Event max 5, im ersten Kommentar. Nie eine Hashtag-Wand.

**Sub-Brand-Noten.**
- Schwarzes Gold: lakonisch-elegant, leicht 1920s-Bar. Verboten: perfekt, feinster, exquisit. Closer `schwarzes-gold.net`.
- as.if.spaces: einladend ohne pushy, leicht insider-y. Verboten: „innovative Räumlichkeiten", „unser Team".
- as.if.threads: lässig, design-bewusst. Verboten: limitiert, exclusive drop, must-have.
- as.if.radio: warm, präsent, „nicht allein". Verboten: algorithmisch, Hype-Sprech.

**Werkzeug:** operativ läuft Social über den `asif-social-post`-Skill (Voice-DNA, zwei Varianten, UGC-Bilder, Humanize-Check). Diese Sektion ist die Quelle, der Skill die Umsetzung.

---

## 13 · Tokens & Handoff

- **Tokens:** `tokens.json` (W3C Design Tokens) — Farben, Fonts, Spacing, Radien, Schatten, Typo-Skala, Motion. Speist CSS-Variablen, Figma-Variablen und Builds.
- **Logo:** natives HTML-Asset + SVG-Original (`/assets/logo/`).
- **Icons:** eigenes 24-px-SVG-Set (`/assets/icons/`), `currentColor`, active/inactive.
- **CI ziehen:** Live-Endpunkte `brand.as-if-records.com/tokens.json` und `/brand.md` (öffentlich, kein Login). Oder via `brand-ci`-Skill `emit -f css|tailwind|json`.
- **Templates:** Web Hero, App Player, Journal Cover, Booking Card, Event Poster, Product/Hangtag.

**Launch-Check:** Keine Bereichsfarbe eingeschlichen? Schreibweise korrekt (`as.if.x`, klein, Punkte)? Keine Bodoni in UI/klein? Kontrast jeder realen Textfläche geprüft? Stimme im richtigen Register, kein AI-Sprech? Social mit einem Ziel pro Post? Fokus/Hover/Active/Disabled da? Longform-Satzbreite ok? Icons aus dem eigenen Set? Motion ruhig und reduced-motion-fest?

---

*Maschinenlesbare Quellen: `tokens.json` · `brand.md` · `llms.txt`. Bereiche: as.if.radio, as.if.spaces, as.if.studio, as.if.spirits, as.if.threads, as.if.journal, Schwarzes Gold.*