Przejdź do treści
Motir
Zacznij za darmo
MotywJasny, ciemny lub zgodny z urządzeniem.
StylKształt i charakter — sylwetka, cienie, gęstość.

Ręcznie rysowany / Indie — Szkicowy i przyjazny — szorstkie, ręcznie tuszowane krawędzie, krzywe narożniki, miękkie przesunięte cienie, zabawne odbicie.

PaletaSchemat kolorów interfejsu.

Motir — Surowa i redakcyjna — chłodne szare powierzchnie + atrament, atramentowe CTA, stonowany chłodnoniebieski akcent i kilka ciepłych akcentów.

KrójZestaw czcionek dla nagłówków i tekstu.

Grotesk — Geometryczny neogrotesk w całym interfejsie — zwarty, pewny siebie, produktowy.

Wybierz wygląd. Zmienia się cała strona.

To system projektowania, od którego zaczyna się każdy projekt w aplikacji Motir. Jest tutaj, a nie w przewodniku stylu, bo najszybciej pokażemy, jak może wyglądać Twój produkt, pozwalając zmienić wygląd naszego.

Złożony interfejs
PlakietkaGotoweW toku

Na razie nic tu nie ma

EmptyState — wydany komponent bazowy.

@motir/design-system

Colour · Style · Type — the extracted 3-axis system, rendered in isolation.

Element tokens
accent
surface
text
text-muted
border
success
warning
danger
info
type-story
Primitives
In progress
Style axis (data-style)
Palette axis (data-palette)

Trzy osie tutaj to te same trzy, które wybierasz dla projektu, zakładając go w aplikacji Motir — i ten sam system projektowania pod spodem. Ta strona nie pokazuje jego wersji demonstracyjnej; jest z niego zbudowana.