Design System für Saverchamp

Ich bin dabei ein Design-System mit barrierefreien Elementen in Figma aufzubauen.

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.

Vorschau von Farbpalette

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.

Typografie im Design System