A month-long build — from sketch to shelf.
Quiet outdoor fabric isn't a new idea — hunting and game brands have engineered it for years. What doesn't already exist is a reason for someone outside that world to want it. That was the actual project: not inventing quiet fabric, but building an identity substantial enough that a stranger feels responsible for owning it — the mark, the palette, the type, the layout, the motion, the graphics, the copy, the campaign, built and rebuilt until each piece earned that.
01 — Identity
It started as a sketch of a jacket, nothing more — turning that sketch into an actual brand, with a mark and a voice and a reason to exist, ended up being closer to product design than graphic design most days. The first logo had real conviction behind it, but it never worked once it sat next to everything else; what stuck is an S built from the shape of a stereo speaker. Intentional, not decorative — the brand is about what a speaker does and doesn't do, so the logo is a literal speaker before it's anything else. The wordmark stays lowercase throughout: "sound," never "SOUND." The windbreaker came first, and once its shapes and its feeling were settled, the rest of the line followed almost on its own.
02 — Built and rebuilt: motion, widgets, interaction
I wanted the site to talk the way the brand talks — quiet, not empty. Buttons breathe a little on hover instead of just swapping color. Words don't just appear on load, they echo into place and leave a trace behind them. The opening move is a swipe right with an echo trailing it, and a click sends a small shockwave out from wherever the cursor actually is before the page redirects. I wanted video in there too, but most of it never had a real place, so almost all of that motion ended up built in code instead — which meant most of the actual engineering wasn't writing the site once, it was instrumenting it, watching it break, and fixing the real cause.
- →The opening animation went through three full rewrites before it matched the brand: a busier multi-part entrance, then a radiating click-style echo, and finally the single clean teal wipe with fading traces that shipped — fewer moving parts read as calmer, which is the actual point.
- →The product carousel used to jump on a 10px swipe threshold. Rebuilt so the front card follows your finger 1:1 with the next card riding in beside it, committing or snapping back only once you release.
- →Grain, without shifting the colors: the film-grain texture over every section is meant to be a true no-op blend — but SVG filters default to linearRGB, where "neutral gray" renders ~70% brighter, and it visibly washed the palette out until the filter was pinned to color-interpolation-filters="sRGB".
- →Hover and the lightbox: product photos grow ~3% on hover and open a click-through lightbox; every hover effect site-wide is gated behind @media (hover:hover) so a tap on a touchscreen can't get stuck mid-animation — while button tap feedback, which runs off the click event, still fires normally.
- →One design unit, --u, scales nearly every spacing and type value across the whole site — until, on a phone, that same shrinking unit collapsed a newsletter form to 70px and a nav bar to 18px tall. Fixed by releasing specific elements from the unit below a breakpoint; the lesson was checking the math at the width where it stops flattering.
03 — Graphics, the ad system, and getting it on the site
Making the actual content might have been the most fun part of the whole project — a real excuse to live in Photoshop, build new gradient maps and textures from scratch, and pick up techniques I hadn't needed before this campaign. The hero image alone went through several full versions before one finally felt right. Product photography exists front and back for every piece, but the back never gets its own thumbnail — it cross-fades in on hover over the same frame, so the grid doesn't get crowded twice over. The three ad creatives at the bottom of the shop page sit in a single justified row: each image's flex-grow is set to its own aspect ratio, so photos of different shapes sit at equal height and fill the strip exactly with nothing cropped to force a match — the wordmark ad centered between the other two, a thin strip in the footer's own dark color just above it, a small "house lights down" cue before the full-bleed images hit. None of it is decoration bolted onto a finished page — the ad row, the hover cross-fade, and the footer strip are all layout and interaction work, built and tuned in the same CSS and JS as everything else on the site.
04 — Copy
Spec language only works if it's accurate. Loungewear copy that promised you could move "without waking anyone next door" got rewritten — that's a claim about a room the fabric can't back up. And the windbreaker isn't baggy, it's loose — a tight quiet jacket isn't new, a loose one that still doesn't make noise is, so that distinction became the actual product claim, not a style note.
05 — Shipping
- →Regression pass across seven widths, 360–2560px, plus a contrast check on every text pairing.
- →Packaged for Netlify: case-sensitive paths, relative icons, index.html at root.
06 — The campaign
The site was never the whole plan — it was the anchor for a real launch. The same identity that got built and rebuilt on the site — the wordmark, the ad creatives, the front/back product photography — carried straight over onto social, because a brand system that only works on one page isn't actually a system yet.
That's the actual test a brand system has to pass — not whether it looks right in one file, but whether it still reads as itself the moment it leaves the site and shows up somewhere the audience didn't expect it.
All of it was about a month of work, most of it thought through before falling asleep and then built the next day. There's enough here now — mockups, specs, a working site, a campaign with real numbers behind it — that taking it further is a genuine option: get a sample jacket manufactured, and the brand is already standing, ready to be used. It's the Andy Dufresne approach, more or less — build the identity in full before you ever need it, so it's real the moment you do. For now, it's fake until it's real.