Predefined spacing for extreme accuracy

View on GitHub and Figma.

Token taxonomy

ow.space.margin.value.padding.value.squish.value.xnumber

  • .ow: system name.

  • .space: the space component. Values in rems, x times the base-unit, affects margins and paddings.

  • .margin: value the margin space around an element. top, bottom, left, right, center.

  • .padding: value the padding space around an element. top, bottom, left, right.

  • .squish: value the padding space top and bottom of an element.

  • .x: number the amount of space around an element as a division or multiple of the base unit. 1 base unit equals 8px/0.5rem.

Tokens and variables

Margin

Margins are used to create space around elements, outside of any defined borders.

  • x025

    ow.space.margin.x025

    2px (0.125rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }

  • x05

    ow.space.margin.x05

    4px (0.25rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x05 {
     margin-top: 0.25rem;
     margin-right: 0.25rem;
     margin-bottom: 0.25rem;
     margin-left: 0.25rem;
    }

  • x1

    ow.space.margin.x1

    8px (0.5rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x1 {
     margin-top: 0.5rem;
     margin-right: 0.5rem;
     margin-bottom: 0.5rem;
     margin-left: 0.5rem;
    }

  • x1.5

    ow.space.margin.x1.5

    12px (0.75rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x1-5 {
     margin-top: 0.75rem;
     margin-right: 0.75rem;
     margin-bottom: 0.75rem;
     margin-left: 0.75rem;
    }

  • x2

    ow.space.margin.x2

    16px (1rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x2 {
     margin-top: 1rem;
     margin-right: 1rem;
     margin-bottom: 1rem;
     margin-left: 1rem;
    }

  • x3

    ow.space.margin.x3

    24px (1.5rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x3 {
     margin-top: 1.5rem;
     margin-right: 1.5rem;
     margin-bottom: 1.5rem;
     margin-left: 1.5rem;
    }

  • x4

    ow.space.margin.x4

    32px (2rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x4 {
     margin-top: 2rem;
     margin-right: 2rem;
     margin-bottom: 2rem;
     margin-left: 2rem;
    }

  • x5

    ow.space.margin.x5

    40px (2.5rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x5 {
     margin-top: 2.5rem;
     margin-right: 2.5rem;
     margin-bottom: 2.5rem;
     margin-left: 2.5rem;
    }

  • x6

    ow.space.margin.x6

    48px (3rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x6 {
     margin-top: 3rem;
     margin-right: 3rem;
     margin-bottom: 3rem;
     margin-left: 3rem;
    }

  • x7

    ow.space.margin.x7

    56px (3.5rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x7 {
     margin-top: 3.5rem;
     margin-right: 3.5rem;
     margin-bottom: 3.5rem;
     margin-left: 3.5rem;
    }

  • x8

    ow.space.margin.x8

    64px (4rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x8 {
     margin-top: 4rem;
     margin-right: 4rem;
     margin-bottom: 4rem;
     margin-left: 4rem;
    }

  • x9

    ow.space.margin.x9

    72px (4.5rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x9 {
     margin-top: 4.5rem;
     margin-right: 4.5rem;
     margin-bottom: 4.5rem;
     margin-left: 4.5rem;
    }

  • x10

    ow.space.margin.x10

    80px (5rem) margins.

    content in a spacing container
    Show css
    .ow-space-margin-x025 {
     margin-top: 0.125rem;
     margin-right: 0.125rem;
     margin-bottom: 0.125rem;
     margin-left: 0.125rem;
    }.ow-space-margin-x025.ow-space-margin--x10 {
     margin-top: 5rem;
     margin-right: 5rem;
     margin-bottom: 5rem;
     margin-left: 5rem;
    }

Margin top

Margin top is used to create space above elements, outside of any defined borders.

  • x025

    ow.space.margin.top.x025

    2px (0.125rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }

  • x05

    ow.space.margin.top.x05

    4px (0.25rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x05 {
     margin-top: 0.25rem;
    }

  • x1

    ow.space.margin.top.x1

    8px (0.5rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x1 {
     margin-top: 0.5rem;
    }

  • x1.5

    ow.space.margin.top.x1.5

    12px (0.75rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x1-5 {
     margin-top: 0.75rem;
    }

  • x2

    ow.space.margin.top.x2

    16px (1rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x2 {
     margin-top: 1rem;
    }

  • x3

    ow.space.margin.top.x3

    24px (1.5rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x3 {
     margin-top: 1.5rem;
    }

  • x4

    ow.space.margin.top.x4

    32px (2rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x4 {
     margin-top: 2rem;
    }

  • x5

    ow.space.margin.top.x5

    40px (2.5rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x5 {
     margin-top: 2.5rem;
    }

  • x6

    ow.space.margin.top.x6

    48px (3rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x6 {
     margin-top: 3rem;
    }

  • x7

    ow.space.margin.top.x7

    56px (3.5rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x7 {
     margin-top: 3.5rem;
    }

  • x8

    ow.space.margin.top.x8

    64px (4rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x8 {
     margin-top: 4rem;
    }

  • x9

    ow.space.margin.top.x9

    72px (4.5rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x9 {
     margin-top: 4.5rem;
    }

  • x10

    ow.space.margin.top.x10

    80px (5rem) margin top.

    content in a spacing container
    Show css
    .ow-space-margin-top {
     margin-top: 0.125rem;
    }.ow-space-margin-top.ow-space-margin-top--x10 {
     margin-top: 5rem;
    }

Margin bottom

Margin bottom is used to create space below elements, outside of any defined borders.

  • x025

    ow.space.margin.bottom.x025

    2px (0.125rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }

  • x05

    ow.space.margin.bottom.x05

    4px (0.25rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x05 {
     margin-bottom: 0.25rem;
    }

  • x1

    ow.space.margin.bottom.x1

    8px (0.5rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x1 {
     margin-bottom: 0.5rem;
    }

  • x1.5

    ow.space.margin.bottom.x1.5

    12px (0.75rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x1-5 {
     margin-bottom: 0.75rem;
    }

  • x2

    ow.space.margin.bottom.x2

    16px (1rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x2 {
     margin-bottom: 1rem;
    }

  • x3

    ow.space.margin.bottom.x3

    24px (1.5rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x3 {
     margin-bottom: 1.5rem;
    }

  • x4

    ow.space.margin.bottom.x4

    32px (2rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x4 {
     margin-bottom: 2rem;
    }

  • x5

    ow.space.margin.bottom.x5

    40px (2.5rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x5 {
     margin-bottom: 2.5rem;
    }

  • x6

    ow.space.margin.bottom.x6

    48px (3rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x6 {
     margin-bottom: 3rem;
    }

  • x7

    ow.space.margin.bottom.x7

    56px (3.5rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x7 {
     margin-bottom: 3.5rem;
    }

  • x8

    ow.space.margin.bottom.x8

    64px (4rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x8 {
     margin-bottom: 4rem;
    }

  • x9

    ow.space.margin.bottom.x9

    72px (4.5rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x9 {
     margin-bottom: 4.5rem;
    }

  • x10

    ow.space.margin.bottom.x10

    80px (5rem) margin bottom.

    content in a spacing container
    Show css
    .ow-space-margin-bottom {
     margin-bottom: 0.125rem;
    }.ow-space-margin-bottom.ow-space-margin-bottom--x10 {
     margin-bottom: 5rem;
    }

Margin left

Margin left is used to create space left of elements, outside of any defined borders.

  • x025

    ow.space.margin.left.x025

    2px (0.125rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }

  • x05

    ow.space.margin.left.x05

    4px (0.25rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x05 {
     margin-left: 0.25rem;
    }

  • x1

    ow.space.margin.left.x1

    8px (0.5rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x1 {
     margin-left: 0.5rem;
    }

  • x1.5

    ow.space.margin.left.x1.5

    12px (0.75rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x1-5 {
     margin-left: 0.75rem;
    }

  • x2

    ow.space.margin.left.x2

    16px (1rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x2 {
     margin-left: 1rem;
    }

  • x3

    ow.space.margin.left.x3

    24px (1.5rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x3 {
     margin-left: 1.5rem;
    }

  • x4

    ow.space.margin.left.x4

    32px (2rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x4 {
     margin-left: 2rem;
    }

  • x5

    ow.space.margin.left.x5

    40px (2.5rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x5 {
     margin-left: 2.5rem;
    }

  • x6

    ow.space.margin.left.x6

    48px (3rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x6 {
     margin-left: 3rem;
    }

  • x7

    ow.space.margin.left.x7

    56px (3.5rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x7 {
     margin-left: 3.5rem;
    }

  • x8

    ow.space.margin.left.x8

    64px (4rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x8 {
     margin-left: 4rem;
    }

  • x9

    ow.space.margin.left.x9

    72px (4.5rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x9 {
     margin-left: 4.5rem;
    }

  • x10

    ow.space.margin.left.x10

    80px (5rem) margin left.

    content in a spacing container
    Show css
    .ow-space-margin-left {
     margin-left: 0.125rem;
    }.ow-space-margin-left.ow-space-margin-left--x10 {
     margin-left: 5rem;
    }

Margin right

Margin right is used to create space right side of elements, outside of any defined borders.

  • x025

    ow.space.margin.right.x025

    2px (0.125rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }

  • x05

    ow.space.margin.right.x05

    4px (0.25rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x05 {
     margin-right: 0.25rem;
    }

  • x1

    ow.space.margin.right.x1

    8px (0.5rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x1 {
     margin-right: 0.5rem;
    }

  • x1.5

    ow.space.margin.right.x1.5

    12px (0.75rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x1-5 {
     margin-right: 0.75rem;
    }

  • x2

    ow.space.margin.right.x2

    16px (1rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x2 {
     margin-right: 1rem;
    }

  • x3

    ow.space.margin.right.x3

    24px (1.5rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x3 {
     margin-right: 1.5rem;
    }

  • x4

    ow.space.margin.right.x4

    32px (2rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x4 {
     margin-right: 2rem;
    }

  • x5

    ow.space.margin.right.x5

    40px (2.5rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x5 {
     margin-right: 2.5rem;
    }

  • x6

    ow.space.margin.right.x6

    48px (3rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x6 {
     margin-right: 3rem;
    }

  • x7

    ow.space.margin.right.x7

    56px (3.5rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x8 {
     margin-right: 4rem;
    }

  • x8

    ow.space.margin.right.x8

    64px (4rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x8 {
     margin-right: 4rem;
    }

  • x9

    ow.space.margin.right.x9

    72px (4.5rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x9 {
     margin-right: 4.5rem;
    }

  • x10

    ow.space.margin.right.x10

    80px (5rem) margin right.

    content in a spacing container
    Show css
    .ow-space-margin-right {
     margin-right: 0.125rem;
    }.ow-space-margin-right.ow-space-margin-right--x10 {
     margin-right: 5rem;
    }

Margin center

Margin center, (or margin left and right auto), is used to create equal space right and left side of elements, outside of any defined borders, so it can center to its container. It only affects element with a specific width.

  • x.auto

    ow.space.margin.xauto

    auto right and left

    content in a spacing container
    Show css
    .div-block-70 {
     width: 230px;
     margin-right: auto;
     margin-left: auto;
    }

Padding

Padding is used to create space around an element's content, inside of any defined borders.

  • x025

    ow.space.padding.x025

    2px (0.125rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }

  • x05

    ow.space.padding.x05

    4px (0.25rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x05 {
     padding-top: 0.25rem;
     padding-right: 0.25rem;
     padding-bottom: 0.25rem;
     padding-left: 0.25rem;
    }

  • x1

    ow.space.padding.x1

    8px (0.5rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x1 {
     padding-top: 0.5rem;
     padding-right: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 0.5rem;
    }

  • x1.5

    ow.space.padding.x1.5

    12px (0.75rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x1-5 {
     padding-top: 0.75rem;
     padding-right: 0.75rem;
     padding-bottom: 0.75rem;
     padding-left: 0.75rem;
    }

  • x2

    ow.space.padding.x2

    16px (1rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x2 {
     padding-top: 1rem;
     padding-right: 1rem;
     padding-bottom: 1rem;
     padding-left: 1rem;
    }

  • x3

    ow.space.padding.x3

    24px (1.5rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x3 {
     padding-top: 1.5rem;
     padding-right: 1.5rem;
     padding-bottom: 1.5rem;
     padding-left: 1.5rem;
    }

  • x4

    ow.space.padding.x4

    32px (2rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x4 {
     padding-top: 2rem;
     padding-right: 2rem;
     padding-bottom: 2rem;
     padding-left: 2rem;
    }

  • x5

    ow.space.padding.x5

    40px (2.5rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x5 {
     padding-top: 2.5rem;
     padding-right: 2.5rem;
     padding-bottom: 2.5rem;
     padding-left: 2.5rem;
    }

  • x6

    ow.space.padding.x6

    48px (3rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x6 {
     padding-top: 3rem;
     padding-right: 3rem;
     padding-bottom: 3rem;
     padding-left: 3rem;
    }

  • x7

    ow.space.padding.x7

    56px (3.5rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x7 {
     padding-top: 3.5rem;
     padding-right: 3.5rem;
     padding-bottom: 3.5rem;
     padding-left: 3.5rem;
    }

  • x8

    ow.space.padding.x8

    64px (4rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x8 {
     padding-top: 4rem;
     padding-right: 4rem;
     padding-bottom: 4rem;
     padding-left: 4rem;
    }

  • x9

    ow.space.padding.x9

    72px (4.5rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x9 {
     padding-top: 4.5rem;
     padding-right: 4.5rem;
     padding-bottom: 4.5rem;
     padding-left: 4.5rem;
    }

  • x10

    ow.space.padding.x10

    80px (5rem) paddings

    content in a spacing container
    Show css
    .ow-space-padding {
     padding-top: 0.125rem;
     padding-right: 0.125rem;
     padding-bottom: 0.125rem;
     padding-left: 0.125rem;
    }.ow-space-padding.ow-space-padding--x10 {
     padding-top: 5rem;
     padding-right: 5rem;
     padding-bottom: 5rem;
     padding-left: 5rem;
    }

Padding top

Padding bottom is used to create space above an element's content, inside of any defined borders.

  • x025

    ow.space.padding.top.x025

    2px (0.125rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }

  • x05

    ow.space.padding.top.x05

    4px (0.25rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x05 {
     padding-top: 0.25rem;
    }

  • x1

    ow.space.padding.top.x1

    8px (0.5rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x1 {
     padding-top: 0.5rem;
    }

  • x1.5

    ow.space.padding.top.x1.5

    12px (0.75rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x1-5 {
     padding-top: 0.75rem;
    }

  • x2

    ow.space.padding.top.x2

    16px (1rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x2 {
     padding-top: 1rem;
    }

  • x3

    ow.space.padding.top.x3

    24px (1.5rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x3 {
     padding-top: 1.5rem;
    }

  • x4

    ow.space.padding.top.x4

    32px (2rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x4 {
     padding-top: 2rem;
    }

  • x5

    ow.space.padding.top.x5

    40px (2.5rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x5 {
     padding-top: 2.5rem;
    }

  • x6

    ow.space.padding.top.x6

    48px (3rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x6 {
     padding-top: 3rem;
    }

  • x7

    ow.space.padding.top.x7

    56px (3.5rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x7 {
     padding-top: 3.5rem;
    }

  • x8

    ow.space.padding.top.x8

    64px (4rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x8 {
     padding-top: 4rem;
    }

  • x9

    ow.space.padding.top.x9

    72px (4.5rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x9 {
     padding-top: 4.5rem;
    }

  • x10

    ow.space.padding.top.x10

    80px (5rem) padding top

    content in a spacing container
    Show css
    .ow-space-padding-top {
     padding-top: 0.125rem;
    }.ow-space-padding-top.ow-space-padding-top--x10 {
     padding-top: 5rem;
    }

Padding bottom

Padding bottom is used to create space under an element's content, inside of any defined borders.

  • x025

    ow.space.padding.bottom.x025

    2px (0.125rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }

  • x05

    ow.space.padding.bottom.x05

    4px (0.25rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x05 {
     padding-bottom: 0.25rem;
    }

  • x1

    ow.space.padding.bottom.x1

    8px (0.5rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x1 {
     padding-bottom: 0.5rem;
    }

  • x1.5

    ow.space.padding.bottom.x1.5

    12px (0.75rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x1-5 {
     padding-bottom: 0.75rem;
    }

  • x2

    ow.space.padding.bottom.x2

    16px (1rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x2 {
     padding-bottom: 1rem;
    }

  • x3

    ow.space.padding.bottom.x3

    24px (1.5rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x3 {
     padding-bottom: 1.5rem;
    }

  • x4

    ow.space.padding.bottom.x4

    32px (2rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x4 {
     padding-bottom: 2rem;
    }

  • x5

    ow.space.padding.bottom.x5

    40px (2.5rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x5 {
     padding-bottom: 2.5rem;
    }

  • x6

    ow.space.padding.bottom.x6

    48px (3rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x6 {
     padding-bottom: 3rem;
    }

  • x7

    ow.space.padding.bottom.x7

    56px (3.5rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x7 {
     padding-bottom: 3.5rem;
    }

  • x8

    ow.space.padding.bottom.x8

    64px (4rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x8 {
     padding-bottom: 4rem;
    }

  • x9

    ow.space.padding.bottom.x9

    72px (4.5rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x9 {
     padding-bottom: 4.5rem;
    }

  • x10

    ow.space.padding.bottom.x10

    80px (5rem) padding bottom

    content in a spacing container
    Show css
    .ow-space-padding-bottom {
     padding-bottom: 0.125rem;
    }.ow-space-padding-bottom.ow-space-padding-bottom--x10 {
     padding-bottom: 5rem;
    }

Padding left

Padding left is used to create space left of an element's content, inside of any defined borders.

  • x025

    ow.space.padding.left.x025

    2px (0.125rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }

  • x05

    ow.space.padding.left.x05

    4px (0.25rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x05 {
     padding-left: 0.25rem;
    }

  • x1

    ow.space.padding.left.x1

    8px (0.5rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x1 {
     padding-left: 0.5rem;
    }

  • x1.5

    ow.space.padding.left.x1.5

    12px (0.75rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x1-5 {
     padding-left: 0.75rem;
    }

  • x2

    ow.space.padding.left.x2

    16px (1rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x2 {
     padding-left: 1rem;
    }

  • x3

    ow.space.padding.left.x3

    24px (1.5rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x3 {
     padding-left: 1.5rem;
    }

  • x4

    ow.space.padding.left.x4

    32px (2rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x4 {
     padding-left: 2rem;
    }

  • x5

    ow.space.padding.left.x5

    40px (2.5rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x5 {
     padding-left: 2.5rem;
    }

  • x6

    ow.space.padding.left.x6

    48px (3rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x6 {
     padding-left: 3rem;
    }

  • x7

    ow.space.padding.left.x7

    56px (3.5rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x7 {
     padding-left: 3.5rem;
    }

  • x8

    ow.space.padding.left.x8

    64px (4rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x8 {
     padding-left: 4rem;
    }

  • x9

    ow.space.padding.left.x9

    72px (4.5rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x9 {
     padding-left: 4.5rem;
    }

  • x10

    ow.space.padding.left.x10

    80px (5rem) padding left

    content in a spacing container
    Show css
    .ow-space-padding-left {
     padding-left: 0.125rem;
    }.ow-space-padding-left.ow-space-padding-left--x10 {
     padding-left: 5rem;
    }

Padding right

Padding right is used to create space right of an element's content, inside of any defined borders.

  • x025

    ow.space.padding.right.x025

    2px (0.125rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }

  • x05

    ow.space.padding.right.x05

    4px (0.25rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x05 {
     padding-right: 0.25rem;
    }

  • x1

    ow.space.padding.right.x1

    8px (0.5rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x1 {
     padding-right: 0.5rem;
    }

  • x1.5

    ow.space.padding.right.x1.5

    12px (0.75rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x1-5 {
     padding-right: 0.75rem;
    }

  • x2

    ow.space.padding.right.x2

    16px (1rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x2 {
     padding-right: 1rem;
    }

  • x3

    ow.space.padding.right.x3

    24px (1.5rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x3 {
     padding-right: 1.5rem;
    }

  • x4

    ow.space.padding.right.x4

    32px (2rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x4 {
     padding-right: 2rem;
    }

  • x5

    ow.space.padding.right.x5

    40px (2.5rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x5 {
     padding-right: 2.5rem;
    }

  • x6

    ow.space.padding.right.x6

    48px (3rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x6 {
     padding-right: 3rem;
    }

  • x7

    ow.space.padding.right.x7

    56px (3.5rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x7 {
     padding-right: 3.5rem;
    }

  • x8

    ow.space.padding.right.x8

    64px (4rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x8 {
     padding-right: 4rem;
    }

  • x9

    ow.space.padding.right.x9

    72px (4.5rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x9 {
     padding-right: 4.5rem;
    }

  • x10

    ow.space.padding.right.x10

    80px (5rem) padding right

    content in a spacing container
    Show css
    .ow-space-padding-right {
     padding-right: 0.125rem;
    }.ow-space-padding-right.ow-space-padding-right--x10 {
     padding-right: 5rem;
    }

Padding Squish (top and bottom)

Squish is used to create space above and below of an element's content, inside of any defined borders.

  • x025

    ow.space.squish.x025

    2px (0.125rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }

  • x05

    ow.space.squish.x05

    4px (0.25rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x05 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
    }

  • x1

    ow.space.squish.x1

    8px (0.5rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x1 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
    }

  • x1.5

    ow.space.squish.x1.5

    12px (0.75rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x1-5 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
    }

  • x2

    ow.space.squish.x2

    16px (1rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x2 {
     padding-top: 1rem;
     padding-bottom: 1rem;
    }

  • x3

    ow.space.squish.x3

    24px (1.5rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x3 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
    }

  • x4

    ow.space.squish.x4

    32px (2rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x3 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
    }

  • x5

    ow.space.squish.x5

    40px (2.5rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x5 {
     padding-top: 2.5rem;
     padding-bottom: 2.5rem;
    }

  • x6

    ow.space.squish.x6

    48px (3rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x6 {
     padding-top: 3rem;
     padding-bottom: 3rem;
    }

  • x7

    ow.space.squish.x7

    56px (3.5rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x7 {
     padding-top: 3.5rem;
     padding-bottom: 3.5rem;
    }

  • x8

    ow.space.squish.x8

    64px (4rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x8 {
     padding-top: 4rem;
     padding-bottom: 4rem;
    }

  • x9

    ow.space.squish.x9

    72px (4.5rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x9 {
     padding-top: 4.5rem;
     padding-bottom: 4.5rem;
    }

  • x10

    ow.space.squish.x10

    80px (5rem) padding top and bottom

    content in a spacing container
    Show css
    .ow-space-squish {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
    }.ow-space-squish.ow-space-squish--x10 {
     padding-top: 5rem;
     padding-bottom: 5rem;
    }

Principles

Spacing is the negative area between elements and components, is typically regulated using margin and padding in code. Various techniques like tokens and layout components facilitate a more convenient and consistent spacing implementation in products.

Spacing

The spacing scale aligns with the 2xGrid and typography scale, employing multiples of 2, 4, and 8. It encompasses small increments for detailed designs and larger ones to control design density. Each scale level has its token, which can be used within components and between them for layout spacing.

Spacing scale

Apply the spacing scale within all components for detail-level designs, as it includes small increments to create appropriate spatial relationships.

px
rem
x value
example
2
0.125
x025
4
0.25
x05
8
0.5
x1
12
0.75
x1.5
16
1
x2
24
1.5
x3
32
2
x4
40
2.5
x5
48
3
x6
56
3.5
x7
64
4
x8
72
4.5
x9
80
5
x10

Accessibility

Rem and pixel (px) are two units of measurement frequently used in CSS and HTML to define font size, margin or image size for example. However, the two units have a big difference in terms of web accessibility, because a pixel is not responsive and that's why it's better to use REM.

A pixel (px) is not responsive. Pixels are a fixed value. 1 pixel = 1 pixel. It is an absolute and defined unit. This is a good point at first sight, because you can design to size, pixel by pixel. It will not adapt to the preferences of the users of our websites. The units -Pixels- therefore create barriers to web accessibility (for the visually impaired for example).

Rem Unit: the solution. 1 REM (root ephemeral unit) adapts itself to the resolution choices of its user! Yes, the CSS design and HTML will adapt to the preferences defined by the user in his browser. (Google for example). By default 1 rem = 16 pixels, but you can for example define in your preferences that 1 rem = 24 pixels. This will allow for a larger and more readable font design.