테마라이트, 다크 또는 기기 설정에 맞춤.
스타일형태와 느낌 — 윤곽, 입체감, 밀도.
손그림 / 인디 — 스케치풍의 친근함 — 거친 손잉크 가장자리, 삐뚤한 모서리, 부드럽게 어긋난 그림자, 경쾌한 튕김.
팔레트인터페이스에 적용되는 색 구성.
Motir — 절제되고 에디토리얼한 — 차가운 그레이스케일 표면과 잉크, 잉크색 CTA, 절제된 쿨 블루 강조색과 몇 가지 따뜻한 포인트.
글꼴제목과 본문의 글꼴 조합.
모습을 고르세요. 사이트 전체가 바뀝니다.
모든 Motir 프로젝트가 처음 갖추는 디자인 시스템입니다. 스타일 가이드가 아니라 여기에 둔 이유는, 당신의 제품이 어떤 모습이 될 수 있는지 보여 주는 가장 빠른 방법이 우리 사이트의 스타일을 직접 바꿔 보게 하는 것이기 때문입니다.
조합된 UI
배지완료진행 중
아직 아무것도 없습니다
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에서 프로젝트를 시작할 때 고르는 세 가지 축과 같고, 그 아래의 디자인 시스템도 같습니다. 이 사이트는 그 시스템의 데모를 보여 주는 것이 아니라, 그 시스템으로 만들어졌습니다.