Frische Farbwelt: Apple-System-Blau + klare Ampel-Signalfarben

- Primärfarbe: Apple-System-Blau (#007AFF) statt dunklem Marineblau —
  Buttons, Icons und Links wirken wie in Apples eigenen Apps
- Header nach Apple-Konvention: Titel in Textfarbe, nur Interaktives im Tint
- Ampel: frische Signalfarben in zugänglichen Varianten (klares Rot,
  Orange statt Braun, sattes Grün) — als Text auf Weiß weiter WCAG-lesbar
- Großtitel entfernt (renderte auf iOS 26 nicht zuverlässig) — Standard-
  Header ist stabil auf allen Screens

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-16 21:39:51 +02:00
parent 4ce397026c
commit 6ed940a77d
2 changed files with 17 additions and 23 deletions

13
App.tsx
View File

@@ -37,21 +37,14 @@ export default function App() {
screenOptions={{ screenOptions={{
headerStyle: { backgroundColor: farben.hintergrund }, headerStyle: { backgroundColor: farben.hintergrund },
headerShadowVisible: false, headerShadowVisible: false,
// Apple-Konvention: Titel in Textfarbe, nur Interaktives im Blau-Tint
headerTintColor: farben.primaer, headerTintColor: farben.primaer,
headerTitleStyle: { fontSize: schrift.gross, fontWeight: '700' }, headerTitleStyle: { fontSize: schrift.gross, fontWeight: '700', color: farben.text },
headerBackTitle: 'Zurück', headerBackTitle: 'Zurück',
contentStyle: { backgroundColor: farben.hintergrund }, contentStyle: { backgroundColor: farben.hintergrund },
}} }}
> >
<Stack.Screen <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'BehördenKlar' }} />
name="Home"
component={HomeScreen}
options={{
title: 'BehördenKlar',
headerLargeTitle: true,
headerLargeTitleStyle: { color: farben.primaer },
}}
/>
<Stack.Screen name="Consent" component={ConsentScreen} options={{ title: 'Datenschutz' }} /> <Stack.Screen name="Consent" component={ConsentScreen} options={{ title: 'Datenschutz' }} />
<Stack.Screen name="Scan" component={ScanScreen} options={{ title: 'Brief scannen' }} /> <Stack.Screen name="Scan" component={ScanScreen} options={{ title: 'Brief scannen' }} />
<Stack.Screen name="Analyse" component={AnalyseScreen} options={{ title: 'Ihr Brief erklärt' }} /> <Stack.Screen name="Analyse" component={AnalyseScreen} options={{ title: 'Ihr Brief erklärt' }} />

View File

@@ -9,26 +9,27 @@ export const farben = {
// Inhalte als weiße Karten ohne Rahmen und Schatten (wie Einstellungen/Health) // Inhalte als weiße Karten ohne Rahmen und Schatten (wie Einstellungen/Health)
hintergrund: '#F2F2F7', hintergrund: '#F2F2F7',
flaeche: '#FFFFFF', flaeche: '#FFFFFF',
flaecheSekundaer: '#E9EDF3', // "graue Taste" nach Apple-Art (statt Umrandung) flaecheSekundaer: '#E9E9EB', // "graue Taste" nach Apple-Art (statt Umrandung)
primaer: '#1A365D', // dunkles, ruhiges Blau (Marken-Tint) primaer: '#007AFF', // Apple-System-Blau (Tint für Buttons, Icons, Links)
primaerText: '#FFFFFF', primaerText: '#FFFFFF',
text: '#1A202C', text: '#1A202C',
textSekundaer: '#4A5568', textSekundaer: '#4A5568',
textTertiaer: '#AEAEB2', // z. B. Chevrons (iOS systemGray2) textTertiaer: '#AEAEB2', // z. B. Chevrons (iOS systemGray2)
rand: '#E2E2E7', rand: '#E2E2E7',
// Dezente Hervorhebung für DIE Kernaussage (leichter Marken-Tint) // Dezente Hervorhebung für DIE Kernaussage (leichter Blau-Tint)
hervorhebung: '#EDF2F9', hervorhebung: '#EAF3FF',
hervorhebungRand: '#DCE5F1', hervorhebungRand: '#D4E6FB',
// Dringlichkeits-Ampel (kräftig, gut unterscheidbar) // Dringlichkeits-Ampel: frische Signalfarben in Apples "zugänglichen"
ampelRot: '#C0392B', // Varianten — kräftig, aber als Text auf Weiß noch gut lesbar (WCAG)
ampelGelb: '#B7791F', ampelRot: '#D70015',
ampelGruen: '#276749', ampelGelb: '#C25400',
ampelRotHintergrund: '#FDECEA', ampelGruen: '#1E7E34',
ampelGelbHintergrund: '#FDF6E3', ampelRotHintergrund: '#FFEAE8',
ampelGruenHintergrund: '#EAF6EE', ampelGelbHintergrund: '#FFF1E0',
ampelGruenHintergrund: '#E7F6EB',
fehler: '#C0392B', fehler: '#D70015',
}; };
export const schrift = { export const schrift = {