Layout Archetypes

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.

Navigation

The vocabulary of site-header patterns. Locked enums in content-system/vocabularies/.

Decision matrix — by industry

Archetype semantics

What each archetype is for — audience assumptions, conversion intent, when to pick it vs. its neighbors.

editorial-transparent

4 primary links + Services mega-menu + utility cluster (phone + primary CTA). Nav is transparent over the hero at page-load, frosted glass past 80px scroll, hides on scroll-down past 120px.

Fit: luxury dental, med-aesthetic, editorial hospitality — verticals where hero photography must breathe at first load and the header is a secondary surface during browsing.

Avoid when: users land in task mode (search, filter, compare). An always-solid nav serves them better.

utility-first

5 primary links + task-oriented mega-menu + utility cluster with the primary conversion action leading (e.g. "Find a Site", "Schedule a Tour", "Free Consultation"). Always-solid background — never hides, never goes transparent. The top bar is a task surface, not a branding surface.

Fit: real-estate / RV / MHC directories, multi-practice legal, SaaS with deep product catalogs.

Avoid when: the brand moment matters more than the task (luxury, editorial).

service-centric

5 primary links + a prominent mega-menu on Services / Practice Areas / Specialties — the mega-menu IS the product discovery surface. 2-column internal layout: categories on the left, featured practitioner / case card on the right.

Fit: legal multi-practice, specialty medical groups, agencies with a productized service catalog.

Avoid when: service catalog is small (under 6 items). A flat nav does the job.

portfolio-minimal

3–4 primary links, no dropdowns, text-only serif treatment with wide tracking. Hide-on-scroll-down, reveal-on-scroll-up. Utility cluster is minimal — often just an IG icon and a ghost "Inquire" link.

Fit: MUA, photographers, wedding vendors, creative portfolios.

Avoid when: the site has more than one conversion path (book vs. contact vs. shop).

calm-flat

3–4 primary links, NO dropdowns — anxiety-sensitive audiences (wellness, mental health, therapy) don't hover-explore. Always solid at low contrast. Single warm CTA — "Book Session" — no secondary actions competing.

Fit: wellness, mental health, therapy, recovery, palliative care.

Avoid when: the audience is in research / comparison mode — they'll need a mega-menu to survey options.

Drawer patterns

Mobile drawer is a separate axis from archetype — DRAWER_PATTERN_VALUES controls how the mobile menu surfaces, independent of the desktop nav shape. Each pattern has its own interaction contract; mixing pieces (e.g. taking the slide animation from one and the scroll model from another) is how the menu becomes janky.

fullscreen-overlay

The default for editorial-transparent and small-business. The drawer takes over the entire viewport — it never renders as a bounded inner-scroll box, never lets the underlying page peek through, and never depends on --nav-h calculation timing.

Interaction contract:

• Layout. Fixed-position inset: 0; height: 100dvh; z-index above the nav bar. Three flex regions: header (logo + close X), scrollable body, sticky footer (utility cluster — Contact + phone). The body has its own padding so the last item is reachable above the sticky footer.
• Submenu disclosure. Tapping a parent link opens its panel inline. No separate chevron toggle, no "first tap opens, second tap navigates" ambiguity. Parent pages are reachable two ways: the matching child card (when child === parent, e.g. About → "The Practice") or the "View all X →" link at the bottom of mega panels.
• Panel collapse. Toggle the hidden attribute on the panel — not CSS-only display: none, not the grid-template-rows: 0fr accordion trick. Both fail in real browsers: the grid trick leaves implicit auto-height rows when the panel has multiple children (e.g. <ul> + "View all" link), and CSS-only collapse leaves tabbable links inside the a11y tree even when visually hidden.
• Scroll lock. body { overflow: hidden } does not hold on iOS Safari — the documentElement still rubber-bands behind the overlay. Use position-fixing instead: store window.scrollY, set body.style.position = 'fixed'; body.style.top = -scrollY + 'px', and restore via window.scrollTo(0, scrollY) on close.
• Smart-hide pause. If the site uses hide-on-scroll-down, the smart-hide handler must bail while the menu is open (document.body.classList.contains('nav-menu-open')) so it can't fight the overlay.
• Viewport guard. If the viewport crosses into ≥768px while the menu is open (orientation change on a tablet), auto-close. Otherwise the body stays scroll-locked while the desktop nav is in use.

