Vier öffentliche Design-Systeme, die sich zu studieren lohnen, was jedes davon veröffentlicht, und ein Live-Generator, der deine Wahl bei Farbe, Schrift und Ecken in einen einseitigen Styleguide mit CSS umsetzt.
Ein Design-System ist der gemeinsame Satz aus Tokens, Komponenten und Nutzungsregeln, mit dem ein Team baut; ein Website-Styleguide ist seine kleinste Form, eine Seite mit Farben, Schrift und zentralen Komponenten. Studiere öffentliche Systeme wie USWDS, GOV.UK, Carbon und Atlassian und erstelle dann mit dem Generator unten einen Start-Styleguide für deine eigene Website.
Was ein Design-System meist enthält
Listen mit Design-Systemen verlinken nach außen und hören dann auf. Diese Seite erklärt, was du aus vier gut dokumentierten öffentlichen Systemen mitnehmen kannst, und gibt dir einen funktionierenden Styleguide-Generator, der aus deiner Wahl Schaltflächen, ein Formularfeld, eine Karte und einen Hinweis darstellt und die passenden CSS Custom Properties exportiert.
Ein Styleguide hält visuelle Regeln fest: Farben, Schriften, Logo-Verwendung und Tonalität. Ein Design-System ergänzt die programmierten Komponenten, Tokens und Dokumentation, die diese Regeln in Produkte bringen, und meist einen Prozess, um sie zu ändern. Die meisten kleinen Websites brauchen nur den Styleguide und eine Handvoll Komponenten.
Behördliche Systeme wie USWDS und GOV.UK sind öffentlich, begründen jede Entscheidung und legen den Fokus auf Barrierefreiheit. Carbon zeigt, wie ein großes Unternehmen komplexe Komponenten dokumentiert. Atlassian ist ein gutes Vorbild dafür, Tokens nach ihrer Rolle zu benennen.
Mehrere veröffentlichen Open-Source-Code, aber jedes legt eigene Lizenz- und Markenregeln fest, und der Look einer Behörde oder eines Unternehmens auf einer fremden Website kann Besucher in die Irre führen. Lies die Lizenz und die Markenregeln auf der Website des Systems, bevor du seine Komponenten oder seinen Look wiederverwendest.
Beginne mit einer Markenfarbe, einem fast schwarzen Ton für Text, ein oder zwei Grautönen für Rahmen und Flächen und einem Rot für Fehler. Ergänze weitere erst, wenn eine echte Komponente sie braucht.
Jede Regel liest eine Custom Property, daher gestaltet eine Änderung an --brand oder --radius alle Komponenten auf einmal um.
US General Services Administration
Design-Tokens, Komponenten mit Hinweisen zu Barrierefreiheit und Umsetzung
Token-Skalen für Farbe, Schrift und Abstandseinheiten
UK Government Digital Service
Stile, Komponenten und Muster
Muster für ganze Aufgaben, etwa das Abfragen von Namen
IBM
Open-Source-Komponenten für React und Web Components, aufgebaut auf der Schrift IBM Plex
Datentabellen für Unternehmen und dichte Layouts
Atlassian
Design-Tokens, benannt nach Grundlage, Eigenschaft und Modifikator, etwa color.text
Ein klares Benennungsschema für Tokens
System-Sans
System-Serif
Abgerundet
Monospace
Wähle eine Markenfarbe, einen Font-Stack, einen Eckenradius und eine Abstandsstufe. Das Blatt und das CSS unten aktualisieren sich gemeinsam.
Markenfarbe
Font-Stack
Eckenradius: {n}px
Abstandsstufe: {n}px
Weißer Text auf deiner Markenfarbe:
(erfüllt 4.5:1 für normalen Text)
(nur großer Text, braucht 3:1)
(zu gering für Text)
Speichern
Abbrechen
Kartentitel
Karten bündeln eine Idee mit ihrer Aktion.
Gib eine E-Mail-Adresse im Format [email protected] ein
CSS kopieren
Öffentliche Design-Systeme, die sich zu studieren lohnen
Auf der offiziellen Website jedes Systems geprüft, Oktober 2026
System
Herausgeber
Was es veröffentlicht
Studiere es für
Kostenlos starten · Keine Kreditkarte nötig