Cztery publiczne design systemy warte poznania, co każdy z nich publikuje, i kreator na żywo, który z Twojego koloru, kroju i zaokrągleń robi jednostronicowy style guide z CSS.
Design system to wspólny zestaw tokenów, komponentów i zasad użycia, na którym buduje zespół; style guide strony to jego najmniejsza forma, jedna strona z kolorami, typografią i podstawowymi komponentami. Przestudiuj publiczne systemy, takie jak USWDS, GOV.UK, Carbon i Atlassian, a potem użyj kreatora poniżej, aby zrobić startowy przewodnik dla własnej strony.
Co zwykle zawiera design system
Listy design systemów linkują na zewnątrz i na tym się kończą. Ta strona wyjaśnia, co wziąć z czterech dobrze udokumentowanych publicznych systemów, a potem daje działający kreator style guide, który z Twoich wyborów renderuje przyciski, pole formularza, kartę i alert oraz eksportuje pasujące zmienne CSS.
Style guide zapisuje zasady wizualne: kolory, fonty, użycie logo i ton. Design system dodaje zakodowane komponenty, tokeny i dokumentację, które przenoszą te zasady do produktów, a zwykle także proces ich zmieniania. Większości małych stron wystarczy style guide i kilka komponentów.
Systemy rządowe, takie jak USWDS i GOV.UK, są publiczne, wyjaśniają powody każdej decyzji i skupiają się na dostępności. Carbon pokazuje, jak duża firma dokumentuje złożone komponenty. Atlassian to dobry wzór nazywania tokenów według roli.
Kilka z nich publikuje kod open source, ale każdy ma własną licencję i zasady marki, a wygląd rządowy lub firmowy na niezwiązanej stronie może wprowadzać odwiedzających w błąd. Zanim użyjesz komponentów lub wyglądu, przeczytaj licencję i zasady marki na stronie systemu.
Zacznij od jednego koloru marki, prawie czarnego dla tekstu, jednego lub dwóch szarych dla obramowań i powierzchni oraz czerwonego dla błędów. Dodawaj kolejne tylko wtedy, gdy potrzebuje ich prawdziwy komponent.
Każda reguła odczytuje zmienną CSS, więc zmiana --brand lub --radius zmienia styl wszystkich komponentów naraz.
US General Services Administration
Tokeny projektowe, komponenty z wytycznymi dotyczącymi dostępności i implementacji
Skale tokenów dla koloru, typografii i jednostek odstępów
UK Government Digital Service
Style, komponenty i wzorce
Wzorce całych zadań, na przykład pytania o imię i nazwisko
IBM
Komponenty open source dla React i Web Components, oparte na kroju IBM Plex
Firmowe tabele danych i gęste układy
Atlassian
Tokeny projektowe nazwane według fundamentu, właściwości i modyfikatora, na przykład color.text
Przejrzysty schemat nazewnictwa tokenów
Systemowy bezszeryfowy
Systemowy szeryfowy
Zaokrąglony
Monospace
Wybierz kolor marki, zestaw fontów, promień zaokrąglenia i krok odstępów. Arkusz i CSS poniżej aktualizują się razem.
Kolor marki
Zestaw fontów
Promień zaokrąglenia: {n}px
Krok odstępów: {n}px
Biały tekst na Twoim kolorze marki:
(spełnia 4.5:1 dla zwykłego tekstu)
(tylko duży tekst, wymaga 3:1)
(za niski dla tekstu)
Zapisz
Anuluj
Tytuł karty
Karty łączą jedną myśl z jej akcją.
Wpisz adres e-mail w formacie [email protected]
Kopiuj CSS
Publiczne design systemy warte poznania
Sprawdzone na oficjalnej stronie każdego systemu, październik 2026
System
Autor
Co publikuje
Czego się z niego uczyć
Zacznij za darmo · Bez karty kredytowej