Design System

Razac DS · v1.2.0

Fonte da verdade visual e de UX do portal Razac. Espelho 1:1 do portal real + propostas em revisão. Tudo extraído via dev-browser MCP direto do portal logado.

Mapa do Site

73 telas catalogadas, agrupadas em 8 áreas.

Abrir

Portal Real

Tokens extraídos via dev-browser do portal real.

Abrir

Foundations

Cores, tipografia, espaçamentos, raios, sombras.

Abrir

Componentes

Biblioteca versionada — anatomia, props, variants.

Abrir

Pendentes

17 issues do Jira em aberto.

Abrir

Release Notes

Feed contínuo de tudo que entrou no DS.

Abrir

Mapeamento UX

Tipos de campo, onde estão, em que telas.

Abrir

Comentários

Modo revisão estilo Figma.

Abrir

Últimas ações

Feed contínuo das atividades UX neste DS. Ver tudo →

DS · caprichoDesign System· 1 sem atrás
Componentes de capricho: agrupar + sumarizar texto longo

3 componentes novos (P2FieldGroup, P2FactBar, P2LegalSummary) pro problema de campos jogados / texto legal estourando. Aplicados na FUP Tributária e no Detalhe de Invoice; documentados no Storybook.

Tributário polidoPolimento· 1 sem atrás
Dados da Mercadoria: legível, agrupado e base legal sumarizada

Painel reorganizado em blocos (Identificação, Classificação, Destinação) com resumo de chips no topo; o texto legal longo (DRAWBACK…) virou chips de benefício + lei, com o texto íntegro num colapsável. Release note com antes→depois.

RH polidoPolimento· 1 meses atrás
Razac Academy + SinergyRH com layout estruturado

Substituídos placeholders genéricos por layout decente: breadcrumb 'Relacionamentos Humanos > Razac Academy/SinergyRH', título grande + subtítulo, área central com ícone + descrição + cards de pré-visualização do que vem (Trilha Onboarding/Comex Avançado/Liderança | Holerite+Benefícios/Solicitações).

4 telas de listagemImplementação· 1 meses atrás
Invoices + Entreposto + Processos Importação + Análise Solicitações com paridade

Componente SimpleTabelaScreen reusável criado pra padrão de listagem do portal: header slate-700, MatField filters, status pills coloridas, paginação 'Exibindo X de Y'. Aplicado em 4 telas. Total mock plausível por tela (Invoices 4287, Entreposto 14, Processos 20744, Análises 847).

Workspaces 6/6Implementação· 1 meses atrás
6 workspaces completos no padrão pixel-perfect (Fiscal + Tributário também)

Substituídos os legacy Figma Make components (Workspace Fiscal + Workspace Tributário) pelo WorkspaceScreen unificado. Total: 6/6 workspaces (Fiscal, Gestão, Logística, Custos, Desembaraço, Tributário) agora seguem o padrão real do portal — 6 selects MatField + chips quick filter + tabela slate-700 + paginação.

WorkspacesImplementação· 1 meses atrás
4 workspaces refeitos pixel-perfect (Gestão/Logística/Custos/Desembaraço)

Componente WorkspaceScreen reusável criado replicando 1:1 a estrutura real: 6 selects MatField outlined + chips quick filter (Gestão/Logística) + tabela slate-700 com 8 colunas (Processo, Status Processo, Modal, Tarefa Nome, Responsável, Status, Prazo) + paginação. Total mock por workspace plausível (Gestão 26559, Logística 18432, etc).

Follow-upPolimento· 1 meses atrás
Paridade Follow-up confirmada por diff side-by-side

Estrutura idêntica ao real: tabs Importação/Exportação/Produtos, filtros Tipo+Pesquise+Limpar+Opções, 7 cards stats por etapa, tabela slate-700 com badges coloridos.

DashboardsPolimento· 1 meses atrás
Paridade Dashboards (filtros + pills)

Breadcrumb 'Importação > Dashboards'. Card de filtros com Pesquisar + Tipo do Dashboard (Material outlined) + Limpar filtros. Pills de categoria com checkmark indigo + counter por categoria. Apenas favoritos no canto direito.

Fichas Op / IDA VibePolimento· 1 meses atrás
Paridade Fichas Operacionais + IDA Vibe

Fichas Op com 4 filtros corretos (Todos / Filtrar / Pendente-Aprovada / 2 toggles) + grid 4 colunas + counter à direita. IDA Vibe totalmente reescrita: tabela slate-700 header + 1 row Controle Jurídico + pills Todas/Jurídico.

CadastrosPolimento· 1 meses atrás
Paridade visual Clientes / Fornecedores / Lead Time

Refatoradas pra bater visualmente com o portal real: busca larga + selects Material outlined (Status/Validade/País/Operação/Modal) + lista sem círculo numerado + placeholder fiel. Diff side-by-side confirma paridade quase 1:1.