Foundations
Alicerces visuais que sustentam todas as peças do sistema: cor, tipografia, grid, radius, shadow e spacing.
- Color
- Typography
- Grid
- Radius, Shadow e Spacing
Design SystemUI
KitDocumentaçãoGovernança
visual
Pátio DS
Criação do design system da Leilo, com foco em UI kit, documentação, tokens, foundations e organização da biblioteca de componentes para dar mais consistência, velocidade e escala ao produto.
Role para explorar ↓
O problema
Escalar produto sem perder consistência
O Pátio DS nasce de uma necessidade bem concreta: organizar a base visual e de interface de um produto em evolução, reduzindo ruído entre design, documentação e componentes reais. Sem uma linguagem comum, cada ajuste tende a virar uma exceção, e o sistema começa a crescer com mais retrabalho do que clareza.
Nesse projeto, meu foco está em estruturar o UI kit, consolidar foundations, documentar tokens, revisar os componentes existentes e transformar isso em uma base que realmente ajude o time a projetar, manter e evoluir o produto com mais segurança.
6foundations mapeadas
5grupos de tokens
16componentes documentados
ColorTypographyGridRadiusShadowSpacing
ButtonInputTableTabsModalDropdown
BadgeChipTooltipRadio
Objetivos
Criar uma base para escala real
Mais do que desenhar componentes bonitos, o objetivo do Pátio DS é criar uma estrutura utilizável. Isso significa alinhar linguagem visual, organizar decisões de design em tokens, padronizar componentes e manter uma documentação que sirva tanto para consulta quanto para adoção prática no dia a dia.
Padronizar a linguagem visualReduzir inconsistências entre
comps e produtoDar base para evolução e handoff
Estrutura do sistema
Um design system com camadas claras
A documentação do Pátio DS já foi organizada para refletir a lógica do sistema: foundations, tokens, componentes e suporte. Isso ajuda o time a navegar entre decisões mais abstratas, como tipografia e espaçamento, e partes mais aplicadas, como inputs, tabelas, modais e padrões de navegação.
Tokens
Decisões de design transformadas em uma linguagem mais reutilizável e governável, conectando interface e implementação.
- Color Tokens
- Typography Tokens
- Radius Tokens
- Spacing Tokens
- Shadow Tokens
Componentes
Biblioteca de peças que dá previsibilidade ao produto e reduz o esforço de redesenhar padrões já conhecidos.
- Inputs e seleção
- Feedback e status
- Navegação e estrutura
- Display e apoio
Documentação
Documentação como espaço de consulta, alinhamento e apoio à adoção, com uma estrutura que conecta teoria, prática e biblioteca viva.
- Sobre
- Foundations
- Components
- Central de ajuda
Passo 01
Diagnóstico e governança visual
O primeiro movimento do Pátio DS foi criar clareza sobre o que precisa ser sistema e o que ainda está solto em comps, padrões e decisões visuais dispersas. Essa etapa é importante porque evita documentar exceções como regra e ajuda a montar uma base mais confiável para o time.
Biblioteca sendo consolidada para sustentar fluxos e páginas com mais previsibilidade.
Revisão e ajuste dos componentes para reduzir ruído visual e estrutural dentro do produto.
Documentação como camada de alinhamento entre design, produto e desenvolvimento.
Passo 02
Foundations e design tokens
Organizar foundations e tokens foi uma etapa central para o sistema ganhar consistência real. Em vez de tratar cor, tipografia, espaçamento e sombra como escolhas isoladas de tela, o projeto transforma essas decisões em base documentada para uso recorrente.
Foundations
Color
Typography
Grid
Radius
Shadow
Spacing
Tokens
Color Tokens
Typography Tokens
Radius Tokens
Spacing Tokens
Shadow Tokens
Passo 03
Biblioteca de componentes
Com a base estruturada, o foco passa para os componentes: revisar padrões, fortalecer consistência entre variações e deixar claro como cada peça deve ser usada. Isso é o que permite que o sistema se torne útil no produto real, e não apenas uma coleção de telas bonitas.
AvatarBadgeButtonCardCheckboxChip
DialogsDropdownInputModalPaginationRadio
Button
SelectTableTabsTooltip
Documentação e acesso
Uma base viva para adoção e evolução
O Pátio DS é um case de estruturação. O valor principal do trabalho está em criar uma base viva para que o produto cresça com mais consistência, menos ruído entre times e mais clareza sobre como projetar, revisar e manter a interface ao longo do tempo.
Hoje, o sistema já conta com uma documentação estruturada, além do vínculo com o UI kit no Figma. Isso transforma o design system em um ponto real de apoio para quem desenha, documenta e implementa.
Ver documentação do sistema ↗