Inthegra Talentos HumanosCatálogo

Componentes do ecossistema Inthegra

Uma interface só para login, admin, CRM, empresas, Inside, candidatos e portal. Tudo aqui vem do pacote comum: nenhum app copia componente de outro.

Como usar

O pacote é distribuído em TypeScript pelo GitHub Packages da MK4. O app compila junto (transpilePackages).

# .npmrc do app
@mk4combr:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

npm i @mk4combr/inthegra-ui

// next.config.ts
transpilePackages: ["@mk4combr/inthegra-ui"]

/* globals.css */
@import "tailwindcss";
@import "@mk4combr/inthegra-ui/estilos.css";
@source "../node_modules/@mk4combr/inthegra-ui/src";

// componentes, rótulos, formatação, sessão
import { AppShell, Button, Cartao } from "@mk4combr/inthegra-ui/componentes";
import { STATUS_VAGA, type Linha } from "@mk4combr/inthegra-ui/banco";
import { exigirPerfil } from "@mk4combr/inthegra-ui/auth/servidor";

Cores

Tema único, escuro. Cada cor tem um papel fixo; fora dele, não usar.

Fundo (ink)

Superfícies do tema escuro

ink-950

#0b0816

ink-900

#110c22

ink-850

#16102c

ink-800

#1d1638

ink-700

#2a2150

ink-600

#3a2f6b

Texto

fg para texto, muted para apoio, faint para legenda

fg

#f3eef9

muted

#b8aecb

faint

#8b81a6

Magenta

Ação principal e marca (troca no white label)

magenta-400

#f04fb5

magenta-500

#e0189a

magenta-600

#b90e79

Violeta

IA (Thea) e superfícies de marca

violet-300

#cfc6ff

violet-400

#b8aef2

violet-500

#8c78f0

violet-600

#6c58db

Ember

Só recompensas e gamificação

ember-400

#ff9a4d

ember-500

#ff7a2f

ember-600

#f05a14

Estados

mint positivo, amber atenção, rose negativo

mint-500

#3ddc97

amber-500

#f5b841

rose-500

#ff5470

Tipografia

Bricolage Grotesque para títulos, Geist para texto, Geist Mono para números (classe num).

Contratação que joga junto

Texto corrido em Geist, 15 px, cor muted para apoio e fg para o principal.

4.210 candidatos · R$ 1.234,56

Botões

Pílula sempre. Primário em magenta, recompensa em ember, o resto neutro.

Link com cara de botão

Chips

Estado e categoria. Dois tamanhos.

neutralmagentavioletembermintamberrose
neutralmagentavioletembermintamberrose

Rótulos do domínio

Status, soluções e transições espelham o banco (api.inthegrath.com.br). Mudou lá, muda aqui.

Status de vaga e próximos passos aceitos

  • RascunhoparaAguardando pagamentoAguardando contratoCancelada
  • Aguardando pagamentoparaAtivaCancelada
  • Aguardando contratoparaAtivaCanceladaCliente desistiu
  • AtivaparaPausadaEm admissãoExpiradaCancelada com cobrançaCliente desistiu
  • PausadaparaAtivaCancelada com cobrançaCliente desistiu
  • Em admissãoparaFechadaAtiva
  • Fechadafinal
  • Expiradafinal
  • Canceladafinal
  • Cancelada com cobrançafinal
  • Cliente desistiufinal

Soluções

S1: Anúncio de vagasS2: Triagem InteligenteS3: R&S AvançadoCONS: Consultoria MP

Status da candidatura (calculado das 3 trilhas)

Em triagemEm seleçãoCom o clienteAprovadaEm admissãoReprovadaDesistiuNão compareceu

Avatar e marcas

Sem foto, o avatar mostra as iniciais. Empresa cliente aparece com o monograma nas cores dela.

MSJEA

Cartões, números e tabelas

Vagas ativas

87

Candidaturas no mês

1.240

12% a mais que setembro

Faturado

R$ 54.320,00

Taxa de liberação

18,4%

Vagas (exemplo)

3 de 3
VagaEmpresaSoluçãoStatusInscritosAbertura
Operador de caixaSupermercado fictícioS3Ativa4230/09/2026
RepositorRede fictíciaS1Pausada1719/09/2026
AçougueiroSupermercado fictícioS2Em admissão901/09/2026

Nenhuma vaga com esses filtros. O estado vazio sempre diz o porquê.

Avisos

Status alterado. A transição foi registrada na auditoria.
Esta vaga já tem 3 candidatos liberados em andamento.
A empresa só vê os candidatos que a equipe liberou.

Campos

Rótulo sempre visível; erro abaixo do campo, em rose.

Use o e-mail do trabalho.

CNPJ inválido (dígito verificador).

Abas

Estado fica no componente pai.

Lista de vagas da empresa, com status e inscritos.

Casca das áreas logadas

Barra lateral com seções no desktop, navegação rolável no celular.

A casca ocupa a tela inteira, por isso fica numa página própria.

Abrir a demonstração da casca

White label

estiloDaMarca() troca as variáveis de cor da marca. Mesmo componente, cor de cada cliente.

Inthegra (padrão)

Vaga em destaque

Supermercado fictício

Vaga em destaque

Rede fictícia

Vaga em destaque

Formatação

Sempre pt-BR e fuso de São Paulo.

moeda(1234.5)
R$ 1.234,50
inteiro(12101)
12.101
percentual(0.125, 1)
12,5%
data('2026-10-18')
18/10/2026
cpfMascarado('12345678909')
***.***.***-09