GOLDSHORE

Gold Shore · Astro system

Build once. Extend everywhere.

A composable page contract for new platform, service, editorial, and campaign routes—using the established black, white, and copper Vibrant visual system.

Core primitives

A stable page-building method

Use the page template once, then compose content with section variants. New routes inherit navigation, width, spacing, responsive behavior, and visual tokens.
01

Page shell

Metadata, sticky navigation, footer, hero hierarchy, actions, and an optional supporting panel.

02

Column system

One shared 12-column axis controls widths and alignment from the header through every section.

03

Section rhythm

Default, surface, accent, and compact variants create hierarchy without one-off page CSS.

04

Responsive rules

Column counts collapse predictably while typography and controls remain readable.

Composition

Slots where content belongs

The template controls structure without constraining each page’s story. Astro content and components remain code-native.
<GoldShorePageTemplate
  title="Page title"
  description="Search description"
  heading="Visible page heading"
>
  <GoldShoreSection
    heading="Section heading"
    columns={2}
  >
    <!-- Astro components or content -->
  </GoldShoreSection>
</GoldShorePageTemplate>

Ready for the next route

Start with the shared template and spend implementation time on the page’s actual content—not rebuilding its shell.

Page-specific CSS should describe the content module only. The template owns the site geometry.

Request briefing