余白
余白トークンは、主にレイアウトで使われるトークンです。
CSSではmarginやpadding, top, left, bottom, rightが関連します。
基準値
ベースの基準サイズは16pxです。
プリミティブトークン
| トークン名 | 値（rem） | 値（px） |
|---|---|---|
0 | 0 | 0 |
0.25 | 0.25rem | 4px |
0.5 | 0.5rem | 8px |
0.75 | 0.75rem | 12px |
1 | 1rem | 16px |
1.25 | 1.25rem | 20px |
1.5 | 1.5rem | 24px |
2 | 2rem | 32px |
2.5 | 2.5rem | 40px |
3 | 3rem | 48px |
4 | 4rem | 64px |
セマンティックトークン
| トークン名 | 値（rem） | 値（px） |
|---|---|---|
X3S | 0.25rem | 4px |
XXS | 0.5rem | 8px |
XS | 1rem | 16px |
S | 1.5rem | 24px |
M | 2rem | 32px |
L | 2.5rem | 40px |
XL | 3rem | 48px |
XXL | 4rem | 64px |
NONE | 0 | 0 |