atomos design language
país
BRasil
cargo
projeto
ATOMOS @VBET
& PLAYPIX
setor
IGAMING
TIME
Atuando como Senior Product Designer na Atomos, meu foco inicial era o desenvolvimento e aprimoramento dos sistemas de afiliados para clientes da indústria de iGaming. Começamos atendendo duas marcas importantes, PlayPIX e Dupoc, e posteriormente expandimos para incluir a VBet. O desafio central era criar e manter uma plataforma de afiliados robusta e consistente que funcionasse perfeitamente na Web, adaptando-se a diferentes dispositivos (desktop, tablet e mobile).
Vale lembrar que tive um time de manager e leads que acreditaram e apoiaram no projeto desde o primeiro momento. Uma equipe product designers que me contribuíram com revisões e criação de alguns componentes, atuação da writing apoiando com documentações internas de componentes e motion designer aplicando os tokens dentro dos seus projetos.
desafio
Na Atomos, a equipe de design rapidamente se viu sobrecarregada. As necessidades dos sistemas de afiliados para PlayPIX, Dupoc e, depois, VBet eram iguais ou muito similares, mas a ausência de uma estrutura de design unificada ou diretrizes claras nos forçava a um ciclo de trabalho insustentável. Em uma única sprint, designers precisavam não apenas criar fluxos completos para desktop, mas também readaptá-los manualmente para tablet e mobile.
Essa adaptação manual entre resoluções era demorada, levava a inconsistências e consumia um tempo precioso. Agora multiplique esse esforço pela necessidade de replicar o trabalho para cada marca cliente – PlayPIX, Dupoc e VBet, cada uma com suas próprias cores, tipografia, logos e identidade visual distintas, assim o desafio tornava-se exponencial. O resultado era uma dificuldade crescente em manter padrões de design, um enorme desperdício de tempo em tarefas repetitivas e, crucialmente, uma sobrecarga focada na produção de interfaces que deixava pouco ou nenhum espaço para atividades essenciais como pesquisa com usuários e testes de usabilidade.
Para combater a falta de foco estratégico e longas demandas, nossa visão foi otimizar o fluxo de trabalho de design. Assim, surgiu o Atomos Design Language: um sistema robusto, arquitetado para que as interfaces pudessem ser adaptadas com agilidade entre as diferentes marcas, plataformas e temas que atendíamos. O objetivo era claro: reduzir drasticamente o esforço manual na criação e adaptação de frames, liberando tempo valioso da equipe para se dedicar à experiência do usuário e à gamificação, diferenciais essenciais no iGaming. Estabelecemos desde o início que o sucesso dessa iniciativa seria acompanhado por métricas.
Como Senior Product Designer, liderei a concepção e implementação do Atomos Design Language, desde a proposta da estrutura, Design Tokens no Figma até a validação multidisciplinar, criação de componentes e a disseminação do conhecimento na equipe.

Nossa descoberta iniciou com uma auditoria focada nas particularidades de design (cores primárias, tipografia, estética) e negócio de cada cliente. Identificamos inconsistências em todos, apesar de já existirem bibliotecas de componentes simples, porém separadas, para cada marca. Conversas com desenvolvedores confirmaram a dor de recriar componentes frequentemente e gerenciar múltiplas bibliotecas. Do lado de Produto e Design, a necessidade era clara: mais agilidade nas entregas e prototipagem, menos ruído na comunicação Dev-Design e maior flexibilidade criativa.
FIGMA
Com os desafios de flexibilidade e manutenção em mente, definimos uma arquitetura de Design Tokens robusta e em camadas, gerenciada centralmente por um único arquivo do Figma, chamamos ele de Atomos Design Language.
São tokens imutáveis. Aqui definimos as paletas de cores primárias para cada marca (ex: $primitive/playpix/brand/blue-500, $primitive/dupoc/neutral/grey-100), as famílias tipográficas associadas a cada uma (Inter, Sora, DM Sans) e uma escala numérica padronizada (sizes) para uso em espaçamentos e dimensionamentos.
Tokens contextuais, esta camada traduz os primitivos em decisões de design aplicadas, específicas para cada marca e considerando variações como temas (light/dark). Por exemplo, um token como $playpix-background-brand-light
apontaria para um valor primitivo específico da PlayPIX $primitive/playpix/brand/blue-500
, ou seja, sua cor primária. Estes tokens cobrem o uso semântico de cores, espaçamentos (paddings, gaps), tipografia (estilos e tamanhos), etc.
Operando de forma semelhante à camada 3, esta camada foca em ajustes finos relacionados à plataforma, principalmente nos tamanhos e densidade de componentes em tela, garantindo que a interface se adapte adequadamente às especificidades de Web (desktop, tablet, mobile), além de toda a lógica por trás da adaptação dos componentes em tela. Optamos por usar 4 resoluções diferentes, Full HD, HD, Tablet e Mobile.
Crucial para a flexibilidade, esta camada é a que os componentes geralmente consomem. Seus tokens, por exemplo, $component-card-background
, não são fixos, mas apontam dinamicamente para os Alias Tokens (Camada 2) da marca que está ativa no momento. Isso permite que a interface se adapte instantaneamente quando o usuário troca de contexto de marca.
construindo
Os componentes foram criados para alavancar totalmente a arquitetura de tokens. Cada componente foi construído para consumir diretamente os tokens das camadas superiores: principalmente a Camada 3 (Abstração/Seleção de Marca) para se adaptar visualmente a cada cliente, e a Camada 4 (Plataforma) para realizar ajustes finos de dimensionamento ou layout conforme a necessidade do dispositivo (desktop, tablet, mobile). Essa conexão direta entre componentes e as camadas de token corretas foi a chave para garantir a flexibilidade e a adaptação automática que precisávamos.
Além disso usamos o que existe de mais moderno no Figma para sua construção, usando variants em todo o processo, diminuindo a quantidade de cliques e aumentando a possibilidade dos usos dos componentes. Assim, entregamos qualidade, adaptabilidade e uma documentação robusta para o uso.

resultado
Redução de 60% no tempo necessário para os designers concluírem tarefas de criação e adaptação de interfaces durante as sprints.
Entregamos fluxos completos 3x mais rápido. O que levariamos 3 sprints para serem entregues por cliente passaram a ser finalizados em apenas 1 sprint.
Alcançamos um nível de padronização visual e interativa entre as marcas (PlayPIX, Dupoc, VBet) e plataformas, eliminando as inconsistências anteriores graças à adoção de tokens e componentes centralizados.
Desenvolvemos mais de 80 componentes únicos capazes de se adaptar aos 3 contextos de marca, garantindo consistência na base.
foco estratégico
A eficiência ganha permitiu que a equipe de design dedicasse mais tempo a atividades que entregam maior valor, como pesquisa de experiência do usuário e estratégias de gamificação, conforme o objetivo inicial.