Design panel

A fixed-position dev panel for checking layout, alignment, and rhythm. Shadow-DOM web component, keyboard-driven, zero dependencies.

Overview

The design panel is a <design-panel> web component that slides in from the right edge of your browser window. It provides visual overlays and toggles for verifying alignment to the baseline grid, checking spacing, and debugging layouts. Chrome lives in Shadow DOM so it stays isolated from your page styles.

Opening the panel

Press T anywhere on the page to toggle the panel. Or click the floating action button at the bottom-right of the viewport. Keyboard shortcuts are input-aware: typing in a form field won't trigger them.

Tabs

The panel has four tabs: Guides, Typography, Colors, and Theme. In Live Wires only the Guides tab is active. The other three auto-hide because no editor content is slotted in. (They're wired up in Assembly, where the panel originated.)

To top

Tools

Each tool can be toggled by clicking its button in the Guides tab or by pressing its keyboard shortcut.

Key Tool Description
B Baseline Display horizontal lines at every baseline increment. Use this to verify text and spacing align to the vertical rhythm. Subdivision lines (lighter) show fractional increments.
C Columns Show a column grid overlay across the viewport. Useful for checking layout alignment to a column-based grid. Configure column count, gap, and margins in Settings.
D Dark mode Toggle between light and dark mode, overriding system preference.
G Grids Outline all .grid layout primitives on the page and display the detected column count.
M Margins Highlight the horizontal page margins (the space on either side of your content).
O Outlines Add outlines to all elements so you can see layout boundaries and nesting.
X Hide backgrounds Strip all background colours and images. Useful for seeing through coloured sections to check underlying layout.
R Redact Apply a "redacted" font to prose content, replacing readable text with abstract shapes. Useful for evaluating layout and hierarchy without being distracted by content.

To top

Settings

The Guides tab also exposes settings for the column and baseline overlays.

Columns

Set the number of columns for the column grid overlay (1-24). This is purely a visual reference; it doesn't affect your actual CSS grid layouts.

Subdivisions

Choose how many subdivisions to show between baseline lines:

  • 1: No subdivisions, only main baseline lines
  • 2: Half-line subdivisions (default)
  • 3: Third-line subdivisions
  • 4: Quarter-line subdivisions

Gap

Set the gap between columns in the overlay. Labels match the panel select exactly:

  • Default: var(--gutter) (default)
  • 0: No gap
  • 1px: var(--line-1px)
  • 0.25: var(--line-025)
  • 0.5: var(--line-05)
  • 1: var(--line-1)
  • 2: var(--line-2)

Margin mode

Choose which margin mode the column overlay uses:

  • Section: Matches the responsive margins of .section (default)
  • Full-bleed: No margins, edge to edge
  • Wide: Matches the narrower margins of .section-wide

To top

Persistence

All panel settings and toggle states are saved to localStorage. When you reload the page or navigate to a different page, your tools remain active and settings are preserved.

To reset to defaults, clear your browser's local storage for this site or use browser dev tools to delete the design-panel:state key.

Routing tool classes to a different target

By default the panel writes tool classes (dark-mode, show-baseline, etc.) to the <body> element. Pass an overlay-target attribute on the custom element to route them somewhere else:

<design-panel overlay-target=".workspace"></design-panel>

Handy if you're prototyping an app shell and want the overlays to stop at a layout boundary.

To top

Tips

Checking baseline alignment

Enable B Baseline and scroll through your page. Text baselines should sit on the grid lines. If text appears between lines, check your line-height values or spacing utilities.

Debugging grid layouts

Use G Grids to see exactly how many columns each .grid element has at the current viewport size. This is especially useful for auto-fit grids that change column count responsively.

Evaluating visual hierarchy

Enable R Redact to blur text content and focus on shapes, sizes, and spacing. This helps you see if your visual hierarchy works without being influenced by the actual words.

Checking content structure without colour

Toggle X Hide backgrounds to strip all background colours. This reveals bare content hierarchy and exposes where sections begin and end without relying on colour.

Verifying responsive margins

Enable M Margins and resize your browser. The margin overlay responds to the same breakpoints as .section, so you can verify your content aligns with the margin system.

To top

Related documentation

To top