Foundations
Grid
Column widths and the column grids used in Figma.
Device
Density
grid 13
| Token | Value | Preview |
|---|---|---|
--grid-column-103 Token / design-tokens/grid/column-1 | 96px | |
--grid-column-203 Token / design-tokens/grid/column-2 | 208px | |
--grid-column-303 Token / design-tokens/grid/column-3 | 320px | |
--grid-column-403 Token / design-tokens/grid/column-4 | 432px | |
--grid-column-503 Token / design-tokens/grid/column-5 | 544px | |
--grid-column-603 Token / design-tokens/grid/column-6 | 656px | |
--grid-column-703 Token / design-tokens/grid/column-7 | 768px | |
--grid-column-803 Token / design-tokens/grid/column-8 | 880px | |
--grid-column-903 Token / design-tokens/grid/column-9 | 992px | |
--grid-column-1003 Token / design-tokens/grid/column-10 | 1104px | |
--grid-column-1103 Token / design-tokens/grid/column-11 | 1216px | |
--grid-column-1203 Token / design-tokens/grid/column-12 | 1328px | |
--grid-column-gutter03 Token / design-tokens/grid/column-gutter | 16px |
Dashboard 12 Grid 4
| Token | Value | Preview |
|---|---|---|
--grid-dashboard-columnsDashboard 12 Grid | 12 | |
--grid-dashboard-column-widthDashboard 12 Grid | 96px | |
--grid-dashboard-gutterDashboard 12 Grid | 16px | |
--grid-dashboard-marginDashboard 12 Grid | 88px |
Website 12 Grid 3
| Token | Value | Preview |
|---|---|---|
--grid-website-columnsWebsite 12 Grid | 12 | |
--grid-website-column-widthWebsite 12 Grid | 93px | |
--grid-website-gutterWebsite 12 Grid | 20px |
Mail 8 Grid 3
| Token | Value | Preview |
|---|---|---|
--grid-mail-columnsMail 8 Grid | 8 | |
--grid-mail-column-widthMail 8 Grid | 56px | |
--grid-mail-gutterMail 8 Grid | 16px |