Case / 05 2026
Jaci UI JACI_UI
DESIGN SYSTEM / EM PRODUÇÃO
Resumo
Nascida durante o desenvolvimento do Abrigo do Wlad, a Jaci UI transforma sua identidade inspirada na água, no céu, na terra e na vegetação em uma fundação reutilizável de tokens e componentes acessíveis.
Jaci deriva de “Îasy” [↑] (abre em nova aba), palavra do tupi que significa "Lua".
A Jaci UI surgiu com a plataforma web do projeto social independente Abrigo do Wlad, quando o site público e o painel administrativo passaram a compartilhar a mesma interface. Para além de definir uma linguagem agradável e nos padrões dos websites atuais, o design system precisava traduzir uma identidade acolhedora para o projeto, que pudesse aliviar a carga cognitiva do visitante diante do tema de resgate e maus-tratos animais.

Jaci UI · Capa editorial
Campo de flores e folhagem tratado em verde e preto.

Ações · Tema escuro
Hierarquia, intenção e feedback reunidos em botões e marcadores para diferentes contextos.

Ações · Tema claro
A mesma hierarquia de ações preservada sobre superfícies claras.

Superfícies · Tema escuro
Cards combinam tom, hierarquia e propósito sem perder a identidade visual.

Superfícies · Tema claro
Contraste, elevação e cores semânticas adaptados às superfícies claras.

Feedback · Diálogo destrutivo escuro
Contexto, consequência e próxima ação permanecem próximos em uma decisão irreversível.

Feedback · Diálogo destrutivo claro
O mesmo diálogo semântico com sobreposição e foco visual ajustados ao tema claro.

Formulários · Tema escuro
Campos, textos de apoio, validação e seletores organizam uma coleta de dados extensa.

Formulários · Tema claro
Controles e estados de validação mantêm ritmo e legibilidade sobre a superfície clara.

Fluxos · Progresso visível
Navegação, progresso e divulgação gradual orientam jornadas mais longas.

Descoberta · Tema escuro
Busca, sugestões, filtros e seleção trabalham juntos para reduzir o esforço de descoberta.

Descoberta · Tema claro
Os controles de descoberta preservam agrupamento e destaque no tema claro.

Estados · Tema escuro
Vazio, carregamento e orientação dão uma resposta clara enquanto o conteúdo não está disponível.

Estados · Tema claro
Mensagens, ações de recuperação e esqueletos de carregamento adaptados ao tema claro.
Manter a consistência visual e comportamental entre as duas aplicações sem duplicar componentes nem levar regras específicas de produto para a biblioteca. A fundação também precisava sustentar formulários extensos, navegação, feedback e sobreposições com estados previsíveis, responsivos e acessíveis.
Extraímos a fundação para o pacote privado @jaci/ui dentro do monorepo. Tokens semânticos organizam cores, tipografia, superfícies, foco, elevação e movimento nos temas claro e escuro; componentes React e TypeScript usam CSS Modules e são exportados por subcaminho. Alguns componentes utilizam primitives do Radix UI, que fornecem a base de comportamento e acessibilidade, enquanto a Jaci define composição, API e identidade visual. Componentes ligados à navegação e ao layout de cada produto permanecem nas respectivas aplicações.
A Jaci se tornou a camada de interface compartilhada pelo site público e pelo painel administrativo do Abrigo do Wlad. Componentes de formulário, conteúdo, navegação e feedback passaram a consumir a mesma fundação visual, com testes cobrindo comportamentos essenciais e uma fronteira mais clara entre padrões reutilizáveis e regras específicas de cada aplicação.
Além disso, a biblioteca de UI pode ser utilizada em qualquer projeto, pois é licenciada sob a licença MIT e pode ser copiada, modificada, distribuída e usada para fins comerciais e não comerciais, desde que o aviso de direitos autorais e o texto da licença sejam preservados.
Ficha técnica / 06
Atuação
Design system e desenvolvimento front-end voluntário
Design systems
- [React]
- [TypeScript]
- [CSS Modules]
- [Vitest]
Interfaces
- [React]
- [CSS Modules]
- [Radix UI Primitives]
Acessibilidade
- [Radix UI Primitives]
- [Vitest]