Angus Gruzman, Jack Freeman, and Griffin James form the Sound Advice & Advanced Transmissions Union — SAATU. Sound design always lives inside someone else's visuals. Yet through thoughtful design by Systems Studio and precise digital execution by Upclose, SAATU’s new online portfolio carves out a strong, unmistakable brand presence of its own.

We partnered on Frontend + backend development

Design Systems Studio

Year 2022

At the core of SAATU’s visual language is a dynamic system of barcodes — a digital-first identity element unique to each project. Each <Barcode/> component is automatically generated on the frontend according to a set of design rules. The backend assigns a unique project ID; an algorithm transforms this ID into an eight-digit number. Each digit is mapped to a specific graphic pattern, and these patterns are assembled within a 4×2 grid, creating a barcode that is both systematic and distinct.

This approach seamlessly blends branding with code: a visual marker that is purely generative, yet always consistent with the creative vision.

To extend the barcode system beyond the website, we developed an internal tool for Systems Studio and SAATU.

The tool allows users to select a project from the portfolio and generate custom visuals based on its barcode. They can modify the size of the patterns, adjust color palettes, and overlay barcode grids onto background images — easily creating promotional assets and social media posts. The tool ensures that SAATU’s brand remains flexible without ever diluting its coherence.

In SAATU’s world, sound isn’t just a background element — it’s the lead character. To highlight this, we developed a custom video player using waveform.js to bring the audio to life visually, layering the sound’s volume waveform directly onto the video interface. Because generating a waveform from a video file is resource-intensive, we designed the process to run asynchronously and cache the results server-side — ensuring a smooth, seamless user experience.

We chose Hygraph as the headless CMS for SAATU’s portfolio. Its user-friendly interface gives the SAATU team full control over projects and content, while the structured frontend application ensures every page stays true to Systems Studio’s original design vision.

Hygraph also provided the ideal setup for hosting and delivering MP3 files — a crucial element in making SAATU’s sound-driven work feel immediate, reliable, and deeply connected to their brand identity.

Identity and website design by Systems Studio.

Frontend: Nuxt 3, Wavesurfer.js CMS: Hygraph