Apollo v0.18.0
Design
Style Guide
Content
Administration
Design Context / Style Guide

# Templates

Template planning and slot-map references now live inside the shell, under Design, instead of in a separate reference shell.

# Templates

Dedicated template workspace. Existing slot-map artifacts were migrated from index.html to reduce noise in the main style guide while design-reference analysis is still in progress.

# Core Templates

Source: `myron.component-surface.templates.v1.json5` · 6 templates. Templates define page-level composition — they compile to patterns + primitives. Diagrams below are slot-maps (not full-page renders). shadow.* forbidden on all.

## template.landing

template html: main 4 slots Allowed: layout.*, space.*, color.semantic.*, typography.* Forbidden: shadow.*
template.landing · slot-map composition diagram
header pattern.headerSystem
hero pattern.heroWithCta · pattern.heroSimple
sections repeatable — any ordered combination
↳ pattern.featureGrid · pattern.pricingTable · pattern.testimonialGrid
↳ pattern.ctaBand · pattern.faqList · pattern.sectionBand
footer pattern.footerSystem

a11y: Ensure exactly one main landmark on the page.

## template.pageStandard

template html: main 4 slots · width variant: narrow/standard/full Allowed: layout.*, space.*, color.semantic.*, typography.* Forbidden: shadow.*
template.pageStandard · slot-map composition diagram
header pattern.headerSystem
intro pattern.sectionBand
content cms.contentBody · [any governed]
footer pattern.footerSystem
variant width: `narrow` `standard` `full`

a11y: Maintain heading hierarchy for content pages.

## template.contentSingle

template html: main 6 slots Allowed: layout.*, space.*, typography.*, color.semantic.* Forbidden: shadow.*
template.contentSingle · single post/article · slot-map
header pattern.headerSystem
title cms.contentTitle (→ H1 in document outline)
meta primitive.text · primitive.link · [*] — author, date, tags
featured cms.contentFeaturedMedia · primitive.figure
body cms.contentBody (sanitized composition — no raw injection)
footer pattern.footerSystem

a11y: Ensure title is an H1 within the document outline.

## template.blogIndex

template html: main 5 slots Allowed: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
template.blogIndex · post list + pagination · slot-map
header pattern.headerSystem
title primitive.heading · primitive.text
collection cms.collectionQuery → cms.collectionTemplate → [items]
↳ props: source:posts · limit · orderBy:date · order:desc
pagination cms.collectionPagination (mode: numbers · prevNext · both)
footer pattern.footerSystem

a11y: Collection results should be a semantic list when possible.

## template.searchResults

template html: main 5 slots Allowed: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
template.searchResults · slot-map composition diagram
header pattern.headerSystem
search control.input (must have label or aria-label)
results cms.collectionQuery → cms.collectionTemplate → [items]
pagination cms.collectionPagination
footer pattern.footerSystem

a11y: Search input must have a label or aria-label.

## template.notFound

template html: main 4 slots Allowed: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
template.notFound · 404 guidance · slot-map
header pattern.headerSystem
message primitive.heading · primitive.paragraph · primitive.text
actions primitive.link · control.button · control.input (search)
footer pattern.footerSystem

## 404

### Page not found

We couldn't find the page you were looking for. Try searching or return home.

# SaaS Templates

Source: `myron.component-surface.saas-pack.v1.json5` · 4 templates. Slot-map diagrams document shell composition and extension points.

## template.appShell

template slot-map diagram 4 slots Allowed: layout.*, space.*, z-index (--myron-z-overlay for overlay slot) Forbidden: shadow.*
template.appShell · slot-map composition diagram
topbar pattern.subNavBar or custom app header · position: sticky top-0
sidebar pattern.sidebarNav · min-height: 100vh
main Page content · flex: 1 · overflow-y: auto
overlay Off-canvas panels / modals · z-index: --myron-z-overlay (20)

## template.appDashboard

template slot-map diagram extends appShell Forbidden: shadow.*
template.appDashboard · slot-map composition diagram
shell template.appShell (sidebar + topbar + overlay)
header Page title + action buttons · pattern.banner (optional)
widgets Grid of composite.statsTile · composite.emptyState if no data
data pattern.dataTable + pattern.tableToolbar

## template.appSettings

template slot-map diagram extends appShell Forbidden: shadow.*
template.appSettings · slot-map composition diagram
shell template.appShell (sidebar + topbar + overlay)
layout pattern.settingsLayout (nav sidebar + content area)
nav pattern.sidebarNav · settings sections
form Form fields using control.* · submitted via control.button

## template.appAuth

template slot-map diagram no sidebar Forbidden: shadow.*
template.appAuth · slot-map composition diagram
centered-card pattern.signInForm · max-width: 360px · centered viewport
brand Logo / product name above the card
footer Legal links · optional

# Ecommerce & Auth Templates

Source: `myron.component-surface.ecommerce-pack.v1.json5` · 8 templates. Composition diagrams only. Ecommerce templates extend the CMS header/footer system.

## template.productList

template layout: sidebarFilters · topFilters Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem
banner pattern.banner · optional
filters pattern.productFilters
sort pattern.productSortControl
products pattern.productGrid
footer pattern.footerSystem

## template.productDetail

template layout: split · stacked Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem
content pattern.productDetails + composite.productGallery
related pattern.relatedProducts
footer pattern.footerSystem

## template.cart

template layout: twoColumn · stacked Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem
items composite.cartLineItem ×n
summary composite.orderSummary
footer pattern.footerSystem

## template.checkout

template layout: twoColumn · stacked Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem (minimal)
stepper pattern.checkoutStepper
step ↳ checkoutAddressForm ↳ shippingMethodSelector ↳ paymentMethodSelector + paymentForm ↳ checkoutReview
summary composite.orderSummary
footer pattern.footerSystem · optional

## template.orderConfirmation

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem
content pattern.checkoutConfirmation
footer pattern.footerSystem

## template.register

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem · optional
form pattern.registrationForm
footer pattern.footerSystem · optional

## template.passwordRecoveryRequest

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem · optional
form pattern.passwordRecoveryRequestForm
footer pattern.footerSystem · optional

## template.passwordReset

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
header pattern.headerSystem · optional
form pattern.passwordResetForm
footer pattern.footerSystem · optional

# Template Library Foundation (Pending Analysis)

Design references are being collected. Family standards are provisional until analysis is complete.

## Reference Intake Status

analysis.status

Status: pending curation of external references. This page will host normalized findings once review criteria are finalized.

## Provisional Family Scaffold

template.family.scaffold · docs-only

- Home · TBD variants
- About · TBD variants
- Contact · TBD variants
- Blog / Editorial · TBD variants
- Ecommerce · TBD variants
- App / SaaS · TBD variants

No concrete variant implementations are in scope for APO-005.