Vier publieke design systems die het bestuderen waard zijn, wat elk publiceert, en een live builder die uw keuzes voor kleur, lettertype en hoeken omzet in een stijlgids van één pagina met CSS.
Een design system is de gedeelde set tokens, componenten en gebruiksregels waarmee een team bouwt; een stijlgids voor een website is de kleinste vorm ervan, één pagina met kleuren, typografie en kerncomponenten. Bestudeer publieke systemen zoals USWDS, GOV.UK, Carbon en Atlassian en gebruik dan de builder hieronder om een startgids voor uw eigen site te maken.
Wat een design system meestal bevat
Lijsten met design systems linken door en houden dan op. Deze pagina legt uit wat u kunt halen uit vier goed gedocumenteerde publieke systemen en geeft u daarna een werkende builder voor een stijlgids die knoppen, een formulierveld, een kaart en een melding toont op basis van uw keuzes en de bijbehorende CSS custom properties exporteert.
Een stijlgids legt visuele regels vast: kleuren, lettertypen, logogebruik en toon. Een design system voegt de gecodeerde componenten, tokens en documentatie toe die die regels in producten brengen, en meestal een proces om ze te wijzigen. De meeste kleine sites hebben alleen de stijlgids plus een handvol componenten nodig.
Overheidssystemen zoals USWDS en GOV.UK zijn openbaar, leggen de redenen achter elke keuze uit en richten zich op toegankelijkheid. Carbon laat zien hoe een groot bedrijf complexe componenten documenteert. Atlassian is een goed model voor het benoemen van tokens naar hun rol.
Diverse systemen publiceren open-sourcecode, maar elk stelt eigen licentie- en merkregels, en de uitstraling van een overheid of bedrijf op een site die er niets mee te maken heeft, kan bezoekers misleiden. Lees de licentie en merkregels op de site van het systeem voordat u de componenten of uitstraling hergebruikt.
Begin met één merkkleur, bijna-zwart voor tekst, één of twee grijstinten voor randen en vlakken, en een rood voor fouten. Voeg er alleen meer toe als een echte component ze nodig heeft.
Elke regel leest een custom property, dus door --brand of --radius te wijzigen krijgen alle componenten tegelijk een nieuwe stijl.
US General Services Administration
Design tokens, componenten met richtlijnen voor toegankelijkheid en implementatie
Tokenschalen voor kleur, typografie en spacingeenheden
UK Government Digital Service
Stijlen, componenten en patronen
Patronen voor hele taken, zoals naar namen vragen
IBM
Open-sourcecomponenten voor React en Web Components, gebouwd op het lettertype IBM Plex
Datatabellen voor grote organisaties en compacte layouts
Atlassian
Design tokens benoemd naar fundament, eigenschap en modifier, zoals color.text
Een heldere naamgeving voor tokens
Systeem-sans
Systeem-serif
Afgerond
Monospace
Kies een merkkleur, font stack, hoekradius en spacingstap. Het blad en de CSS hieronder werken samen bij.
Merkkleur
Font stack
Hoekradius: {n}px
Spacingstap: {n}px
Witte tekst op uw merkkleur:
(voldoet aan 4.5:1 voor normale tekst)
(alleen grote tekst, vereist 3:1)
(te laag voor tekst)
Opslaan
Annuleren
Kaarttitel
Kaarten groeperen één idee met de bijbehorende actie.
Voer een e-mailadres in met de vorm [email protected]
CSS kopiëren
Publieke design systems die het bestuderen waard zijn
Gecontroleerd op de officiële site van elk systeem, oktober 2026
Systeem
Gemaakt door
Wat het publiceert
Bestudeer het voor
Gratis beginnen · Geen creditcard nodig