Livro · 2ª edição, revista e ampliada · 2026
DesignSystemv2
O que você também precisa saber
Para convencer, construir, governar e provar. Um guia para quem precisa aprovar, implementar e cobrar um Design System.
páginas
capítulos
partes
E-book em PDF · Google Livros



A pergunta
Quanto custanão fazer isso?

João Passini
Autor
É a pergunta que derruba a maioria das propostas de Design System. Este livro existe para que você saia dessa reunião com um sim e volte a ela, um ano depois, com a prova.
O sim da diretoria continua difícil, mas deixou de ser o fim da jornada. Hoje, quem consegue a aprovação descobre no dia seguinte que precisa cobrar um time técnico, avaliar decisões que não domina e sustentar um sistema que nunca fica pronto.
E a inteligência artificial passou a gerar telas em segundos. A qualidade do que ela gera depende diretamente da qualidade do sistema que a alimenta.
A tese
Você não precisa saber fazer. Precisa saber cobrar.
Quem tem design sob sua responsabilidade precisa conhecer os conceitos para enxergar o valor de implementar e de sustentar um sistema. Por isso a técnica entra: não para reproduzir, mas para saber o que pedir e como julgar o que recebe.
Escrito para quem aprova, implementa e cobra
Líder de design
Precisa conseguir o sim e, no dia seguinte, cobrar um time técnico e avaliar decisões que não domina.
Gestor de produto
Precisa saber o que exigir da fundação para o sistema durar e não travar o roadmap.
Diretor que assina o orçamento
E depois pergunta o que recebeu por ele.
Questões importantes
As perguntas que chegam à sua mesa
O que é um Design System, de verdade?
Capítulo 01
Não é um kit de interface. É a infraestrutura que decide como a empresa aparece para o cliente, todos os dias, em todas as telas.
Como conseguir o sim da diretoria?
Capítulo 04
Traduzindo design para a língua de quem decide: custo, receita, risco e a condição para adotar agentes de inteligência artificial com segurança.
Por onde começar?
Capítulo 05
Por um produto, um time e um prazo. O resto é consequência de um piloto bem escolhido.
O que exigir da fundação?
Capítulos 06 a 09
Decisões em camadas, nomes que pessoas e máquinas entendem, acessibilidade que nasce no token e um único arquivo de verdade.
Como migrar o legado sem parar o produto?
Capítulo 14
O novo cresce em volta do antigo até substituí-lo, e o roadmap não para um dia sequer.
Quem decide quando a IA gera as telas?
Capítulo 15
A inteligência artificial audita, sugere, gera, documenta e acelera. Quem decide continua sendo gente.
Como provar o retorno?
Capítulos 17 e 18
Com a mesma árvore de métricas que aprovou o sistema, agora com a coluna do resultado preenchida.
O que ele aborda
Quatro partes,na ordem da jornada
Você pode ler do começo ao fim ou entrar pela parte que responde ao seu problema de hoje.
Convencer
O que é, por que importa agora e como conseguir o sim.
Capítulos 1 a 4
- 01
O que é um Design System, de verdade
Não é um kit de interface. É a infraestrutura que decide como a empresa aparece para o cliente, todos os dias, em todas as telas. E, agora, o que os agentes de inteligência artificial vão gerar em nome dela.
- 02
Cultura da empresa e Design System
A cultura decide antes de você. Onde design é enfeite, o sistema é enfeite. Onde design é decisão, o sistema é infraestrutura.
- 03
Design System e Design Ops
Design System é o produto. Design Ops é a operação que o mantém vivo. Sem operação, o sistema vira biblioteca. Sem sistema, a operação vira reunião.
- 04
O caso de negócio e o caminho até a aprovação
Ninguém aprova o que não entende. E ninguém entende o que não foi traduzido para a língua de quem decide: custo, receita, risco e a condição para adotar agentes de inteligência artificial com segurança.
Construir
O que exigir da fundação. Você não vai construir: vai auditar.
Capítulos 5 a 10
- 05
Por onde começar: produto, time e piloto
Não se começa um Design System pelo sistema. Começa-se por um produto, um time e um prazo. O resto é consequência de um piloto bem escolhido.
- 06
A fundação: decisões de design em camadas
Uma decisão de design deve morar em um lugar só. Se ela mora em cem arquivos, você não tem um sistema. Tem cem opiniões.
- 07
Nomes que pessoas e máquinas entendem sem reunião
Nome de token é interface. Se o desenvolvedor precisa abrir o Figma para saber o que um nome significa, o nome está errado. Se o agente de inteligência artificial precisa adivinhar, também.
- 08
Acessibilidade que nasce no sistema: cor, contraste e unidades
Acessibilidade não é uma etapa de revisão. É uma propriedade do sistema. Ou nasce no token, ou não nasce.
- 09
Um único arquivo de verdade e a entrega automática
Handoff é um ritual de perda. O que o designer decide e o que o desenvolvedor entrega deveriam sair do mesmo arquivo, sem tradução no meio.
- 10
Documentação que decide, não só descreve
Documentação boa não descreve o componente. Decide por quem vai usá-lo: quando sim, quando não e por quê.
Governar
Manter vivo, mudar sem quebrar, escalar com critério.
Capítulos 11 a 16
- 11
Time, papéis e modelos de governança
Um Design System só dura se alguém responde por ele. Dono com nome, time que mantém e um jeito claro de decidir.
- 12
Adoção: colaboração e comunicação
Adoção não acontece por decreto. Cresce como a migração do código: o hábito novo em volta do antigo, até que o antigo não seja mais necessário.
- 13
Mudar sem quebrar: versionamento
Token e componente são uma interface consumida por times que você nem conhece. Versão não é número: é promessa.
- 14
Migrar o legado sem parar o produto
Migração boa é a que nunca precisa ser desfeita. O novo cresce em volta do antigo até substituí-lo, e o roadmap não para um dia sequer.
- 15
Governança na era da inteligência artificial
Inteligência artificial não substitui o time. Substitui o improviso. Quem decide continua sendo gente.
- 16
Qualidade e inovação sem pasteurizar
Consistência não é o contrário de criatividade. É o que sobra de energia para criar onde importa.
Provar
Mostrar, contra o que foi prometido, o valor em tempo e dinheiro.
Capítulos 17 a 19
- 17
Métricas que a diretoria entende
O que não vira tempo ou dinheiro não chega à mesa de decisão. Métrica boa se define antes de desenhar, não depois de lançar.
- 18
O retorno do investimento
O custo de um Design System aparece em uma linha da planilha. O retorno aparece em cada tela que deixou de custar o que custava.
- 19
Provas de mercado e sistemas para estudar
Nenhum sistema de referência serve para copiar. Todos servem para aprender o que perguntar ao seu.
Três fios atravessam as quatro partes
A lente de quem cobra
Você não vai construir o sistema. Vai auditar. Toda abertura de capítulo traz a tradução executiva: o risco de negócio, o que você não precisa saber e o que vai cobrar.
A inteligência artificial
Não é só um capítulo. É a principal consumidora do sistema, presente do argumento que aprova o projeto à métrica que prova o resultado.
A promessa e a prova
A árvore de métricas nasce no caso de negócio do capítulo 4 e volta no capítulo 17 com a coluna do resultado preenchida.
Minha contribuição com a comunidade
O design system que acompanha o livro. Aberto, em português e pronto para duplicar no Figma: a parte Construir, na prática.
O que tem dentro
Tokens em português, do nome ao código
fundo/marca no Figma vira var(--cor-fundo-marca) no site. Quem programa não precisa adivinhar valores.

