Todos os projetosProjeto 04 / 04 · Design System

Atlas

Design system documentado e testado

Sobre: Biblioteca de componentes com documentação viva, testes de acessibilidade e regressão visual em cada pull request.
Papel: Dev front-end & QA
Stack: React
TypeScript
Storybook
Testing Library
axe-core
Ano: 2023
Links: Demo ao vivo GitHub

/01Problema

Quatro produtos, quatro jeitos diferentes de fazer um botão. Cada tela nova repetia bugs antigos de acessibilidade e o time de design não confiava no que chegava em produção.

/Experimente

Use o projeto agora

A demo abaixo está rodando de verdade. Troque o dispositivo, arraste a borda para redimensionar e interaja à vontade.

1280 × 760Abrir em nova aba

atlas.pcesar.pro

/02Processo

01
Inventário
Catalogamos 140 variações de componentes espalhadas pelos produtos e reduzimos para 32 componentes base.
02
Tokens & API
Definimos tokens de cor, tipografia e espaçamento, e APIs de componentes previsíveis, documentadas com exemplos vivos.
03
Qualidade automática
Testes de interação, checagem de acessibilidade com axe e regressão visual rodando em cada pull request.

/03Solução

Um design system com 32 componentes acessíveis, playground interativo e um pipeline que bloqueia regressões visuais e de acessibilidade antes do merge.

/04Antes / depois

Botões, campos e cards antes e depois do Atlas.