DS Razac — Captura inicial do portal

Contexto

Antes deste projeto, o portal portal.razac.com.br existia há anos sem qualquer documentação visual estruturada. Decisões de design ficavam dispersas entre conversas de WhatsApp, screenshots em apresentações antigas e a memória do time. Cada nova feature exigia um esforço enorme só para alinhar o vocabulário visual com o que já existia.

Problema

A inexistência de uma fonte única tornava qualquer evolução incremental arriscada. Componentes eram recriados a cada tela, tokens de cor variavam por contexto, e não havia rastreabilidade do que mudava entre uma versão e outra.

Hipótese

Capturar o estado atual do portal em um Design System estruturado — com tokens semânticos, biblioteca de componentes e telas reconstruídas pixel-perfect — daria base para que toda evolução futura fosse consistente, versionada e rastreável.

Solução

• 23 telas reconstruídas em Figma com fidelidade ao portal real, organizadas em 5 áreas (Importação, Cadastros, IDA, RH, Financeiro).
• 14 componentes reutilizáveis: Sidebar, Topbar, Breadcrumb, TabItem, VerticalTabItem, StepperStep, CounterCard (14 variants), DataField, AvatarUser, ChipDI, PillStage, NewChip, PrimaryButton, GhostButton.
• 118 tokens semânticos divididos em 6 categorias (Cores, Tipografia, Espaçamentos, Raios, Sombras, Ícones).
• Coleções no Figma: Razac Tokens — Semantic e Razac Tokens — Domain.

Outcomes

Baseline completo do portal está documentado e pronto para receber projetos de evolução. O DS já é a fonte para conversas com PO, dev e stakeholders. O PRJ-4561 (Modelos de Checkpoint) foi o primeiro projeto a entregar telas novas usando esta base.