Claro e escuro
Cada cor tem dois valores. Troque o modo e tudo acompanha.

Acessível de fábrica
- 4,5:1contraste mínimo entre texto e fundo
- Focovisível em tudo o que é clicável
- Cornunca é o único sinal de um estado
Componentes com propriedades
Troque tipo, tamanho, estado, texto e ícone pelo painel, sem desanexar nada.

201 ícones próprios
Mesmo traço do primeiro ao último, com nomes em português.
Uma marca para estudar
Logo, construção, área de proteção e usos incorretos documentados.

Telas prontas para começar
Os 20 padrões juntam componentes e tokens em telas reais. Duplique, troque o conteúdo e adapte à sua marca.












Coleção completa
Fundamentos · 13
- Tokens
- Cores
- Tipografia
- Espaçamento e grid
- Cantos e sombras
- Ícones
- Gradientes
- Vidro e desfoque
- Movimento
- Logo
- Utilitários
- Acessibilidade
- IA no produto
Conteúdo · 5
- Voz e tom
- Microtexto
- Glossário
- Linguagem inclusiva
- Formatos brasileiros
Componentes · 45
- Botão
- Botão de ícone
- Grupo de botões
- Botão em bloco
- Link
- Campo de texto
- Área de texto
- Seleção
- Campo com sugestões
- Checkbox
- Rádio
- Interruptor
- Controle deslizante
- Controle segmentado
- Código de verificação
- Envio de arquivo
- Seletor de cor
- Etiqueta
- Selo
- Rótulo informativo
- Avatar
- Card
- Área de destaque
- Proporção de imagem
- Acordeão
- Abas
- Migalhas de pão
- Paginação
- Indicador de página
- Passos
- Índice alfabético
- Lista em árvore
- Menu
- Item de lista
- Barra de ferramentas
- Atalho de teclado
- Divisor
- Barra de progresso
- Carregando
- Alerta
- Aviso rápido
- Dica flutuante
- Popover
- Janela modal
- Sobreposição
Padrões · 20
- Entrar e criar conta
- Cabeçalho do site
- Rodapé do site
- Seções de página
- Menu lateral
- Navegação do celular
- Busca
- Calendário
- Gráficos
- Tabela de dados
- Cards de conteúdo
- Card de produto
- Card de equipe
- Planos e preços
- Trecho de código
- Player de vídeo
- Menus suspensos
- Janela de ações
- Central de notificações
- Conversa com IA
Inteligência artificial · 7
- Rótulo de IA
- Explicação da IA
- Campo sugerido por IA
- Campo de pedido
- Mensagem da conversa
- Plano de ação
- Aviso de IA
Miscelânea · 7
- Molduras de aparelho
- Tipos de arquivo
- Bandeiras
- Formas
- Status
- Seleção de texto
- Reações
Duplique, estude, adapte.
Livre para aprender, criar e usar em projetos comerciais, com crédito.