Home

Site Layout

Usage

Site layout tokens control the grid-based region system used by the header, sidebars, main content, and footer. Start with:

  • --layout-* tokens for overall dimensions and typography

  • --header-*, --left-sidebar-*, and --right-sidebar-* for region colors and spacing

  • --footer-* and --subregion-* tokens for footer layout and component spacing

  • --skip-link-* tokens for accessibility styling

  • --sidebar-* and --sidebar-toggle-* tokens for responsive sidebar behavior

Most tokens derive from semantic spacing, color, and typography values, so you can align layout changes with your theme by overriding shared primitives first.

Tokens

Layout Dimension Tokens

Control the size and spacing of the main layout grid.

TokenDescriptionDefault Value
--layout-header-heightHeader height64px
--layout-left-sidebar-widthLeft sidebar width280px
--layout-right-sidebar-widthRight sidebar width220px
--layout-main-max-widthMax width of main content800px
--layout-main-paddingPadding around main contentvar(--content-spacing)
--layout-border-widthBorder width for layout regionsvar(--border-width-default)

Layout Typography Tokens

Typography applied to site chrome components.

TokenDescriptionDefault Value
--layout-font-familyFont family for layoutvar(--font-family-sans)
--layout-font-sizeBase font sizevar(--font-size-sm)
--layout-font-weightBase font weight400

Layering Tokens

Z-index values for key layout layers.

TokenDescriptionDefault Value
--layout-z-headerHeader z-index100
--layout-z-skip-linkSkip link z-index1000

Header Tokens

Styling for the sticky header region.

TokenDescriptionDefault Value
--header-backgroundHeader background colorvar(--surface-raised)
--header-border-colorHeader border colorvar(--border-color-default)
--header-paddingHorizontal header paddingvar(--space-4)
--header-gapGap between header itemsvar(--space-2)

Sidebar Tokens

Layout and styling for left and right sidebars.

TokenDescriptionDefault Value
--sidebar-paddingSidebar inner paddingvar(--space-4)
--left-sidebar-backgroundLeft sidebar backgroundvar(--surface-elevated)
--left-sidebar-border-colorLeft sidebar border colorvar(--border-color-muted)
--right-sidebar-backgroundRight sidebar backgroundvar(--surface-background)
--right-sidebar-border-colorRight sidebar border colornone

Footer Tokens

Styling for the footer region and its subregions.

TokenDescriptionDefault Value
--footer-backgroundFooter background colorvar(--surface-raised)
--footer-border-colorFooter border colorvar(--border-color-default)
--footer-paddingFooter paddingvar(--space-8) var(--space-6)
--footer-gapGap between footer itemsvar(--space-6)

Sub-region Tokens

Spacing for start/middle/end placement inside regions.

TokenDescriptionDefault Value
--subregion-gapGap between subregion itemsvar(--space-3)

Row Gap Tokens

Control spacing between multiple rows inside regions.

TokenDescriptionDefault Value
--region-row-gapDefault row gapvar(--space-1)
--header-row-gapHeader row gapvar(--region-row-gap)
--top-row-gapTop region row gapvar(--region-row-gap)
--bottom-row-gapBottom region row gapvar(--region-row-gap)
--footer-row-gapFooter row gapcalc(var(--region-row-gap) * 5)

Skip Link Tokens

Accessibility styling for the skip-to-content link.

TokenDescriptionDefault Value
--skip-link-backgroundSkip link backgroundvar(--color-accent)
--skip-link-colorSkip link text colorvar(--text-color-inverse)

Responsive Sidebar Tokens

Tokens used for responsive sidebar overlays and toggles.

TokenDescriptionDefault Value
--sidebar-transition-durationSidebar transition durationvar(--transition-duration-base)
--sidebar-overlay-backgroundOverlay background colorrgba(0, 0, 0, 0.5)
--sidebar-toggle-topVertical position of toggle25%
--sidebar-toggle-widthToggle width20px
--sidebar-toggle-heightToggle height40px
--sidebar-toggle-left-iconLeft toggle icon content"\u203A"
--sidebar-toggle-right-iconRight toggle icon content"\u2039"
--sidebar-toggle-icon-sizeToggle icon size1.5rem
--sidebar-toggle-backgroundToggle backgroundvar(--surface-elevated)
--sidebar-toggle-border-colorToggle border colorvar(--border-color-default)
--sidebar-toggle-colorToggle icon colorvar(--text-color-secondary)
--sidebar-toggle-color-hoverToggle icon hover colorvar(--text-color-primary)
--sidebar-toggle-z-indexToggle z-index150

Examples

Spacious Sidebar Layout

Wider sidebars with generous padding for navigation-heavy sites:

:root {
  --layout-left-sidebar-width: 320px;
  --layout-right-sidebar-width: 260px;
  --sidebar-padding: var(--space-6);
  --layout-main-max-width: 720px;
}

Minimal Header

Slim header with a subtle divider:

:root {
  --layout-header-height: 52px;
  --header-padding: var(--space-3);
  --header-border-color: var(--border-color-muted);
}

Tips

Start with semantic tokens: Adjust --surface-* and --content-spacing before reaching for layout-specific overrides.

Keep widths balanced: Pair --layout-main-max-width with sidebar widths to prevent cramped main content.

Accessible skip link: Ensure --skip-link-background and --skip-link-color maintain high contrast.

Responsive behavior: Use --sidebar-transition-duration and --sidebar-overlay-background to align sidebar animations with your theme.
Edit on GitHub
© 2026 Stencila