Holo Design System
Sistema de design completo desenvolvido para a Holofotte. Tokens, componentes e diretrizes para um produto consistente e escalável.
Devido a acordos de confidencialidade, este projeto apresenta uma versão adaptada do original.
Detalhes sensíveis foram levemente alterados para proteger informações.
00
meu papel
Auditoria / Desenvolvimento
pessoas
Otavio Monteiro / Yuri Tanaka
A meta central foi criar um ecossistema de design tokens, padrões e componentes escaláveis para todos os produtos do cliente. A implementação desse UI Kit no Figma otimizou o tempo de prototipagem em 50%, oferecendo alta flexibilidade na construção de layouts e apresentações para stakeholders. Além disso, a estrutura robusta assegurou uma integração técnica eficiente, facilitando o repasse do design para a engenharia.
ano
2026
tempo
2 meses
tags
#designsystem #ia #claude
IA como parceira de execução
Este projeto foi desenvolvido usando com Claude e Figma Make, não como gerador de ideias, mas como parceiros técnicos de execução.
O processo foi iterativo: eu definia a direção, revisava os resultados via screenshots capturados em tempo real, e a execução acontecia na sequência. O Figma Make entrou para acelerar partes da estrutura visual, complementando o fluxo de trabalho. Decisões de estrutura do sistema, revisão visual de cada etapa, refinamentos manuais e toda a curadoria do que entrava ou não no DS. A IA acelerou a execução seguindo meu raciocínio.
Veja o projeto de forma mais completa
Do site ao sistema
A Holofotte é uma agência de marketing de influência com identidade visual forte, mas sem documentação formal de design. O objetivo foi auditar o site, extrair todos os valores reais de CSS e construir um sistema estruturado em duas camadas: Primitives e Semantics.
Problema
Identidade visual existia no código , cores, fontes e espaçamentos definidos , mas sem um sistema que garantisse consistência e facilitasse a escala do produto.
Solução
Auditoria completa do HTML/CSS, extração de todos os tokens, criação de variáveis em 8 collections no Figma com hierarquia Primitives → Semantics e documentação de acessibilidade WCAG 2.1.
Regras para escalar com consistência
Tokens CSS prontos para código, Do's & Don'ts e acessibilidade documentada.
Um sistema pronto para crescer
339 variáveis em 8 collections
25 text styles Inter + Garamond
61 color styles Semantics vinculados
10+ componentes com Auto Layout
O Design System da Holofotte partiu de zero, e chegou a uma documentação completa em Figma com arquitetura de tokens em dois níveis, componentes escaláveis e diretrizes de acessibilidade WCAG 2.1. Uma fundação sólida para o crescimento da plataforma.