Website·2025

Atlas Design System

Sistema de design escalável e consistente com biblioteca multi-plataforma e tokens de acessibilidade.

Cliente
Atlas Fintech Core
Papel / Serviço
Design System Architect
Ano
2025
Serviços
Figma, Design Tokens, Storybook
Apresentação do projeto Atlas Design System
01. CONTEXTO

História da Marca

A Atlas contava com mais de 4 produtos financeiros distintos construídos com inconsistências visuais e retrabalho contínuo entre os times de engenharia e design.
02. DESAFIO

Desafio

Falta de governança de componentes, descompasso entre tokens de estilo do Figma e código React, gerando bugs visuais e lentidão nas entregas.

03. DIRECIONAMENTO

Objetivos

Unificar toda a linguagem visual em um sistema modular de tokens atômicos.
Construir documentação viva com regras de acessibilidade e estados interativos.
Reduzir o tempo de criação de novas telas de semanas para poucas horas.
04. CASE STUDY

Galeria

Visão geral da matriz de componentes, inputs e tabelas financeiras
Visão geral da matriz de componentes, inputs e tabelas financeiras
Tokens de cores dinâmicas para modo dark e contraste elevado
Tokens de cores dinâmicas para modo dark e contraste elevado
05. CASE STUDY

Ferramentas

FigmaDesign TokensStorybookTailwind CSSStyle Dictionary
06. RESULTADO

Resultado

Redução de 70% no tempo de handoff entre design e desenvolvimento frontend.
Eliminação total de inconsistências visuais nos 4 produtos da holding.
Adoção de 100% por todas as equipes em menos de 60 dias.

Tem um projeto para contar?

Vamos entender primeiro e construir a direção certa depois.