余白

余白トークンは、主にレイアウトで使われるトークンです。

CSSではmarginpadding, top, left, bottom, rightが関連します。

基準値

ベースの基準サイズは16pxです。

プリミティブトークン

トークン名値(rem)値(px)
000
0.250.25rem4px
0.50.5rem8px
0.750.75rem12px
1 1rem16px
1.251.25rem20px
1.51.5rem24px
22rem32px
2.52.5rem40px
33rem48px
44rem64px

セマンティクストークン

トークン名値(rem)値(px)
X3S0.25rem4px
XXS0.5rem8px
XS1rem16px
S1.5rem24px
M2rem32px
L2.5rem40px
XL3rem48px
XXL4rem64px
NONE00

[WIP]コード

© 2021, SmartHR, Inc.