Brand Guidelines

Markenrichtlinien für KlangKlex — die Hörspiel-Werkstatt für Familien. Verwende dieses Dokument als Referenz für externe Design-Tools (z.B. Canva Brand Kit).

Marke

Markenname
KlangKlex

Immer als ein Wort geschrieben mit großem K und K.
Nicht: Klang Klex, klangklex, KLANGKLEX, Klang-Klex.

Claim
Eure Hörspiel-Werkstatt

Verwendet als Untertitel, Tagline oder H1 auf der Startseite. Sprache: Deutsch (de-DE), ihr/eure-Form (familiär, inklusiv).

Markenpersönlichkeit
Warm — Papier- und Holztöne, handgemachte Anmutung
Spielerisch — Runde Ecken, Sticker-Elemente, lebhafte Akzente
Familienfreundlich — Einfache Sprache, keine Fachbegriffe
Kreativ — Werkstatt-Metapher, basteln, gestalten, mischen

Farbpalette

Primärfarbe

Primary / Coral
#DD5A36
CTA-Buttons, Akzente, Highlight
Primary Soft
#F4A07F
Hover, sekundäre Flächen
Primary Ink
#FFFFFF
Text auf Primary-Hintergrund

Akzentfarben

Sage / Grün
#4E7B5A
Erfolg, Bestätigung, Natur
Mustard / Gold
#D49B3A
Warnung, Premium, Wärme
Berry / Rosa
#B84C6D
Spielerisch, Kinderthema

Light Mode

Background
#F8EDD6
Seitenhintergrund
Background Soft
#FBF4E1
Sidebar, dezente Flächen
Surface
#FFFBF1
Karten, Eingabefelder
Surface 2
#FFF7E6
Hover-States
Ink
#2A1F14
Primärer Text
Ink Soft
#6A5A47
Sekundärer Text
Ink Faint
#A09180
Labels, Captions
Line
#E7D8B7
Trennlinien, Borders

Dark Mode

Background
#1B1610
Seitenhintergrund (Dark)
Background Soft
#221C14
Sidebar (Dark)
Surface
#281F16
Karten (Dark)
Surface 2
#322619
Hover-States (Dark)
Ink
#F8EDD6
Primärer Text (Dark)
Ink Soft
#C9B89A
Sekundärer Text (Dark)
Ink Faint
#8A7B66
Labels (Dark)
Line
#3B2E1F
Trennlinien (Dark)

Verläufe

Werden für Story-Cover-Hintergründe verwendet, wenn kein eigenes Bild vorhanden ist.

