Component studio
MJ

Adjust to preview your design system in real time.

Make quick changes to colors, typography, and spacing to explore your system.

Color

  • Brand
    100
    200
    300
    400
    600
    800
    900
    1000
    Light
  • Neutral
    Black
    White
  • Grey
    50
    100
    150
    200
    300
    400
    600
    800
    900
  • Grey alpha
    50
    100
    150
    200
    300
    400
    600
    800
    900
  • Error
    50
    100
    150
    200
    300
    400
    600
    900
    1000
    Light
  • Warining
    50
    100
    150
    200
    300
    400
    600
    900
    1000
    Light
  • Succed
    50
    100
    150
    200
    300
    400
    600
    900
    1000
    Light

Typography

Text type
WeightLine heightUsecase
11 Regular
Regular 40014pxLabel
11 Medium
Medium 50014pxMedium 500
12 Regular
Regular 40016pxButton
12 Medium
Medium 50016pxTinny body text
14 Regular
Regular 40024pxBody text
14 Medium
Medium 50024pxButton-default, input
16 Regular
Regular 40024pxHeading-4
16 Medium
Medium 50024pxButton-X
18 Regular
Regular 40028pxHeading-3
24 Regular
Regular 40032pxHeading-2
24 Medium
Medium 50032pxHeading-2
40 Regular
Regular 40048pxHeading-1

Spacing

1px
2px
4px
6px
8px
10px
12px
16px
20px
24px
32px
40px
48px
64px
80px

Radius

2px
4px
6px
8px
10px
12px
16px
999px

Avatar

Sm
Default
Lg
Image
SM
CN
LG
Letter
MJ
MJ
MJ

Icon

Plus
Loader2

Badge

Default
Secondary
Destructive
Outline
Ghost

Button

Default
Hover
Active
Focus
Disabled
Loading
Priority
Secondary
Outline
Ghost
Destructive
Icon Primary
Icon Secondary
Icon Outline
Icon Ghost
Icon Destructive
Xs
Sm
Default
Lg
Priority
Icon

Button group

Style editor

Base Colors
Brand
White
Black
Red
Yellow
Green
Text color tokens
text-primary
text-onPrimary
text-Secondary
text-tertiary
text-disabled
Background color token
bg-black
bg-white
bg-brand
bg-button-PrimaryHover
bg-button-PrimaryActive
bg-button-Secondary
bg-button-SecondaryHover
bg-button-SecondaryActive
bg-button-GhostHover
bg-button-GhostActive
bg-button-DestructiveHover
bg-Error
bg-Warning
bg-Success
Border color token
border-primary
Ring color token
ring-focus