Khoảng cách

Hai thang đo và một quy tắc. Một hình dạng không bao giờ viết ra độ dài: nó trải qua một bước, điều này giữ cho hai thành phần viết cách nhau một năm không bị lệch khỏi nhịp điệu hai pixel.

Các mức khoảng cách

Chín bước, từ một đường mảnh đến lề trang. Đệm, khoảng trống và lề đều bắt nguồn từ đây — một giá trị giữa hai bước là một giá trị chưa được quyết định.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

Kích thước

Độ rộng và chiều cao mà một khu vực được chỉ định: một cột, một bảng, một phép đo đọc. Lớn hơn một bước khoảng cách và được sử dụng vì cùng lý do.

--size-1

--size-2

--size-3

--size-4

--size-5

--size-6

Mật độ

Sự chặt chẽ thuộc về một khu vực chứ không phải một widget. Một thanh công cụ được tuyên bố là chặt chẽ sẽ làm cho những gì nó giữ cũng trở nên chặt chẽ, bởi vì các token mang nó thừa kế — không có thành phần nào bên dưới được cho biết vị trí của nó.

Một thanh công cụ với mật độ riêng của nó, và các nút mà nó giữ

Cùng một thanh công cụ được tuyên bố là chặt chẽ — không có gì được nói về các nút

Một khu vực được tuyên bố là chặt chẽ mà không trở thành một hình dạng riêng của nó