Compose a shared site shell and landing page

Use the same shell on every page so navigation, identity, and the way visitors reach the footer remain stable. The shell has a header composition followed by page content and a footer composition. Give the outer containers the site-header and site-footer classes: these are useful semantic hooks for a Style’s layout CSS, while the blocks themselves remain canonical base blocks.

Shared navigation and header

The header is a full-width container with a brand heading and a canonical navigation-menu. Keep the primary links short and predictable; use shallow links for pages in the same site and reserve external URLs for destinations that genuinely leave the site.

Annotated copyable composition:

{
  "blocks": [
    {
      "id": "site-header",
      "type": "container",
      "display": {"layout": "flex", "direction": "row", "gap": 24, "full_width": true},
      "style": {"class": "site-header items-center justify-between border-b px-6 py-4"},
      "blocks": [
        {"id": "site-brand", "type": "heading", "content": {"text": "Acme", "level": "h2"}},
        {"id": "site-navigation", "type": "navigation-menu", "content": {"items": [
          {"label": "Home", "href": "/"}, {"label": "About", "href": "/about"}, {"label": "Contact", "href": "/contact"}
        ]}},
        {"id": "site-cta", "type": "button", "content": {"label": "Get started", "href": "/start"}, "display": {"variant": "default"}}
      ]
    }
  ]
}

Shared footer

Put the footer after page-specific content. A short text block and a second navigation menu are enough for a small site; add only links visitors need for trust, support, or legal requirements.

Annotated copyable composition:

{
  "blocks": [
    {
      "id": "site-footer",
      "type": "container",
      "display": {"layout": "flex", "direction": "column", "gap": 12, "full_width": true},
      "style": {"class": "site-footer border-t px-6 py-10"},
      "blocks": [
        {"id": "footer-copy", "type": "text", "content": {"text": "© 2026 Acme. Built with care."}},
        {"id": "footer-navigation", "type": "navigation-menu", "content": {"items": [
          {"label": "Privacy", "href": "/privacy"}, {"label": "Terms", "href": "/terms"}
        ]}}
      ]
    }
  ]
}

Theme contract

Theme the whole site through shadcn CSS custom properties in a Style’s custom_css. Define tokens such as --primary, --card, --radius, and their related foreground, surface, border, input, ring, and background variables with oklch(...) values. This makes every page using the Style consistent. Do not target component classes and do not invent a data-block-type attribute: the renderer does not emit that attribute, so either approach matches nothing and fails silently. Use style.class on the shell and sections for layout and spacing only; token declarations are the theme boundary.

LANDING-PAGE COMPOSITION

Assemble a simple landing page in this order: shared shell -> layout-hero -> layout-feature-grid -> layout-contact-form -> shared footer. Start with the header composition, then append each referenced recipe’s top-level blocks in that order, and finish with the footer. Fetch a recipe by slug from /llmrecipes/<slug>.txt and adapt its IDs, copy, and tenant-specific references before publishing. The page-level skeleton is intentionally only an ordering guide:

{"blocks": ["shared header", "layout-hero", "layout-feature-grid", "layout-contact-form", "shared footer"]}

Keep one consistent section rhythm, normally using comparable vertical padding on each referenced section and enough gap for the content to scan as separate bands. Drop the feature grid when the offer needs one focused explanation, or drop the contact form when the page’s only conversion is a link. Reorder only when the visitor’s decision path demands it—for example, put the contact form before the feature grid for a service request. Do not copy the referenced recipes’ JSON trees into this page; their slugs are the source of truth and prevent the assembled guidance from drifting.