Design Tokens com intenção e contexto

A jornada do Aplica Theme Engine — white label, acessível, pronto para IA e humanos

Este artigo conta a história por trás do Aplica Theme Engine — um pacote open source que gera automaticamente Design Tokens semânticos, acessíveis e multi-plataforma a partir de uma única configuração de marca. É sobre o problema que esse sistema tenta resolver, as perguntas que levaram até ele, e por que tokens com intenção e contexto importam mais do que nunca em uma era onde IA escreve interfaces.

Processos complexos não tem soluções simples, mas podemos tentar dar sentido ao nosso trabalho através de vivências e aprenderes. Imagem gerada pelo Gemini.

Design Systems não morrem de falta de componentes. Eles morrem de falta de separação de responsabilidades.

Essa é a tese. E eu levei décadas para chegar nessa frase de forma limpa.

A semente

Tudo começa de algum lugar e é sempre transformação. Imagem gerada pelo Gemini.

Em 2013, achei no YouTube uma palestra de Brad Frost gravada em Düsseldorf sobre Atomic Design. Minha cabeça explodiu. No mesmo ano, conheci a ideia de Design Tokens — da Jina Anne (vídeo aqui da Jina sobre a ideia) e do Jon Levine, para a Salesforce — também pelo YouTube. Isso alugou um triplex na minha cabeça.

Não foi coincidência. Foi ruptura.

Eu já trabalhava com design para internet desde 2000 — webdesigner, webmaster, e todos os nomes que vieram associados a quem “faz design e coda” naquela época. Antes disso, em 1996, com 16 anos, era BBS e HTML experimental no Brasil. Sabia fazer interfaces. Sabia reusar código. Usava YUI, grid.css e outras bibliotecas que foram surgindo ao longo dos anos 2000 para não reescrever tudo do zero toda vez — e quando o Bootstrap apareceu em 2011, estava lá desde o primeiro dia.

Mas o que Atomic Design e Design Tokens me mostraram foi outra coisa: não se trata de reusar código. Trata-se de reusar decisões. Criar uma linguagem visual com intenção que qualquer produto, em qualquer plataforma, possa consumir de forma consistente.

Plantada a semente, fui estudar. Por anos. Fazendo consultorias, pesquisando reuso de bibliotecas de UI, construindo as perguntas certas antes de ter as respostas.

O primeiro laboratório real

O trabalho repetitivo e manual permite a gente pensar em como melhorar, otimizar e deixar as coisas mais fáceis — ou potencializar as nossas ações. Imagem gerada pelo Gemini.

Só em 2020 tive meu primeiro trabalho dedicado a Design System. Fui trabalhar na criação do Apollion — um sistema para uma empresa financeira, nascido da visão de um amigo muito querido, o Fernando Barros. Dois anos inteiros para construir algo que fosse além de um Figma bem organizado.

Naquele momento, o Tailwind estava em alta. E foi exatamente ali que comecei a ter atritos com ele — não como framework de estilo em geral, mas como base para um Design System white label. A pergunta que não saía da minha cabeça: como personalizar de forma escalável, pensando em todas as variações que um cliente pode pedir, sem criar overrides que quebram o sistema?

E mais: como garantir acessibilidade desde a lógica inicial — não como checklist, mas como parte do algoritmo? Como suportar múltiplos viewports com a mesma fonte de verdade? Como entregar dark mode sobre tudo isso, sem reescrever tudo manualmente quando a paleta muda?

Essas perguntas vinham de anos de experiência acumulada. O Apollion foi o lugar onde comecei a responder algumas delas.

De dia, levava os aprendizados para o Apollion com o time de Engenharia. De noite e nos finais de semana, construía o Aplica — já em 2020, uma versão embrionária no GitHub onde testava as ideias que ainda não cabiam no trabalho. Usava já o Tokens Studio nessa época, quando o plugin ainda estava em seu início — um projeto que respeito muito e que se tornou referência para o ecossistema (e que uso até hoje, BTW). Tudo isso bem antes das variáveis do Figma, muito antes dessa explosão de IA. Era uma ideia que se sustentava por conta própria.

O que veio depois

Nem sempre é sobre fazer, navegar pela incerteza e pelo labirinto além do craft faz parte da jornada — tudo colabora para que a entrega, nem que seja deixando a gente mais resistente. Imagem gerada pelo Gemini.

Depois do Apollion vieram outros capítulos. Em um dos meus trabalhos seguintes, tentei encaixar a ideia dentro de uma estrutura maior. Aprendi sobre o que quebra um Design System quando a organização é grande demais — dependências políticas, times que seguem rumos diferentes, decisões tomadas em salas que você não estava. O sistema interno foi para outro caminho. O meu aprendizado ficou.

Cada ciclo adicionava uma camada nova de entendimento. Não sobre tokens ou Figma — sobre o problema raiz. Sobre por que sistemas que funcionam no papel entram em colapso na prática.

E tudo isso foi sendo documentado. Sempre. Os racionais por trás de cada decisão, a matemática dos algoritmos, as mudanças de direção e o porquê delas, a teoria que sustenta a arquitetura. Não como burocracia — como necessidade. Porque sem registro, o conhecimento morre quando o time muda. E eu já tinha visto isso acontecer vezes demais.

