ThemeLight, dark, or match your device.
StyleThe shape and feel — silhouette, elevation, density.
Hand-Drawn / Indie — Sketchy and friendly — rough hand-inked edges, wonky corners, soft offset shadows, a playful bounce.
PaletteThe colour scheme the interface wears.
Motir — Stark and editorial — cool greyscale surfaces + ink, an ink CTA, a restrained cool-blue accent and a few warm touches.
TypeThe typeface pairing for headings and body.
Grotesk — Geometric neo-grotesque across the whole UI — tight, confident, product-y.
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.