Um padrão só, em todas as telas.
Componentes, cores e regras que o time de design e o de código usam do mesmo jeito. Menos tela diferente da outra, menos retrabalho, mais tempo pro que importa.
Guia da marca
As cores e as regras que o site, o sistema e a IA seguem.
Principal
#1F4E3D
Destaque
#F2A33A
Papel
#F6F1E7
Tinta
#1B1D1C
- Logo em fundo claro ou escuro
- Destaque só em botão e número
- Esticar ou recolorir o logo
Demonstração com dados fictícios
Tokens
+30%
menos retrabalho de layout na Sem Parar Empresas*
4
design systems na carreira do fundador*
WCAG
nota de contraste em cada cor
* Na carreira do fundador, Victor Dias, antes da Apol.
Se o seu produto está assim
Cinco botões diferentes
Cada tela tem o seu tom de azul e o seu jeito de arredondar. O usuário sente, mesmo sem saber dizer.
Retrabalho a cada entrega
O design desenha de novo o que já existia, e o desenvolvimento refaz o que já estava pronto.
O Figma não bate com o código
O que foi aprovado não é o que foi pro ar, e ninguém sabe qual dos dois está certo.
O que você recebe
6 entregas- Inventário das telaso que existe, o que se repete e o que está brigando
- A basecor, letra, espaço, canto e sombra, com nota de contraste
- Biblioteca de componentes no Figmacom variantes, estados e regras de uso
- Documentação vivaquando usar, quando não usar, com exemplo
- Componentes em códigoquando o projeto pede, com os nomes do Figma
- Manutençãocomo o sistema evolui sem virar bagunça de novo
Valor: sob proposta
Pedir propostaNa tela
Um design system que a equipe consulta.
Cada componente com todos os estados
Padrão, passar o mouse, desativado. Quem desenha e quem programa olham a mesma tela.
Trabalho de verdade
O sistema por trás das telas.
Como funciona
Quatro passos, nenhum no escuro.
- 01
Inventário
Cada tela aberta, cada componente contado. O tamanho do problema vira número.
- 02
A base
Cor, letra e espaço definidos. É a base do resto.
- 03
Componentes
Os mais usados primeiro, com estados e documentação.
- 04
Em uso
O time passa a usar, e o sistema ganha regra pra crescer.
A prova
Feito em produto que atende milhões
Na carreira do fundador, o design system da Sem Parar Empresas reduziu em mais de 30% o retrabalho de layout. Também na Shopper (o primeiro da empresa), na Alper Seguros e na Autopass. Na Apol, o manual do Alemão é desenhado com os mesmos componentes do site.
Ver a trajetória
É pra você se
- Empresa com app, portal ou plataforma que cresceu sem padrão
- Time de produto que perde tempo refazendo tela
- Quem vai redesenhar e quer fazer uma vez só
Não é pra
- Quem tem só uma página
- Quem quer um kit genérico baixado da internet
Perguntas que sempre vêm.
Figma ou código?+
Os dois, quando faz sentido. O Figma vem sempre; o código entra quando o time pede, com os mesmos nomes.
Vocês adaptam o que a gente já tem?+
É o mais comum. O inventário mostra o que fica, o que junta e o que sai.
O time interno consegue manter?+
Esse é o objetivo: documentação e regra pra crescer, sem depender da Apol a cada botão novo.
Quanto custa?+
Depende do tamanho do produto. O valor sai na proposta, depois do inventário inicial.
Pare de desenhar o mesmo botão duas vezes.
Conta qual é o produto e o tamanho do time. A Apol responde com o primeiro passo.
O diagnóstico leva uns 3 minutos. O relatório sai na hora, e a Apol comenta com você no WhatsApp.
Outros serviços da Apol