Skip to content
DGA UI

Spacing

The 4px spacing scale, component spacing tokens, breakpoints, grids and logical properties.

On this page

DGA spacing is a 4px scale. Tailwind's spacing step is also 4px (0.25rem), so every DGA step maps directly to a numeric utility: --spacing-4 (16px) is p-4, --spacing-80 (320px) is p-80.

Responsive spacing tokens and logical properties
spacing-direction
spacing-theme
spacing-viewport
Mobile · 375px

Scale

p-00px
p-0.52px
p-14px
p-1.56px
p-28px
p-312px
p-416px
p-520px
p-624px
p-832px
p-1040px
p-1248px
p-1664px
p-2080px
p-2496px
p-32128px
p-40160px
p-48192px
p-56224px
p-64256px
p-80320px
p-96384px
p-120480px
p-140560px
p-160640px
p-180720px
p-192768px
p-2561024px
p-3201280px
p-3601440px
p-4001600px
p-4801920px

T-shirt aliases

Figma also names steps by size. They map onto the numeric scale, so use the numeric utility.

Token:--spacing-noneSame as:p-0Value:0px
Token:--spacing-xxsSame as:p-0.5Value:2px
Token:--spacing-xsSame as:p-1Value:4px
Token:--spacing-smSame as:p-1.5Value:6px
Token:--spacing-mdSame as:p-2Value:8px
Token:--spacing-lgSame as:p-3Value:12px
Token:--spacing-xlSame as:p-4Value:16px
Token:--spacing-2xlSame as:p.5Value:20px
Token:--spacing-3xlSame as:p-6Value:24px
Token:--spacing-4xlSame as:p-8Value:32px
Token:--spacing-5xlSame as:p-10Value:40px
Token:--spacing-6xlSame as:p-12Value:48px
Token:--spacing-7xlSame as:p-16Value:64px
Token:--spacing-8xlSame as:p-20Value:80px
Token:--spacing-9xlSame as:p-24Value:96px
Token:--spacing-10xlSame as:p-32Value:128px
Token:--spacing-11xlSame as:p-40Value:160px

Component and layout tokens

These tokens change with the viewport. Each one has a utility for every spacing property: p-card-lg-padding, gap-section-gap, px-buttons-md-padding and so on.

