Skip to content



The rebuilt Topaz Labs documentation site for photo and video AI tools




Topaz Labs

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

Timeline4 weeks
Technologies
SanityNext.jsVercel
ClientTopaz Labs
Services
DevelopmentMigrationConsultancy


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."

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.

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 visually appealing and 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.

Media optimisation

Cherry on top

Finally, Mux added the cherry on top. This video platform brought our documentation to life with high-quality 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).



Common questions

Topaz Labs project FAQs

What buyers ask us about the Topaz Labs project, answered from the work itself

How long did the documentation platform take?
Four weeks.
Why build documentation on a CMS instead of a docs tool?
Because the brief was extensibility. Eric, Topaz Labs' CEO, wanted all of their documentation condensed into one platform that could be customised deeply, so we built it on Sanity CMS, Next.js and Vercel and developed custom input components to fit how Topaz actually work.
What makes the editing experience different?
Attention to the parts most builds skip: placeholder presentation, field descriptions, and a live preview system that gives instant feedback. The goal was not a documentation system but the best one we could build.
How is video handled in the docs?
Mux, which compresses and streams each video at the size appropriate to the device and connection. Video is the heaviest asset on any site and the most painful to store and stream, so it is worth handing to a platform built for it.
Did you work with our design team or around them?
With them. We expanded the infrastructure of the Topaz Labs design system alongside their internal design team, using Chakra UI for accessibility and responsiveness and implementing their colour scheme down to the gradient borders.


Services



Get in touch

Tell us what you're building. We reply within one working day. Jono or someone on the team picks up every message personally.

By sending this you agree to our privacy policy. We only use your details to reply.