Space

LUCI provides easy-to-understand concepts and code variables to apply in order to maintain space within and between components. These standards are designed to ensure consistency and cohesiveness throughout a web site or digital product.

The LUCI design system uses multiples of 4px for all spacing values, including padding and margins.

Inset

An inset space applies equal padding on all four sides to block or inline elements.

LUCI Inset Space Image

Example

LUCI Inset Space Image Figure: Form Element component, using $luci-space-inset-sm

Variables

Apply an inset variable token to the padding property.

Name	Value
`$luci-space-inset-xxs`	4px
`$luci-space-inset-xs`	8px
`$luci-space-inset-sm`	12px
`$luci-space-inset-md`	16px
`$luci-space-inset-lg`	24px
`$luci-space-inset-xl`	32px
`$luci-space-inset-xxl`	48px
`$luci-space-inset-xxxl`	64px

Inset Stretch

Many LUCI system components such as large buttons “stretch” the inset, adding more padding to the left and right of the contained text and/or elements.

LUCI Inset Space Stretch Image

Example

LUCI Inset Space Stretch Button Image Figure: Small button component, using $luci-space-inset-stretch-sm Figure: Primary button component, using $luci-space-inset-stretch-md

Name	Value
`$luci-space-inset-stretch-sm`	8px 12px
`$luci-space-inset-stretch-md`	12px 32px
`$luci-space-inset-stretch-lg`	16px 32px

Stack

Use the stack concept to apply bottom margin consistently to separate block-level, 100%-wide items arranged vertically. The last component in a stack should omit this space.

LUCI Space Stack Image

Example

LUCI Space Stack Form Image Figure: Form Elements component, using $luci-space-stack-md and $luci-space-stack-xl

Variables

Apply stacking variables to the margin property.

Name	Value
`$luci-space-stack-xxs`	0 0 4px
`$luci-space-stack-xs`	0 0 8px
`$luci-space-stack-sm`	0 0 12px
`$luci-space-stack-md`	0 0 16px
`$luci-space-stack-lg`	0 0 24px
`$luci-space-stack-xl`	0 0 32px
`$luci-space-stack-xxl`	0 0 48px
`$luci-space-stack-xxxl`	0 0 64px

Inline

Use inline spacing variable tokens to separate inline elements arranged horizontally and that may wrap on the right. The last component in an inline set should omit this space.

LUCI Space Inline Image

Example

LUCI Space Inline Form Image Figure: Form Elements component, using $luci-space-inline-left-sm and $luci-space-inline-right-xl

Variables

Apply stacking variables to the margin property.

Name	Value
`$luci-space-inline-left-xxs`	0 4px 0 0
`$luci-space-inline-left-xs`	0 8px 0 0
`$luci-space-inline-left-sm`	0 12px 0 0
`$luci-space-inline-left-md`	0 16px 0 0
`$luci-space-inline-left-lg`	0 24px 0 0
`$luci-space-inline-left-xl`	0 32px 0 0
`$luci-space-inline-left-xxl`	0 48px 0 0
`$luci-space-inline-left-xxxl`	0 64px 0 0
`$luci-space-inline-right-xxs`	0 0 0 4px
`$luci-space-inline-right-xs`	0 0 0 8px
`$luci-space-inline-right-sm`	0 0 0 12px
`$luci-space-inline-right-md`	0 0 0 16px
`$luci-space-inline-right-lg`	0 0 0 24px
`$luci-space-inline-right-xl`	0 0 0 32px
`$luci-space-inline-right-xxl`	0 0 0 48px
`$luci-space-inline-right-xxxl`	0 0 0 64px