主題淺色、深色，或跟隨裝置設定。
風格形狀與質感——輪廓、層次與疏密。
手繪 / 獨立風 — 隨性又親切——粗糙的手繪墨線、歪斜的邊角、柔和的偏移陰影、俏皮的彈跳。
配色介面所採用的顏色方案。
Motir — 冷峻而具編輯感——冷灰階表面加墨色、墨色 CTA、克制的冷藍強調色，外加幾處暖色點綴。
字型標題與正文的字型搭配。
選一種外觀，整個網站隨之改變。
這是每個 Motir 專案起步時使用的設計系統。它放在這裡而不是風格指南裡，因為展示你的產品可能是什麼樣子，最快的方式就是讓你給我們的網站換個樣式。
組合介面
徽章已完成進行中
這裡還沒有內容
EmptyState——已發布的基礎元件。
出錯了
ErrorState——已發布的基礎元件。
@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
這裡的三個維度，正是你在 Motir 中新增專案時選擇的那三個——底層也是同一套設計系統。這個網站展示的不是它的示範，而是用它建置出來的。