Vestcove
← HomeDocs →

Layout

The section grid, square structural panels paired with rounded interactive controls, and how shells respond across viewports.

Visual direction.

  • 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.

Section grid.

  • Use the shared <Section> primitive on major page sections.
  • <Section> applies .vc-section, .vc-section-grid, and the outlined content container: a single subtle top border, container-edge vertical borders, and no doubled borders between adjacent sections.
  • All future landing-page sections must use this Section pattern so the border treatment remains consistent across the site.
  • Use .vc-outline-columns or .vc-outline-flow when a section contains distinct adjacent columns, panels, cards, sidebars, or repeated regions that need vertical or responsive dividers.
  • Keep every section's content inside those vertical guide lines; add internal padding to the content container rather than letting content touch the rules.
  • Use a neutral-tinted outer gutter around the separators so the content band feels intentionally contained.
  • Use .vc-header-grid on product headers when a header sits above sectioned content.
  • Do not add diamonds, dots, nodes, or intersection ornaments.
  • On dark sections, use .vc-section-grid-dark so separators switch to the white translucent rule.
  • If a guide line collides with content, move the content or change the layout rather than adding local borders.

Responsive product shells.

  • 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.