Coral Cover
linear-gradient(135deg, #F4A07F 0%, #DD5A36 100%)
Sage Cover
linear-gradient(135deg, #88B095 0%, #4E7B5A 100%)
Mustard Cover
linear-gradient(135deg, #ECC677 0%, #B7842D 100%)

Typografie

Schrift-Sets (wählbar pro Familie)
Storybook Standard
Display: Caprasimo (400) — rund, verspielt, Kinderbuch-Charakter
Body: Nunito (400–800) — geometrisch, gut lesbar, weiche Enden
Editorial
Display: Newsreader (400–700, inkl. Italic) — klassisch, literarisch
Body: Plus Jakarta Sans (400–700) — modern, clean
Friendly
Display: Bricolage Grotesque (400–700) — expressiv, geometrisch
Body: Nunito (400–800)
Monospace
JetBrains Mono
Gewichte 400 + 500 — für technische Werte, Codes, Preise
Typografie-Skala
Hörspiel-Werkstatt
H1 Hero — clamp(36px, 5vw, 56px) / Display Font
Abschnittstitel
H2 Section — 32px / Display Font
Kartenüberschrift
H3 Card — 24px / Body Font 700
Fließtext — Erstellt Hörspiele als Familie, mit eigenen Stimmen und Klang-Geschichten.
Body — 15px / line-height 1.55 / Body Font 400
Sekundärer Text, Beschreibungen, Metadaten
Small — 13px / ink-soft
LABEL / OVERLINE
Label — 11px / 700 / uppercase / letter-spacing .08em

Buttons

Form: Vollständig abgerundet (border-radius: 999px), Padding 11px 18px.

Primary: Background #DD5A36, weiße Schrift. Hover hebt leicht an (+translateY) mit Coral-Schatten.

Ghost: Transparent mit 1px Border (--line). Hover füllt mit Surface-Farbe.

Soft: Surface-Background mit Border. Für sekundäre Aktionen.

Quiet: Kein Border, reduzierte Farbe. Für tertiäre/unterstützende Aktionen.

Chips & Tags

Default ChipActive ChipCoralSageMustardBerry

Vollrund (999px), Padding 5px 10px, 12.5px Schrift, 600 Gewicht.

Die Tone-Varianten haben jeweils eigene Light- und Dark-Mode-Werte (siehe CSS).

Chip-Farben (Light Mode)
Aa
Coral
BG #FEE5DC / Text #883319
Aa
Sage
BG #DEEBE0 / Text #2E5A3A
Aa
Mustard
BG #F6E6BE / Text #735013
Aa
Berry
BG #F4D9E2 / Text #6E2741

Karten

Standard Card

Background: Surface (#FFFBF1)
Border: 1px solid Line (#E7D8B7)
Radius: 22px (--radius-lg)
Shadow: shadow-sm

Beliebt
Highlighted Card

Border: 2px solid Primary
Für hervorgehobene Tarife o.ä.
Mit Pill-Badge oben.

Spacing & Radii

Spacing Tokens
Gutter: 24px (compact: 16px, comfy: 32px)
Pad: 28px (compact: 18px, comfy: 36px)
Base font: 15px ± size-step
Border Radii
10pxKleine Elemente
16pxInputs, Buttons
22pxKarten
28pxModals
999pxChips, Pill-Buttons

Schatten

shadow-sm
Karten, ruhende Elemente
0 1px 0 rgba(42,31,20,.04), 0 2px 6px rgba(42,31,20,.05)
shadow-md
Dropdowns, Sticker
0 1px 0 rgba(42,31,20,.04), 0 10px 30px -10px rgba(42,31,20,.18)
shadow-lg
Modals, Overlays
0 1px 0 rgba(42,31,20,.05), 0 28px 60px -20px rgba(42,31,20,.28)

Tonalität & Sprache

Sprache: Deutsch (de-DE). Alle UI-Texte, Buttons, Fehlermeldungen, Beschreibungen.
Anrede: Ihr/Eure (familiär, inklusiv) — nicht Sie, nicht Du. Beispiel: „Erstellt eure erste Geschichte“ statt „Erstelle deine Geschichte“.
Ton: Warm, einladend, unkompliziert. Werkstatt-Metapher: „basteln“, „gestalten“, „mischen“ statt „konfigurieren“, „deployen“, „erstellen“.
Fehlertexte: Empathisch, lösungsorientiert. „Da hat etwas nicht geklappt — versucht es nochmal.“ statt „Error 500“.
Emojis: Sparsam in UI. Erlaubt in Hero-Abschnitten und Feature-Cards. Bevorzugt: 🎙 🪄 🎧 🎵 📦 ✨ ✓

Don'ts

  • Keine scharfen Ecken (border-radius: 0) — alles ist abgerundet
  • Kein reines Schwarz (#000) oder reines Weiß (#FFF) als Hintergrund — immer warme Töne
  • Kein Englisch in der Benutzeroberfläche
  • Keine technischen Begriffe (API, Token, Rendering) in nutzergerichteten Texten
  • Logo nicht drehen, verzerren oder mit Effekten versehen
  • Primary-Farbe (Coral) nicht für Fehler verwenden — dafür gibt es kein separates Rot, Fehlerhinweise nutzen die Primary-Farbe gedämpft
  • Keine Stockfotos — Illustrationen oder generierte Cover bevorzugen
  • Nicht mehr als 2 Akzentfarben pro Ansicht kombinieren

Quick-Reference für Brand Kit Tools

Kopiervorlage für Canva Brand Kit, Figma Variables oder andere Design-Tools:

MARKENNAME: KlangKlex CLAIM: Eure Hörspiel-Werkstatt SPRACHE: Deutsch (de-DE) ─── PRIMÄRFARBEN ─── Primary: #DD5A36 (Coral) Primary Soft: #F4A07F On Primary: #FFFFFF ─── AKZENTFARBEN ─── Sage: #4E7B5A (Grün) Mustard: #D49B3A (Gold) Berry: #B84C6D (Rosa) ─── LIGHT MODE ─── Background: #F8EDD6 Surface: #FFFBF1 Text Primary: #2A1F14 Text Secondary: #6A5A47 Text Tertiary: #A09180 Border: #E7D8B7 ─── DARK MODE ─── Background: #1B1610 Surface: #281F16 Text Primary: #F8EDD6 Text Secondary: #C9B89A Text Tertiary: #8A7B66 Border: #3B2E1F ─── FONTS (Google Fonts) ─── Display: Caprasimo 400 Body: Nunito 400/500/600/700/800 Alt Display: Newsreader 400-700, Bricolage Grotesque 400-700 Alt Body: Plus Jakarta Sans 400-700 Mono: JetBrains Mono 400/500 ─── RADII ─── Small: 10px Default: 16px Large: 22px XL: 28px Pill: 999px ─── VERLÄUFE (Cover) ─── Coral: linear-gradient(135deg, #F4A07F, #DD5A36) Sage: linear-gradient(135deg, #88B095, #4E7B5A) Mustard: linear-gradient(135deg, #ECC677, #B7842D)