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-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