ThemeLight, dark, or match your device.
StyleThe shape and feel — silhouette, elevation, density.
Warm Editorial — Thoughtful, warm, technical-but-not-cold, slightly editorial.
PaletteThe colour scheme the interface wears.
Motir — Warm and editorial — cream surfaces, charcoal ink, a purple primary, pastel tints.
TypeThe typeface pairing for headings and body.
Motir — Editorial serif headlines over a clean sans body — the house pairing.
Pick a look. The whole site changes.
This is the design system every Motir project starts with. It is here rather than in a styleguide because the fastest way to show what your product could look like is to let you restyle ours.
Composed UI
BadgeDoneIn progress
Nothing here yet
EmptyState — the shipped primitive.
Something broke
ErrorState — the shipped primitive.
@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)
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
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)
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
Ship the billing flowIn progress
Invoice schemaDone
Dunning emailsReview
Stripe webhookTo do
New invoice
CreateCancel
Search work items…
New work itemFilter
The three axes here are the same three your project picks when you start one in Motir — and the same design system underneath. This site is not showing you a demo of it; it is built from it.