Utility:p-card-lg-paddingDesktop:32pxTablet:24pxMobile:16px
Utility:p-card-lg-gapDesktop:24pxTablet:24pxMobile:16px
Utility:p-card-md-gapDesktop:24pxTablet:20pxMobile:12px
Utility:p-card-md-paddingDesktop:32pxTablet:24pxMobile:16px
Utility:p-card-sm-paddingDesktop:32pxTablet:24pxMobile:16px
Utility:p-card-sm-gapDesktop:24pxTablet:20pxMobile:12px
Utility:p-section-paddingDesktop:32pxTablet:24pxMobile:16px
Utility:p-section-gapDesktop:32pxTablet:24pxMobile:16px
Utility:p-text-content-gapDesktop:8pxTablet:8pxMobile:4px
Utility:p-icon-text-gapDesktop:8pxTablet:8pxMobile:4px
Utility:p-buttons-group-gapDesktop:8pxTablet:8pxMobile:4px
Utility:p-links-group-gapDesktop:12pxTablet:12pxMobile:8px
Utility:p-control-vertical-gapDesktop:4pxTablet:4pxMobile:4px
Utility:p-accordion-lg-header-paddingDesktop:16pxTablet:16pxMobile:16px
Utility:p-accordion-lg-header-gapDesktop:16pxTablet:16pxMobile:16px
Utility:p-accordion-md-header-paddingDesktop:12pxTablet:12pxMobile:12px
Utility:p-accordion-md-header-gapDesktop:48pxTablet:12pxMobile:12px
Utility:p-accordion-sm-header-paddingDesktop:8pxTablet:8pxMobile:8px
Utility:p-accordion-sm-header-gapDesktop:8pxTablet:8pxMobile:8px
Utility:p-tooltip-gapDesktop:8pxTablet:8pxMobile:8px
Utility:p-tooltip-paddingDesktop:8pxTablet:8pxMobile:8px
Utility:p-input-paddingDesktop:0pxTablet:0pxMobile:0px
Utility:p-input-gapDesktop:0pxTablet:0pxMobile:0px
Utility:p-textarea-paddingDesktop:0pxTablet:0pxMobile:0px
Utility:p-textarea-gapDesktop:0pxTablet:0pxMobile:0px
Utility:p-label-gapDesktop:4pxTablet:4pxMobile:4px
Utility:p-field-label-gapDesktop:8pxTablet:8pxMobile:8px
Utility:p-horizontal-tab-md-button-v-paddingDesktop:12pxTablet:12pxMobile:8px
Utility:p-horizontal-tab-md-button-h-paddingDesktop:16pxTablet:16pxMobile:12px
Utility:p-tab-button-gapDesktop:4pxTablet:4pxMobile:4px
Utility:p-horizontal-tab-sm-button-v-paddingDesktop:8pxTablet:8pxMobile:4px
Utility:p-horizontal-tab-sm-button-h-paddingDesktop:12pxTablet:12pxMobile:8px
Utility:p-vertical-tab-md-button-v-paddingDesktop:6pxTablet:6pxMobile:4px
Utility:p-vertical-tab-md-button-h-paddingDesktop:12pxTablet:12pxMobile:8px
Utility:p-vertical-tab-sm-button-v-paddingDesktop:2pxTablet:2pxMobile:2px
Utility:p-vertical-tab-sm-button-h-paddingDesktop:6pxTablet:6pxMobile:4px
Utility:p-table-cell-gapDesktop:8pxTablet:8pxMobile:4px
Utility:p-table-cell-v-paddingDesktop:8pxTablet:8pxMobile:4px
Utility:p-table-cell-h-paddingDesktop:16pxTablet:16pxMobile:12px
Utility:p-control-title-error-gapDesktop:16pxTablet:12pxMobile:8px
Utility:p-control-switch-description-paddingDesktop:64pxTablet:64pxMobile:64px
Utility:p-control-switch-error-icon-gapDesktop:8pxTablet:8pxMobile:4px
Utility:p-progress-indicator-gapDesktop:8pxTablet:8pxMobile:16px
Utility:p-progress-text-content-side-paddingDesktop:16pxTablet:16pxMobile:12px
Utility:p-control-radio-description-paddingDesktop:48pxTablet:48pxMobile:48px
Utility:p-control-radio-error-icon-gapDesktop:16pxTablet:16pxMobile:48px
Utility:p-pagination-item-md-paddingDesktop:6pxTablet:6pxMobile:6px
Utility:p-pagination-item-sm-paddingDesktop:4pxTablet:4pxMobile:4px
Utility:p-pagination-item-lg-paddingDesktop:8pxTablet:8pxMobile:8px
Utility:p-pagination-items-paddingDesktop:8pxTablet:8pxMobile:4px
Utility:p-button-menu-gapDesktop:8pxTablet:8pxMobile:4px
Utility:p-button-menu-v-paddingDesktop:8pxTablet:8pxMobile:8px
Utility:p-button-menu-h-paddingDesktop:8pxTablet:8pxMobile:8px
Utility:p-modal-gapDesktop:8pxTablet:8pxMobile:8px
Utility:p-modal-paddingDesktop:24pxTablet:24pxMobile:16px
Utility:p-modal-content-bottom-paddingDesktop:16pxTablet:16pxMobile:8px
Utility:p-buttons-lg-gapDesktop:4pxTablet:4pxMobile:4px
Utility:p-buttons-lg-paddingDesktop:16pxTablet:16pxMobile:16px
Utility:p-buttons-md-gapDesktop:4pxTablet:4pxMobile:4px
Utility:p-buttons-md-paddingDesktop:12pxTablet:12pxMobile:12px
Utility:p-buttons-sm-gapDesktop:4pxTablet:4pxMobile:4px
Utility:p-buttons-sm-paddingDesktop:8pxTablet:8pxMobile:8px
Utility:p-link-md-gapDesktop:8pxTablet:8pxMobile:4px
Utility:p-link-sm-gapDesktop:4pxTablet:4pxMobile:4px
Utility:p-notification-gapDesktop:16pxTablet:16pxMobile:8px
Utility:p-notification-paddingDesktop:16pxTablet:16pxMobile:12px
Utility:p-notification-h-paddingDesktop:24pxTablet:24pxMobile:16px
Utility:p-select-paddingDesktop:0pxTablet:0pxMobile:0px
Utility:p-select-gapDesktop:0pxTablet:0pxMobile:0px
Utility:p-notification-alert-v-paddingDesktop:8pxTablet:8pxMobile:8px
Utility:p-notification-alert-h-paddingDesktop:24pxTablet:24pxMobile:16px
Utility:p-notification-toast-v-paddingDesktop:16pxTablet:16pxMobile:12px
Utility:p-notification-toast-desktop-h-paddingDesktop:24pxTablet:24pxMobile:16px
Utility:p-notification-toast-mobile-h-paddingDesktop:16pxTablet:16pxMobile:16px
Utility:p-label-containerDesktop:8pxTablet:8pxMobile:8px
Utility:p-input-container-padding-startDesktop:8pxTablet:8pxMobile:8px
Utility:p-input-container-padding-endDesktop:16pxTablet:16pxMobile:16px
Utility:p-icon-enteredtextDesktop:8pxTablet:8pxMobile:8px
Utility:p-icon-helpertextDesktop:8pxTablet:8pxMobile:8px
Utility:p-prefix-suffix-padding-startDesktop:16pxTablet:16pxMobile:16px
Utility:p-prefix-suffix-padding-endDesktop:16pxTablet:16pxMobile:16px
Utility:p-prefix-suffix-label-iconDesktop:4pxTablet:4pxMobile:4px
Utility:p-prefix-suffix-padding-blockDesktop:2pxTablet:2pxMobile:2px
Utility:p-dropdown-container-padding-inlineDesktop:16pxTablet:16pxMobile:16px
Utility:p-dropdown-icon-contentDesktop:4pxTablet:4pxMobile:4px
Utility:p-textarea-container-padding-inlineDesktop:16pxTablet:16pxMobile:16px
Utility:p-textarea-container-padding-blockDesktop:12pxTablet:12pxMobile:12px

