COLLINS

COLLINS practices what they preach. The studio that builds brand systems for the world’s most visible companies has built one of the most disciplined design systems on the web. The site runs on 110 CSS custom properties — not the dozen or so that most sites use, but a comprehensive token system that governs every shade of black (and there are many: #1d1d1d, #4c4c4c, #514c49, #5e5855), every spacing value, every transition duration. The color palette extracted from the site reveals 34 unique values, overwhelmingly in the warm neutral range with a single accent — #ff7600, a signature orange used sparingly for interactive emphasis.

The typography pairs Graphik — a geometric sans-serif with the precision of Helvetica but the personality of a studio that knows better — with Portrait Text, a high-contrast serif reserved for editorial moments. The 34 inline SVGs aren’t decorative; they form a functional icon system that handles navigation, social links, and brand marks with the same systematic rigor COLLINS brings to client work. The grid is tight, the whitespace is earned, and every element sits exactly where the system says it should. This is a website designed by people who design design systems.

Beneath the visual restraint, COLLINS runs on serious infrastructure. The content layer is Sanity CMS — a headless system that gives the studio editorial control over case study ordering, image crops, and copy without touching code. Video hosting is delegated to Mux, which handles adaptive bitrate streaming for the project showcase reels. Lottie animations provide micro-interactions — loading states, hover effects, scroll indicators — that add life without the performance cost of video. Our pipeline had to navigate this multi-CDN landscape, resolving asset URLs across three different domains.

The GSAP scroll animations presented the expected challenge: elements translated offscreen waiting for intersection observers to trigger entrance animations. Our static build stripped the positive translateY offsets while preserving the centering transforms that position elements correctly in flow. The 5 Lottie animation files were downloaded as static assets. The 9 failed downloads (out of 104 total assets) were primarily Mux video stream manifests that require authentication tokens — a limitation we document rather than work around. The final static capture preserves the brand system in its entirety: the color tokens, the type pairing, the SVG icon system, and the editorial grid. What COLLINS built is a website that looks inevitable, and that quality survives the transition to static.