Markenleitfaden
Wie xtra audio aussieht, klingt und sich anfühlt - vom Logo über das App-Icon bis zur letzten Zeile Text. Die Grundlage für App, Website, Desktop, Messe und alles, was noch kommt.
Marke
xtra audio ist Radio-Playout und Produktion in einem: Planen, Senden, Abhören, Aufnehmen und Schneiden - im Browser, als Desktop-App und auf iPhone und iPad.
Die Marke kommt aus dem Studio bei Nacht: dunkle Flächen, ruhiges Licht, ein grünes Signal, wenn etwas läuft. Sie wirkt wie ein gutes Werkzeug - präzise, zurückhaltend, verlässlich - und lässt dem Programm den Vortritt.
Präzise
Sekundengenau, messbar, nichts dem Zufall überlassen. Werte haben Einheiten, Abstände haben Gründe.
Ruhig
Dunkel, reduziert, kein Lärm. Farbe ist ein Signal und keine Dekoration.
Professionell
Gebaut für Leute, die jeden Tag senden. Kein Spielzeug, aber auch kein Konzernsoftware-Grau.
| Leitsatz | Die Zukunft des Radios |
|---|---|
| Versprechen | Optimiert für Geschwindigkeit, designt für Profis, überall verfügbar |
| Herkunft | Cloud Playout, made in Germany |
| xtra audio ist | direkt, technisch kompetent, gelassen, freundlich per du |
| xtra audio ist nicht | laut, verspielt, werblich, kumpelhaft, übertrieben technisch |
Name und Schreibweise
Der Name wird immer klein geschrieben - wie im Logo. Im Fließtext mit Leerzeichen, die Domain nur als Adresse.
| Form | Wann | Status |
|---|---|---|
| xtra audio | Der Name in jedem Text, jeder Überschrift, jedem Store-Eintrag | richtig |
| xtra | Kurzform, wenn der Zusammenhang klar ist - App-Name unter dem Icon, Chat, zweite Nennung | richtig |
| xtra audio GmbH | Firma: Impressum, Verträge, Rechnungen | richtig |
| xtra.audio | Nur als Adresse (app.xtra.audio, technik@xtra.audio) - nie als Name | nur Domain |
| Xtra Audio, XTRA, XtraAudio, xtraaudio, Extra Audio | Nie | falsch |
Am Satzanfang bleibt es klein: "xtra audio plant deine Sendung." Wenn das stört, den Satz umstellen.
Logo
Drei Formen, eine Quelle. Alle stammen aus demselben Vektor-Master und werden nie nachgebaut, nachgezeichnet oder neu gesetzt.
Logo - "xtra" und "AUDIO". Das Hauptlogo: Website, Messe, Druck, Präsentationen, überall mit Platz.
Wortmarke - "xtra" allein. Wenn es eng wird (App-Kopfzeile auf dem Handy, App-Icon) oder AUDIO unter 6 px fallen würde.
Bildzeichen - das "x". Nur unter 24 px: Favicon in 16 px, minimale Live Activity. Nie als Ersatz für das Logo, wo Platz ist.
Konstruktion
Die Wortmarke ist gezeichnet, keine Schrift. Alle Maße in Logo-Einheiten; die Grundeinheit ist die x-Höhe (x = 237,5).
| Maß | Einheiten | relativ | Bedeutung |
|---|---|---|---|
| x-Höhe | 237,5 | 1 x | Grundeinheit aller Abstände |
| Oberlänge "t" | 99,6 | 0,42 x | Das einzige Element über der x-Höhe - wichtig für das optische Zentrieren |
| Strichstärke | ≈ 45 | 0,19 x | Stämme von t, r und a |
| Versalhöhe AUDIO | 87,9 | 0,37 x | Oberkante bündig mit der x-Höhe von "xtra" |
| Abstand a - A | 60,3 | 0,25 x | Nie verändern, nie AUDIO lösen |
| Seitenverhältnis Logo | 1240 × 342 | 3,63 : 1 | |
| Seitenverhältnis Wortmarke | 782 × 342 | 2,29 : 1 |
Schutzraum
Rund um Logo, Wortmarke und Bildzeichen bleibt mindestens die halbe x-Höhe frei (0,5 x = 119 Einheiten, gut ein Drittel der Logohöhe). Nichts ragt hinein - kein Text, keine Kante, kein Button.
Mindestgrößen
| Form | digital | Druck | Grund |
|---|---|---|---|
| Logo | 88 px breit (24 px hoch) | 25 mm breit | AUDIO bleibt über 6 px bzw. 1,8 mm lesbar |
| Wortmarke | 32 px breit | 10 mm breit | Darunter laufen die Stämme zu |
| App-Icon | 32 px | 8 mm | Darunter das Bildzeichen-Icon |
| Bildzeichen | 12 px | 4 mm | Nur unter 24 px verwenden |
Logo, Wortmarke und Bildzeichen in ihrer Mindestgröße, 1:1 auf einem Standard-Bildschirm.
Farbe und Hintergrund
Das Logo ist einfarbig. Weiß auf Dunkel ist der Normalfall, Schwarz auf Hell die Ausnahme. Ein grünes Logo gibt es nicht - Grün ist das Signal der Oberfläche, nicht der Absender.
Standard - Weiß #FFFFFF auf Base 950 bis 800
Hell - Schwarz #0D0D0F auf Weiß oder Base 50
Auf Textur oder Foto - nur Weiß, und nur wo der Grund ruhig und dunkel genug ist (mindestens 7:1)
Nicht erlaubt
Verzerren
Konturen oder Striche
Grün oder andere Farben
Drehen oder kippen
AUDIO versetzen oder lösen
Schatten, Glühen, Verläufe
Zu heller oder unruhiger Grund
Mit einer Schrift nachsetzen
App-Icon und Iconform
Eine Form für alles, was wir selbst abrunden. Sie ist nicht gewählt, sondern gemessen: die Form, die Apple seit iOS und macOS 26 jedem App-Icon gibt.
| Form | Ecke (45°-Einzug) | |
|---|---|---|
| xtra Iconform Radius 26 %, Glättung 64 % | 7,62 % | gilt |
| Apple iOS/macOS 26, aus Icon Composer gemessen | 7,62 % | Abweichung 0,04 % der Fläche |
| Klassisches iOS 7 bis 18 (22,37 %) | 6,55 % | veraltet |
| Bisherige Landingpage-Favicons | 7,03 % | abgelöst |
| Bisheriges App-Favicon, Electron-Icon, Affinity-Quadrat | 4,2 bis 4,3 % | abgelöst |
Ermittelt aus der Maske, die Apples Icon Composer für unser Icon rendert, gegen ein Modell mit kontinuierlichen Ecken (Radius und Glättung) angepasst. Grau: die neue Form. Linien: die bisherigen Rundungen.
Warum diese Form
- Sie ist die vertrauteste Form überhaupt. Jedes iPhone und jeder Mac zeigt sie hundertfach. Ein Favicon oder Badge in genau dieser Form liest sich sofort als App - und sieht neben unserem echten App-Icon identisch aus.
- Kontinuierliche Ecken statt Kreisbogen. Ein einfacher Radius hat dort einen sichtbaren Knick, wo die Kante in den Bogen übergeht. Die Glättung lässt die Krümmung weich anlaufen - das wirkt ruhiger und moderner.
- Etwas runder als früher. Apple hat mit iOS 26 die Ecken vergrößert (26 % statt 22,37 %). Wir folgen dem, statt eine Zwischenform zu erfinden.
Aufbau
| Regel | Wert |
|---|---|
| Raster | 1024 × 1024 |
| Fläche | Base 900 #0D0D0F, flach - Liquid Glass nur im echten App-Icon |
| Inhalt | Wortmarke weiß |
| Breite der Wortmarke | 76,4 % (782 px) |
| Horizontal | exakt mittig |
| Vertikal | Logo-Box 1,9 % über der Mitte (optische Mitte) |
| Avatar-Variante | Wortmarke 58 %, Vollfläche |
| Unter 24 px | Bildzeichen "x", 50 % breit, geometrisch mittig |
Die optische Mitte ist gemessen: Das "t" ragt nach oben, nach unten ragt nichts. Mittig gesetzt wirkt "xtra" zu tief, nach der x-Höhe zentriert zu hoch. Bei 1,9 % liegen Rand und visuelles Gewicht beide im Bereich, den das Auge als Mitte liest (1 bis 3 % über der geometrischen Mitte).
Wo welche Datei
Wo wir selbst abrunden, liefern wir die Iconform. Wo die Plattform ihre eigene Maske anlegt, liefern wir die Vollfläche - sonst entstehen doppelte Ecken oder ein Rand im Rand. Das Ergebnis sieht überall gleich aus.
| Ort | Datei | Wer rundet |
|---|---|---|
| iPhone, iPad, Mac (App) | xtra-audio.icon (Liquid Glass) | Apple - Iconform |
| App Store | xtra-audio-icon-quadrat-1024px.png | Apple - Iconform |
| Browser-Tab, Lesezeichen | favicon.ico, favicon.svg | wir - Iconform |
| iOS-Homescreen-Lesezeichen, Safari | apple-touch-icon.png (Vollfläche) | Apple - Iconform |
| Android, Web-App-Manifest | icon-192.png, icon-512.png | wir - Iconform |
| Google Play (künftig) | xtra-audio-icon-quadrat-1024px.png auf 512 px | Google - 20 % Radius |
| Instagram, LinkedIn, YouTube, X, Google-Profil | xtra-audio-avatar-*.png | Plattform - Kreis |
| Präsentation, Dokument, E-Mail, Website | xtra-audio-icon-*.png / .svg | wir - Iconform |
Liquid Glass
Das echte App-Icon für iOS, iPadOS und macOS wird in Apples Icon Composer gebaut. Die Quelle liegt im Paket (xtra-audio.icon); das Glas, die Lichtkante und die Tönung erzeugt das System. Nie als Bild nachbauen.
Standard
Dunkel
Klar, hell
Klar, dunkel| Einstellung (Icon Composer) | Wert |
|---|---|
| Hintergrund | System Dark, automatischer Grauverlauf |
| Ebene | logo.svg (Wortmarke weiß), Skalierung 1 |
| Position | x 229,5 pt, y −19,35 pt (optische Mitte) |
| Gruppe | Transluzenz 50 %, Schatten neutral 50 % |
Kleine Größen
Unter 24 px wird "xtra" zu Brei - dort übernimmt das Bildzeichen. Das Favicon enthält deshalb 16 px mit "x" und ab 32 px die Wortmarke.
xtra audio - Studioxtra audio - Studio16 px, 1:1 - hell und dunkel
16
3248
64128Farbe
Fast alles ist neutral und dunkel. Grün ist ein Signal: Es sagt "läuft", "aktiv", "hier geht es weiter" - und verliert seine Wirkung, wenn es Fläche füllt.
Neutrale
Ein kühles Grau mit einem Hauch Blau - Base 50 bis 950. Im Hellmodus kehrt sich die Skala um: Base 900 wird hell, Base 50 dunkel. Rollen bleiben, Werte tauschen.
| Rolle | Dunkel | Hell |
|---|---|---|
| Seite | Base 950 #060607 | #FAFAFA |
| Fläche | Base 900 #0D0D0F | #F4F4F5 |
| Erhöht (Karte, Menü) | Base 800 #131316 | #E4E4E7 |
| Linie | Weiß 6 % | Schwarz 10 % |
| Text | Weiß #FFFFFF | #141417 |
| Text, zweitrangig (und nie dunkler) | Base 400 #A0A0A7 | #43434A |
Status
Verhältnis
Grün markiert höchstens eine Sache pro Ansicht als die wichtigste. Status-Rot nur, wenn wirklich etwas auf Sendung oder kaputt ist.
Kontrast
Text braucht 4,5 : 1, große Schrift ab 24 px und Symbole 3 : 1 (WCAG 2.2). Werte live aus den Hex-Codes berechnet.
| Paar | Kontrast | Text | Regel |
|---|
Typografie
Zwei Schriften mit klaren Rollen: Satoshi spricht, Inter arbeitet.
Satoshi
Display. Überschriften im Marketing: Website, Präsentation, Messe, Social. Gewicht 700 (Headlines) und 500 (Zwischentitel), Laufweite −0,02 bis −0,04 em. Nie in der App-Oberfläche.
fontshare.com/fonts/satoshi · Fontshare-Lizenz
Inter
Alles andere: App, Fließtext, Tabellen, Beschriftungen, Live Activity. Immer Medium (500) - in der App gibt es kein Semibold, kein Bold, kein Regular.
rsms.me/inter · SIL Open Font License · im Paket
Skala
Große Terz (1,25), wie in der App (assets/css/app.css).
- Keine Versalien, keine Laufweite in der Oberfläche. AUDIO im Logo ist Teil der Zeichnung, kein Vorbild.
- Ziffern tabellarisch (
tabular-nums) überall, wo Zeiten, Dauern und Zähler stehen - sonst springen Countdowns. - Überschriften ausgeglichen umbrechen (
text-wrap: balance), Fließtext höchstens 65 bis 70 Zeichen breit. - Bindestrich statt Gedankenstrich: " - " mit Leerzeichen, nie "–" oder "—".
Bildsprache
Halftone - die Signatur
Ein Punktraster, dessen Punkte diagonalen Bändern folgen - wie gedrucktes Radiopapier und wie ein Signal. Auf der Website als Bild, in der App live gezeichnet und langsam fließend.
| Parameter | Wert |
|---|---|
| Raster | 7 bis 8 px (Bildschirm), gerade, nicht gedreht |
| Punkte | Weiß 17 % auf Base 900 (Hellmodus: Schwarz 12 %) |
| Form | organische Bänder von links oben nach rechts unten, hoher Kontrast (leere und volle Zonen) |
| Bewegung | kaum merkliches Fließen; bei "Bewegung reduzieren" still |
| Einsatz | Hintergrund von Hero, Willkommensscreen, Messewand - läuft vor Text immer aus (Maske) |
Produkt
Screenshots zeigen das echte Produkt im Dunkelmodus mit echten Daten (Testprojekt "xtra radio"), in einem schlichten Fensterrahmen. Keine erfundene Oberfläche, keine hellen Screenshots auf dunklem Grund.
Studio - Playout, Playlist, Medien
Multitrack - Schnitt und Voicetracks
Fotografie
Echte Technik, echte Orte: Pult, Kopfhörer, Studio, Messe. Eher dunkel, kühles Licht, wenig Farbe im Bild - dann trägt das Grün der Oberfläche. Keine Stockfotos mit Mikrofon-Klischees.
Messe - Logo weiß auf schwarzem Tresen, viel Schutzraum
Technik - das Werkzeug im Mittelpunkt
Ikonografie
Linien-Icons auf einem 24er-Raster mit 2 px Strich und runden Enden - der eigene Satz (base:) zuerst, Lucide als Ergänzung. In nativen iOS-Teilen (Live Activity) SF Symbols.
- Größen 16 und 20 px in der Oberfläche, Höhe und Breite immer beide gesetzt.
- Farbe nie dunkler als Base 400 - im Ruhezustand Base 400, aktiv Weiß oder Grün.
- Menüeinträge sind reiner Text, ohne Icon davor. Ausnahme: Zustandsanzeigen wie ein Haken.
- Keine Emojis als Symbole, keine gefüllten und gestrichenen Icons gemischt.
Oberfläche
Die Details, die aus Farbe und Schrift ein Produkt machen. Die volle Regel steht im Code; hier das, was jede Gestaltung übernimmt.
| Thema | Regel |
|---|---|
| Radien | 6 px Bedienelemente · 8 px Karten · 12 px Panels · 14 px große mobile Buttons · rund für Pillen. Die Iconform gilt nur für Icons. |
| Linien | 1 px, Weiß 6 % (dunkel) bzw. Schwarz 10 % (hell). Keine Schatten auf dunklem Grund. |
| Raster | 4-px-Schritte; Seitenrand mindestens 16 px; Touch-Ziele mindestens 44 px |
| Bewegung | cubic-bezier(0.16, 1, 0.3, 1) · 150 ms Menüs, Dialoge · 400 ms Einblenden |
| Haptik (App) | sparsam und mit Bedeutung: Aufnehmen, Ablegen, Umschalten, Auf Sendung (die eine schwere), Erfolg, Warnung, Hallo |
| Dunkel und hell | Dunkel ist Standard. Hell ist gleichwertig gestaltet, nie einfach invertiert. |
Sprache
Wie eine erfahrene Kollegin im Studio: per du, knapp, ruhig, sagt was passiert.
| So | Nicht so |
|---|---|
| Speichern | Änderungen jetzt übernehmen und abspeichern |
| Verbindung verloren - wir versuchen es weiter | Ups! Da ist leider etwas schiefgelaufen :( |
| Noch keine Playlists | Noch keine Playlists vorhanden. |
| Das Mikrofon ist im Hintergrund stumm | Fehler 0x3F3: AudioSession interrupted |
| Voicetrack aufnehmen | Sprachspur aufnehmen |
- Du, nie Sie. Aktiv formuliert, Buttons sagen genau, was passiert.
- Kein Gedankenstrich - Bindestrich mit Leerzeichen.
- Leere Zustände ohne Punkt am Ende - Titel, Beschreibung und Aktion.
- Voicetrack und Artist bleiben auch im Deutschen englisch.
- Jeden Text gibt es auf Deutsch und Englisch; Fehler sagen, was los ist und was man tun kann - ohne Entschuldigung.
Anwendungen
auf deinem iPhone Anmelden
App-Willkommen - Halftone läuft vor dem Text aus, eine grüne Zeile, eine weiße Aktion
Live Activity - Inter Medium, Statusfarbe statt Dekoration. Die grüne Wortmarke hier ist eine offene Abweichung (siehe Bestandsaufnahme).
Social-Vorschau (1200 × 630) - Base 950, Satoshi, Logo oben links mit Schutzraum
Sendeplanung · xtra audio GmbH xtra.audio
E-Mail-Signatur - Logo schwarz als PNG in doppelter Größe, 96 px breit
Bestandsaufnahme
Was beim Sichten von App, Website, Desktop und Logo-Ordner aufgefallen ist (24.09.2026). Noch nicht umgesetzt - das ist die Liste für die Umstellung.
- Nuxt-Standardlogo als Favicon -
public/favicon.icoder App undfavicon.icoder Landingpage zeigen das grüne Berg-Logo von Nuxt. - Altes Logo -
public/icon.pngder App ist noch das grüne Kreis-Zeichen aus der Zeit vor xtra. - Vier verschiedene Icon-Rundungen - App-Favicon, Electron-Icon und Affinity-Quadrat mit 4,2 bis 4,3 %, Landingpage mit 7,0 %; "xtra" überall unterschiedlich groß und hoch.
- Kaputtes Logo -
logo/xtra logo square black rounded.svgträgt schwarze Konturen (0,47 px, durch eine verzerrte Transformation ungleichmäßig), die an den Buchstaben fressen. - Landingpage-Icons mit grauen Ecken -
apple-touch-icon.png,icon-192.png,icon-512.pnghaben statt Transparenz einen grauen Rand. - Logo-Export mit Leerraum -
logo/xtra audio logo.svghat links rund 40 % leere Fläche im Zeichenbereich. - Desktop-Icon nicht optisch zentriert -
electron/build/AppIcon.iconsteht noch bei y −45,3 statt −19,35 wie das iOS-Icon. - Grüne Wortmarke in der Live Activity - widerspricht "kein grünes Logo"; auf Weiß umstellen, den Status trägt schon der Punkt.
- Grün als Text im Hellmodus - #33CB93 auf Hell hat 2,1 : 1. Stattdessen xtra Green Deep #207E5B; die Live Activity nutzt noch #12875C (4,3 : 1 auf #FAFAFA).
- Weiß auf Grün - der primäre Button im Hellmodus setzt weiße Schrift auf #33CB93 (2,1 : 1). Dunkle Schrift verwenden (9,3 : 1).
- Schreibweise - im Onboarding steht "Willkommen bei xtra.audio"; richtig ist "xtra audio".
Downloads
Alles in einem Paket - erzeugt aus einem einzigen Logo-Master, nichts von Hand. Neu erzeugen: npm run build im Markenordner.