No final de 2024, o Aplica já estava maduro o suficiente — ainda em proto-formato no GitHub, mas com uma arquitetura que eu acreditava. No final de 2025, tomei uma decisão: transformar em pacote NPM e abrir para a comunidade.

E aí veio a inversão que define o projeto hoje.

A inversão

A Máquina de Temas: quando o trabalho de anos vira um processo. Imagem gerada pelo Gemini.

Por anos, minha lógica foi: construir o Aplica fora do trabalho e trazer para dentro. Usar o emprego como laboratório. Isso funcionou até um ponto.

Mas a inversão foi o que libertou o projeto: agora o Aplica existe por conta própria. Uso nos projetos do meu dia a dia. Está disponível para qualquer pessoa usar. Evolui em público, absorvendo o que aprendo em qualquer contexto — não de um só lugar.

É gratuito. É open source. E está crescendo rápido, se adaptando a essa era de Agentic Design System e IA de formas que eu não teria previsto há três anos.

O que o Aplica é — e o que não é

Das raizes as folhas, tudo o que a gente percebe tem um sistema que a gente não acessa pela superfície. Imagem gerada pelo Gemini.

O Aplica não é uma biblioteca de componentes. Não é um Figma kit. Não é mais um framework de UI.

É uma arquitetura de tokens — uma especificação de linguagem visual construída sobre uma ideia: cada camada do sistema tem uma única responsabilidade, e a combinação entre elas é automática.

Cinco camadas principais, mais uma ortogonal:

1. Marca define a identidade bruta — cores, tipografia, personalidade visual.
2. Modo define o comportamento em contextos claros e escuros. Não conhece a marca; só conhece as regras de inversão.
3. Superfície define profundidade dentro de um mesmo modo. Fundos positivos e negativos, sem quebrar a lógica de contraste.
4. Semântica é a camada pública. Tokens com propósito: interface.feedback.success, interface.function.primary. Nenhum deles se refere a uma cor específica — cada um descreve um papel.
5. Foundation é a camada de atalho — os tokens mais usados no dia a dia, com nomes mais curtos para velocidade.
6. Dimensão é ortogonal a tudo. Define três escalas espaciais: compacto, padrão, acessível. Você muda a densidade sem tocar em cor.

Com essa separação, uma configuração de marca gera automaticamente todas as combinações.

Dois modos × duas superfícies × três dimensões: doze variantes automáticas por marca.

Quatro marcas: quarenta e oito.

Você não escreve esses tokens — o engine gera.

O detalhe que muda tudo: cor não é cor

Nem sempre cores vistas se decompõe da melhor forma para todos os espectros da visão humana. Imagem gerada pelo Gemini.

A maioria dos sistemas usa HSL para calcular paletas. O problema é que HSL não é perceptualmente uniforme. Um amarelo com L: 50% parece completamente diferente de um azul com L: 50% para os olhos humanos — mesmo número, percepção completamente distinta.

Acessibilidade calculada em HSL está errada por construção. O contraste que passa no papel pode falhar na prática.

O Aplica usa OKLCh — um espaço de cor perceptualmente uniforme. Se você aumenta a luminosidade em 10%, ela realmente parece 10% mais clara, independente do matiz. Com isso, o contraste WCAG AA é calculado automaticamente para cada par de cor do sistema. Sem auditoria manual. Sem checklist. Sem esquecimento.

Acessibilidade não é uma etapa. É parte do pipeline de geração.

A IA mudou o jogo — e isso importa mais do que parece

Feito para humanos e amplicado para Inteligências Artificiais. Imagem gerada pelo Gemini.

A IA entrou nos workflows de design e desenvolvimento. Todo mundo está usando Cursor, Claude, Copilot para gerar interfaces. E aqui está o problema que ninguém está falando em voz alta: quando você coloca na frente de uma IA um sistema com setecentas classes utilitárias, ela tem opções demais e contexto de menos. Ela adivinha. Quando ela adivinha, ela erra.

Um sistema semântico tem quarenta tokens de foundation que cobrem noventa por cento dos casos. Cada token carrega intenção: feedback.success, function.primary, txt.muted. A IA não precisa adivinhar qual cor usar para um estado de erro — existe exatamente um token para isso, e o nome diz o que ele é.

Em um mundo onde cada token de contexto tem custo, sistemas semânticos compactos e intencionais não são só mais elegantes — são economicamente superiores.

Falarei sobre isso em detalhes no próximo artigo dessa série.

Um aviso honesto

Pode ser que amanhã o Aplica Theme Engine seja desnecessário. Que a IA evolua de uma forma que torne esse tipo de sistema obsoleto. Que outro projeto apareça e resolva os mesmos problemas de forma melhor.

Tudo bem. Essa é a história dele até agora. E ela existe por uma razão: porque os problemas que ele resolve são reais, documentados em anos de prática, e continuam sem resposta nos sistemas mais populares do mercado.

Se você já se fez alguma das perguntas que eu me fiz lá em 2020, esse sistema foi construído para você.

Poe Bellentani trabalha com design para internet desde 2000 e com Design Systems desde 2013. É o criador do Aplica Design System e do Aplica Tokens Theme Engine.

Aplica Design System

• Site: aplica.me
• Documentação: docs.aplica.me