Foundations
Spacing
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
Design system có hai scale spacing riêng là Gap và Padding. Từ step Large trở lên, hai scale lệch nhau: Gap Large là 24, còn Padding Large là 20.
Gap: 12 steps
--spacing-gap-3xsmall2px--spacing-gap-2xsmall4px--spacing-gap-xsmall8px--spacing-gap-small12px--spacing-gap-medium16px--spacing-gap-large24px--spacing-gap-xlarge32px--spacing-gap-2xlarge40px--spacing-gap-3xlarge48px--spacing-gap-giant64px--spacing-gap-xgiant88px--spacing-gap-2xgiant144pxPadding: 10 steps
--spacing-padding-3xsmall2px--spacing-padding-2xsmall4px--spacing-padding-xsmall8px--spacing-padding-small12px--spacing-padding-medium16px--spacing-padding-large20px--spacing-padding-xlarge24px--spacing-padding-2xlarge32px--spacing-padding-3xlarge40px--spacing-padding-4xlarge48pxKhông dùng biến Gap để đặt padding, và ngược lại. CSS thuần không chặn lỗi này, nên người viết phải tự giữ.
Đổi Density sang compact thì cả hai scale cùng co lại, vì chúng bind vào token chứ không dùng số cứng.