# Design system: pod-with-mission

Visual edition with token swatches, typography, card/framing examples and the
motion QA checklist: [design-system.html](design-system.html). Keep these examples
aligned with this reference and app/styles/tokens.css.

## Preserved identity

Tokens: app/styles/tokens.css. Reset/accessibility: base.css. All components:
patterns.css. Near-black default, semantic --pod-* aliases, lime/emerald signal,
gold accents, Cabinet Grotesk / General Sans / IBM Plex Mono, curved radii.
.pod-on-paper uses the shared dark canvas for articles and legal reading.
Artwork retains warm ivory within framed media. No override layers.

## Cinematic compositions

CinematicHero supports a poster and optional FilmSources:
hls, mp4, mobileHls, mobileMp4, mobilePoster. HeroFilm is the client boundary.
Native HLS is preferred; hls.js loads dynamically on compatible browsers;
unsupported/fatal HLS errors fall back to MP4, then to the poster on failure.
Reduced-motion users see the responsive poster with no video request. Playback
pauses out of view or when the document is hidden. The approved refinement
removes visible labels and playback controls. Reduced motion still selects a
poster, but this autoplay treatment is not claimed as fully motion-accessible.

HomepageExperience.tsx provides the main visual composition: a charcoal material
field, centred wordmark, a short three-part system description, and two large
image cards linking to Mission and Our Approach. HomeInvitation pairs the
founder's motivation with three direct email paths. The homepage has three main
blocks: cinematic hero, system centrepiece, and compact invitation.

The CarbonPod page reuses the centrepiece with one primary heading. Its three
system parts and conceptual diagram are native expandable details. Our Approach
uses OperatingChain from Story.tsx; Company uses ScaleVision with phase labels
In progress / Planned / Roadmap. Supporting pages keep brief visible copy and reveal evidence
or operating detail on expansion.

Navigation reserves its own space above the hero without a broad shadow.
Nav and framed heroes sit close to the viewport edges. Their horizontal margins
match the nav-to-hero gap exactly: 24px on desktop and 20px on phones. Heroes
retain 28px corners; media fills the complete frame, with centred headlines and
actions over a restrained dark scrim. Mobile hero media preserves the drawing
within a portrait composition. Supporting content uses a readable maximum width. Cards
and invitation splits collapse to one column on phones. Preserve the DLS font
aliases, with explicit family fallbacks when a font-loader variable is absent.

## Existing patterns

All CinematicHero instances use warm-paper sketch artwork beneath a dark scrim,
white foreground copy and green accents. The homepage hero is the sixteen-second
continuous memory-story drawing film; supporting pages use matching stills.
Cards use warm-paper image fields with charcoal copy placed in reserved negative
space. The centrepiece keeps its charcoal texture. SketchStudy combines charcoal
explanatory copy on warm paper with an HLS material animation. Reduced motion
uses a still without loading video.

Patterns.tsx retains SectionMarker, SectionHead, FactsGrid, ImpactFrame,
NumberedSteps, MediaSplit, TwoUp, ClosingBand, and other existing patterns for
reuse. Primary contact defaults are email links. Unused patterns remain available;
they do not establish actual project status. Form-specific CSS has been removed.

## Accessibility and checks

One main heading per page. Clear heading hierarchy, descriptive link names,
visible focus rings, keyboard navigation, and a skip link. Reveals never hide
content when scripts are unavailable. Concept backgrounds are decorative;
meaningful diagrams have accessible titles. Maintain contrast over every film
frame, image poster, and reading surface. Verify at 375px and desktop widths.

## Framed refinement

Cards reserve a clear copy area within the paper artwork field, use restrained
borders, and expose a whole-card focus ring. The Mission variant links to CarbonPod and
Approach rather than back to itself. Insights follow the same image/text pattern
with varied existing artwork. Article H1s scale explicitly from 36px to 68px;
body copy targets 17px and supporting metadata 13px. Email hit areas are at least
44px high. Reading-time estimates use actual MDX content at 200 words/minute.

The material-study panel and visual card grid use the same viewport margins as
the heroes. The homepage hero has one Discover CarbonPod action. Its dark
scrim is restrained to let the latest clean-loop artwork remain clear.

Latest card direction: warm-paper artwork fields with blank space for charcoal
text on the image field, without separate dark copy panels. Material study uses
the same paper field. Hero uses a versioned clean-loop asset path to prevent
previous HLS segments being reused from browser cache.

Paper artwork uses restrained brightness normalization, multiply blending and
feathered edges so the source paper does not appear as a separate rectangle.

Homepage hero: Renewal. with For cleaner air. as a one-time letter-by-letter subtext
reveal after a 1.5-second delay; the completed text stays visible (static for reduced motion). Discover CarbonPod uses the existing transparent DLS ghost button with a
downward arrow for the in-page scroll destination.

HomeInsights adds three image-field article invitations below the system
experience, with calculated reading times and an All insights link. Cards
stack on smaller screens and retain whole-card keyboard focus.

## Artistic imagery system

