StilForm und Anmutung – Silhouette, Tiefe, Dichte.
Handgezeichnet / Indie — Skizzenhaft und freundlich – raue, von Hand getuschte Kanten, schiefe Ecken, weiche versetzte Schatten, ein verspieltes Federn.
FarbpaletteDas Farbschema der Oberfläche.
Motir — Klar und redaktionell – kühle Graustufenflächen + Tinte, ein Tinten-CTA, ein zurückhaltender kühlblauer Akzent und einige warme Details.
SchriftDie Schriftkombination für Überschriften und Fließtext.
Grotesk — Geometrische Neo-Grotesk in der gesamten UI – kompakt, selbstbewusst, produktnah.
Wählen Sie einen Look. Die ganze Website ändert sich.
Mit diesem Designsystem beginnt jedes Motir-Projekt. Es steht hier statt in einem Styleguide, weil Sie am schnellsten sehen, wie Ihr Produkt aussehen könnte, wenn Sie unseres umgestalten.
Zusammengesetzte Oberfläche
BadgeErledigtIn Arbeit
Hier ist noch nichts
EmptyState – das ausgelieferte Primitiv.
Etwas ist kaputtgegangen
ErrorState – das ausgelieferte Primitiv.
@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)
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Palette axis (data-palette)
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
AcmeBoardBacklogReports
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Die drei Achsen hier sind dieselben drei, die Ihr Projekt wählt, wenn Sie es in Motir anlegen – und darunter liegt dasselbe Designsystem. Diese Website zeigt Ihnen keine Demo davon; sie ist daraus gebaut.