Layout

Use bg-page (Neutral 50) as the page background and White as the surface/card color.

Use neutral semantic aliases for quiet fills, inactive controls, map-adjacent structure, page separators, and table dividers.

Use Primary only for decisive controls, links, focus, and selected states.

Use the shared <Section> pattern for major page sections. Do not hand-roll section borders or one-off separator CSS.

All major sections and distinct layout regions should use the standard outlined layout rule, including horizontal and vertical dividers where needed.

Section content must stay inside the vertical separators. The content column should have enough internal padding that text, buttons, cards, and media never intersect the guide lines.

The area outside the vertical section separators reads one tint darker from the neutral scale than the content band, usually Neutral 50 around a White content band.

Headers use the same separator logic: a bottom separator plus container-aligned vertical guide lines.

Use map and aerial imagery for emotional real-estate moments, with careful contrast management.

Do not place eyebrow kickers above section headings or H1s. Headings open directly with the primary statement.

Use restrained radii for non-interactive surfaces, but make interactive controls fully rounded by default. Fully rounded controls use a border-radius equal to half their height. Expanded dropdown panels use a consistent rounded-rectangle radius rather than a pill shape.

Structural layout elements (sections, cards, panels, containers) use square corners and sit flush to their parent edges. Internal content should use generous horizontal padding to maintain readability.

Component edges should use semantic border tokens through .vc-edge.

Avoid blurred shadows as a visual-system primitive. Separate layers with spacing, the .vc-edge treatment, surface contrast, imagery, and typography.

Translucent blur may appear only as deliberate image-over-media chrome. Routine app headers, cards, fields, tabs, and panels should use solid surface, subtle, or primary fills.

Cards should be spacious, white, crisp-edged, and quiet. Avoid the old tight tactical-card feeling.

The old charcoal/amber system is retired from primary UI use. Do not continue amber bracket labels, amber selected states, or dark operator-console panels unless a narrow analytical view explicitly needs them.

Product workspaces should feel like app surfaces before they feel like long marketing pages. On desktop, map-first dashboards should be bounded to the viewport below the authenticated header; overflow is handled inside the relevant control or detail panel.

Do not let short control panels stretch to full height simply to fill a grid track. Panels should use the space their content needs; dense detail panels can scroll internally when the viewport is tight.

Choose breakpoints where the content starts to break down, not where a specific device model begins. Prefer flexible grid tracks, minmax(), fr units, and content-sized panels before adding bespoke media-query behavior.

Preserve logical source order as layouts adapt. Keyboard focus should move through brand/header controls, view controls, filters, queue, and detail in a sequence that still makes sense when columns stack.

Touch and pointer targets should stay comfortably spaced. Vestcove's largest button component is capped at 2.5rem with a 1.25rem radius; mobile-only controls should have enough surrounding space to avoid accidental activation.

Avoid global page scroll on desktop app workspaces unless the page is truly a document. If a map, canvas, or other workspace anchors the product, the browser viewport should remain stable and secondary panels should carry their own scroll.