BRAND.md defines the approved hand-drawn botanical/landscape art direction.
Apply it to heroes, cards, editorial images, material studies and films.
The visual grammar is tapered pencil strokes, charcoal shading, organic
branching, restrained crosshatching, muted green and harvest gold on warm paper.
Avoid mixing photographic concept images, glossy renders, flat vector plants,
or mechanically drawn roots into this illustration family. Real operational
evidence, when available and approved, is a separate evidence surface.

### Palette roles

| Role | Token / value | Use |
| --- | --- | --- |
| Main canvas | --pod-canvas / #07090A | Site structure and dark supporting sections |
| Artwork substrate | --pod-art-paper / #F3EBDB | Paper image fields and animation background |
| Artwork copy | --pod-art-ink / #242820 | Headlines and links on paper |
| Artwork secondary copy | --pod-art-muted / #5B6053 | Supporting copy on paper |
| Harvest accent | --pod-gold / #D9B978 | Reference for restrained ochre marks |
| Interface signal | --pod-signal / #8AE04A | Interaction accents and focus |
| Secondary signal | --pod-signal-2 / #12B76A | Existing emerald identity accent |

Illustration pigments may vary naturally within this family. Interface colours
must use semantic tokens. Keep Cabinet Grotesk for display, General Sans for
body/UI and IBM Plex Mono for metadata; do not bake substitute fonts or labels
into generated art. Preserve the logo colours and 12/20/28px corner system.

### Composition and component use

- Heroes: reserve headline space, keep a complete narrative subject and provide
  desktop and mobile compositions. The existing white-copy/dark-scrim treatment
  remains; adjust the scrim only enough to keep every frame readable.
- Paper cards: reserve blank space for charcoal copy instead of hiding artwork
  beneath dense gradients. Keep whole-card links and visible keyboard focus.
- Material studies: use botanical residue detail and tactile charcoal marks.
  The artwork background should meet its paper surface without a visible inset
  rectangle, halo, repeated texture tiles or mismatched colour.
- Dark material fields: use drawn charcoal texture, with quiet space for copy.
- Meaningful diagrams: give them accessible descriptions and keep technical
  labels in editable UI. Decorative illustrations do not replace evidence.

Prefer true transparent artwork over paper-filled cutouts. Existing multiply
blending, brightness normalization and feathering may integrate older assets,
but must not erase pale roots, soften the crown excessively or conceal bad crops.
Inspect the actual rendered result. Never generate replacement plant parts in
a different drawing style or attach procedural root spokes to botanical art.

### Frame construction and narrative coherence

Treat a plant, stem and root system as one illustrated subject. Register the
whole drawing at a shared ground anchor with one consistent scale; do not stretch
or position its upper and lower halves independently. Root size, branching,
shading and attachment must follow the plant's stage. As the plant fades, roots
fade too. Residue and charcoal stages contain no unexplained living root network.
New roots appear only with the returning stem/sapling.

For the memory story, charcoal crosses the fixed soil line and disperses into
fine sketch marks before renewal. This is symbolic visual dispersal; do not add
claims of measured agronomic benefit or literal dissolution. Root/soil artwork
changes across stages without moving the soil surface or repeating a static
lower strip. Preserve plant identity across drawings and avoid abrupt changes
in foliage, trunk anatomy or scale.

The composition must retain a common background colour, fixed camera, complete
crown/root clearance and ample safe margins. Line boil belongs to individual
strokes, not to the frame, ground level or paper boundary.

### Animation delivery and QA

Prepare the narrative/frame plan, create the drawings, inspect the complete
storyboard, then assemble the film. The hero targets sixteen seconds with
deliberate growth, transformation, incorporation and renewal beats. Short ink
dissolves are permitted; no reverse playback, camera travel or digital warping.
First and last frames match exactly, including sapling, roots, soil and background.

Review every keyframe for style, anatomy, root proportionality, stem attachment,
stage-to-stage continuity, charcoal progression and absence of clipping. Review
the encoded film separately for shifting, flashes, mismatched paper rectangles,
moving ground and a discontinuous seam. Timing/file checks alone do not establish
artistic coherence. Export animated GIF previews as full-frame records so delta
cropping cannot make the frame appear to move.

Use HLS with MP4 and poster fallbacks through the existing film component.
Check desktop and 375px layouts, mobile framing, contrast, loading/failure
fallbacks, visibility handling and the reduced-motion poster. The current
interface omits playback controls; retain its documented accessibility
limitation rather than claiming full motion accessibility.

Reference: output/sketch-animation/coherent/earth-memory-coherent.mp4;
reviewed-storyboard.jpg and QA.md in the same directory. This is the art/coherence
reference; shipped asset versions and provenance belong in FILM.md.

## Social-media templates

Use [SOCIAL-KIT.md](SOCIAL-KIT.md) and [social-media.html](social-media.html) for
platform-specific portrait, square, landscape and vertical compositions. Keep
the palette, typography, unchanged mark and botanical coherence shared with the
website. Native social graphics use short headlines and a small brand signature,
with actions in captions/native UI rather than painted website buttons.

House export sizes and safe margins are production starting points, not platform
maximums. Check actual upload crops, carousel pages, Story/Reel covers and phone
readability. Recompose a portrait film so the whole plant and root narrative
remains visible. Carousel pages share margins, numbering and one idea per page.
Sources, alt text, speech captions, evidence status and specific publishing
authorization are part of the social asset review.