From 9cb7ce9555302e4e44bc54b71a71f6762444e8ad Mon Sep 17 00:00:00 2001 From: Ferdinand Urban Date: Tue, 29 Sep 2026 11:37:53 +0000 Subject: [PATCH] App nach dem tradeo Design-System gestalten MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Kopfzeile und primäre Aktionen in tradeo Blue, Poppins für Titel, Inter für UI und Text, 8-px-Raster, Abschnitte durch Weißraum statt Kästen, keine Symbole als Icon-Ersatz. Grautöne, Statusfarben, Radius und Schriftgrößen legt das Design-System 0.1 noch nicht fest; sie stehen als vorläufige, aus tradeo Blue abgeleitete Werte gesammelt in styles.css. Co-Authored-By: Claude Opus 5.5 (1M context) --- CLAUDE.md | 3 + docs/tradeo-design-system.md | 734 +++++++++++++++++++++++++++++++++++ index.html | 2 +- src/ProjectView.jsx | 2 +- src/VoiceOver.jsx | 2 +- src/styles.css | 672 ++++++++++++++++++-------------- 6 files changed, 1118 insertions(+), 297 deletions(-) create mode 100644 docs/tradeo-design-system.md diff --git a/CLAUDE.md b/CLAUDE.md index 20d6552..d8b874d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -27,3 +27,6 @@ Wofür dieses Projekt gut ist, und was jemand wissen muss, der hier weiterarbeit - Wenig Abhängigkeiten — was Browser und Node schon können, reicht meistens - Semantisches HTML, mobil zuerst, bedienbar per Tastatur, ausreichender Kontrast - Konfiguration über Umgebungsvariablen; keine Zugangsdaten im Quelltext +- Gestaltung nach dem tradeo Design-System in `docs/tradeo-design-system.md`: keine + eigenen Farben, Schriften oder Icons erfinden. Was dort noch offen ist, steht als + vorläufiger Wert im Block „Offene Designentscheidungen“ in `src/styles.css`. diff --git a/docs/tradeo-design-system.md b/docs/tradeo-design-system.md new file mode 100644 index 0000000..986ee69 --- /dev/null +++ b/docs/tradeo-design-system.md @@ -0,0 +1,734 @@ +# tradeo Corporate Design System +**Version:** 0.1 — Arbeitsstand +**Zweck:** Einheitliche visuelle Referenz für Mitarbeitende, Designer, Entwickler und KI/LLM-Systeme +**Geltungsbereich:** Primär interne Kommunikation; externe Nutzung nur vereinzelt + +--- + +## 0. Grundsatz + +Dieses Dokument ist kein Inspirationskatalog, sondern ein verbindliches **Design-System**. + +Neue Gestaltungen werden nicht frei erfunden. Sie werden ausschließlich aus den hier definierten bzw. aus bestehenden tradeo-Komponenten zusammengesetzt. + +**Leitsatz:** +> Bestehende Komponenten kombinieren — keine neue visuelle Sprache erfinden. + +Wenn eine benötigte Komponente noch nicht definiert ist, wird sie zunächst in das Design-System aufgenommen und erst danach produktiv verwendet. + +--- + +# 1. Markencharakter + +tradeo soll visuell wirken als: + +- technisch +- reduziert +- hochwertig +- freundlich +- minimalistisch +- modern +- professionell +- ruhig +- funktional + +## 1.1 Gestaltungsprinzipien + +### 1. Klarheit vor Dekoration +Jedes Element braucht einen funktionalen Grund. Dekoration ohne Informations- oder Orientierungsfunktion wird vermieden. + +### 2. Funktion vor Spielerei +Lesbarkeit, Orientierung und Verständlichkeit haben Vorrang vor visueller Originalität. + +### 3. Ruhe statt visueller Lautstärke +Wenige Farben, klare Hierarchien, großzügige Abstände und kontrollierte Kontraste. + +### 4. Professionell, aber nicht kühl +Die Gestaltung soll technisch und präzise sein, gleichzeitig aber zugänglich und freundlich wirken. + +### 5. Einheitlichkeit vor Einzelkreativität +Ein neues Medium soll eindeutig als Teil von tradeo erkennbar sein, auch wenn kein Logo sichtbar ist. + +--- + +# 2. Logo + +## 2.1 Primärlogo + +Das bestehende tradeo-Logo bleibt unverändert. + +**Erlaubt:** +- Originaldarstellung +- weiße Wortmarke auf tradeo-Blau +- vorhandene, bereits eingesetzte Logo-Varianten + +**Nicht erlaubt:** +- Verzerren +- Strecken +- Stauchen +- Drehen +- Umfärben außerhalb bestehender Varianten +- Schatten hinzufügen +- Konturen hinzufügen +- Buchstaben einzeln verändern +- neue Logo-Lockups erfinden + +## 2.2 Schutzraum + +Um das Logo ist immer ausreichend freie Fläche vorzusehen. + +Bis ein exakter Schutzraum anhand der Original-Logodatei definiert ist, gilt: + +> Keine Texte, Linien, Icons oder Rahmen unmittelbar an das Logo setzen. + +--- + +# 3. Farben + +## 3.1 Bestätigte Primärfarbe + +### tradeo Blue +- **HEX:** `#122E45` +- **RGB:** `18 / 46 / 69` + +**Verwendung:** +- zentrale Markenflächen +- Header +- Titelbereiche +- primäre Buttons +- Navigationsflächen +- zentrale Beschilderungselemente +- Hintergründe mit weißem Text + +tradeo Blue ist die visuell dominierende Markenfarbe. + +## 3.2 Weiß + +- **HEX:** `#FFFFFF` + +**Verwendung:** +- Haupt-Hintergrund +- Text auf tradeo Blue +- ruhige Negativflächen +- Karten und Inhaltsflächen + +## 3.3 Weitere Farben + +Weitere Farben und Gradients werden **nicht frei neu definiert**. + +Es dürfen ausschließlich Farbtöne und Verläufe verwendet werden, die bereits in bestehenden tradeo-Medien — insbesondere auf der Website — vorkommen und anschließend als verbindliche Tokens in dieses Dokument übernommen wurden. + +### Status: noch zu erfassen +- sekundäre Blautöne +- Grautöne +- Website-Hintergrundfarben +- vorhandene Gradients +- bestehende Akzentfarben +- funktionale Statusfarben + +--- + +# 4. Typografie + +## 4.1 Primärschrift + +### Poppins + +Poppins ist die primäre tradeo-Schrift. + +**Bevorzugte Verwendung:** +- Hauptüberschriften +- Bereichsbezeichnungen +- Schilder +- kurze Labels +- Titel +- Key Messages +- Navigation +- prägnante Kennzeichnungen + +### Empfohlene Schnitte +- **SemiBold / 600:** Hauptüberschriften +- **Medium / 500:** Unterüberschriften und Labels +- **Regular / 400:** kurze, ruhige Texte wenn Poppins eingesetzt wird + +--- + +## 4.2 Sekundärschrift + +### Inter — vorgeschlagene Ergänzung + +Inter ergänzt Poppins als neutrale, professionelle Funktionsschrift. + +**Bevorzugte Verwendung:** +- Fließtext +- Tabellen +- längere Beschreibungen +- UI-Texte +- Formulare +- Daten +- Präsentationsinhalte +- technische Informationen + +### Empfohlene Schnitte +- **Regular / 400:** Standardtext +- **Medium / 500:** hervorgehobener Text +- **SemiBold / 600:** Labels und wichtige UI-Informationen + +> Hinweis: Inter ist aktuell ein Vorschlag und sollte einmal intern freigegeben werden, bevor sie als verbindliche Zweitschrift gilt. + +--- + +# 5. Typografische Hierarchie + +Die folgenden Rollen sind verbindlich. Die konkrete Größe wird je nach Medium skaliert. + +## Display / Hero +- Schrift: Poppins +- Gewicht: 600 +- Einsatz: große zentrale Aussage +- maximal wenige Wörter +- hoher Weißraumanteil + +## H1 / Seitentitel +- Schrift: Poppins +- Gewicht: 600 +- Einsatz: Hauptüberschrift eines Mediums + +## H2 / Abschnitt +- Schrift: Poppins +- Gewicht: 500–600 +- Einsatz: Untergliederung + +## Label +- Schrift: Poppins oder Inter +- Gewicht: 500–600 +- Einsatz: kurze funktionale Bezeichnungen + +## Body +- Schrift: Inter +- Gewicht: 400 +- Einsatz: Fließtext + +## Data / Table +- Schrift: Inter +- Gewicht: 400–500 +- Einsatz: Tabellen, Kennzahlen, Statusinformationen + +## Caption +- Schrift: Inter +- Gewicht: 400 +- Einsatz: Zusatzinformationen + +--- + +# 6. Schreibweise + +## Standard +- bevorzugt **Sentence case** +- kurze Überschriften +- klare Substantive und Verben +- keine werbliche Übertreibung +- keine unnötig lockere Jugendsprache + +## Vermeiden +- ÜBERMÄSSIGE GROSSSCHREIBUNG +- mehrere Ausrufezeichen +- verspielte Sonderzeichen +- unnötige Emojis +- pseudo-technische Buzzwords +- lange Textblöcke auf Schildern + +--- + +# 7. Layout-System + +## 7.1 Grundprinzip + +Layouts folgen einer klaren visuellen Hierarchie: + +1. Orientierung +2. Hauptinformation +3. unterstützende Information +4. Details + +Nicht alle vier Ebenen müssen verwendet werden. + +## 7.2 Ausrichtung + +**Standard:** linksbündig + +Zentrierung nur wenn: +- eine einzelne Aussage im Mittelpunkt steht +- keine mehrstufige Informationshierarchie vorhanden ist +- die Komposition dadurch nachweislich ruhiger wird + +## 7.3 Weißraum + +Weißraum ist ein aktives Gestaltungsmittel. + +Elemente sollen nicht deshalb vergrößert oder ergänzt werden, nur weil Platz verfügbar ist. + +## 7.4 Informationsdichte + +Bevorzugt: +- wenige Elemente +- klare Gruppen +- erkennbare Abstände +- deutliche Hierarchie + +Vermeiden: +- viele gleichgewichtete Elemente +- flächendeckende Boxen +- mehrere konkurrierende Überschriften +- unnötige Rahmen + +--- + +# 8. Spacing-System für digitale Medien + +Für UIs und digitale Layouts wird ein **8-Pixel-Grundraster** empfohlen. + +Typische Abstände: + +- `4 px` — Mikroabstand +- `8 px` — eng zusammengehörige Elemente +- `16 px` — Standardabstand +- `24 px` — Gruppenabstand +- `32 px` — Abschnitt +- `48 px` — großer Abschnitt +- `64 px+` — große Layouttrennung + +Abweichungen sind nur sinnvoll, wenn sie aus einem bestehenden tradeo-Layout übernommen werden. + +--- + +# 9. Formen + +## Grundcharakter +- geometrisch +- sauber +- weich genug, um freundlich zu wirken +- nicht verspielt + +## Vermeiden +- dekorative Freiformen +- Comic-Elemente +- übermäßige Rundungen +- starke 3D-Effekte +- visuell aggressive Rahmen + +Für digitale Interfaces sollen Radien konsistent verwendet werden. + +**Exakte Radius-Tokens:** noch anhand bestehender tradeo-UIs / Website festzulegen. + +--- + +# 10. Gradients + +Gradients dürfen verwendet werden, wenn sie aus bestehenden tradeo-Medien übernommen sind. + +## Regeln +- subtil +- ruhig +- innerhalb der bestehenden Farbwelt +- keine Regenbogenverläufe +- keine Neonwirkung +- kein dominantes „Gaming“- oder „Web3“-Erscheinungsbild + +**Exakte Gradient-Tokens:** noch aus der Website zu extrahieren. + +--- + +# 11. Icons + +Icons sind funktionale Orientierungselemente. + +## Bevorzugt +- einheitliche Icon-Familie +- reduzierte Formen +- klare Silhouetten +- konsistente Strichstärken +- technisch-neutral + +## Nicht erlaubt +- Mischung verschiedener Icon-Stile +- Emoji als regulärer Icon-Ersatz +- Cartoon-Icons +- handgezeichnete Stilwechsel +- dekorative Icons ohne Funktion + +**Verbindliche Icon-Familie:** noch festzulegen. + +--- + +# 12. Fotografie und Bildsprache + +Wenn Fotos verwendet werden, sollen sie: + +- authentisch +- technisch +- sauber +- ruhig +- hochwertig +- dokumentarisch +- realistisch + +wirken. + +Bevorzugte Motive: +- Mitarbeiter bei realer Arbeit +- Hardware +- Prozesse +- Logistik +- Technik +- Arbeitsplatzsituationen +- Details von Materialien und Produkten + +Vermeiden: +- generische Stock-Fotografie +- überinszenierte Business-Szenen +- künstlich überschwängliche Gestik +- stark verspielte Inszenierung +- extreme Filter + +--- + +# 13. Beschilderungen + +Beschilderungen haben besonders hohe Anforderungen an Verständlichkeit. + +## Prioritäten +1. Erkennbarkeit +2. Lesbarkeit +3. Orientierung +4. CI-Konsistenz +5. Gestaltung + +## Grundaufbau + +**Ebene 1 — Hauptinformation** +z. B. `Wareneingang` + +**Ebene 2 — Funktion / Präzisierung** +z. B. `Anlieferung & Prüfung` + +**Ebene 3 — optionale Zusatzinformation** +z. B. Öffnungszeiten oder Prozesshinweis + +**Ebene 4 — optionale Kennzeichnung** +Icon, Nummer, Richtungspfeil + +## Regeln +- möglichst nur eine zentrale Aussage +- Poppins für Hauptinformation +- hoher Kontrast +- keine langen Texte +- Symbole nur mit funktionalem Nutzen +- keine unnötigen Zierrahmen +- Pfeile und Orientierungselemente immer konsistent + +--- + +# 14. Präsentationen + +## Grundprinzip +Eine Folie = eine Kernaussage. + +## Gestaltung +- Poppins für Titel +- Inter für Inhalte +- großzügiger Weißraum +- wenig Text +- visuelle Hierarchie statt Textmenge +- Diagramme reduziert +- tradeo Blue als primäre Markenfarbe + +## Nicht verwenden +- dekorative PowerPoint-Effekte +- WordArt +- übermäßige Animationen +- 3D-Diagramme +- bunte SmartArt-Stile +- Clipart + +--- + +# 15. Thumbnails und Banner + +## Ziel +Schnell erfassbare zentrale Aussage. + +## Aufbau +- starke Headline +- maximal wenige unterstützende Elemente +- klare Bild-/Text-Hierarchie +- tradeo-Farbwelt +- Poppins dominant + +## Nicht verwenden +- Meme-Ästhetik +- Clickbait-Stil +- schrille Farben +- zu viele Textblöcke +- mehrere konkurrierende Blickfänge + +--- + +# 16. Interne Anwendungen und UIs + +tradeo-UIs sollen wie ein Teil derselben visuellen Organisation wirken. + +## Typografie +- Poppins: Page Title / Module Title +- Inter: Navigation, Tabellen, Formulare, Controls, Fließtext + +## Grundregeln +- klare Navigation +- wenige visuelle Ebenen +- großzügige Abstände +- einfache Statusdarstellung +- konsistente Buttons +- konsistente Karten +- klare Interaktionszustände + +## Primäre Aktion +Primäre Aktionen werden bevorzugt in tradeo Blue dargestellt. + +## Sekundäre Aktion +Zurückhaltender als die primäre Aktion. + +## Destruktive Aktion +Nur funktional markieren; niemals als dekorative Akzentfarbe verwenden. + +--- + +# 17. Tabellen und Daten + +Daten sollen funktional und scanbar dargestellt werden. + +## Regeln +- Inter verwenden +- klare Spalten +- Zahlen sauber ausrichten +- dezente Trennlinien +- geringe visuelle Dichte +- Hervorhebung nur bei inhaltlicher Relevanz + +Vermeiden: +- abwechselnd stark gefärbte Tabellenzeilen +- dicke Rahmen +- mehrere Akzentfarben +- dekorative Tabellenköpfe + +--- + +# 18. Do / Don't + +## DO +- bestehende Komponenten wiederverwenden +- wenige Farben einsetzen +- klar hierarchisieren +- großzügigen Weißraum lassen +- Poppins bewusst einsetzen +- technische Präzision zeigen +- Inhalte schnell erfassbar machen +- Vorlagen verwenden + +## DON'T +- neue Farben spontan erfinden +- neue Schriftarten einführen +- verspielte Gestaltung verwenden +- unnötige Icons ergänzen +- Elemente stark dekorieren +- mehrere Designsprachen mischen +- „jung“, „hip“ oder „quirky“ gestalten +- visuelle Trends ohne Bezug zu tradeo übernehmen + +--- + +# 19. Entscheidungsregel für neue Medien + +Vor Freigabe eines neuen Mediums müssen folgende Fragen mit **Ja** beantwortet werden: + +- Verwendet es ausschließlich bestehende tradeo-Komponenten? +- Ist die Hauptinformation sofort erkennbar? +- Ist die visuelle Hierarchie eindeutig? +- Ist die Anzahl der Farben minimal? +- Ist die Typografie regelkonform? +- Sind Abstände und Ausrichtungen konsistent? +- Würde das Medium auch ohne Logo wie tradeo wirken? +- Wirkt es technisch, reduziert, hochwertig, freundlich, minimalistisch und modern? + +Wenn eine Antwort **Nein** lautet, muss die Gestaltung überarbeitet werden. + +--- + +# 20. Regel für KI / LLM-Systeme + +## Systemanweisung + +Bei der Erstellung visueller tradeo-Medien gilt: + +> Verwende ausschließlich die in diesem Corporate Design System beschriebenen bzw. als bestehend dokumentierten tradeo-Komponenten. Erfinde keine zusätzlichen Farben, Schriftarten, Gradients, Icons, Formen oder Stilrichtungen. Wenn eine benötigte Komponente nicht definiert ist, kennzeichne dies als offene Designentscheidung statt selbstständig eine neue Lösung einzuführen. + +## Prioritäten für KI-generierte Gestaltung + +1. CI-Konformität +2. funktionale Verständlichkeit +3. visuelle Hierarchie +4. Lesbarkeit +5. Konsistenz +6. Ästhetik + +Ästhetische Originalität steht nicht über Konsistenz. + +--- + +# 21. KI-Kurzprofil + +```yaml +brand: + name: tradeo + character: + - technical + - reduced + - premium + - friendly + - minimalist + - modern + - professional + +principles: + - clarity_over_decoration + - function_over_playfulness + - calm_over_visual_noise + - consistency_over_individual_creativity + - reuse_existing_components_only + +colors: + primary: + name: tradeo_blue + hex: "#122E45" + rgb: [18, 46, 69] + white: + hex: "#FFFFFF" + rule: "Do not invent new brand colors. Use only documented existing tradeo colors." + +typography: + primary: + family: "Poppins" + roles: + - headlines + - labels + - signage + - key_messages + secondary: + family: "Inter" + status: "proposed" + roles: + - body + - ui + - tables + - data + - long_form_text + +layout: + default_alignment: left + whitespace: generous + visual_density: low + digital_spacing_base_px: 8 + +style: + avoid: + - playful + - colorful + - childish + - unserious + - cartoon + - decorative_without_function + - excessive_shadows + - excessive_3d + - mixed_visual_languages + +generation_rule: + "Compose from existing components. Do not invent a new visual language." +``` + +--- + +# 22. Medien-Matrix + +| Medium | Primärschrift | Sekundärschrift | Hauptziel | +|---|---|---|---| +| Beschilderung | Poppins | Inter optional | Orientierung | +| Überschrift / Schriftzug | Poppins | — | Identifikation | +| Präsentation | Poppins | Inter | Kommunikation | +| Layout / Dokument | Poppins | Inter | Struktur | +| Thumbnail | Poppins | Inter optional | schnelle Erfassung | +| App / UI | Poppins | Inter | Bedienbarkeit | +| Banner | Poppins | Inter optional | zentrale Aussage | +| Tabelle / Dashboard | Poppins für Titel | Inter | Datenerfassung | + +--- + +# 23. Noch zu definierende Design-Tokens + +Diese Punkte werden anhand bestehender tradeo-Materialien exakt ergänzt: + +- [ ] vollständige Farbpalette +- [ ] Website-Gradients +- [ ] Neutralfarben +- [ ] exakte Typografiegrößen pro Medium +- [ ] Zeilenhöhen +- [ ] Letter Spacing +- [ ] Corner Radii +- [ ] Border Styles +- [ ] Shadow Styles +- [ ] Icon-Familie +- [ ] Pfeil-System +- [ ] Logo-Schutzraum +- [ ] Mindestgröße Logo +- [ ] Print-Farbwerte +- [ ] RAL-Farben für physische Beschilderung +- [ ] Standardformate für Schilder +- [ ] Präsentationsmaster +- [ ] UI-Komponenten +- [ ] Thumbnail-Templates +- [ ] Banner-Templates + +--- + +# 24. Geplante Template-Bibliothek + +Langfristig sollte dieses Design-System durch konkrete Referenz-Templates ergänzt werden: + +1. Türschild +2. Bereichsschild +3. Regal-/Lagerplatzkennzeichnung +4. Maschinen-/Arbeitsplatzkennzeichnung +5. Lean-/Shopfloor-Board +6. Prozesshinweis +7. SOP-Titelblatt +8. Präsentationsfolie +9. Thumbnail +10. Banner +11. Dashboard +12. interne Web-App +13. Formulare +14. Tabellen +15. Informationskarte + +--- + +# 25. Versionierung + +Änderungen an Farben, Typografie oder zentralen Design-Tokens werden dokumentiert. + +Empfohlenes Schema: + +- `0.x` — Aufbau / Entwicklung +- `1.0` — erste freigegebene CI +- `1.x` — Ergänzungen ohne grundlegenden Stilwechsel +- `2.0` — grundlegende visuelle Änderung + +**Aktueller Stand:** `0.1` diff --git a/index.html b/index.html index 6f3f400..1a236a7 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ FuerDieCuts - +
diff --git a/src/ProjectView.jsx b/src/ProjectView.jsx index 4876f4f..44e9aac 100644 --- a/src/ProjectView.jsx +++ b/src/ProjectView.jsx @@ -215,7 +215,7 @@ export default function ProjectView({ id, onBack }) { aria-expanded={isOpen('voice')} onClick={() => toggleOpen(clip.index, 'voice')} > - {hasVoice ? '● Voice-over' : 'Voice-over'} + {hasVoice ? 'Voice-over bearbeiten' : 'Voice-over aufnehmen'} )} diff --git a/src/VoiceOver.jsx b/src/VoiceOver.jsx index 0c8665c..333470a 100644 --- a/src/VoiceOver.jsx +++ b/src/VoiceOver.jsx @@ -180,7 +180,7 @@ export default function VoiceOver({ project, clip, settings, onProject, onVolume )} {phase === 'recording' && (

- ● Aufnahme läuft + Aufnahme läuft

)} {phase === 'uploading' &&

Wird gespeichert …

} diff --git a/src/styles.css b/src/styles.css index 7c154e1..216e0bc 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,48 +1,47 @@ +/* + * Gestaltung nach dem tradeo Corporate Design System 0.1 (docs/tradeo-design-system.md). + * + * Verbindlich definiert und hier umgesetzt: tradeo Blue, Weiß, Poppins für Titel, + * Inter für UI und Text, 8-px-Raster, linksbündig, primäre Aktion in tradeo Blue. + */ :root { - --bg: #f4f4f2; - --surface: #ffffff; - --text: #1c1c1a; - --muted: #5e5e58; - --border: #d9d9d4; - --accent: #1f6f4a; - --accent-text: #ffffff; - --error: #b3261e; - --warn-bg: #fff4d6; - --warn-text: #6b4e00; - --radius: 10px; + /* --- Bestätigte tradeo-Tokens --- */ + --tradeo-blue: #122e45; + --white: #ffffff; + --font-heading: 'Poppins', system-ui, sans-serif; + /* Inter ist laut Design-System 0.1 vorgeschlagen, aber noch nicht freigegeben. */ + --font-ui: 'Inter', system-ui, sans-serif; + + --space-1: 4px; + --space-2: 8px; + --space-3: 16px; + --space-4: 24px; + --space-5: 32px; + --space-6: 48px; + --space-7: 64px; + + /* + * --- OFFENE DESIGNENTSCHEIDUNGEN (Design-System Abschnitt 23) --- + * Vorläufige Werte, bis tradeo sie festlegt. Neutraltöne sind Abstufungen + * von tradeo Blue auf Weiß; Kontraste gegen Weiß in Klammern. + */ + --neutral-text: #546979; /* Blue 72 % (5,7:1) – Hilfstexte */ + --neutral-control: #71828f; /* Blue 60 % (4,0:1) – Ränder von Eingabefeldern */ + --neutral-line: #d9dee1; /* Blue 16 % – Trennlinien */ + --neutral-surface: #f6f7f8; /* Blue 4 % – ruhige Hintergrundfläche */ + --primary-hover: #364d61; /* Blue 85 % – Hover der primären Aktion */ + --status-error: #b3261e; /* Statusfarbe Fehler (6,5:1) */ + --status-warning-bg: #fff4d6; /* Statusfarbe Warnung */ + --status-warning-text: #6b4e00; /* (7,1:1 auf Warnfläche) */ + --radius: 8px; /* Corner Radius */ + --text-h1: 28px; /* Typografiegrößen und Zeilenhöhen */ + --text-h2: 20px; + --text-body: 16px; + --text-small: 14px; + color-scheme: light; } -@media (prefers-color-scheme: dark) { - :root:not([data-theme='light']) { - --bg: #151514; - --surface: #1f1f1d; - --text: #ecece8; - --muted: #a3a39c; - --border: #34342f; - --accent: #4cc38a; - --accent-text: #0d1f16; - --error: #ff8a80; - --warn-bg: #3a300f; - --warn-text: #f3d77a; - color-scheme: dark; - } -} - -:root[data-theme='dark'] { - --bg: #151514; - --surface: #1f1f1d; - --text: #ecece8; - --muted: #a3a39c; - --border: #34342f; - --accent: #4cc38a; - --accent-text: #0d1f16; - --error: #ff8a80; - --warn-bg: #3a300f; - --warn-text: #f3d77a; - color-scheme: dark; -} - *, *::before, *::after { @@ -51,236 +50,375 @@ body { margin: 0; - background: var(--bg); - color: var(--text); - font-family: 'Inter Tight', system-ui, sans-serif; - font-size: 16px; + background: var(--white); + color: var(--tradeo-blue); + font-family: var(--font-ui); + font-size: var(--text-body); line-height: 1.5; } -h1 { - margin: 0 0 0.5rem; - font-size: 1.4rem; -} - -button { - font: inherit; - padding: 0.6rem 1.1rem; - border: 1px solid var(--accent); - border-radius: var(--radius); - background: var(--accent); - color: var(--accent-text); - cursor: pointer; -} - -button.secondary { - background: transparent; - color: var(--text); - border-color: var(--border); -} - -button:disabled { - opacity: 0.5; - cursor: default; -} - -input { - font: inherit; - padding: 0.6rem 0.8rem; - border: 1px solid var(--border); - border-radius: var(--radius); - background: var(--bg); - color: var(--text); -} - -:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -.card { - background: var(--surface); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 1.5rem; -} - -.error { - color: var(--error); - min-height: 1.5em; +h1, +h2 { + font-family: var(--font-heading); margin: 0; } -.login { - min-height: 100vh; - display: grid; - place-items: center; - padding: 16px; +h1 { + font-size: var(--text-h1); + font-weight: 600; + line-height: 1.25; } -.login-card { - width: 100%; - max-width: 320px; - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.login-card input { - font-size: 1.4rem; - letter-spacing: 0.3em; - text-align: center; -} - -.topbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 16px; - border-bottom: 1px solid var(--border); - background: var(--surface); -} - -.brand { - font-weight: 700; - background: none; - border: none; - color: var(--text); - padding: 0.25rem 0; -} - -.content { - max-width: 960px; - margin: 0 auto; - padding: 1.5rem 16px; -} - - h2 { - margin: 0; - font-size: 1.1rem; + font-size: var(--text-h2); + font-weight: 500; + line-height: 1.3; } p { margin: 0; } -.muted { - color: var(--muted); +/* --- Aktionen --- */ + +button, +a.button { + display: inline-block; + font: inherit; + font-weight: 500; + line-height: 1.25; + padding: 12px var(--space-3); + border: 1px solid var(--tradeo-blue); + border-radius: var(--radius); + background: var(--tradeo-blue); + color: var(--white); + cursor: pointer; + text-decoration: none; +} + +button:hover:not(:disabled), +a.button:hover { + background: var(--primary-hover); + border-color: var(--primary-hover); +} + +/* Sekundär: zurückhaltender als die primäre Aktion */ +button.secondary { + background: var(--white); + color: var(--tradeo-blue); + border-color: var(--neutral-control); +} + +button.secondary:hover:not(:disabled) { + background: var(--neutral-surface); + border-color: var(--tradeo-blue); +} + +/* Destruktiv: nur funktional markiert */ +button.danger { + background: var(--white); + color: var(--status-error); + border-color: var(--neutral-control); +} + +button.danger:hover:not(:disabled) { + background: var(--neutral-surface); + border-color: var(--status-error); +} + +button.small { + padding: var(--space-2) 12px; + font-size: var(--text-small); +} + +button:disabled { + opacity: 0.45; + cursor: default; +} + +:focus-visible { + outline: 2px solid var(--tradeo-blue); + outline-offset: 2px; +} + +/* --- Formularelemente --- */ + +input:not([type]), +input[type='password'], +input[type='date'], +input[type='text'] { + font: inherit; + padding: 10px 12px; + border: 1px solid var(--neutral-control); + border-radius: var(--radius); + background: var(--white); + color: var(--tradeo-blue); +} + +input[type='checkbox'], +input[type='range'], +progress { + accent-color: var(--tradeo-blue); +} + +input[type='checkbox'] { + width: 20px; + height: 20px; + margin: 2px 0 0; + flex-shrink: 0; +} + +.field { + display: flex; + flex-direction: column; + gap: var(--space-1); + font-size: var(--text-small); + font-weight: 500; +} + +/* --- Grundlayout --- */ + +.topbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + padding: 12px var(--space-3); + background: var(--tradeo-blue); + color: var(--white); +} + +.brand { + font-family: var(--font-heading); + font-size: 18px; + font-weight: 600; + background: none; + border: none; + padding: var(--space-1) 0; + color: var(--white); +} + +.brand:hover:not(:disabled) { + background: none; +} + +/* Sekundäre Aktion auf tradeo Blue */ +.topbar button.secondary { + background: transparent; + color: var(--white); + border-color: var(--white); +} + +.topbar button.secondary:hover:not(:disabled) { + background: var(--primary-hover); +} + +.topbar :focus-visible { + outline-color: var(--white); +} + +.content { + max-width: 960px; + margin: 0 auto; + padding: var(--space-5) var(--space-3) var(--space-7); } .stack { display: flex; flex-direction: column; - gap: 1rem; + gap: var(--space-4); } .stack-tight { display: flex; flex-direction: column; - gap: 0.5rem; + gap: var(--space-2); } .actions { display: flex; flex-wrap: wrap; - gap: 0.75rem; + gap: var(--space-2); align-items: flex-end; } .heading-row { display: flex; flex-wrap: wrap; - gap: 0.75rem; - align-items: center; + gap: var(--space-3); + align-items: baseline; justify-content: space-between; } -.heading-row h1 { +/* Abschnitte: durch Weißraum und eine Trennlinie gegliedert, ohne Boxen */ +.card { + display: flex; + flex-direction: column; + gap: var(--space-3); + padding-top: var(--space-4); + border-top: 1px solid var(--neutral-line); +} + +.muted { + color: var(--neutral-text); +} + +.error { + color: var(--status-error); margin: 0; } -.field { - display: flex; - flex-direction: column; - gap: 0.25rem; - font-size: 0.9rem; - color: var(--muted); -} - -button.small { - padding: 0.3rem 0.7rem; - font-size: 0.9rem; -} - -button.danger { - background: transparent; - color: var(--error); - border-color: var(--error); +.error:empty { + display: none; } .warning { - background: var(--warn-bg); - color: var(--warn-text); - padding: 0.6rem 0.8rem; + background: var(--status-warning-bg); + color: var(--status-warning-text); + padding: 12px var(--space-3); border-radius: var(--radius); } +/* --- Anmeldung --- */ + +.login { + min-height: 100vh; + display: grid; + place-items: center; + padding: var(--space-3); + background: var(--tradeo-blue); +} + +.login-card { + width: 100%; + max-width: 360px; + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-5); + border-radius: var(--radius); + background: var(--white); +} + +.login-card label { + font-weight: 500; +} + +.login-card input { + font-size: 22px; + letter-spacing: 0.3em; +} + +/* --- Startseite --- */ + +.project-list { + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid var(--neutral-line); +} + +.project-list li { + border-bottom: 1px solid var(--neutral-line); +} + +.project-card { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-1); + padding: var(--space-3) 0; + text-align: left; + background: none; + border: none; + border-radius: 0; + color: var(--tradeo-blue); +} + +.project-card:hover:not(:disabled) { + background: var(--neutral-surface); +} + +.project-card strong { + font-family: var(--font-heading); + font-weight: 500; +} + +/* --- Import --- */ + .days { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .days li { - padding: 0.25rem 0.6rem; - border: 1px solid var(--border); - border-radius: 999px; - font-size: 0.9rem; + padding: var(--space-1) 12px; + border: 1px solid var(--neutral-line); + border-radius: var(--radius); + font-size: var(--text-small); + font-variant-numeric: tabular-nums; } .days li.warn { - background: var(--warn-bg); - color: var(--warn-text); - border-color: transparent; + background: var(--status-warning-bg); + color: var(--status-warning-text); + border-color: var(--status-warning-bg); } +.badge { + font-size: 13px; + font-weight: 500; + padding: 2px var(--space-2); + border-radius: var(--radius); + background: var(--status-warning-bg); + color: var(--status-warning-text); +} + +.progress-block { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +progress { + width: 100%; + height: 8px; +} + +/* --- Clip-Liste --- */ + .clip-list { list-style: none; margin: 0; padding: 0; - border-top: 1px solid var(--border); + border-top: 1px solid var(--neutral-line); } .clip-list li { - border-bottom: 1px solid var(--border); - padding: 0.5rem 0; + border-bottom: 1px solid var(--neutral-line); + padding: 12px 0; } .clip-list label, .clip-row { display: flex; flex-wrap: wrap; - align-items: center; - gap: 0.25rem 0.75rem; + align-items: flex-start; + gap: var(--space-1) 12px; } .clip-list label { cursor: pointer; } -.clip-list input[type='checkbox'] { - width: 1.2rem; - height: 1.2rem; - accent-color: var(--accent); -} - .clip-time { font-variant-numeric: tabular-nums; - color: var(--muted); + color: var(--neutral-text); white-space: nowrap; } @@ -290,17 +428,25 @@ button.danger { overflow-wrap: anywhere; } -.clip-size { - white-space: nowrap; - font-size: 0.9rem; +.clip-text strong { + font-weight: 600; } -.badge { - font-size: 0.8rem; - padding: 0.1rem 0.5rem; - border-radius: 999px; - background: var(--warn-bg); - color: var(--warn-text); +.clip-size { + white-space: nowrap; + font-size: var(--text-small); + font-variant-numeric: tabular-nums; +} + +.clip-list li.excluded .clip-text, +.clip-list li.excluded .clip-time { + opacity: 0.5; + text-decoration: line-through; +} + +.has-voice { + border-color: var(--tradeo-blue); + font-weight: 600; } .preview { @@ -310,85 +456,31 @@ button.danger { border-radius: var(--radius); } -.progress-block { - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -progress { - width: 100%; - height: 0.75rem; - accent-color: var(--accent); -} - -.project-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.project-card { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - text-align: left; - background: var(--surface); - color: var(--text); - border: 1px solid var(--border); -} - -a.button { - display: inline-block; - padding: 0.6rem 1.1rem; - border: 1px solid var(--accent); - border-radius: var(--radius); - background: var(--accent); - color: var(--accent-text); - text-decoration: none; -} +/* --- Schnitt-Einstellungen --- */ .option { display: flex; - gap: 0.6rem; + gap: 12px; align-items: flex-start; cursor: pointer; } .option.disabled { cursor: default; - opacity: 0.75; -} - -.option input, -.clip-row input[type='checkbox'] { - width: 1.2rem; - height: 1.2rem; - margin-top: 0.15rem; - flex-shrink: 0; - accent-color: var(--accent); } .option-group { display: flex; flex-direction: column; - gap: 0.5rem; + gap: var(--space-2); } .asset-field { - margin-left: 1.8rem; + margin-left: 32px; display: flex; flex-wrap: wrap; align-items: center; - gap: 0.5rem 1rem; - padding: 0.6rem 0.8rem; - border: 1px dashed var(--border); - border-radius: var(--radius); + gap: var(--space-2) var(--space-3); } .asset-field progress { @@ -397,19 +489,22 @@ a.button { .mixer { display: grid; - gap: 0.75rem; + gap: 12px; } .slider { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 2.5rem; align-items: center; - gap: 0.75rem; + gap: 12px; +} + +.slider label { + font-weight: 500; } .slider input { width: 100%; - accent-color: var(--accent); } .slider output { @@ -418,7 +513,30 @@ a.button { } .slider.disabled { - opacity: 0.5; + opacity: 0.45; +} + +.voice-over { + padding: var(--space-3); + border-radius: var(--radius); + background: var(--neutral-surface); +} + +.countdown { + font-family: var(--font-heading); + font-size: 40px; + font-weight: 600; + text-align: center; +} + +.recording { + color: var(--status-error); + font-weight: 600; +} + +.blockers { + margin: 0; + padding-left: var(--space-5); } @media (max-width: 480px) { @@ -434,37 +552,3 @@ a.button { margin-left: 0; } } - -.clip-list li.excluded .clip-text, -.clip-list li.excluded .clip-time { - opacity: 0.5; - text-decoration: line-through; -} - -.has-voice { - border-color: var(--accent); - color: var(--accent); -} - -.voice-over { - padding: 0.75rem; - border: 1px solid var(--border); - border-radius: var(--radius); - background: var(--bg); -} - -.countdown { - font-size: 2.5rem; - font-weight: 700; - text-align: center; -} - -.recording { - color: var(--error); - font-weight: 700; -} - -.blockers { - margin: 0; - padding-left: 1.8rem; -}