O Design System FortCard é a fonte visual da aplicação. Material UI é o adaptador técnico.

Arquivos principais

  • src/shared/tema/fortTokens.ts: tokens TypeScript.
  • src/shared/tema/fortTheme.ts: tema Material UI.
  • src/shared/design-system/tokens.css: tokens CSS.
  • src/shared/design-system/fort-components.css: estilos compartilhados.
  • src/shared/componentes: componentes compartilhados.

Tokens principais

Tipografia

  • Fonte principal: Plus Jakarta Sans.
  • Títulos principais: peso 500 a 600.
  • Corpo, placeholder e textos auxiliares: peso 400.
  • Labels e badges: peso 500 quando indicam estado.
  • Navegação e textos secundários não devem usar peso forte.

Componentes principais

Estados obrigatórios

  • Button: default, hover, focus, disabled e loading.
  • Input: default, focus, error e disabled.
  • Select: default, focus, error, disabled e selected.
  • Checkbox: default, focus, disabled e selected.
  • Stepper: default, current, complete, disabled e error.
  • StatusIcon: success, warning, danger e info.
  • Timeline: default, current, complete, loading e error.
  • ContractCard: andamento, contratado e cancelado.

Regra de criação

Crie componente em src/shared/componentes quando pelo menos duas superfícies usam o mesmo contrato semântico. Mantenha no domínio quando o componente depende de texto, regra de fluxo ou estrutura específica de produto.