Skip to content

Core

Spacing

Stable

Spacing scale from @checkatrade/tokens/css. Use token variables in layout and component padding; avoid magic numbers where a token exists.

Figma

Spacing scale

Numeric steps, named by Tailwind index (name x 4px). Use for layout gaps, margins and padding.

  • --spacing-0-5 2px
  • --spacing-1 4px
  • --spacing-2 8px
  • --spacing-2-5 10px
  • --spacing-3 12px
  • --spacing-3-5 14px
  • --spacing-4 16px
  • --spacing-4-5 18px
  • --spacing-5 20px
  • --spacing-5-5 22px
  • --spacing-6 24px
  • --spacing-6-5 26px
  • --spacing-7 28px
  • --spacing-8 32px
  • --spacing-9 36px
  • --spacing-10 40px
  • --spacing-12 48px
  • --spacing-13 54px
  • --spacing-14 56px
  • --spacing-16 64px
  • --spacing-20 80px
  • --spacing-24 96px
  • --spacing-28 112px
  • --spacing-32 128px
  • --spacing-36 144px
  • --spacing-40 160px

Button padding

Per-size button padding, consumed by Button.

  • --spacing-button-padding-xxs-vertical 10px
  • --spacing-button-padding-xs-vertical 12px
  • --spacing-button-padding-sm-vertical 14px
  • --spacing-button-padding-md-vertical 16px
  • --spacing-button-padding-xxs-horizontal 16px
  • --spacing-button-padding-lg-vertical 18px
  • --spacing-button-padding-xs-horizontal 18px
  • --spacing-button-padding-sm-horizontal 20px
  • --spacing-button-padding-xl-vertical 22px
  • --spacing-button-padding-md-horizontal 24px
  • --spacing-button-padding-lg-horizontal 28px
  • --spacing-button-padding-xl-horizontal 32px

Input padding

Per-size field padding for default and rounded inputs.

  • --spacing-input-padding-default-sm-vertical 12px
  • --spacing-input-padding-rounded-sm-vertical 12px
  • --spacing-input-padding-default-md-vertical 14px
  • --spacing-input-padding-rounded-md-vertical 14px
  • --spacing-input-padding-default-lg-vertical 16px
  • --spacing-input-padding-default-md-horizontal 16px
  • --spacing-input-padding-default-sm-horizontal 16px
  • --spacing-input-padding-rounded-lg-vertical 16px
  • --spacing-input-padding-rounded-md-horizontal 16px
  • --spacing-input-padding-rounded-sm-horizontal 16px
  • --spacing-input-padding-default-lg-horizontal 18px
  • --spacing-input-padding-rounded-lg-horizontal 18px
  • --spacing-input-padding-default-xl-vertical 20px
  • --spacing-input-padding-rounded-xl-vertical 20px
  • --spacing-input-padding-default-xxl-vertical 24px
  • --spacing-input-padding-rounded-xxl-vertical 24px
  • --spacing-input-padding-default-xl-horizontal 26px
  • --spacing-input-padding-default-xxl-horizontal 26px
  • --spacing-input-padding-rounded-xl-horizontal 26px
  • --spacing-input-padding-rounded-xxl-horizontal 26px

Sizing scale

Fixed element dimensions — icon boxes, control hit areas.

  • --sizing-0-5 2px
  • --sizing-1 4px
  • --sizing-2 8px
  • --sizing-3 12px
  • --sizing-4 16px
  • --sizing-6 24px
  • --sizing-8 32px
  • --sizing-8-5 34px
  • --sizing-9 36px
  • --sizing-10 40px
  • --sizing-11 44px
  • --sizing-12 48px
  • --sizing-13 54px
  • --sizing-14 56px
  • --sizing-16 64px
  • --sizing-20 80px
  • --sizing-24 96px
  • --sizing-28 112px
  • --sizing-32 128px
  • --sizing-36 144px
  • --sizing-40 160px

Component heights

Fixed heights for button, input and badge sizes.

  • --sizing-badge-height-sm 24px
  • --sizing-badge-height-md 32px
  • --sizing-button-height-xxs 34px
  • --sizing-badge-height-lg 40px
  • --sizing-button-height-xs 40px
  • --sizing-input-height-sm 40px
  • --sizing-button-height-sm 44px
  • --sizing-input-height-md 44px
  • --sizing-button-height-md 48px
  • --sizing-input-height-lg 48px
  • --sizing-button-height-lg 54px
  • --sizing-input-height-xl 54px
  • --sizing-button-height-xl 64px
  • --sizing-input-height-xxl 64px

Border radius

Corner radii.

  • --border-radius-none 0px
  • --border-radius-sm 4px
  • --border-radius-button-default-xxs 4px
  • --border-radius-button-default-xs 4px
  • --border-radius-button-default-sm 4px
  • --border-radius-button-default-md 4px
  • --border-radius-input-default-sm 4px
  • --border-radius-input-default-md 4px
  • --border-radius-md 8px
  • --border-radius-button-default-lg 8px
  • --border-radius-button-default-xl 8px
  • --border-radius-input-default-lg 8px
  • --border-radius-input-default-xl 8px
  • --border-radius-lg 12px
  • --border-radius-input-default-xxl 12px
  • --border-radius-rounded 80px
  • --border-radius-button-rounded-xxs 80px
  • --border-radius-button-rounded-xs 80px
  • --border-radius-button-rounded-sm 80px
  • --border-radius-button-rounded-md 80px
  • --border-radius-button-rounded-lg 80px
  • --border-radius-button-rounded-xl 80px
  • --border-radius-input-rounded-sm 80px
  • --border-radius-input-rounded-md 80px
  • --border-radius-input-rounded-lg 80px
  • --border-radius-input-rounded-xl 80px
  • --border-radius-input-rounded-xxl 80px

Border width

Stroke widths.

  • --border-width-none 0px
  • --border-width-sm 1px
  • --border-width-md 2px
  • --border-width-lg 4px