Layout & Spacing
Layout is where BugPort's "editorial but operational" character becomes structural. Marketing breathes with generous editorial spacing; the dashboard tightens into structured density; the plugin compresses into a narrow task panel. Across all of them, a strict four-shape radius system, calm borders, and a minimal shadow scale keep the product feeling like one coherent surface. This page defines containers, vertical rhythm, grids, radii, borders, shadows, and empty-state layout.
The throughline: structure should be felt, not seen. Spacing and alignment do the work so the chrome stays quiet.
Layout principles
- Marketing is editorial. Wide containers, large vertical rhythm, one idea per band. Space is the design.
- Dashboard is structured density. Information-rich but calm — tight, consistent rhythm and aligned columns so operators scan quickly without clutter.
- Plugin is compressed. A narrow single-column panel where every pixel is task-relevant; advanced settings collapse out of the way.
Containers
Each surface has a target content width. Stay inside these ranges.
| Surface | Container width |
|---|---|
| Marketing | 1200px |
| Text block (reading column) | 720px |
| Dashboard | 1280–1440px |
| Auth card | 420–480px |
| Plugin panel | 320–420px |
The 720px text block matters even on wide marketing pages: running prose stays in a readable measure regardless of how wide the surrounding band is.
Vertical rhythm
Spacing between blocks is tuned per surface — generous for marketing, tight for the dashboard.
| Context | Vertical spacing |
|---|---|
| Marketing section | 80–96px |
| Dashboard section | 24–32px |
| Card stack | 16–24px |
| Form group | 16px |
| Micro (within a row) | 8–12px |
Grid guidance
- Marketing: a 12-column grid for editorial flexibility — asymmetric splits, full-bleed bands, and offset imagery.
- Dashboard: a CSS grid, commonly a roughly 1.2fr / 0.8fr split (primary content beside a narrower evidence or detail rail).
- Plugin: a single column. The narrow panel does not subdivide; capture preview stacks above the submit action.
The radius system
BugPort uses exactly four shapes. Nothing else. This is what makes the product feel intentional rather than templated.
A control with a 16px radius, or a card with an 8px radius, is off-system. When in doubt, ask which of the four shapes an element is — if the answer is "none of them", the radius is wrong.
Borders
Borders are calm and thin. Two kinds only:
- 1px ash neutral — the default quiet separator for cards and dividers.
- 1px Iris Edge #eac8fe brand — when a card or frame should read as on-brand, especially screenshot keylines and selected states.
No heavy or multi-colour borders, and no doubling a border with a strong shadow.
Shadows
Elevation is minimal and never stacked. The scale:
- None / very soft (default). Most cards sit nearly flat on the cream canvas; the canvas-to-white contrast already implies elevation.
- 32px blur — feature screenshots. A feature screenshot or hero frame may use a larger 32px-blur shadow to lift it off the page.
- Subtle hover —
0 5px 20px. A gentle lift on interactive hover. - Never stack shadows. One shadow per element. Stacked or layered shadows read heavy and off-brand.
Empty-state layout
Empty states are a layout pattern, not an afterthought. The structure is strict and calm:
See Product UX Principles for the copy patterns that fill this layout.
Layout do's and don'ts
- Keep running prose in a ~720px measure even on wide pages.
- Use the four radii exactly: 4px controls, 16px cards, 48px tags, 90px pills.
- Lock per-surface vertical rhythm to the ranges above.
- Keep one shadow per element; reserve the 32px blur for feature screenshots.
- Don't invent in-between radii like 8px or 12px.
- Don't stack shadows or pair a heavy shadow with a heavy border.
- Don't widen the dashboard past ~1440px or the plugin past ~420px.
- Don't fill an empty state with more than one title, one sentence, and one action.