Design toolbar

Visual design aids and prototyping utilities for checking layout, alignment, and rhythm.

Overview

The Design toolbar is a floating menubar that appears at the bottom of your browser window during development. It provides visual overlays and toggles to help you verify your designs align to the baseline grid, check spacing, and debug layouts.

Show/hide the toolbar

Press T to toggle the toolbar visibility, or click the small “Dev” button in the bottom-right corner when hidden. The toolbar state persists across page loads and navigation.

To top

Tools

Each tool can be toggled by clicking its button or pressing its keyboard shortcut.

Key Tool Description
D Theme Toggle between light and dark mode, overriding system preference. When active, shows “Light” or “Dark” to indicate the current override.
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.
M Margins Highlight the horizontal page margins (the space on either side of your content). Shows the margin zones in orange.
G CSS Grids Outline all .grid layout primitives on the page. Shows an outline around each grid and displays the detected column count. The overlay also shows the grid’s internal column structure.
O Outlines Add outlines to all layout primitives (.stack, .cluster, .grid, .sidebar, .center) and their children. Helps visualize component boundaries and nesting.
X BG Colors Toggle background colors on/off for elements with bg-* or scheme-* classes. Useful for seeing through colored 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 visual hierarchy without being distracted by content.

To top

Settings

Click the Settings button to open the settings popover. These settings affect the column and baseline overlays.

Columns

Set the number of columns for the column grid overlay (1–24). This doesn’t affect your actual CSS grid layouts—it’s purely for visual reference.

Baseline 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. Options use --line-* tokens:

  • 0—No gap
  • 1px—1 pixel gap
  • 1/4—var(--line-025)
  • 1/2—var(--line-05)
  • 1—var(--line-1) (default)
  • 2—var(--line-2)

Margin

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 toolbar 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 livewires-dev-tools key.

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 CSS 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 the shapes, sizes, and spacing of your layout. This helps you see if your visual hierarchy works without being influenced by the actual words.

Checking color scheme boundaries

Toggle X BG Colors off to make all background colors transparent. This reveals how your layout would look without color and helps identify where sections begin and end.

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