Breakpoints

Figma defines Desktop, Tablet and Mobile modes but no pixel widths. DGA UI uses the widths below; the reasoning is in Deviations.

Prefix:sm:Min width:640px (40rem)Notes:
Prefix:md:Min width:768px (48rem)Notes:Figma Tablet mode starts
Prefix:lg:Min width:1024px (64rem)Notes:Figma Desktop mode starts
Prefix:xl:Min width:1280px (80rem)Notes:
Prefix:2xl:Min width:1536px (96rem)Notes:

Grids

Figma grid:desktopColumns:12Gutter:24pxMargin:112pxContent width:1216px
Figma grid:tabletColumns:6Gutter:32pxMargin:32pxContent width:704px
Figma grid:mobileColumns:4Gutter:16pxMargin:16pxContent width:343px

The page container is 1280px wide (max-w-content) with 32px padding on desktop and 16px on mobile. Paragraphs cap at 720px (max-w-paragraph).

RTL and logical properties

Use logical utilities only, so one layout works in Arabic and English:

UseNot
ms-*, me-*ml-*, mr-*
ps-*, pe-*pl-*, pr-*
start-*, end-*left-*, right-*
border-s, border-eborder-l, border-r
rounded-s-*, rounded-e-*rounded-l-*, rounded-r-*
text-start, text-endtext-left, text-right

The repository's tests fail on any physical left/right utility or CSS property.

Edit this page on GitHub (opens in a new tab)