Skip to main content
LocalTapiola Turva

Spacing #

Duet Design System uses the following framework and Sass Mixins for creating a predictable and harmonious spacing for components and templates.

Our space scale is based on our typographic scale. Below defined values are used for padding, margin, and position coordinates. Multiplying and dividing these values is allowed using even numbers.

SizeNameDifferenceToken

72px

XXXX-Large space

+24px$space-xxxx-large

48px

XXX-Large space

+12px$space-xxx-large

36px

XX-Large space

+8px$space-xx-large

28px

X-Large space

+8px$space-x-large

20px

Large space

+4px$space-large

16px

Medium space

+4px$space-medium

12px

Small space

+4px$space-small

8px

X-Small space

+4px$space-x-small

4px

XX-Small space

+2px$space-xx-small

2px

XXX-Small space

+2px$space-xxx-small

Sass mixins #

Most components in Duet come with spacing included using the below mixins. The idea is that a developer can simply lay out components on a page and they will take care of the spacing automatically as well as they can. Collisions with component level spacing and inset spacing are solved systematically using advanced CSS selectors inside the space mixins.

You simply use these via Sass Mixins, like so:

// Stack space
.heading {
  @include stack-space($space-l);
}

// Inset space
.container {
  @include inset-space($space-xl);
}

// Inline space
.pill {
  @include inline-space($space-s);
}

// You can also combine inset/inset-squish and inline/stack space
.button {
  @include inset-squish-space($space-l);
  @include inline-space($space-s);
}