Brand-Kit · lebendes Token-System

Robin

Du bist nicht allein.

Robin — lern dich verstehen

Alle Werte stammen aus src/design/tokens.json (Single Source). Richtung A: das Marken-System erbt die Ghibli-Cel+-Dualität der Charakterarbeit — painterly Welt, cleaner Charakter, warmes Licht, eine Palette.

01 · App-Design

Das App-Design-Kit — hier läuft alles zusammen

Die Marke lebt dort, wo sie hin will: in der App. Alle Screens, Components, Typografie und Motion der Living App als lebende Karten aus dem versionierten Kit-Bundle (Claude-Design-Projekt, GAF-361) — aus derselben Token-Quelle wie diese Seite. Die Kapitel darunter sind das Fundament, aus dem jede dieser Karten schöpft.

Welt / Heute

Gespräch

Insights

Alle Karten ansehen →24 Screens · 5 Foundations · 10 Components · 2 Motion

02 · Logo-System

Signet, Wortmarke, Herz

Das Fundament beginnt beim Zeichen: drei Elemente mit klar getrennten Rollen. Entschieden nach 15 Formstudien in drei Runden (GAF-322); Geometrie und Größen sind abgenommen und liegen als eine Quelle im Code —Logo.astro und Heart.astro, gespeist aus tokens.json.

SignetWird erkannt: App-Icon, Avatar, Favicon, Push-Badge. Steht allein — ohne Wortmarke.

WortmarkeWird gelesen: Fließtext, Header, Footer. Das i bleibt rot — aber ohne Herz.

HerzEmotionaler Akzent im Satz und im Claim. Nie als Ersatz für das Signet.

Signet in echten Größen

Die Geometrie ist auf die Kachel optimiert: Die Lücke zwischen Herz und Stamm beträgt 10 % der Zeichenhöhe. In der ursprünglichen Bühnen-Fassung waren es 19,4 % — dort zerfiel das Zeichen bei kleinen Größen in zwei Elemente.

16px

32px

48px

64px

96px

Das Herz: Proportion und Größen

Der Herz-Pfad füllt seine Zeichenfläche nur zu 0.544 der Höhe: Wer 1emsetzt, sieht optisch 0,54em. Deshalb sind die Tokens nach der optischen Größe benannt und tragen den umgerechneten Box-Wert — sonst korrigiert jede Stelle anders nach (vor dieser Skala: fünf Verwendungen, vier verschiedene Ad-hoc-Größen).

Token	optisch	Box	Anwendung
`--heart-xs`	12px	22.1px	Mindestgroesse (Kurator 2026-07-21); darunter verliert die obere Einkerbung ihre Kontur
`--heart-sm`	16px	29.4px	Inline-Akzent im Fliesstext
`--heart-md`	20px	36.8px	Claim, Buttons, Header
`--heart-lg`	28px	51.5px	Sektions-Akzent
`--heart-xl`	40px	73.6px	Hero, Finale

Optischer Ausgleich neben Versalien

Das Herz sitzt standardmäßig auf x-Höhe. Neben Großbuchstaben wirkt es dadurch rund ein Viertel zu klein — dort hebt caps die Box auf 1,31em, sodass es Versalhöhe erreicht.

ohne AusgleichGAF DEVLOG

mit caps — so ist es gesetztGAF DEVLOG

Schutzraum & Mindestgrößen

Schutzraum: rundum mindestens die halbe Signet-Kantenlänge freihalten — kein Text, keine Kante, kein zweites Logo.
Signet: nicht unter 16 px Kantenlänge einsetzen (geprüft an Browser-Tab und App-Icon).
Herz: nicht unter 12px optischer Höhe.
Wortmarke: nur proportional skalieren; Wortabstände nie manuell verändern.

So nicht

Herz als App-IconGenau die Verwechslung, die das Signet auflöst — das nackte Herz war vorher das Favicon.

Herz in der WortmarkeDas i bleibt rot, aber ohne Herz. Das Herz gehört dem Signet.

Fremde HerzformenKeine Emoji-Herzen, keine Varianten — ausschließlich die Favicon-Form.

Herz unter 12pxDarunter verliert die obere Einkerbung ihre Kontur, das Zeichen wird zum Klecks.

Signet verzerren oder drehenProportion und Achse sind fix — nur proportional skalieren.

i-Farbe ersetzenDas rote i ist der Kern der Marke, kein austauschbarer Akzent.

Dateien

Alle Assets stammen aus derselben Geometrie (scripts/build-brand-assets.mjs). Die Wortmarke liegt in Pfade konvertiert vor — beim Empfänger fehlt Fredoka.

Signetfreigestellt, SVG Signet auf KachelApp-Icon-Look, SVG Signet 512PNG, transparent Wortmarkein Pfade konvertiert, SVG Wortmarke 1200PNG HerzSVG

03 · Farben

Palette

Das Zeichen trägt ein Rot — die Welt dahinter eine ganze Palette: warme Flächen, staubige Naturtöne, drei Pastelle für Körper, Geist und Seele.

Marke

heart#D34F4F--heartSignatur / Marken-Rot (Herz, Claim 'Du bist nicht allein.')

heart-light#FF8A8A--heart-lighthelles Herz (Finale)

Flächen

cream#F6F1E7--creamSeiten-Hintergrund (warm)

paper#FDFBF6--paperKarten-/Panel-Fläche

warm#EAE2D3--surface-warmwarmer Karten-BG (Portrait-Cover)

Text

ink#2C3440--inkPrimärtext / dunkel

ink-soft#5A6474--ink-softSekundärtext

Akzente

gold#E3B34C--goldGold (Pulse/Akzent)

teal#5F7F78--tealTeal (Links/Meta)

rose#C98A7D--roseRose

sage#A8B89A--sageSage-Grün

dusty#7E93AC--dustygedämpftes Blaugrau

Dimensionen · Mind/Body/Soul

mind#C9D8EA--dim-mind

body#CFDCC4--dim-body

soul#E4D3EE--dim-soul

Charakter

eye#3D4E66--char-eyeLea Identität v3 — dunkelblauer Augen-Anker (kühler Grau-Stich)

04 · Robin & Welt

Robin & Welt

In diesen Farben leben eine Figur und eine Welt. Quelle bleibt die Asset-Bibliothek (docs/05-Design/asset-library/, character-ref 1903157, Identität v3) — hier das Schaufenster.