Escala visual
Substituir valores isolados por tokens semânticos, temas e componentes reutilizáveis.
Contexto
Uma plataforma modular para toda a jornada de pessoas
O Fourmakers conecta operação, desenvolvimento, comunicação e estratégia de RH em uma única plataforma. O produto reúne módulos como recrutamento, alocação, timesheet, férias, perfil do colaborador, PDI, desempenho e comunicação interna.
Com diferentes jornadas, perfis e superfícies, o desafio era criar uma fundação que mantivesse a experiência coerente enquanto o produto crescia na web e no app.
Minha atuação
Frontend & Design System
- Arquitetura e desenvolvimento frontend
- Tokens, temas e componentes base
- Experiências responsivas para web e app
- Acessibilidade e dark mode
- Documentação e guidelines técnicos
- Code review e apoio ao time
Desafio
Consistência sem limitar a evolução do produto
A variedade de módulos exigia decisões que funcionassem além de uma tela isolada. A solução precisava conectar design, código e regras de arquitetura em uma linguagem comum.
Escala técnica
Separar apresentação, aplicação, domínio e dados para reduzir acoplamento e facilitar testes.
Escala de equipe
Documentar decisões e criar checklists que apoiassem desenvolvimento, review e onboarding.
Design System
Tokens que carregam intenção, não apenas cor
A paleta foi organizada por função: marca, texto, superfície, borda e status.
Tokens on-* definem o conteúdo correto para cada fundo e preservam contraste nos temas claro e
escuro.
Primary#000000
Accent#9A1BFF
Success#16A34A
Warning#F59E0B
Info#2563EB
Componentes
Uma gramática compartilhada
Botões pill, campos e cards com raio de 20px, hierarquia tipográfica em Inter e estados previsíveis formam a base das interfaces.
Em andamento
Campo com label
Dark mode
Temas por tokens
O tema escuro troca valores na raiz sem forçar cores nos componentes, mantendo superfícies, textos e gradientes coerentes.
Conteúdo sobre o gradiente usa
text-on-gradientArquitetura frontend
Responsabilidades claras do componente à API
A Clean Architecture organiza o produto em camadas independentes. Páginas orquestram a interface; regras de negócio vivem em Use Cases; contratos ficam no domínio; e implementações de dados usam um cliente HTTP padronizado.
Page
Hook / Store
Use Case
Repository
httpClient
API
Inversão de dependência
O domínio define contratos e permanece independente das implementações externas.
HTTP consistente
Uma factory centraliza autenticação, trace ID, headers, erros e downloads.
TypeScript estrito
Props, entidades, retornos e integrações ganham contratos explícitos e previsíveis.
Features sustentáveis
Pages, hooks, componentes, Use Cases e APIs mantêm responsabilidades bem delimitadas.
Produto
Um sistema aplicado a diferentes jornadas
A mesma base visual e técnica atende contextos operacionais, gerenciais e de desenvolvimento humano.
Documentação e qualidade
O toolkit como parte do produto
O Design Toolkit consolida as decisões necessárias para transformar o sistema em prática diária, servindo como referência para prototipação, novas features, code review e onboarding.
Acessibilidade
Contraste, labels, foco visível, nomes acessíveis e estrutura correta de modais.
Code review
Checklist para tokens, componentes, arquitetura, tipagem, imports e responsabilidades.
Responsividade
Validação das jornadas e componentes em diferentes dimensões para web e app.
Resultado
Uma fundação comum para design e engenharia
O trabalho estabeleceu uma linguagem compartilhada entre interface e código. Com tokens, componentes, temas, arquitetura e guidelines no mesmo sistema, novas jornadas podem partir de decisões já testadas em vez de recomeçar a cada feature.
Conhecer o Fourmakers