主题浅色、深色，或跟随设备设置。
风格形状与质感——轮廓、层次与疏密。
手绘 / 独立风 — 随性又亲切——粗糙的手绘墨线、歪斜的边角、柔和的偏移阴影、俏皮的弹跳。
配色界面所采用的颜色方案。
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 中新建项目时选择的那三个——底层也是同一套设计系统。这个网站展示的不是它的演示，而是用它构建出来的。