ProjetosLuna DS
Uma única fonte de tokens para Apple e Material, no claro e no escuro
Desafio
Times mobile entregam o mesmo produto duas vezes: uma na linguagem da Apple e outra na do Google, e normalmente mais duas para os modos claro e escuro. Kits que parecem completos no primeiro dia desmoronam no primeiro rebrand, porque cores, raios e tamanhos de texto são digitados à mão em centenas de camadas.
Cada cópia desenhada à mão é um lugar onde a próxima mudança pode passar despercebida, e o código nunca bate exatamente com o que foi desenhado.
Abordagem
Luna é um design system em Figma para apps iOS e Android, construído para que uma única fonte de tokens alimente componentes Apple e Material nos modos claro e escuro, com saídas para SwiftUI, Jetpack Compose, Flutter e CSS.
Projetei o sistema de ponta a ponta, das escalas de cor aos componentes, aos padrões nativos e às telas completas de aplicativo.
- Produto
- Luna DS
- Ano
- 2025
- Tipo
- Design system
- Papel
- De ponta a ponta
- Plataformas
- iOS 26 · Material 3 Claro e escuro
- Saídas
- SwiftUI · Compose Flutter · CSS
- Escopo
- Fundamentos Tokens semânticos Componentes e padrões Telas de app
Princípios
Os componentes apontam para papéis semânticos como brand/base ou text/strong-950, nunca para um valor. O papel aponta para uma fundação, e a cadeia corre em um só sentido.
Light e Dark são dois modos de uma mesma coleção, então nenhum componente tem variante escura. As plataformas diferem nos números, não na intenção: uma coleção Platform guarda as áreas de toque de 44 ou 48 pontos e as alturas das barras, para que um mesmo componente obedeça às duas.
“Um componente nunca nomeia uma cor. Ele nomeia um token, o token nomeia uma fundação, e a cadeia corre em um só sentido.”
Padrões nativos
21 padrões Apple e 17 do Material 3 foram redesenhados na geometria do Luna. A Platform Bridge mapeia 112 slots Apple e Material para tokens do Luna no modo Brand, ou para os valores publicados pela própria plataforma no modo System, então uma tela pode ser conferida com a paleta nativa em uma única troca.
O que vem na caixa
- Variáveis em seis coleções
- 556
- Componentes, todo estado em um token
- 79
- Telas de app no claro e no escuro
- 88
- Variantes escuras para manter
- 0
O que eu levaria para o próximo sistema
Um sistema é feito das suas restrições: não ter paint styles nem variantes escuras foram escolhas deliberadas, e cada atalho removido era um lugar a menos para o sistema se desviar.
Nomear os tokens do jeito que SwiftUI, Compose, Flutter e CSS os leem manteve o arquivo e o código descrevendo a mesma coisa, e telas de app completas feitas só com instâncias provaram o sistema mais rápido do que qualquer página de documentação conseguiria.
