generated from knso/webklar-preview-template
JUSN
fdfd2d392a
- Theme: warmer Papier-Hintergrund (#FAF7F0) wie die Webseite, Inhalte als weiße Karten mit dezentem Schatten + warmem Rand; Marker-Gelb als Akzentfarbe für die Kernaussage - Home: iOS-Großtitel (kollabiert beim Scrollen), Hero-Button mit Schatten, Kachel-Navigation statt halbbreiter Text-Buttons (behebt Umbruch "Einstellunge/n"), Abschnitts-Label, Brief-Karten mit Ampel-Farbstreifen links, freundlicher Leerzustand - Analyse: Kernaussage als Textmarker-Karte (Markenzeichen), Frist/ Termin-Karte in Ampel-Tönung mit Farbstreifen, einheitliche Karten - Ampel-Banner: Streifen-Look statt Vollrahmen - Layout-Fix: Home als FlatList-Wurzel mit automatischem Inset (vorher verdeckte der große Titel die Kopf-Buttons) Barrierefreiheit unverändert: Schriftgrößen, Touch-Targets, Kontraste. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
/**
|
|
* Design-System: ruhig, vertrauenswürdig, barrierefrei.
|
|
* - Große Schrift (Basis 18) für die Zielgruppe
|
|
* - Hoher Kontrast (dunkles Blau auf Weiß, WCAG AA)
|
|
* - Große Touch-Targets (min. 56px Höhe)
|
|
*/
|
|
export const farben = {
|
|
// Grundfarben — warmer Papier-Ton als Markenzeichen (wie die Webseite):
|
|
// Inhalte liegen als weiße "Blätter" auf Papier
|
|
hintergrund: '#FAF7F0',
|
|
flaeche: '#FFFFFF',
|
|
primaer: '#1A365D', // dunkles, ruhiges Blau
|
|
primaerText: '#FFFFFF',
|
|
text: '#1A202C',
|
|
textSekundaer: '#4A5568',
|
|
rand: '#E4DECF',
|
|
// Akzent: Textmarker-Gelb (sparsam einsetzen — nur für DIE Kernaussage)
|
|
markerHintergrund: '#FFF6D2',
|
|
markerRand: '#EBDD9A',
|
|
|
|
// Dringlichkeits-Ampel (kräftig, gut unterscheidbar)
|
|
ampelRot: '#C0392B',
|
|
ampelGelb: '#B7791F',
|
|
ampelGruen: '#276749',
|
|
ampelRotHintergrund: '#FDECEA',
|
|
ampelGelbHintergrund: '#FDF6E3',
|
|
ampelGruenHintergrund: '#EAF6EE',
|
|
|
|
fehler: '#C0392B',
|
|
};
|
|
|
|
export const schrift = {
|
|
klein: 15,
|
|
basis: 18,
|
|
gross: 21,
|
|
titel: 26,
|
|
riesig: 32,
|
|
};
|
|
|
|
export const abstand = {
|
|
xs: 6,
|
|
s: 12,
|
|
m: 16,
|
|
l: 24,
|
|
xl: 32,
|
|
};
|
|
|
|
/** Mindesthöhe für alle interaktiven Elemente (Barrierefreiheit). */
|
|
export const TOUCH_TARGET = 56;
|
|
|
|
/** Dezenter Schatten, damit weiße Karten sich vom Papier-Grund abheben. */
|
|
export const kartenSchatten = {
|
|
shadowColor: '#1A202C',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.07,
|
|
shadowRadius: 6,
|
|
elevation: 2,
|
|
} as const;
|