topaz-logo.png

Topaz Labs

Building one of the fastest documentation sites in the world for photo and video AI experts






Intro

Peak editorial experience

Eric, the CEO of Topaz Lab, contacted us to help create a solution for condensing all of their documentation into a singular platform that was extensible and highly customisable.

Naturally, our first steps were to use Sanity CMS, Next.js, and Vercel. We embarked on an exciting journey that transformed expectations of what a documentation system can include.

We ensured every aspect had been considered, from the presentation of placeholders and field descriptions to the instantaneous feedback of a live preview system. We didn't want to build just "a documentation system." We ventured to build "the best documentation system."

topaz-homepage.png

Building blocks

Add some Sanity

The first piece of our digital jigsaw was Sanity CMS. We took advantage of its real-time capabilities to build a dynamic content management system that would have put Gutenberg's movable type to shame. But we didn't stop there. The platform's malleability allowed us to develop custom input components and tailor the CMS to fit Topaz's needs.

topaz-quicklinks.png

Design system

Design teams best friend

Then came Chakra UI. Like an expert stylist, we used it to dress up our system in a way that was not only visually appealing but also met all the best practices for accessibility and responsiveness. It was our digital colour palette, with the flexibility of themes and components to create a harmonious, unified appearance across all documentation.

We collaborated with the internal design team at Topaz Labs, with whom we expanded the infrastructure of their design system. We implemented the nuanced colour scheme with lavish purples and extra slick gradient borders. It's always a blast working with internal teams as we can bring both of our design insights and create something truly magical.

topaz-image-bullets.png

Media optimisation

Finally, Mux added the cherry on top. This cutting-edge tool brought our documentation to life with high-quality, seamless streaming videos. It was like handing our users their personal IMAX experience, delivering video content tailored to their device and connection speed.

If you don't know Mux, I'll give you the lowdown. Videos are the heaviest piece of data on a website and a nightmare to store and stream. Mux takes away all this stress and compresses the video to the appropriate size, E.g., Mobile phone—small, Desktop—large.

topaz-mux.png

Get in touch

Book a meeting with us to discuss how we can help or fill out a form to get in touch