Ava Ora Design System
Eine Marke. Ein System. Überall gleich.
Wortmarke, Farben, Schrift und jedes Bedienelement von Ava Ora an einem Ort. Alles hier wird live aus denselben Bausteinen gerendert wie die Plattform selbst — eine Änderung im System gilt sofort überall.
Wortmarke
Die Wortmarke steht immer allein, mit Schutzraum in Höhe des „A“ rundherum. Nie verzerren, einfärben oder mit Effekten versehen.
Haltung & Sprache
Editorial minimal: viel Raum, wenig Lärm. So klingen Oberfläche, E-Mails und Ava selbst.
Ruhig
Wir erklären, statt zu verkaufen. Kurze Sätze, keine Ausrufezeichen.
Präzise
Ein Begriff, eine Bedeutung. Was der Kunde sieht, benennen wir genau so.
Menschlich
Ava spricht auf Augenhöhe und rät nie das Geschlecht — im Zweifel neutral.
Ehrlich
Wir versprechen nur, was belegt ist. Entwürfe heißen Entwürfe.
Regeln
Was immer gilt — und was nie vorkommt.
Richtig · Feld und Button in einer Zeile sind exakt gleich hoch (40 px).
Falsch · Unterschiedliche Höhen nebeneinander oder eigene Höhen pro Seite.
Richtig · Kacheln liegen auf der Grundfläche und grenzen sich mit feinem Rahmen ab.
Falsch · Reinweiße Kacheln auf grauem Grund.
Richtig · Nur zwei Radien: 7 px für Bedienelemente, 12 px für Flächen.
Falsch · Großbuchstaben-Stile, Verläufe oder eigene Farbwerte im Code.
Farben & Radien
Genau drei Radien und feste Farbflächen. Klick auf eine Farbe kopiert den Wert.
Bedienelemente · 7 px
Buttons, Felder, Dropdowns, Filter, Menüeinträge
Flächen · 12 px
Listen, Tabellen, Karten, Dialoge, Menüs, Upload-Flächen
Rund · voll
Nur Schalter, Avatare, runde Icon-Buttons, Auswahlpunkte
Schrift
Eine Schrift: Archivo. Immer linksbündig, normale Schreibweise, keine Großbuchstaben-Stile.
Eingabefelder
Graue Fläche, ohne Rahmen, 7 px Radius, dezenter Fokus-Ring.
Bitte gültige E-Mail angeben.
Feld + Button
Der Prüfstein: Felder, Dropdowns und Buttons teilen sich eine Höhe — sie sitzen bündig in jeder Zeile.
Auswahl & Schalter
Schalter und Auswahlpunkte sind rund und tragen denselben Punkt; Reiter nutzen 7 px.
Schalter und Auswahl
Reiter
Listen-Toolbar
Suche links, Filter, Sortierung, Ansicht, Hauptaktion rechts — alles gleich hoch.
Tabellen & Listen
Rahmen 12 px, feste Spaltenbreiten, sortierbare Spaltenköpfe mit Pfeilen, lange Namen werden gekürzt.
Seitenleiste mit Ordnern
Dialoge & Menüs
Fenster und Menüs 12 px; Inhalte darin folgen den Feld- und Button-Regeln.
Auslöser
Statische Vorschau
Ziel bearbeiten
Was Ava erreichen soll.
Flächen & Kacheln
Alle Karten, Kacheln und Vorschauen 12 px — auf der Grundfläche, mit feinem Rahmen, nie reinweiß.
Gespräche
1.284
Leads
86
Credits
4.120
Bild-Datei
Video-Datei
Schrift-Datei
Dokument-Datei
Status & Tags
Status: feiner Rahmen mit farbigem Punkt (grün live, blau Gespräch läuft, bernstein offen, grau archiviert, rot Fehler).
Status
Badges
Symbole
Ein Set (Lucide), feste Bedeutung je Symbol. 16 px in Buttons und Feldern, 14 px in Tabellen, 24 px in Kacheln.
Navigation
Aktionen
Pfeile & Sortierung
Status & Sicherheit
Steuerung
Kanäle & Medien
Ansichten
Dateitypen
Größen
E-Mail-Vorlagen
Echte Vorlagen in drei Gerätebreiten: Desktop 600, Tablet 480, Smartphone 360.