How the site works

The brand-and-content layer of the aThereThere site design system. What we're doing, why each piece exists, and how a new offering becomes a new page.

This file is the canonical narrative for the content team. Edit it directly to update the system. The page at /narrative-system renders this markdown.

For the parts inventory — every token, primitive, component, hero variant, and diagram with live previews — see /style-guide.

01 — Core principle

Worlds evoke. Systems explain. Patches identify.

The site is built around three roles. Every visual decision sits inside one of them. When something feels off, the first question is: which role is it doing? Then: is it doing that role's job, or trespassing on another's?

Worlds

• What: Illustrated environments that frame each offering.
• Where: Hero band (top), thin footer artifact band (bottom), and occasional small page artifacts when a page needs light world continuity.
• Who owns it: Designer + image-commissioning workflow.

Systems

• What: The grayscale editorial body — type, dividers, diagrams, layout primitives.
• Where: Everything between the hero and footer bands.
• Who owns it: Engineering + design system.

Patches

• What: A grayscale badge that names the offering on the page. Shape varies by the offering's pricing position — see Section 04.
• Where: One per offering page, overlapping the hero/body seam, repeated in the CTA strip.
• Who owns it: Designer (line-art) + engineering (SVG component).

02 — Page archetypes

Two archetypes, two jobs. Homepages invite. Supporting pages explain. Pick the right archetype before composing anything else — it sets hero weight, illustration usage, patch usage, and tone.

Homepage

Supporting page

Supporting pages split into two subtypes:

• Offering pages — every product we sell or give away. Free Van Westendorp, Free MaxDiff, Tier 1 / 2 / 3. Each has a patch, a characteristic diagram, and a world.
• Information pages — /methodology, /about, /case-studies. About the firm itself, not a specific offering. No patch, no characteristic diagram. World still recommended.

03 — Worlds

Each offering brings a new world.

A world is the illustrated environment a page lives inside — its scene, its palette, its mood. The world appears at the top as a hero composition and can return at the bottom as a thin artifact band. Between them, the page goes mostly grayscale and editorial, with only occasional small world artifacts when they are deliberately commissioned.

When we ship a new offering, we ship its world: one hero illustration, one thin footer artifact band, one accent color, one patch, and optionally one or two small page artifacts. Pages of related offerings share family resemblance but each anchors its own world.

Core rules across every world

• No people, ever. Rovers, satellite dishes, spacecraft, treehouses, lanterns, planted flags, rope bridges, lit windows — the machines and the marks stand in for the people who would otherwise be there. The only exception is founder portraits on /about, which are a separate, bordered visual treatment.
• One world per product per page. The homepage may have a "look into each world" overview band — the only exception to the one-world rule.
• Every world has at least one object. A focal point. The machine or artifact is the story.
• 1950s space-travel-poster register. Flat illustrative, graphic, vintage-confident. Not painted gouache. Not cartoony.

Current and planned worlds

Configuration lives in lib/worlds.ts. Accent colors are offering-led decisions wired per world.

Frame breakout — how the world meets the body

The world doesn't sit in a clean rectangle. It breaks the hero band's frame in a deliberate way that integrates the illustration with the page layout. Five variations. Pick one per page; never stack.

1. Top breakout — a vertical element (a tree, a spire, a tall structure) extends above the hero's nominal top edge into the page's white space.
2. Bottom fade — the environment dissolves toward the bottom of the hero, creating a soft transition into the content section below.
3. Side breakout — the landscape extends past the left or right edge of the hero into the page margin.
4. Diagonal break — the landscape ends on a diagonal, guiding the eye from the hero into the content that follows.
5. Ring or arc breakout — a planetary ring, an orbital arc, or a long horizontal element extends beyond the hero into negative space.

04 — Patches

