Projects
Services
Migration
Blog
Topaz Labs logo with a smooth looking noise gradient in the background

Topaz Labs

Technologies

SanityNext.jsVercel

We started with a plan

We were contacted by Eric, the CEO of Topaz lab to help create a solution to condensing all of their documentation into a singular platform that was both 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 thought about, 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 labs homepage

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. With the malleability of the platform, we developed custom input components and tailored the CMS to fit Topaz's needs.

Nicely served image through Sanity image with expertly place bullet points

A little style

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 color 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, which expanded the infrastructure of Chakra UI. They implemented the nuanced colour scheme with lavish purples and extra slick gradient borders. We couldn't have done it without them, and they really did an incredible job of adding that extra bit of jazz to the overall design.

macOS or Windows... A screenshot that shows the correct system selected

What is a Mux anyway?

Finally, Mux added the cherry on top. This cutting-edge tool brought our documentation to life with high-quality, seamlessly 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 what Mux is, I'll give you the lowdown. Videos are about the heaviest piece of data on a website and a nightmare to store and stream at that. Mux takes away all this stress and compresses the video to the appropriate size. E.g. Mobile phone - small, Desktop - large.

Mux video player uploading inside of Sanity
My best experience with a consulting/contracting company ever. The final result delivered more quickly than expected, with a very high bar for quality. Jono took pains to make sure I understood the implementation completely, but also recommended an opinionated approach that ended up working great. Both the execution of the project and the communication were spot on.

Eric Yang

Get in touch

What a gem

We've loved working with Topaz labs, and we'd probably love to work with your team. Get in touch, to find out how we can give you the editing experience of your dreams.

Services

Legal

Like what you see ?

Sign up for a 30 min chat and see if we can help

© 2024 Roboto Studio Ltd - 11126043

Roboto Studio Ltd,

86-90 Paul Street,

London, EC2A 4NE

Registered in England & Wales | VAT Number 426637679