The system for showing BetaHub's product as believable, frameless app fragments floating on the dark page. Every AI capability is told the same way: the inputs, the AI moment, the win — and nothing else. This book defines the tokens, type, components, rules, and motion so each new proof looks like it belongs to the same product.
Decide what earns belief before writing markup. A fragment shows the least evidence that convinces its audience the feature works — and nothing past it. Extra detail doesn't add credibility; it adds noise and invites doubt. This is the first rule because it decides the content the rest of the book only styles.
.audience.yml — run the landing-page-audience-simulator agent in parallel. Pick the personas the feature is for; they expect different proof.Believe ∩ credible, cut everything in Filler, and add a Missing item only if it kills a shared Doubt.Convincing minimum = the highest-signal set, not the smallest. Skip the live run for trivial tweaks and reason from the documented personas; run it for real when a fragment is new or you're unsure what to cut.
If a fragment breaks one of these, it stops looking like the product and starts looking like a diagram.
Each fragment carries a single idea. Show only the elements that prove it — drop chrome, filler rows, and decoration. Calm beats busy.
The flow climbs to one resolved outcome — a merged bug, a critical flag, a completed report. The green (or red) feature card is the payoff; there is exactly one per fragment.
Palette and labels come from the actual dashboard (betahub-tickets). Bug titles, heat scores, and names read like a real game's queue — never lorem.
No window chrome. Cards float on the section with soft shadow and air around them. The dark page is the canvas; the flow connects the cards, not a border.
On scroll, parts rise in order and the win settles last — the animation re-stages the cause→effect. Under 500ms, staggered, and fully skipped for reduced-motion.
Surfaces and text come from the real app. Accents are semantic: cyan = AI, green = win/positive, red = critical, amber = heat/warning, blue = links & players.
Three families, each with one job. Poppins gives outcomes weight; Open Sans carries UI text; JetBrains Mono marks machine values (IDs, scores).
The smallest shared pieces. Every fragment is built from these — they never change shape between capabilities.
The building blocks of a flow. Inputs are neutral cards; the win is a feature card (green) or critical flag (red). Chat uses bubbles.
Atoms + cards composed into full proofs. These are the canonical layouts — copy them when building a capability. Scroll to trigger, or replay.
One scroll-triggered sequence per fragment, re-staging the cause→effect. Parts .pf-rise in source order; the connector .pf-pops; the outcome .pf-win settles last with a single glow.
--d-reveal 440ms--d-pop 380ms--stagger 90ms
--ease-out for rises & fades--ease-back for the pop & win settle (slight overshoot)
IntersectionObserver at ~35% visibility adds .is-in once. Never loops on its own — only the manual Replay re-runs it.
prefers-reduced-motion shows the final state instantly — no transforms, no glow. Always test both.