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

topbarpattern.subNavBar or custom app header · position: sticky top-0

sidebarpattern.sidebarNav · min-height: 100vh

mainPage content · flex: 1 · overflow-y: auto

overlayOff-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

shelltemplate.appShell (sidebar + topbar + overlay)

headerPage title + action buttons · pattern.banner (optional)

widgetsGrid of composite.statsTile · composite.emptyState if no data

datapattern.dataTable + pattern.tableToolbar

template.appSettings

template slot-map diagram extends appShell Forbidden: shadow.*

template.appSettings · slot-map composition diagram

shelltemplate.appShell (sidebar + topbar + overlay)

layoutpattern.settingsLayout (nav sidebar + content area)

navpattern.sidebarNav · settings sections

formForm fields using control.* · submitted via control.button

template.appAuth

template slot-map diagram no sidebar Forbidden: shadow.*

template.appAuth · slot-map composition diagram

centered-cardpattern.signInForm · max-width: 360px · centered viewport

brandLogo / product name above the card

footerLegal 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.*

headerpattern.headerSystem

bannerpattern.banner · optional

filterspattern.productFilters

sortpattern.productSortControl

productspattern.productGrid

footerpattern.footerSystem

template.productDetail

template layout: split · stacked Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*

headerpattern.headerSystem

contentpattern.productDetails + composite.productGallery

relatedpattern.relatedProducts

footerpattern.footerSystem

template.cart

template layout: twoColumn · stacked Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*

headerpattern.headerSystem

itemscomposite.cartLineItem ×n

summarycomposite.orderSummary

footerpattern.footerSystem

template.checkout

template layout: twoColumn · stacked Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*

headerpattern.headerSystem (minimal)

stepperpattern.checkoutStepper

step ↳ checkoutAddressForm ↳ shippingMethodSelector ↳ paymentMethodSelector + paymentForm ↳ checkoutReview

summarycomposite.orderSummary

footerpattern.footerSystem · optional

template.orderConfirmation

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*

headerpattern.headerSystem

contentpattern.checkoutConfirmation

footerpattern.footerSystem

template.register

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*

headerpattern.headerSystem · optional

formpattern.registrationForm

footerpattern.footerSystem · optional

template.passwordRecoveryRequest

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*

headerpattern.headerSystem · optional

formpattern.passwordRecoveryRequestForm

footerpattern.footerSystem · optional

template.passwordReset

template Token hooks: layout.*, space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*

headerpattern.headerSystem · optional

formpattern.passwordResetForm

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