Brik Design System
Theming

Layout Archetypes

The Layout Archetypes Theming Dimension — locked vocabularies for site-header and site-footer patterns. Paired but independent.

The Layout Archetypes Dimension covers site chrome shape — the header at the top of every page and the footer at the bottom. Two sibling vocabularies, paired but orthogonal: a client can pick editorial-transparent nav with legal_heavy footer, or utility-first nav with cta_focused footer, or any other combination. One of the four Theming Dimensions.

Each industry pack declares a default for both in its navigationIA and footerArchetype fields. Consumer sites render the shapes at build time via the BDS <SiteHeader> and <SiteFooter> components from @brikdesigns/bds/blueprints-astro.

Archetypes are layout-level decisions, not styling — they describe which content blocks appear, in what arrangement, and how they respond to scroll. Styling is inherited from the client theme + atmosphere.

Treat archetype selection as a pack default. Clients override per-engagement via the portal Intel tab; the pack default represents Brik's curated recommendation for the vertical. If a client needs a variant outside the vocabulary, either (a) graduate their vertical to its own pack, or (b) extend the vocabulary with a new canonical archetype after a real client validates it.

How to pick

Same resolution model for both nav and footer:

  1. Read the client's industry_slug from company_profiles.
  2. Look up the pack via getPackByIndustrySlug(industry_slug) from @brikdesigns/bds/content-system.
  3. Read pack.navigationIA and pack.footerArchetype — those are the defaults. If absent, fall back to smallBusiness.navigationIA and DEFAULT_FOOTER_ARCHETYPE (four_col_directory).
  4. Check the portal Intel tab — admin may have overridden either per-client. Overrides win.
  5. Pass the resolved values to <SiteHeader> and <SiteFooter archetype={…}> from @brikdesigns/bds/blueprints-astro (footer render surface lands in v0.2).

Until the Astro blueprint components land, client Astro sites hand-roll their header and footer against the semantics documented on each archetype page and swap to the BDS components for free at v0.2 upgrade. The Birdwell & Mutlak site is the reference implementation of editorial-transparent — see web/birdwell-mutlak/src/components/Nav.astro.

On this page

💬