Website Visual Archive / 1of1studio
1of1studio presents a brand-identity studio as a working archive. The proof object is the index number: nearly every project, image, and video carries a tabular figure like 01.1.1, placed on a fluid 24-column grid, so the site reads as a catalogue of the studio's output. One typeface, gray on gray, a single red accent, and full-bleed media that reveals on scroll do the rest.
This report turns the 1of1studio capture into WVA specimen 2: a 22-route parity mirror plus a read of how the site works. The exact mirror lives under /preview/1of1studio/.
Browse the archived mirror in place: click through routes and use back and forward. Images load from the original Sanity CDN and video from Mux, so a live connection is needed for media. Open sends the current route to a full tab.
The mirror covers all 22 content routes: home, about, archive, contact, jobs, and 17 project pages. The sitemap also lists an admin route, which is left out on purpose. Each route is captured as its fully rendered, scrolled state.
The Next.js runtime and page data were stripped so the mirror does not hydrate or call the source site. A newsletter popup that opens through script is hidden. Images stay on the Sanity CDN and video on the Mux and Bunny CDNs, preserved live like outbound links; only the same-origin CSS, font, and favicons are self-hosted. Mirror and report stay noindex.
A fluid 24-column grid runs the whole site, set through CSS custom properties with a 16px margin and gutter and a calc-based column unit. A fixed lane holds the index numbers. The home page toggles between an overview and a denser index; project pages open with a multi-column header, a numbered contents list, and then full-bleed media.
One typeface carries everything: Unica77, a Swiss neo-grotesque, with a Helvetica fallback. Hierarchy comes from size, uppercase micro-labels, and tabular figures for the index numbers rather than from weight or color.
The ground is a light warm gray near #f0f0f0. Text is a two-tone gray system, #434343 for primary and #b4b1b1 for secondary, with a single deep red near #b51414 as accent. The client work supplies every other color.
The numbered specimen is the unit. A systematic spacing scale from 4px to 200px sets the vertical rhythm, and the tabular index number anchors every row. The page feels like a catalogue because the numbering never stops.
The overview grid holds each project's image or video at zero opacity and reveals it only when you hover that numbered cell, so the page reads as a quiet index until you point at it. Entrance uses opacity and transform, and muted video loops autoplay in place.
The grid drops from 24 columns to 12 at the 900px breakpoint and the spacing scale steps down. The multi-column headers reflow to stacked blocks, and the index keeps its tabular numbering on the short measure.
Pages are Next.js static per route on Vercel. Imagery is served from the Sanity CDN with content-hashed URLs and a srcset ladder; video is Mux, delivered as progressive MP4 through a Bunny CDN alias. Content and media live off-origin.
The grid column count, margins, gutters, and the full spacing scale are CSS custom properties, so the layout math is declarative and the responsive steps are a handful of variable overrides.
Each route ships its own CSS chunk on top of a shared global sheet. The mirror had to collect the union of every route's CSS; loading only the home sheet collapsed project pages to a single column.
Video sources are injected on hydration and reveal animations set inline opacity, so a plain static copy would render partly invisible with dead videos. The mirror captures the hydrated, scrolled, revealed DOM, then strips the runtime.
The signature interaction, hovering a numbered cell to reveal its media, is JS setting inline opacity. Because each media layer is a descendant of its cell, the mirror reproduces the reveal with a plain CSS hover rule, so it survives without the runtime.
Number every project and media item and set them on a strict grid when you have a real body of work to catalogue. The system reads as rigor.
Express the grid and spacing scale as custom properties. Responsive behavior becomes a few overrides instead of duplicated rules.
Keep type and interface neutral so photography and video supply the palette. This depends on strong imagery.
Reveal media on scroll and let muted loops play in place. Motion adds life without competing with the content.