Strata brand patterns, motion & marketing templates

The brand surface lives mostly in apps/marketing. This doc indexes the reusable patterns so you extend them instead of inventing parallels. Illustration work: read apps/marketing/docs/ILLUSTRATIONS.md first — it is the authoritative system for the hairline art.

Brand patterns

Pattern	Source	Rules
Pixel-mosaic backdrop	baked at curation time by `scripts/pixelate-backdrops.ts`; grout overlay is `.pixel-grout` in `global.css`	4px cells everywhere; cell color by dominant-color vote, never average; grout is `rgb(0 0 0 / 5%)`; source images near-lossless. The runtime canvas component that used to do this live was deleted 2026-08-01 — baking is the only path, and it is why nothing may scale the stage.
Hairline illustrations	`agent-card-carousel.tsx`, system doc `docs/ILLUSTRATIONS.md`	Single-pixel `currentColor` strokes (`vector-effect="non-scaling-stroke"`), real occluding objects painted back-to-front; ~50/50 iso `Slab` volumes vs 2D signal diagrams; reading direction bottom-left → top-right; svg `aria-hidden`.
Accent bands	`section-kit.tsx` → `accentBand(color)`	Paints the band AND injects a runtime `--brand` override so `text-brand`/`color-mix()` follow inside the band. Use it; don’t hand-set band colors. Mono captions sit `mt-4` BELOW the band, never padded inside.
Section kit	`section-kit.tsx`	`SectionEyebrow`, `SectionHeader`, `MoreLink`, `QuietLink` — the only section scaffolding.
Dot grid	`.marketing-dot-grid` / `-loose` (global.css)	Backdrop texture; fill via the `--dot-grid` token (fainter in dark).
Noise	inline SVG `feTurbulence` (global.css hero grain) + `--noise-url`	Film-grain overlays.
Squircle	`.logo-wrap`, `BrandMark.astro`	`corner-shape: squircle` behind `@supports`, half-radius fallback (see `tokens.md`).
Closers	`product-pages/product-closing.astro`, `orbit-closing-section.tsx`	Linear-style: bare CTA (no card) + numbered hairline-column index with the current page’s number skipped. linear.app is the standing reference.

The Elle orb is the hero-sheet sun ONLY; every chat surface uses the static black-and-white ElleAvatar.

Motion rules

Motion lives in apps/marketing/src/styles/global.css (named keyframes) and component-local rAF loops. The conventions:

The house ease is cubic-bezier(0.2, 0.7, 0.2, 1) (used by elle-reveal-up, journey-in); otherwise stock ease-out/ease-in-out. New entrance animations use the house curve.
Every animation ships a prefers-reduced-motion guard (animation: none block or an active-gate on the rAF loop). No exceptions.
Entrance patterns set only animation-* properties, leaving transition free for theme color changes (the .hero-enter discipline; staggering via a --enter-delay custom property).
Component animation is rAF-driven and active-gated (only animates on-screen/hovered) per the illustration system’s “Animating” rules.
Route transitions are the native @view-transition cross-document fade.
Named keyframe vocabulary (reuse before adding): elle-reveal-up, journey-in/journey-blink, goal-flow-in/out, m-orbit-drift, stage-art-in, hero-enter, canvas-sheet-in, goal-loops-shimmer, agent-carousel-ring.

There is no centralized easing/duration token set yet — when one lands it belongs in packages/ui/src/css/, not per-app.

Marketing templates

Page-level building blocks (all under apps/marketing/src/):

Layouts: layouts/Layout.astro (owns <head>), layouts/ContentLayout.astro (static header/footer content pages), layouts/LegalLayout.astro.
Page shell: components/marketing/marketing-page.tsx.
Product pages: components/marketing/product-pages/ — product-hero.astro, spread-row.astro, loop-beats.astro, product-closing.astro.
Sections: pricing-section.tsx, content-showcase.tsx, closing-cta-section.tsx, section-kit.tsx, and under product/ — elle-section.tsx, capability-carousel-section.tsx, select-features-section.tsx, signal-loop-section.tsx, ads-platform-tiles.tsx, platform-logos.tsx.

This list is the set actually reachable from a page. It named four components that had already been deleted (why-layers-section, goal-loops-section, plus elle-transcript and manifesto, removed 2026-08-01) — check reachability before adding to it, since a name here reads as a sanctioned starting point.
Blog: MDX per docs/BLOG_STRUCTURE.md; authoring via the /blog command.

New marketing pages compose from these; a genuinely new block joins this list (and the section kit) rather than living as one-off page DOM.