Design System at JOTA

Design Lead, Product Design, DesignOps, QA

A robust and scalable design system for the startup JOTA

Components Cover

A little background

JOTA is a startup based in São Paulo and Brasília, Brazil. It main focus is journalism and technology, publishing news about Brazil's three branches of government in its website and a suite of services, tools and solutions called JOTA PRO, exclusive for medium/big sized companies and law firms. I was a employee there from march 2019 to may 2024 and this Design System is one of the projects I've created and worked on there with my team.

JOTA logo

Our pains and needs

With a variety of products, tools, and mediums at our disposal (and thinking about what would come ahead), we were somewhat lacking in consistency and unity, which was weakening our brand. Additionally, we required something scalable and easy to work with, as we needed to produce with speed.

The principles

When planning our Design System, it was imperative to consider the design principles that would be our foundation, as to ensure coherence, efficiency, aesthetic appeal and brand identity. Here are the principles that we chose to work with:


Our Design System must be accessible, easy to work with and adaptable to future changes


Throughout color, typography and layout, we must ensure our Design System is robust


Our components have to be cohesive apart and together, to strengthen the brand

My pitch

With the plan in hands, I pitched the Design System to the whole team. Everyone agreed that this would be the right course of action. With the development team, we them started to think what technology we would use. Since our future projects would be in NextJS, the developers decided to work with something that would be appropriate.

Styles, patterns, rules

Before the components, we needed to establish the basics. Colors, typography, spacing, grid...

Header Colors
Extended Palette
Gray Scale Pallete Transparencies Palette
Header Tipography
Headings 1 Headings 2
Body Contrast Test
Header Grids
Grids and Breakpoints
Spacings Borders Shadows


Starting with the basics: the Button. And then growing exponentially. Below are some examples and variations of the components I've created. Soon you'll be able to see all of them in use, as I work on updating my portfolio with the projects involving this Design System.

Button Input, Dialog, Breadcrumb Card Accordion, Profile Card, Tab, Quote Tag-Label-Chip

The handoff

To ensure everything would work as intended, I went to a extensive process of specification of each and every detail of the components, and how would they behave in ”the real world”. I've put below some examples of how I documented the handoff for the Dev team.

Handoff 1 Handoff 2

Figma file

To check the Design System in all its glory, I've made available on Figma. Click on the title on the bottom (the one that says "Design System JOTA - Public") to view all the pages

Next steps

As our Design System evolved, we took the next steps to refine and expand its components to meet the needs of our stakeholders and future products. We began to focus on documentation to ensure that the team has a clear understanding of how to use and contribute to the Deign System effectively. Simultaneously, we prioritized the development of new features and enhancements outlined in our roadmap to support the creation of products aligned with the company's goals.

The team

There where more people involved throughout the years, I'd like to thank everyone that helped put this project to life.

Tools: Figma and Storybook

Product cycle: 2021-now

This Design System is my pride and joy. It cemented the future for JOTA's digital endeavours, and established my design legacy on the company for many years to come.

Thank you!