Design system
Jedno źródło prawdy dla designu i kodu
Cała platforma jest zbudowana z tokenów i komponentów opisanych na tej stronie. Te same nazwy działają w Figmie, w kodzie i w rozmowie zespołu, więc przekazanie projektu nie wymaga tłumaczenia.
Kolory
Trzy rodziny: ink buduje tła i głębię, mist odpowiada za tekst, a glow, pulse, ok i danger niosą znaczenie. Komponent nigdy nie używa wartości hex wprost.
ink-950
Tło strony
ink-900
Tło paneli i kart
ink-700
Obramowania, szkielety
mist-50
Nagłówki, tekst główny
mist-300
Tekst akapitów
mist-500
Tekst pomocniczy
glow-400
Akcent, akcje główne
pulse-400
Akcent wtórny
ok-400
Sukces
danger-400
Błędy, destrukcja
Skala typograficzna
Siedem nazwanych kroków opartych o clamp(), kalibrowanych do ekranów referencyjnych: minimum każdego kroku przypada na 390 px, maksimum na 1440 px. Zwęż okno przeglądarki, a każdy wiersz poniżej płynnie zmaleje razem z resztą platformy.
Płynie, nie skacze
text-fluid-xs
Metki, podpisy, kod
Płynie, nie skacze
text-fluid-sm
Tekst pomocniczy, listy
Płynie, nie skacze
text-fluid-base
Akapity
Płynie, nie skacze
text-fluid-lg
Wyróżnione akapity, lead
Płynie, nie skacze
text-fluid-xl
Tytuły sekcji i kart
Płynie, nie skacze
text-fluid-2xl
Nagłówki stron drugorzędnych
Płynie, nie skacze
text-fluid-3xl
Nagłówki główne
Komponenty
Każdy komponent ma wbudowane zachowania z zasad platformy: rezerwację miejsca na błędy, stałe wymiary w stanie ładowania i płynną typografię. Używasz go i dobre nawyki przychodzą same.
Przyciski
Włącz stan ładowania i zmierz przyciski wzrokiem. Spinner zastępuje etykietę w tej samej komórce siatki, więc wymiary nie drgną.
Pola formularza
Slot na błąd jest wbudowany w komponent, więc żaden formularz w projekcie nie może o nim zapomnieć.
Adres musi zawierać znak @.
Statusy
Pięć odcieni wystarcza na cały cykl życia projektu. Nowe kolory dodajemy do tokenów, nigdy do pojedynczego komponentu.
@theme {
--screen-mobile: 390px;
--screen-desktop: 1440px;
--width-page: 72rem;
--width-content: 48rem;
--color-glow-400: #45e3cb;
--color-danger-400: #fb7185;
--text-fluid-base: clamp(1rem, 0.93rem + 0.29vw, 1.1875rem);
--text-fluid-base--line-height: 1.65;
}import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Badge } from "@/components/ui/Badge";
<Input label="Adres e-mail" error={errors.email} />
<Button loading={submitting}>Zapisz zmiany</Button>
<Badge tone="ok">Gotowe</Badge>