SmartHR Design System

余白

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

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

基準値

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

プリミティブトークン

トークン名値(rem)値(px)
000
0.250.25rem4px
0.50.5rem8px
0.750.75rem12px
11rem16px
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

[WIP]コード

© 2021, SmartHR, Inc.