Design System · v1.2.0 · Novo nesta versão

Portal Real — tokens extraídos

Cores, espaçamentos e padrões extraídos por inspeção via dev-browser MCP direto do portal.razac.com.br em 26/05/2026. Use como referência pra qualquer tela do DS que precise ter paridade visual com a produção.

Cores das etapas de processo

Usadas em Kanban, Follow-up, Pesquisa

Todas as etapas usam tons -800 do Tailwind no texto e na borda da coluna.Desembaraço é a exceção — texto é blue-500 e borda é blue-800.

PRÉ-EMBARQUE

Tailwindyellow-800

RGBrgb(133, 77, 14)

Hex#854d0e

EM TRÂNSITO

Tailwindteal-800

RGBrgb(17, 94, 89)

Hex#115e59

REGISTRO

Tailwindpurple-800

RGBrgb(107, 33, 168)

Hex#6b21a8

DESEMBARAÇO

Tailwindblue-800

RGBrgb(30, 64, 175)

Hex#1e40af

Texto: blue-500 (assimétrico)

FATURAMENTO

Tailwindgreen-800

RGBrgb(22, 101, 52)

Hex#166534

ENTREGA

Tailwindslate-800

RGBrgb(30, 41, 59)

Hex#1e293b

FECHAMENTO

Tailwindorange-800

RGBrgb(154, 52, 18)

Hex#9a3412

Canais DI — badges coloridos

Identificam estado da DI nos cards do Kanban

As classes do portal real são .canal-verde / .canal-vermelho / .canal-amarelo. Replicadas em DI_BADGE de kanban/v1.2.0.tsx.

Canal Verde

DI registrada normalmente

26BR00006316787

Backgroundbg-lime-300

Text colortext-lime-900

BG RGBrgb(190, 242, 100)

Text RGBrgb(54, 83, 20)

Canal Vermelho

DI vencida / atrasada

26/0660484-8

Backgroundbg-red-200

Text colortext-red-600

BG RGBrgb(254, 202, 202)

Text RGBrgb(220, 38, 38)

Canal Amarelo

Canal amarelo (atenção)

25/0506813-4

Backgroundbg-yellow-200

Text colortext-yellow-600

BG RGBrgb(254, 240, 138)

Text RGBrgb(202, 138, 4)

MatField — input outlined (Angular Material)

Padrão de todos os formulários do portal

O portal usa mat-form-field appearance="outline"com label flutuante. Replicado em MatSelect e MatInput de kanban/v1.2.0.tsx.

Amostra (3 estados)

Responsável

CAMILA ROSSI

Responsável

Referência do Processo

Tipo de Filtro

Especificações

height: 56px (h-14)
width: média 180–200px
border: 1px solid rgb(226, 232, 240) = slate-200
borderFocus: 2px solid rgb(67, 56, 202) = indigo-600
label: 14px regular, slate-800/60 (rgba(30, 41, 59, 0.6))
labelFloat: transform scale(0.75) + posição -top-2 (sai pra cima da borda)
text: 14px slate-800
radius: 4px (Material default) — usamos rounded-md (6px) pra paridade visual

Coluna do Kanban — estrutura

Frame + header + cards + footer

PRÉ-EMBARQUE413

AIR0447-ESDI

Sem previsão

<div class="rounded-lg border border-{cor}-800 bg-slate-100 w-52">
  <div class="border-b-2 border-{cor}-800 p-1">
    <div class="flex items-center w-full py-2 px-3">
      <span class="flex-1 text-sm font-medium leading-5 uppercase text-{cor}-800">
        {ETAPA}
      </span>
      <span class="text-sm font-medium leading-5 tabular-nums text-{cor}-800">
        {contador}
      </span>
    </div>
  </div>
  <div class="p-2 space-y-2">
    {…cards…}
  </div>
  <div class="border-t border-slate-200 bg-slate-50 px-3 py-3">
    <p>Exibindo X de Y</p>
    <button>Ver mais</button>
  </div>
</div>

DS v1.2.0 — o que foi adicionado

• Cores reais das 7 etapas extraídas via dev-browser (yellow-800, teal-800, purple-800, blue-800/500 assimétrico, green-800, slate-800, orange-800)
• 3 cores de canal DI com bg + text exatos (lime-300/900, red-200/600, yellow-200/600)
• MatSelect e MatInput — padrão Material outlined com label flutuante
• SimpleList — opções de dropdown com checkmark indigo no item ativo
• Estrutura padronizada de coluna do Kanban (frame + header + cards + footer)
• Cards Razac (shadow normal, p-1, space-y-1, divider mat-divider)

Extraído via dev-browser MCP em 26/05/2026 da aba realportal.razac.com.br/followup/kanban.