From 779261fbad7764d62921b94784cf719f2dd76f33 Mon Sep 17 00:00:00 2001 From: JUSN Date: Sat, 25 Jul 2026 21:29:19 +0200 Subject: [PATCH] Design: warme Palette aus dem Entwurf (Beige/Gold/Tinte) statt iOS-Blau Korrektur zur Rueckmeldung des Nutzers: der Lesbarkeits-Einwand galt nur der duennen Serifenschrift, nicht den Farben. Die warmen Design-Farben sind gut lesbar und vereinheitlichen App + Website. - theme.ts: Papier-Beige-Grund, warme Karten, Gold-Akzent (#B68235) fuer Icons/Tabs/Rahmen, dunkles Bronze (#7D5411, neu: primaerFuellung) als Fuellung gefuellter Buttons (weisse Schrift kontrastreich), warme Ampel-Toene (Backstein/Bronze/Salbei), warme Trennlinien/Graustufen - GrossButton: Fuellung + Sekundaer-Text auf primaerFuellung (Kontrast) - FAB-Scan-Knopf auf Bronze - FristenScreen: ueberfaellige Zeilen zeigen 'faellig' statt 'Tage' Im Simulator geprueft: Fristen-Start + Scan-Screen in warmen Farben, gut lesbar. Typecheck + 30 Tests gruen. Co-Authored-By: Claude Opus 4.8 --- App.tsx | 2 +- src/components/GrossButton.tsx | 5 ++-- src/screens/FristenScreen.tsx | 2 +- src/theme.ts | 49 ++++++++++++++++++---------------- 4 files changed, 31 insertions(+), 27 deletions(-) diff --git a/App.tsx b/App.tsx index 906b2f5..915f348 100644 --- a/App.tsx +++ b/App.tsx @@ -144,7 +144,7 @@ const styles = StyleSheet.create({ height: 56, borderRadius: 28, marginTop: -18, - backgroundColor: farben.primaer, + backgroundColor: farben.primaerFuellung, alignItems: 'center', justifyContent: 'center', borderWidth: 3, diff --git a/src/components/GrossButton.tsx b/src/components/GrossButton.tsx index a9c0458..20e1851 100644 --- a/src/components/GrossButton.tsx +++ b/src/components/GrossButton.tsx @@ -30,7 +30,8 @@ export function GrossButton({ }: Props) { const istPrimaer = variante === 'primaer'; const istGefahr = variante === 'gefahr'; - const inhaltsFarbe = istPrimaer || istGefahr ? farben.primaerText : farben.primaer; + // Sekundär: dunkles Bronze statt hellem Gold — auf grauer Fläche gut lesbar + const inhaltsFarbe = istPrimaer || istGefahr ? farben.primaerText : farben.primaerFuellung; return ( {f.frist!.tage < 0 ? '!' : f.frist!.tage} - Tage + {f.frist!.tage < 0 ? 'fällig' : 'Tage'} {f.brief.analyse.brieftyp} diff --git a/src/theme.ts b/src/theme.ts index 72d91cf..e04b758 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -5,31 +5,34 @@ * - Große Touch-Targets (min. 56px Höhe) */ export const farben = { - // Grundfarben — natives iOS-Vorbild: gruppierter System-Hintergrund, - // Inhalte als weiße Karten ohne Rahmen und Schatten (wie Einstellungen/Health) - hintergrund: '#F2F2F7', - flaeche: '#FFFFFF', - flaecheSekundaer: '#E9E9EB', // "graue Taste" nach Apple-Art (statt Umrandung) - primaer: '#007AFF', // Apple-System-Blau (Tint für Buttons, Icons, Links) - primaerText: '#FFFFFF', - text: '#1A202C', - textSekundaer: '#4A5568', - textTertiaer: '#AEAEB2', // z. B. Chevrons (iOS systemGray2) - rand: '#E2E2E7', - // Dezente Hervorhebung für DIE Kernaussage (leichter Blau-Tint) - hervorhebung: '#EAF3FF', - hervorhebungRand: '#D4E6FB', + // Warme, ruhige Palette nach dem Claude-Design-Entwurf ("Postklar/Classical") + // und passend zur Website: Papier-Beige, Gold-Akzent, dunkle Tinte. + // Gut lesbar (hoher Kontrast bei Fließtext), nur die Schrift bleibt + // die klare System-Schrift statt der dünnen Serifenschrift. + hintergrund: '#F1EFE9', // warmes Off-White (Grund) + flaeche: '#FBFAF6', // warme, fast weiße Karten + flaecheSekundaer: '#EAE7E0', // gedämpfte Fläche (graue Taste) + primaer: '#B68235', // Gold-Akzent (Icons, aktive Tabs, Rahmen, Punkte) + primaerFuellung: '#7D5411', // dunkles Bronze — Hintergrund gefüllter Buttons (weiße Schrift lesbar) + primaerText: '#FBF7EF', // warmes Weiß (Text auf gefüllten Buttons) + text: '#201F1D', // dunkle Tinte + textSekundaer: '#6B675E', // warmes Grau (wie --grau der Website) + textTertiaer: '#A8A29A', // helles warmes Grau (Chevrons) + rand: '#E2DED6', // warme Trennlinie + // Dezente Gold-Hervorhebung (z. B. aktive Filter-Chips) + hervorhebung: '#F7EFE0', + hervorhebungRand: '#E9D8BC', - // Dringlichkeits-Ampel: frische Signalfarben in Apples "zugänglichen" - // Varianten — kräftig, aber als Text auf Weiß noch gut lesbar (WCAG) - ampelRot: '#D70015', - ampelGelb: '#C25400', - ampelGruen: '#1E7E34', - ampelRotHintergrund: '#FFEAE8', - ampelGelbHintergrund: '#FFF1E0', - ampelGruenHintergrund: '#E7F6EB', + // Dringlichkeits-Ampel in den warmen Design-Tönen — als Text auf hellem + // Tint gut lesbar (WCAG): Backstein-Rot, Bronze-Gold, Salbei-Grün. + ampelRot: '#A23B2B', + ampelGelb: '#8A5E14', + ampelGruen: '#3F5A4C', + ampelRotHintergrund: '#F5E9E5', + ampelGelbHintergrund: '#F5EEDF', + ampelGruenHintergrund: '#E8EFEA', - fehler: '#D70015', + fehler: '#A23B2B', }; export const schrift = {