> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Spacing > BEEQ spacing defines the rhythm between elements, sections, and layouts using a shared 4px-based scale. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return

{}

{} {children &&

{children}

}

; };

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

BEEQ 4px spacing grid system - light mode

BEEQ 4px spacing grid system - dark 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. | Token | CSS variable | Tailwind key | Value | | ------ | ------------------- | ------------ | ------------------ | | `xs3` | `--bq-spacing-xs3` | `xs3` | `0.125rem` / `2px` | | `xs2` | `--bq-spacing-xs2` | `xs2` | `0.25rem` / `4px` | | `xs` | `--bq-spacing-xs` | `xs` | `0.5rem` / `8px` | | `s` | `--bq-spacing-s` | `s` | `0.75rem` / `12px` | | `m` | `--bq-spacing-m` | `m` | `1rem` / `16px` | | `l` | `--bq-spacing-l` | `l` | `1.5rem` / `24px` | | `xl` | `--bq-spacing-xl` | `xl` | `2rem` / `32px` | | `xxl` | `--bq-spacing-xxl` | `xxl` | `2.5rem` / `40px` | | `xxl2` | `--bq-spacing-xxl2` | `xxl2` | `3.5rem` / `56px` | | `xxl3` | `--bq-spacing-xxl3` | `xxl3` | `4rem` / `64px` | | `xxl4` | `--bq-spacing-xxl4` | `xxl4` | `4.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. body { box-sizing: border-box; padding: var(--bq-spacing-m); color: var(--bq-text--primary); background: var(--bq-background--primary); } .spacing-scale { display: grid; gap: var(--bq-spacing-m); max-width: 42rem; } .spacing-row { display: grid; grid-template-columns: 4rem 1fr 7.5rem; align-items: center; gap: var(--bq-spacing-m); } .spacing-bar { block-size: var(--bq-spacing-m); border-radius: var(--bq-radius--full); background: var(--bq-ui--brand); } .spacing-bar--xs3 { inline-size: var(--bq-spacing-xs3); } .spacing-bar--xs { inline-size: var(--bq-spacing-xs); } .spacing-bar--m { inline-size: var(--bq-spacing-m); } .spacing-bar--l { inline-size: var(--bq-spacing-l); } .spacing-bar--xl { inline-size: var(--bq-spacing-xl); } .spacing-bar--xxl2 { inline-size: var(--bq-spacing-xxl2); } .spacing-bar--xxl4 { inline-size: var(--bq-spacing-xxl4); } .spacing-value { color: var(--bq-text--secondary); font-size: var(--bq-font-size--s); text-align: end; }

xs3 0.125rem / 2px

xs 0.5rem / 8px

m 1rem / 16px

l 1.5rem / 24px

xl 2rem / 32px

xxl2 3.5rem / 56px

xxl4 4.5rem / 72px

`} > ```css CSS icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .spacing-scale { display: grid; gap: var(--bq-spacing-m); max-width: 42rem; } .spacing-row { display: grid; grid-template-columns: 4rem 1fr 7.5rem; align-items: center; gap: var(--bq-spacing-m); } .spacing-value { text-align: end; } .spacing-bar--xs3 { inline-size: var(--bq-spacing-xs3); } .spacing-bar--xs { inline-size: var(--bq-spacing-xs); } .spacing-bar--m { inline-size: var(--bq-spacing-m); } .spacing-bar--l { inline-size: var(--bq-spacing-l); } .spacing-bar--xl { inline-size: var(--bq-spacing-xl); } .spacing-bar--xxl2 { inline-size: var(--bq-spacing-xxl2); } .spacing-bar--xxl4 { inline-size: var(--bq-spacing-xxl4); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

xs3 0.125rem / 2px

xs 0.5rem / 8px

m 1rem / 16px

l 1.5rem / 24px

xl 2rem / 32px

xxl2 3.5rem / 56px

xxl4 4.5rem / 72px

``` *** ## 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 case | Example | | ------------------- | ------------------------------------- | | CSS custom property | `padding: var(--bq-spacing-m);` | | Tailwind padding | `p-m`, `px-l`, `py-xs` | | Tailwind margin | `m-l`, `mt-xl`, `mb-xs2` | | Tailwind gap | `gap-m`, `gap-xl` | | Logical padding | `p-b-m`, `p-bs-xs`, `p-be-l`, `p-i-m` | | Logical margin | `m-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. body { box-sizing: border-box; padding: var(--bq-spacing-m); color: var(--bq-text--primary); background: var(--bq-background--primary); } .settings-panel { max-width: 34rem; } .settings-panel__content { display: grid; gap: var(--bq-spacing-xs); } .settings-panel__description { color: var(--bq-text--secondary); }

Workspace settings

The card owns its internal padding. The content controls the smaller gap between related text.

Save changes

`} > ```css CSS icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .settings-panel { max-width: 34rem; } .settings-panel__content { display: grid; gap: var(--bq-spacing-xs); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Workspace settings

The card owns its internal padding. The content controls the smaller gap between related text.

Save changes

``` *** ## 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

Spacing inside and between components - light mode

Spacing inside and between components - dark mode

body { box-sizing: border-box; padding: var(--bq-spacing-m); color: var(--bq-text--primary); background: var(--bq-background--primary); } .layout-example { display: grid; gap: var(--bq-spacing-xl); max-width: 42rem; } .layout-card__content { display: grid; gap: var(--bq-spacing-xs); padding: var(--bq-spacing-m); } .layout-card__content p { color: var(--bq-text--secondary); }

Account health

Small internal gaps keep title and description connected.

Billing status

The larger external gap separates this card from the previous region.

`} > ```css CSS icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .layout-example { display: grid; gap: var(--bq-spacing-xl); max-width: 42rem; } .layout-card__content { display: grid; gap: var(--bq-spacing-xs); padding: var(--bq-spacing-m); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Account health

Small internal gaps keep title and description connected.

Billing status

The larger external gap separates this card from the previous region.

``` *** ## 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 Review the spacing custom properties used by BEEQ themes. See the source that defines the BEEQ spacing scale.