Skip to main content
BEEQ spacing overview - light mode
Spacing controls how close elements feel, how clearly sections separate, and how easily users can scan an interface. BEEQ uses one shared spacing scale for padding, margin, and gaps so product layouts stay consistent across components and screens. Use BEEQ spacing tokens instead of one-off pixel values. The scale gives designers and developers the same language for compact details, grouped content, and larger page regions.

​
4px grid system

BEEQ spacing is built from a 4px grid. Most values are multiples of 4px, which creates predictable alignment and helps layouts scale cleanly across viewports.
BEEQ 4px spacing grid system - light mode
The scale uses T-shirt naming from xs3 through xxl4. Smaller values support tight relationships inside components, while larger values create separation between regions.
BEEQ spacing tokens - light mode

​
Spacing scale

The current BEEQ spacing scale is exposed as CSS custom properties and Tailwind spacing keys. BEEQ defines spacing values in rem so layouts can scale with the root font size. Pixel values are shown as the default equivalent, based on a 16px root font size.
TokenCSS variableTailwind keyValue
xs3--bq-spacing-xs3xs30.125rem / 2px
xs2--bq-spacing-xs2xs20.25rem / 4px
xs--bq-spacing-xsxs0.5rem / 8px
s--bq-spacing-ss0.75rem / 12px
m--bq-spacing-mm1rem / 16px
l--bq-spacing-ll1.5rem / 24px
xl--bq-spacing-xlxl2rem / 32px
xxl--bq-spacing-xxlxxl2.5rem / 40px
xxl2--bq-spacing-xxl2xxl23.5rem / 56px
xxl3--bq-spacing-xxl3xxl34rem / 64px
xxl4--bq-spacing-xxl4xxl44.5rem / 72px
The example below shows a representative subset of the spacing scale. Use the table above as the complete reference for the tokens available in BEEQ.

​
Using spacing in code

BEEQ exposes one spacing scale. Gap utilities do not use separate gap tokens; they use the same values as padding and margin.
Use caseExample
CSS custom propertypadding: var(--bq-spacing-m);
Tailwind paddingp-m, px-l, py-xs
Tailwind marginm-l, mt-xl, mb-xs2
Tailwind gapgap-m, gap-xl
Logical paddingp-b-m, p-bs-xs, p-be-l, p-i-m
Logical marginm-b-l, m-bs-m, m-be-xl, m-i-m
Use logical utilities for layouts that need to adapt to writing direction or avoid left/right assumptions. Use CSS custom properties when writing custom CSS outside Tailwind utility composition.

​
Internal and external spacing

Internal spacing is the space inside an element or component. It usually uses smaller values because the content is related. External spacing is the space between elements, groups, or page regions. It usually uses larger values to create separation and improve scanability. Component internals already use BEEQ spacing. When you build custom layouts, use the same scale so page-level rhythm matches the components inside it.
Spacing inside and between components - light mode

​
Usage guidelines

Choose spacing values from the BEEQ scale instead of arbitrary pixels. This keeps layout rhythm aligned with components and design tokens.
Use smaller values such as xs, s, and m for labels, descriptions, icon-text pairs, and content that belongs together.
Use larger values such as l, xl, xxl, and above to separate cards, panels, sections, and page regions.
Use repeated spacing decisions for similar content patterns. Consistent rhythm makes pages easier to scan and reduces visual noise.
Prefer utilities such as p-b-m, p-i-m, m-b-l, and m-i-l when spacing should follow block and inline directions instead of physical top, right, bottom, and left.
Avoid values like 10px, 18px, or 30px unless there is a clear exception. Custom values make interfaces harder to align and maintain.

​
Resources

Global CSS variables

Review the spacing custom properties used by BEEQ themes.

Tailwind spacing source

See the source that defines the BEEQ spacing scale.