本文へスキップ
Motir
無料で始める
テーマライト、ダーク、またはデバイスの設定に合わせます。
スタイル形と雰囲気（シルエット、立体感、密度）です。

手描き / インディー — ラフで親しみやすい。手描きインクの粗い輪郭、いびつな角、やわらかくずれた影、遊び心のある弾み。

パレットインターフェースの配色です。

Motir — 硬質でエディトリアル。クールなグレースケールの面とインク、インク色のCTA、控えめなクールブルーのアクセント、そしていくつかの暖色。

書体見出しと本文の書体の組み合わせです。

見た目を選ぶと、サイト全体が変わります。

これは、すべての Motir プロジェクトの出発点となるデザインシステムです。スタイルガイドではなくここに置いているのは、あなたのプロダクトがどんな見た目になり得るかを示すには、このサイトの見た目を変えてもらうのが一番早いからです。

組み合わせた UI
バッジ完了進行中

まだ何もありません

EmptyState — 実際に提供されているプリミティブです。

@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)
Palette axis (data-palette)

ここにある 3 つの軸は、Motir でプロジェクトを始めるときに選ぶ 3 つと同じで、その下にあるデザインシステムも同じです。このサイトはそのデモを見せているのではなく、それで作られています。