Size tokens

Sizes are used to create consistent spacing, sizing, and alignment across the design system. The system uses a set of tokens for spacing, border width, and border radius.

Tokens

Every token is prefixed with --dds-, use the variants concated with the base name to get the token value. Example: --dds-spacing-50 or --dds-border-width-large. The system is using the 4px as a base unit for spacing and sizing. Every token is a multiple of 4px. Token naming is based on hundreds, so --dds-spacing-100 is 4px (100 => 1 => 1 * 4px, 300 => 3 => 3 * 4px).

Spacing

Spacing is used to create consistent spacing between elements.

TokenValueExample--dds-spacing-00px

--dds-spacing-502px

--dds-spacing-1004px

--dds-spacing-1506px

--dds-spacing-2008px

--dds-spacing-30012px

--dds-spacing-40016px

--dds-spacing-50020px

--dds-spacing-60024px

--dds-spacing-70028px

--dds-spacing-80032px

--dds-spacing-100040px

--dds-spacing-120048px

--dds-spacing-140056px

--dds-spacing-160064px

--dds-spacing-180072px

--dds-spacing-200080px

--dds-spacing-240096px

--dds-spacing-3000120px

--dds-spacing-4000160px

--dds-spacing-5000200px

--dds-spacing-6000240px

Border width

Border width is used to define the width of the border.

TokenValueExample--dds-border-width-none0px

--dds-border-width-base1px

--dds-border-width-large2px

--dds-border-width-xlarge3px

--dds-border-width-2xlarge4px

Border radius

Border radius is used to define the radius of the border.

TokenValueExample--dds-radius-none0px

--dds-radius-small4px

--dds-radius-base8px

--dds-radius-large16px

--dds-radius-xlarge24px

--dds-radius-rounded1000px

Icon sizes

Icon sizes are predefined sizes for icons in the system.

TokenValueExample--dds-icon-xsmall12px

--dds-icon-small16px

--dds-icon-base20px

--dds-icon-medium24px

--dds-icon-large32px

Avatar sizes

Avatar sizes are predefined sizes for user avatars.

TokenValueExample--dds-avatar-size-xxs24px

--dds-avatar-size-xs32px

--dds-avatar-size-sm48px

--dds-avatar-size-md64px

--dds-avatar-size-lg80px

Z-index

Z-index values are used to control stacking order of elements. Negative values are represented with 'n' prefix (n1 = -1).

TokenValueExample--dds-z-index-00

--dds-z-index-1010

--dds-z-index-2020

--dds-z-index-3030

--dds-z-index-4040

--dds-z-index-5050

--dds-z-index-6060

--dds-z-index-7070

--dds-z-index-8080

--dds-z-index-9090

--dds-z-index-100100

--dds-z-index-modal10

--dds-z-index-n1-1

--dds-z-index-n10-10

--dds-z-index-n20-20

Containers

Container max-widths for different screen sizes.

TokenValueExample--dds-containers-xsmall460px

--dds-containers-small540px

--dds-containers-medium720px

--dds-containers-large960px

--dds-containers-xlarge1140px

--dds-containers-2xlarge1320px