João Passini
PASSI DS, o design system que nasceu dos aprendizados do livro

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.

0

páginas

0

capítulos

0

partes

E-book em PDF · Google Livros

Capa do livro Design System: o que você também precisa saber, 2ª edição

A pergunta

Quanto custanão fazer isso?

João Passini

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

01

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.

02

Gestor de produto

Precisa saber o que exigir da fundação para o sistema durar e não travar o roadmap.

03

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.

01

Convencer

O que é, por que importa agora e como conseguir o sim.

Capítulos 1 a 4

  1. 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.

  2. 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.

  3. 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.

  4. 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.

02

Construir

O que exigir da fundação. Você não vai construir: vai auditar.

Capítulos 5 a 10

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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ê.

03

Governar

Manter vivo, mudar sem quebrar, escalar com critério.

Capítulos 11 a 16

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

04

Provar

Mostrar, contra o que foi prometido, o valor em tempo e dinheiro.

Capítulos 17 a 19

  1. 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.

  2. 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.

  3. 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

01

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.

02

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.

03

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

Fundamentos

0

tokens

Cores, tipografia, espaçamento, cantos, sombras, gradientes, vidro, movimento, logo, acessibilidade e IA. Tudo em variáveis, no claro, no escuro e em alto contraste.

Componentes

0

componentes

Botões, campos, menus, abas, janelas e peças para produtos com IA, com variações, estados e propriedades prontas para usar.

Padrões

0

padrões

Telas montadas com os componentes: login, cabeçalho, rodapé, tabela, gráficos, planos, conversa com IA e outras.

Ícones

0

ícones

Desenhados para o PASSI DS, no mesmo traço, prontos para trocar de cor e de tamanho.

Miscelânea

0

coleções

Molduras de aparelho, tipos de arquivo, bandeiras, formas, status, seleção de texto e reações.

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.

Tabela de tokens de cor do PASSI DS com valores no claro, no escuro e o código para a web

Claro e escuro

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

Tela de login do PASSI DS no modo escuro, dentro de uma moldura de celular

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.

Telas de entrar e criar conta do PASSI DS montadas com os componentes

201 ícones próprios

Mesmo traço do primeiro ao último, com nomes em português.

Biblioteca de ícones do PASSI DS

Uma marca para estudar

Logo, construção, área de proteção e usos incorretos documentados.

Logo do PASSI DS em branco sobre o azul da marca

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.

Seção de abertura de página
Grade de planos e preços
Tabela de dados
Gráficos
Grade de artigos
Cards de produto
Busca no modo escuro
Calendários
Central de notificações no modo escuro
Grade de equipe
Janela de ações
Planos e preços no modo escuro

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.