Nimbus Design System

Nimbus documentation site homepage

About Nimbus

Nimbus is an open-source design system built by Tiendanube/Nuvemshop to accelerate the work of countless partners who want to integrate into the ecommerce platform by building solutions for merchants. It's also the design system powering all of the company's products.

Nimbus is the Design System powering Nuvemshop's main product, the merchants admin, among others.

What I do at Nimbus

I have been a part of the Nimbus team since the beginning, and as such I've contributed to create the entire design system's component libraries for design in Figma and also code them for React, design tokens and themes, write documentation and create Storybook stories to showcase components' properties and good practices for developers, and design and develop a custom documentation site built with Next js which features a dynamic multi-language documentation for designers and developers.

Some of my responsibilities as a product designer and developer inside Nuvemshop were:

• Designing the entire component and pattern library in Figma for sharing with in-house designers and partners
• Setting up token libraries with various themes (currently supporting native light and dark mode) in design + code
• Developing components for React and testing environments using Storybook
• Advocating for the use of our design system across company products increasing coverage up to almost 95%
• Designing and developing a 100% custom documentation site which features examples, developer instructions for installing and managing packages, good practices and helpful code templates to easily setting up new projects
• Designing and migrating the old mobile app to a newer, more modern and up-to-date version powered by Nimbus which bridges the gap between desktop and mobile features

The Design System powering in-house teams and our partners' ecosystem

Our mobile app bridges the gap for managing stores right from the merchants' fingertips.

You too can use Nimbus to quickly set up and develop UI projects for the web

As an open-source project, anyone and everyone can contribute to our design system. We encourage users from all industries (not just e-commerce) to use Nimbus for developing web projects.

Currently, Nimbus is being used by teams inside and outside of Nuvemshop. +30 designers and developers inside the company use this design system to build products and solutions daily.

You can browse our site to learn more from Nimbus at nimbus.nuvemshop.com.br or download our Figma library.

Homepage design close up

Documentation 'Getting started' page

Home page animations and color mode toggle