Hero Design System v2

Nota 2,2 de 5 em 7 dimensões.

Ouvi mais de 10 pessoas, entre PMs, designers e o VP de Produto. Perguntei se conheciam o Design System e em que estágio achavam que ele estava. Depois comparei Figma e Storybook e avaliei contra critérios da WCAG.

O Hero Design System existia, mas existir não é o mesmo que funcionar. Os times sabiam que o sistema estava lá, mas não sabiam o que era padrão, o que estava desatualizado, ou como contribuir sem quebrar o que outros times já usavam.

• Estabilizei a v1, usada por 8 designers e pelo time de front-end nas plataformas de pacientes e de profissionais: nomenclatura padronizada, arquitetura de arquivos reorganizada e guia de acessibilidade com os critérios mínimos da WCAG.
• Construí a v2 em paralelo, com tokens semânticos para light, dark e white label. O sistema troca as cores para cada empresa cliente.
• Unifiquei a nomenclatura entre Figma e Storybook, para ter uma única fonte de verdade.
• Desenhei a arquitetura da v2 para ser lida por IA (Figma, GitHub e Claude Code): quem usa vibe coding pega o componente exato, com os comportamentos mapeados.
• Operei em co-ownership real com o Tech Lead de front-end: eu respondo por visão, padrões e priorização, ele por estabilidade técnica e releases.

Usei IA generativa para pesquisa, síntese e rascunho de modelos e propostas da v2, antes de começar o trabalho no Design System.

Pausado antes da integração com desenvolvimento. A arquitetura da v2 está desenhada e documentada no Figma. A conexão com ferramentas de IA e o pipeline de código não foram implementados. A v1 já estava sendo levada aos poucos para os produtos de backoffice e gestão.