Skip to main content

Spacing

Semantic tokens for spacing provide a standardized way to define and apply consistent gaps and margins across components in the design system. These tokens abstract the concept of spacing into reusable variables, ensuring alignment and visual harmony while allowing for flexibility in customization.

Is inherited by the padding, margin, gap, inset, space, translate, top, bottom, left, right properties.

SampleTokenBase token value

$cds-spacing-0$cdsbt-dimension-0

0 rem

$cds-spacing-25$cdsbt-dimension-4

0.25 rem

$cds-spacing-50$cdsbt-dimension-8

0.50 rem

$cds-spacing-75$cdsbt-dimension-12

0.75 rem

$cds-spacing-100$cdsbt-dimension-16

1 rem

$cds-spacing-125$cdsbt-dimension-20

1.25 rem

$cds-spacing-150$cdsbt-dimension-24

1.50 rem

$cds-spacing-200$cdsbt-dimension-32

2 rem

$cds-spacing-250$cdsbt-dimension-40

2.50 rem

$cds-spacing-300$cdsbt-dimension-48

3 rem

$cds-spacing-400$cdsbt-dimension-64

4 rem