⚠️ The per-offering table below is keyed to the retired taxonomy (Free MaxDiff, Tier 1 Agentic Research, Tier 2 "Expedition," Tier 3 "Continuous Pricing"). For the current per-offering badge spec (today's five pages, generation-ready), see content/visual-research/badge-brief.md. The principles below still hold; the table is updated when the real art lands.

One patch identifies each offering.

The patch is the offering's sigil — a grayscale badge with curved labels around a small line-art chart or icon at the center. It overlaps the hero/body seam at the top of the page and repeats in the closing CTA strip.

One per offering page, never two. The center artwork is the only thing that changes per offering; ring treatment and inscription style stay consistent across the family. Shape varies by the offering's pricing position.

Shape hierarchy

The patch shape signals where the offering sits on the free → paid escalation. Geometry communicates hierarchy before the inscription does.

Note: free and paid are pricing properties, not offering types — every entry above is an offering. The free offerings are full-fledged offerings (with MCP servers attached, same as the paid ones); they just happen to be free.

Per-offering patch content

The line-art content at the center, plus the inscription pattern, per offering.

Implementation: components/OfferingPatch.tsx. Three standard sizes:

• 240px — hero overlap (top of supporting page)
• 180px — mid-page (rare)
• 140px — CTA strip (close of page)

05 — Per-offering diagrams (readouts)

Each offering has a characteristic diagram.

The diagram is the readout the study produces — the visible answer the offering returns. It's rendered in the same grayscale editorial system as the rest of the body, lives where the section recipe places it (between hero and CTA strip), and is part of the supporting page's content brief alongside the world and the patch.

Diagram primitives live in components/diagrams/ (CurvesChart, RangeBar, StepRow, etc.).

06 — What a world ships

Five core deliverables per world, plus optional small artifacts. The first three drop into /public; the accent is one line in lib/worlds.ts; the patch is an SVG slot in the MethodPatch component.

1. Hero illustration — 2000 × 1400 (homepage) or 2000 × 800 (supporting). Painterly, torn-paper bottom edge, low-contrast atmospheric content inside the safe zone so text remains readable. Apply one frame breakout variation (see Section 03).
2. Hero illustration · mobile — 768 × 1100 or 768 × 600 (matches hero variant). Optional but recommended — the desktop image will be used as fallback otherwise.
3. Footer artifact band — 2000 × 400. Same illustrative language as the hero, but not a complete second scene. It should be thin, light, sparse, and built around one clear focus artifact from the world. Footer material must be fully contained inside the crop; unlike hero art, it does not break beyond the image edge. The canvas background should match the hero/page relationship: page-white when the hero resolves to white, or the same atmospheric field when the hero uses a colored field.
4. Accent color — one warm tone borrowed from the world. Wired in lib/worlds.ts as an RGB triplet. (Currently overridden to grayscale site-wide; will turn on per-world later.)
5. Patch artwork (line-art) — one per offering. Designer draws the line-art identity per the per-offering patch content table in Section 04. Engineering inlines it as SVG inside the appropriate shape from the shape hierarchy.
6. Optional page artifacts — small separately generated world fragments, such as a plant, spacecraft, rock, survey flag, instrument case, antenna, or lantern. These extend the world down the page without becoming body illustrations or full scenes.

The image commissioning workflow itself — brief structure, model, two-chat pattern — lives in _dev/header-prototype/IMAGE-COMMISSIONING.md. It produces gpt-image-2 briefs anchored to the prototype templates' safe-zone coordinates.

07 — For the content team

Treat the world as a deliverable, on the same line as the copy.

When drafting a new offering page:

1. Lock the page title and offering name.
2. Pick the page archetype (homepage or supporting). For supporting pages, decide subtype — offering or information — that decides whether a patch and characteristic diagram are required.
3. Name the world. Brief the world with a scene, palette, and mood — see Section 03 for current world briefs.
4. Pick the frame breakout variation (see Section 03).
5. (Offering pages only) Coordinate with design on the patch — shape per the hierarchy (Section 04), line-art per the per-offering content table.
6. (Offering pages only) Coordinate on the characteristic diagram for the offering (see Section 05).
7. Write the body copy against the offering-page section recipe below.

The page can't ship without all the deliverables. Coordinate the world brief, patch sketch, and diagram at the same moment you lock the page title — not after the copy is final.

Section recipe for an offering page

In order, top to bottom:

1. Hero (subpage variant) — eyebrow + display-m headline + body-lg lede. World illustration with frame breakout.
2. Offering patch overlap — anchored to the hero/body seam, right side.
3. What this offering does — h2 + diagram (per Section 05) + 3 short paragraphs
4. How it works — h2 + StepRow (01 / 02 / 03 / 04)
5. What you get — h2 + two WhatYouGetCard items side-by-side
6. When to use / When not to use — h2 + WhenToUseBlock two-column lists
7. CTA strip — offering patch + headline + button + meta row
8. For Agents row — icon + two link rows
9. Stats strip — three numeric stats
10. Footer band — world returns

Reference implementation: app/free-van-westendorp/page.tsx.

Where things live