Spacing
Space
0--space-00px
2--space-22px
4--space-44px
6--space-66px
8--space-88px
10--space-1010px
12--space-1212px
16--space-1616px
20--space-2020px
24--space-2424px
32--space-3232px
40--space-4040px
48--space-4848px
52--space-5252px
56--space-5656px
64--space-6464px
80--space-8080px
96--space-9696px
128--space-128128px
160--space-160160px
192--space-192192px
240--space-240240px
Gap
4xs--gap-4xs2pxA hairline gap: stacked lines of one label, a badge beside its count.
3xs--gap-3xs4pxThe tightest gap: an icon to a short label, stacked caption lines.
2xs--gap-2xs6pxChips in a row, segmented control items.
xs--gap-xs8pxLabel to value, icon to text.
sm--gap-sm10pxItems in a dense control: menu rows, tags.
md--gap-md12pxFields and their hints, compact lists.
lg--gap-lg16pxItems in a group.
xl--gap-xl20pxGroups inside a card or panel.
2xl--gap-2xl24pxCards in a row, form fields, a title to its paragraph.
3xl--gap-3xl32pxBlocks in a dense column.
4xl--gap-4xl40pxGroups in a column.
5xl-desktop--gap-5xl-desktop80pxThe widest gap: a section header to its content. 1024px and up.
5xl-tablet--gap-5xl-tablet64pxThe widest gap, 768 to 1023px.
5xl-mobile--gap-5xl-mobile48pxThe widest gap, below 768px.
Padding
4xs--padding-4xs2pxA hairline inset: tight badges, inline markers.
3xs--padding-3xs4pxThe tightest inset: badges, inline tags.
2xs--padding-2xs6pxChips and segmented items.
xs--padding-xs8pxCompact controls, small tags.
sm--padding-sm10pxChip padding, the chart inset.
md--padding-md12pxCompact rows, toasts, small cards.
lg--padding-lg16pxDense cards, table cells.
xl--padding-xl20pxFields and inset groups, such as the amount field.
2xl--padding-2xl24pxDefault card and module padding.
3xl--padding-3xl32pxMarketing panels.
Size
control-sm--size-control-sm32pxChips, segmented control items.
control-touch--size-control-touch44pxControls that are their own 44px tap target: amount chips.
control-md--size-control-md40pxDefault buttons, tabs.
control-lg--size-control-lg52pxInputs, primary buttons.
control-xl--size-control-xl56pxHero call to action.
card-md--size-card-md176pxA Card's minimum height at size md, from Solana DS (min-h-44): its groups 32px apart and the last at the foot.
card-lg--size-card-lg256pxA Card's minimum height at size lg, from Solana DS (min-h-64).
tile--size-tile48pxIcon button that matches a two-line label block: the documentary play button.
icon-sm--size-icon-sm16px
icon-md--size-icon-md20px
icon-lg--size-icon-lg24px
Radius
none--radius-none0px
2xs--radius-2xs2px
xs--radius-xs4px
sm--radius-sm8px
md--radius-md12px
lg--radius-lg16px
xl--radius-xl20px
2xl--radius-2xl24px
3xl--radius-3xl28px
full--radius-full9999px
Layout
margin-desktop--layout-margin-desktop40pxSpace kept clear on the left and right, 1024px and up. Content width = width - 2 x margin.
margin-tablet--layout-margin-tablet32pxSide margin, 768 to 1023px.
margin-mobile--layout-margin-mobile20pxSide margin, below 768px.
site-section-y-desktop--layout-site-section-y-desktop128pxVertical padding of a public site section (landing, film, transparency, learn), 1024px and up.
site-section-y-tablet--layout-site-section-y-tablet128pxSite section padding, 768 to 1023px.
site-section-y-mobile--layout-site-section-y-mobile96pxSite section padding, below 768px.
site-section-gap-desktop--layout-site-section-gap-desktop80pxBetween blocks inside a public site section (a section header to its content), 1024px and up.
site-section-gap-tablet--layout-site-section-gap-tablet64pxSite section gap, 768 to 1023px.
site-section-gap-mobile--layout-site-section-gap-mobile48pxSite section gap, below 768px.
app-section-y--layout-app-section-y48pxVertical rhythm between blocks inside the product app. Denser than landing.
container-max--layout-container-max1400pxContent stops growing at 1400px (screens 1480px and up); the margins widen instead.
container-prose--layout-container-prose720pxLong-form text: a blog post's column. From Solana DS (layout/container/prose).
grid-columns--layout-grid-columns12
grid-gutter--layout-grid-gutter24pxGap between grid columns.