Fashion sites default to full-bleed heroes floating in empty space. ORCHIDBLACK goes the other way: the site reads like a technical dossier — a fixed frame with hairline rules, a tabular index of every garment, spec-sheet material cards, and a reading-progress bar. Structure before silhouette, on the page as much as on the body.
Committing to a strict art direction (one ink, one signal pink, no gradients, no shadows) while keeping the page expressive. The halftone system answers that: print-style dot screens replace every fade, rendered on canvas so the dots can react to the cursor.
Editorial archive frame
Fixed top and bottom bars turn every page into a numbered dossier: brand, slogan, indexed navigation, series, reading progress. Content lives in a hairline grid — tables and filets instead of cards.
Interactive halftone system
A Canvas 2D dot screen replaces gradients everywhere: a pink wave band at every page bottom and fine textures behind garments. Dots swell organically around the cursor via a lerped position and gaussian falloff, with the rAF loop sleeping when idle.
No animation library
CSS transforms/opacity plus one requestAnimationFrame text reveal. prefers-reduced-motion renders everything in its final state instantly — no content is ever gated behind an animation.
Variable font over fake family
The display face is Archivo with its width axis at 125% via font-stretch — one variable font instead of a nonexistent "Archivo Expanded" webfont request silently falling back to system fonts.
Deployed on Vercel. Three routes (Collection, Objects, House), a scroll-driven metadata state machine, demo cart and immersive product sheets, full keyboard navigation, and a ~83 kB gzipped bundle with zero animation dependencies.
- A strict constraint system (two colors, no gradients) produces a stronger identity than an open palette — the halftone screens exist because fades were forbidden.
- Reduced motion is a rendering path, not a patch: designing the static state first makes animated states additive instead of load-bearing.