Reference implementation: web/birdwell-mutlak/src/components/Nav.astro.

slide-left-panel / slide-right-panel

The drawer slides in from the named side, leaving a visible portion of the underlying page (typically a translucent scrim). Use when the underlying context still matters — task-mode interfaces (search, filter, compare) where the user wants the menu and their place on the page.

The same scroll-lock + viewport-guard rules apply. The submenu disclosure model is open: a separate chevron toggle is acceptable here because the drawer width may not afford a full-width tappable parent link.

bottom-sheet

The drawer rises from the bottom edge, typically capped at 60–80% of viewport height with a swipe-down handle. Use when the menu is a secondary navigation surface (e.g. a filter sheet on a listings page) and the primary nav is in a tab bar. Rare for marketing sites.

Live pack previews

Each current industry pack with its seeded navigationIA rendered as a structural mock + spec table.

Dental

Real Estate — RV Parks & MHC

Small Business (general)

Footer

The vocabulary of site-footer patterns. Sibling to navigation; same selection model.

Vocabulary

Locked enum in content-system/vocabularies/footer-archetype.ts. Extend only after a real client validates a new variant — resist adding values speculatively from design dreams.

Default: four_col_directory — chosen because it suits the broadest set of service-business sites without over-weighting any one concern. Industries with a specific compliance burden or a single-conversion posture override explicitly.

Decision matrix — by industry

Archetype semantics

four_col_directory

A 4-column informative layout. From left to right:

1. Brand column — logo, tagline, social icon row (3–5 icons max).
2. Directory column — primary navigation links.
3. Secondary column — utility pages (careers, press, blog, etc.) or the second tier of offerings.
4. Visit column — address block, hours-at-a-glance, phone, primary CTA.

Below the columns: a bottom bar with copyright + legal links (Privacy Policy, Terms, HIPAA Notice link if healthcare).

Fit: service businesses with enough content to fill 4 meaningful columns — dental (with legal_heavy override), real-estate, legal, specialty medical, CRE, any vertical where a visitor landing cold on an interior page needs a lot of orientation.

Avoid when: the site has so few content types that some columns are empty, OR when the footer is the primary conversion surface (prefer cta_focused in that case).

cta_focused

Large closing CTA occupying the top two-thirds of the footer — headline + body + prominent primary action button. Below that: a trimmed row with logo, primary nav links inline, address + phone. Bottom bar same as other archetypes.

Fit: single-service businesses, wellness / mental health (where the CTA is "Book Session" and visual calm wants less chrome below), focused landing pages that have built a narrative through the body and want the footer to earn the click.

Avoid when: the site has multiple conversion paths of comparable importance (book vs. contact vs. financing) — a single large CTA flattens the real IA.

legal_heavy

Regulated-industry variant. Layout resembles four_col_directory but with a prominent compliance column replacing the Secondary column (or inserted as a 5th column depending on content volume). The compliance column surfaces:

• HIPAA Notice of Privacy Practices link + effective date
• Privacy Officer contact (name, title, email, phone)
• Non-Discrimination Statement (ACA §1557 for covered providers)
• Notice of Privacy Practices PDF link
• Any jurisdiction-specific disclosures (state board info, license numbers)

Directory + Visit columns present but secondary. Bottom bar includes the full legal link stack (Privacy, HIPAA Notice, Terms, Non-Discrimination, Accessibility).

Fit: healthcare practices subject to HIPAA (Covered Entities + Business Associates), healthcare recipients of federal funding (§1557), legal multi-practice firms with state disclosure requirements, financial services firms with consumer-disclosure obligations.

Avoid when: compliance scope is minimal — the extra weight makes the footer feel bureaucratic on a simple service-business site.

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

Related

• Theming Overview — the four-layer cascade in context
• Atmospheres — CSS overlay layer; orthogonal to layout archetype
• Blueprints — section composition patterns
• Content System / Industries — packs declare default archetypes
• Blueprints-Astro Package Spec — architecture contract for the Astro render surface