Em-based container math
The visual scale follows the type size because the page shell uses em units. On desktop the content column resolves to about 714px wide inside the centered shell.
What this is
This report turns the hsla0001 parity lab into the first WVA v2 specimen. The exact mirror lives under /preview/hsla0001/. This page explains what the mirror preserves and why the site works.
Unaffiliated archive study. This local specimen is for visual and implementation analysis. It does not represent hsla0001, does not change the source site, and keeps noindex headers by default.
Mirror
Loading
Browse the archived mirror in place: click through routes and use back and forward. Preserved outbound links point at live sites and may refuse to load in a frame. Open sends the current route to a full tab.
Archive state
Mirror coverage
The exact mirror covers the homepage, terms, privacy pages, two app privacy pages, and product pages for Rams, Void, Protocol, Loop, Stack, Framework, Slate, Crown, and Soho.
Safeguards
Google Tag Manager and Next runtime references were stripped from the static mirror. The mirror and annotated preview use noindex headers and fresh-cache headers.
Mirrored route map
Visual system
Layout
A centered column sets the entire site. The container maxes at 34em with 1.5em side padding. The hero image fills that measure, then the brand row and product list continue the same axis.
Typography
The type is regular-weight system UI throughout. Hierarchy comes from size, spacing, and opacity. Secondary text sits at white with 40 percent opacity, which gives the page its quiet ranking system.
Color and material
The field is pure black. Text is white, secondary text is dim white, and icons supply the main surface contrast. The bundle icon uses a dark iOS-like tile color.
Rhythm
The row is the core unit: app icon, title block, and trailing state glyph. Desktop rows are tall enough to feel like product tiles. Mobile rows compress to a tighter app-list cadence.
Motion
Objects enter with one-second fade and translate animation using a soft easing curve. Delays advance in 0.09 second steps from hero through footer. In-progress rows use a slow spinner.
Responsive behavior
At the mobile breakpoint the hero starts at the viewport top, body text drops to 14px, platform metadata hides, and the row system becomes more like a native app list.
Implementation mechanics
Wrapper display matters
The parity pass found that product-row wrappers needed display contents behavior. The visible row looked right before that fix, but computed row measurements were wrong.
Animation needs a separate diff rule
The remaining numeric QA discrepancy came from spinner geometry sampled at different rotation angles. The layout metrics and row positions matched, so the spinner diff was classified as animation sampling.
Static mirror policy
Internal links route within the mirror. Product and App Store links remain live where the exact mirror needs them. Scripts that would hydrate or track against the source site were removed.
What makes it work
- The page uses one strong structure and keeps every object on it.
- The hero photo gives enough atmosphere that the rest of the page can stay dry.
- The icon rows convert product navigation into a familiar app-list pattern.
- The opacity system gives hierarchy without adding weights, labels, badges, or dividers.
- The motion sequence makes the sparse page feel intentionally staged instead of empty.
Reusable patterns
Single-column product index
Use one proportional column when the product set is small and each item has enough identity to stand alone. The column works because there are nine products, not dozens.
Opacity hierarchy
Dim secondary text instead of adding heavy labels. This works best on a dark ground with very few competing states.
Icon as proof object
Let product icons carry color, detail, and brand energy while the surrounding interface stays quiet.
Sequential entrance
Use a small, consistent delay ladder when the page needs one paced reveal. Keep reduced-motion behavior explicit.
Do not copy blindly
- The black field works because the page is short, quiet, and product-led. A content-heavy site would need stronger reading affordances.
- The app-list pattern depends on strong icons. Weak icons would make the rows feel generic.
- The low-detail typography can feel underbuilt if the product names and subtitles lack precision.
- The exact mirror preserves live outbound links. Any share-safe page needs a separate review and framing layer.
Open questions
- Motion was verified through computed timing and rendered state, not frame-by-frame animation capture.
- The original site's owner intent is unknown. This report reads the public artifact only.
- The report does not evaluate app quality, business performance, or conversion behavior.
- The mirror should stay noindex unless Noah separately approves a different publication posture.