Fast Shop Redesign
Navegação por categorias do app reestruturada a partir de avaliação heurística e benchmarking com 5 players.
Todos os projetos
Design
opedro. · Design System · 2026
Design
System.
Um sistema construído por mim a partir do meu manual de marca, com estrutura Material 3 e acabamento opedro. Tokens, fundações e 34 componentes documentados em três temas.
01Ponto de partida
Uma marca pronta,
sem camada de interface.
O manual de marca pessoal já definia posicionamento, cor, tipografia e tom de voz. Mas marca não é interface: faltava transformar essas decisões em algo que se aplica a um botão, a um campo de formulário ou a um estado de erro, e que continua coerente no tema escuro e no alto contraste.
O objetivo foi construir esse sistema com conhecimento das heurísticas de usabilidade, das regras e das boas práticas de desenvolvimento de um design system, tendo o Material Design como referência e contando com apoio de IA no desenvolvimento e no desdobramento.
34
Componentes
Em 8 grupos, com estados e código
3
Temas
Claro, escuro e alto contraste
4px
Grid base
Toda medida é múltipla de 4
5,25:1
Contraste do azul
#035DFE com texto branco · AA
02Base
Heurísticas, regras
e uma referência sólida.
Nenhuma decisão do sistema é só estética. Cada regra se apoia em um princípio de usabilidade ou em uma boa prática consolidada de design systems, e o Material Design 3 serviu de esqueleto para não reinventar o que já funciona.
Heurísticas
Usabilidade como critério
Consistência e padrões, prevenção de erros, visibilidade do status e reconhecimento em vez de memorização guiam o comportamento de cada componente, do rótulo sempre visível no campo ao verbo repetido no botão do dialog.
Boas práticas
Regras de sistema
Tokens semânticos e nenhum hexadecimal direto em componente, grid de 4 px, alvo de toque de 48 px, um único estilo de foco e uma única biblioteca de ícones.
Referência
Material Design 3
Nomes de tokens na taxonomia M3, state layers de hover e press, elevação em três níveis e anatomia dos componentes. A estrutura é M3; o acabamento é opedro.
03Da marca ao sistema
Nomes do M3,
valores do manual.
Os tokens de cor usam a nomenclatura do Material 3 (--primary, --surface, --on-surface), mas os valores vêm das rampas do manual de marca. Cada token muda com o tema, e o componente nunca sabe qual hexadecimal está usando.
ProtótipoEstável
Publicar protótipo
Revise antes de compartilhar com o time.
Aparece no endereço público.
Avisar quando alguém comentar
Tokens em uso
- --primary
- --primary-container
- --surface
- --on-surface
- --success-container
Nenhuma linha do componente muda entre os temas. Só o valor de cada token por baixo dele.
04As regras do azul
Uma cor,
três regras.
A disciplina do azul veio direto do manual e governa todo componente do sistema.
Regra 1
Azul é clicável
Se está azul, algo acontece quando você toca. Sem título azul, sem ícone azul decorativo. Informação usa o azul da marca; não existe cor semântica separada para info.
Regra 2
O símbolo é a exceção
A marca usa o mesmo azul e não é clicável. Por isso só aparece onde é inequivocamente marca: app bar, drawer, splash, favicon e rodapé.
Regra 3
Uma ação primária por tela
O botão preenchido é único. O segundo caminho é tonal, o terceiro é contorno e o quarto é texto.
Filled. A ação que conclui a tarefa.
Tonal. Recorrente, sem ser a principal.
Outlined. Um caminho alternativo.
Text. Sair, cancelar, voltar.
Estado atual
enabled
Filled · a ação da tela
fundo --primary
Hover e press são state layers de 6% e 12% sobre o componente. O foco é sempre o mesmo anel, em qualquer variante.
05Fundações
Poucas decisões,
aplicadas em tudo.
As fundações foram mantidas enxutas de propósito. Quanto menos variáveis, mais previsível o sistema fica para quem projeta e para quem desenvolve.
Tipografia
Três famílias, papéis fixos
Instrument Serif só em display e título de página. Instrument Sans em todo o resto. IBM Plex Mono em token, medida e código, nunca em interface.
Grid
Tudo múltiplo de 4
Altura, padding, gap e raio saem do mesmo grid de 4 px. O alvo de toque mínimo é de 48 px em qualquer plataforma.
Elevação
Três níveis e state layer
e1 para card, e2 para menu, e3 para dialog. No alto contraste a sombra vira contorno sólido, porque sombra não é sinal acessível.
Foco e ícones
Um estilo só, sempre visível
Contorno de 2 px em --primary com 2 px de deslocamento, nunca removido. Ícones em Material Symbols Rounded, preenchidos só para indicar estado ativo.
06Componentes
34 componentes,
documentados do mesmo jeito.
Cada componente segue o mesmo modelo de documentação: estados, anatomia com medidas, quando usar, quando não usar, tokens, acessibilidade e o código de referência. Os comportamentos também são decisões, como a validação do campo abaixo.
Ações · 4
Button, icon button, FAB e segmented button, em ordem de ênfase e com variante destrutiva.
Formulário · 6
Text field, select, checkbox, radio, switch e slider. Rótulo sempre acima e visível.
Seleção · 2
Chips e tabs.
Contêiner · 4
Card, list, table e accordion.
Navegação · 5
App bar, navigation bar, rail e drawer, breadcrumb e paginação.
Sobreposição · 4
Dialog, bottom sheet, menu e tooltip, com foco preso e Esc devolvendo o foco ao gatilho.
Feedback · 5
Snackbar, banner, progress, skeleton e empty state.
Dados · 4
Badge, avatar, tag e date picker.
Os quatro sinais do erro
- Cor--error na borda, no rótulo e na mensagem.
- Borda de 2 pxA espessura muda, não só a cor.
- ÍconeForma que se lê sem enxergar cor.
- TextoDiz o que falta, ligado por aria-describedby.
Valida no blur ou no envio, nunca a cada tecla. Depois do erro, o campo reavalia enquanto você corrige.
07Acessibilidade e temas
Três temas,
nenhum improvisado.
Claro, escuro e alto contraste compartilham os mesmos tokens com valores diferentes, como no painel da seção 03. A acessibilidade não é uma camada no fim: está na especificação de cada componente.
Cor
Cor nunca sozinha
O erro tem quatro sinais. Em banner, tag e snackbar, ícone e texto sempre acompanham a cor. No alto contraste, a sombra vira contorno.
Semântica
ARIA na documentação
Cada componente traz os papéis e atributos esperados: role="status" no snackbar, aria-current na navegação, aria-describedby no campo.
Movimento
Respeito ao reduced motion
Skeleton, progress e spinner desaceleram ou param com prefers-reduced-motion.
Tempo
Tempo para agir
Snackbar com ação nunca some em menos de 8 s. Abaixo de 1 s de espera, nenhum loading aparece; acima de 10 s, ele explica o que está acontecendo.
08Processo com IA
IA como apoio,
critério como autoria.
A IA entrou no desenvolvimento e no desdobramento do sistema. Com as fundações e as regras definidas, ela ajudou a acelerar a parte extensa do trabalho: estender o mesmo padrão para dezenas de componentes, estados e temas.
Eu defini
Regras e fundações
Tokens, as três regras do azul, a escala tipográfica, shape, foco e o modelo de documentação de cada componente.
A IA apoiou
Desenvolvimento e desdobramento
Aplicação do mesmo padrão em 34 componentes, variações de estado e tema, e o código de referência de cada um.
Eu revisei
Consistência e decisão
Cada saída foi conferida contra as regras do sistema, as heurísticas e o M3 antes de entrar na documentação.
Aprendizado central
Um design system é um conjunto de decisões escritas, não de telas. Quanto mais claras as regras, mais a IA consegue desdobrar o sistema com consistência, e mais o meu tempo vai para o que exige critério: o que entra, o que fica de fora e por quê. Os componentes vivos desta página não são imagens: são o sistema, com os mesmos tokens e o mesmo CSS que sustentam o portfólio inteiro.
Outros projetos.
Ver todos
wave.bio
Link in bio pensado para creators de conteúdo adulto, com proteção contra banimento desde o onboarding.
Spark Chat Redesign
Chat entre creator e fã alinhado aos padrões mobile, com toolbar compacta e menos fricção no envio.