Design System für Saverchamp
Farben
Die Farbgestaltung der App wurde unter besonderer Berücksichtigung der Barrierefreiheit definiert. Zur Überprüfung der Kontraste kam der Contrast Checker von WebAIM zum Einsatz. Dies schließt auch die semantischen Farben ein, die beispielsweise für Fehlermeldungen, Warnungen und Informationshinweise genutzt werden. Darüber hinaus wurde sowohl eine Farbpalette für den Light Mode als auch für den Dark Mode entwickelt. Abschließend habe ich die Farben als Variablen angelegt, um eine flexible und konsistente Verwendung zu ermöglichen. Schauen Sie sich die Farbpalette bei Figma an.
Komponenten
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Raster und Abstände
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Typografie
Die Typografie wurde unter Berücksichtigung einer klaren Hierarchie und der Anforderungen an die Barrierefreiheit definiert. Durch den gezielten Einsatz von H1 bis H6-Überschriften werden Inhalte logisch strukturiert, schnell erfassbar und für Screenreader korrekt interpretierbar. Dies verbessert sowohl die Orientierung der Nutzerinnen und Nutzer als auch die allgemeine Lesbarkeit. Zusätzlich wurden die Schriftgrößen so gestaltet, dass sie sich responsiv an unterschiedliche Bildschirmgrößen anpassen und auf allen Endgeräten eine optimale Darstellung gewährleisten. Anschließend habe ich die Typografie als Variablen angelegt. Schauen Sie sich die Übersicht zur Typografie bei Figma an.