Design Systen - Staatsbibliothek zu Berlin

Beschreibung

Wir entwickeln eine zentrale Anlaufstelle für Standards zur Gestaltung digitaler Produkte der Stabi. Das Design System ist ein gemeinsamer Satz wiederverwendbarer Komponenten, Muster und Richtlinien. Hiermit wollen wir die Entwicklung konsistenter, nutzerfreundlicher Produkte beschleunigen und eine nahtlose, kohärente Nutzererfahrung aufbauen. Mit dem Strategiepapier „Stabi 2030“ hat die Staatsbibliothek ihre Ausrichtung auf Nutzerzentrierung und Barrierefreiheit digitaler Systeme weiter gestärkt. Das Design System unterstützt diese strategischen Ziele, indem es die Grundlage für nutzendenzentrierte und barrierearme digitale Services schafft.

Motivation

• Konsistenz: Alle digitalen Produkte folgen denselben visuellen und funktionalen Standards und stärken so das Nutzererlebnis und die Markenwahrnehmung. Auch wenn mehrere Teams parallel an verschiedenen Produkten arbeiten, sorgt das Design System für ein kohärentes Nutzererlebnis.
• Effizienz: Statt jedes Mal von vorne anzufangen, können die Teams direkt auf bereits entwickelte, getestete Bausteine zurückgreifen. So starten Projekte zügig und erhalten von Beginn an ein professionelles, einheitliches Erscheinungsbild. Durch die Wiederverwendbarkeit bestehender Komponenten sparen die Teams Zeit, die sie stattdessen in Features oder andere Projekte investieren können.
• Skalierbarkeit und Anpassungsfähigkeit: Das Design System ist flexibel genug, um sich an neue Anforderungen anzupassen und stellt sicher, dass alle digitalen Produkte auch in Zukunft denselben Standards folgen.
• Nutzendentrierung: Das Design System unterstützt dabei, die digitalen Produkte konsequent an den Bedürfnissen der Nutzenden auszurichten, indem es klare Richtlinien und erprobte Muster bereitstellt, die intuitive und nutzendenfreundliche Erlebnisse fördern.
• Barrierefreiheit: Unsere Komponenten erfüllen aktuelle Standards und erleichtern es, barrierearme und nutzerzentrierte Produkte zu schaffen – ohne großen zusätzlichen Aufwand. Jede Anpassung fließt systemweit ein und sichert nachhaltige Qualität.

Umfang

• Figma File für die Dokumentation des Design Systems
• Foundation Design Tokens: Zentrale Variablen, die Design-Informationen wie Farben, Abstände, Schriftgrößen und weitere stilistische Eigenschaften speichern
• Bereitstellung des Design Systems über ein CDN (👷in Arbeit)
• Eine Komponetenbibliothek aufbauend auf den Design Tokens (👷in Arbeit)

Verwendung

Die Design Tokens sind derzeit als CSS- und SCSS-Variablen verfügbar und liegen im build-Ordner. Sie können lokal eingebunden oder direkt über den GitHub-Link variables.css integriert werden. Falls zusätzliche Ausgabeformate erforderlich sind, steht das Design-Team für Rückfragen zur Verfügung.

Installation

1.1 Lokale Einbindung via HTTP(S) Die CSS-Datei aus dem build-Ordner kann via HTTP(S) direkt aus dem Repository eingebunden werden:

@import 'https://github.com/StabiBerlin/design-tokens/blob/main/build/variables.css

1.2 Lokale Einbindung: Die Dateien aus dem build-Ordner können ins Projekt kopiert und im Haupt-Stylesheet eingebunden werden:

@import 'build/variables.scss';

1.3 Direkte Einbindung via GitHub: Die CSS-Datei aus dem build Ordner kann direkt aus dem Repository eingebunden werden:

<link rel="stylesheet" href="https://github.com/StabiBerlin/design-tokens/blob/main/build/variables.css">

Beispiele

Card-Komponente

Ein Beispiel für die Anwendung der Design Tokens auf eine Card-Komponente aus dem Bootstrap Framework:

.card {
  border: var(--size.hairline) solid var(--color.stroke.strong);   /* Rahmenfarbe */
  border-radius: var(--border-radius-12);                         /* Runde Ecken */
  padding: var(--distance.doubleLarge);                          /* Konsistente Innenabstände */
  background-color: var(color.background.subtle);               /* Hintergrundfarbe */
}

📬 Kontakt

Das Design System wird von dem UX-Team der Staatsbibliothek zu Berlin betreut. Kontakt über E-Mail oder dem Design System Webex Kanal (Anfrage per Mail).