Design System
Design system não é biblioteca de botões. É contrato entre design e engenharia — tokens, naming, versionamento e governança.
O que está incluído
- 01Arquitetura de informação pensada para uso diário
- 02Padrões de tabela, filtros, formulários e estados vazios
- 03Atalhos de teclado e ações em massa para power users
- 04Design system com tokens, componentes e variantes
- 05Acessibilidade WCAG AA como requisito, não bônus
Por que design systems fracassam
A maioria dos design systems morre por dois motivos opostos: ou nasce grande demais — 200 componentes que ninguém usa — ou nasce como uma pasta de botões no Figma sem nenhuma ligação com o código. Nos dois casos, seis meses depois o time voltou a copiar e colar tela.
Um design system que sobrevive começa pequeno, resolve uma dor concreta de velocidade e tem dono. Eu construo nessa ordem: inventário do que já existe, consolidação do que se repete, tokens, componentes, documentação e — o passo que quase todo mundo pula — o plano de adoção.
Trabalho com Figma (variables, modes, component properties) e entrego a estrutura de tokens pronta para virar CSS, Tailwind ou Style Dictionary no repositório de vocês.
Como eu trabalho
Inventário
Varredura das telas atuais catalogando toda variação existente. Já aconteceu de encontrar 14 tons de cinza e 9 tamanhos de botão no mesmo produto.
Tokens
Definição da camada base: cor, tipografia, espaçamento, raio, sombra, elevação e semântica de tema (claro/escuro), tudo em variables do Figma.
Componentes
Construção dos componentes por ordem de frequência de uso, com props, variantes e todos os estados de interação e acessibilidade.
Documentação
Cada componente com quando usar, quando não usar, exemplos certos e errados. Documentação sem isso é catálogo, não sistema.
Adoção
Plano de migração por ondas, treinamento do time e definição de quem mantém o sistema depois que eu saio.
O que você recebe
- —Inventário visual do estado atual com pontos de inconsistência
- —Camada completa de tokens em Figma variables, com tema claro e escuro
- —Biblioteca de componentes publicada e versionada
- —Documentação de uso por componente
- —Guia de contribuição e governança do sistema
- —Especificação de tokens exportável para código
- —Treinamento gravado para designers e devs
Prazos típicos
Trabalhos selecionados
ProfissaLanding / Marketing site
KriaSistema / Dashboard
FramefySaaS / Dashboard
Invent UniversityLMS / Sistema
Guara EnergiaApp / Web
Guara Energia — OnboardingFluxo multi-step
Guia StellaAplicativo mobile
Buser / TransporteAplicativo mobile
LikindoApp / Marketplace
Quer avaliar um design system para o seu produto? Me conte quantas telas e quantas pessoas mexem no Figma hoje — com isso eu já consigo dimensionar escopo e prazo.
Perguntas frequentes
Quanto tempo demora um projeto?
Depende do escopo. Um MVP costuma levar de 4 a 8 semanas. Um redesign completo, de 8 a 16. Fechamos cronograma antes de começar.
Como funciona o orçamento?
Trabalho por projeto fechado ou sprint semanal. Envio proposta detalhada em até 48h após o briefing.
Atende remoto?
Sim. Atendo Brasil e exterior de forma 100% remota, com rituais semanais assíncronos e síncronos.
Dá para usar shadcn, Material ou outra base pronta?
Dá, e muitas vezes é o mais inteligente. Uso a base como fundação e customizo tokens e componentes para a identidade do produto, economizando semanas.
Quem mantém o sistema depois?
Defino o modelo de governança junto com vocês — normalmente um dono no design e um no front. Deixo o guia de contribuição escrito para isso não virar terra de ninguém.
Serve para um produto que ainda vai nascer?
Serve, mas menor: fundações e uns 15 componentes essenciais. Sistema grande antes do produto existir é desperdício.