Design System · Contratei!

Editorial-tech para recrutamento.Neon, chumbo, alta densidade.

Tokens, componentes e padrões extraídos da aplicação real. Toda decisão visual está aqui — paleta, tipografia, motion, a11y.

Ver dashboardExplorar tokens
Cores de marca
8
Componentes
24
Breakpoints
5
WCAG
AA

Identidade

Paleta

Apenas um neon por área — neon é leitura, não decoração. Clique no hex para copiar.

Sistema de tipos

Tipografia

Sora em toda a UI. Headings em font-black, números em tabular-nums.

Sample

Eyebrow · 10px

Match com IA

Card heading · text-lg

Body 14px com line-height 1.5. Usado em descrições, helper text e instruções operacionais — sempre legível.

92%

Escala

  • text-[10px]10px
  • text-xs12px
  • text-sm14px
  • text-base16px
  • text-lg18px
  • text-xl20px
  • text-2xl24px
  • text-3xl30px
  • text-4xl36px

Controles

Botões

Touch ≥ 44px, transição 180ms, focus-visible com ring neon.

Primário (escuro)

Primário (neon)

Secundário

Ghost / Quiet

Primary (escuro)
<button
  className="inline-flex min-h-11 cursor-pointer items-center justify-center gap-2
             rounded-md bg-[#25302e] px-4 text-sm font-bold text-[#C4FF57]
             transition-colors hover:bg-[#1a2422]
             focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C4FF57]/70
             disabled:cursor-not-allowed disabled:opacity-50"
>
  Publicar vaga
</button>
Primary (neon)
<button
  className="inline-flex min-h-11 cursor-pointer items-center justify-center gap-2
             rounded-md bg-[#C4FF57] px-4 text-sm font-black text-[#25302e]
             transition-colors hover:bg-[#b8f040]
             focus:outline-none focus-visible:ring-2 focus-visible:ring-[#597048]/45"
>
  Gerar match
</button>

Formulários

Inputs

Label visível obrigatório, hint à direita, erro inline com ícone.

EmailUse o corporativo

Padrão · estado normal

Cargo*

Mínimo 5 caracteres

Descrição
Nível
Input text
<input
  type="email"
  placeholder="recrutador@empresa.com"
  className="w-full rounded-lg border border-[#8D9999]/25 bg-white
             px-3.5 py-3 text-sm text-[#25302e]
             placeholder:text-[#8D9999] outline-none transition
             focus:border-[#C4FF57] focus:ring-2 focus:ring-[#C4FF57]/25"
/>

Indicadores

Badges & Chips

Status com cores semânticas + filter chips com contador.

Status

AprovadoRecebidoPendenteExpiradoRascunho
Status badge (success)
<span
  className="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5
             text-[10px] font-black uppercase tracking-wide
             bg-[#C4FF57]/20 text-[#3a5230] border-[#C4FF57]/40"
>
  <CheckCircle2 className="h-3 w-3" strokeWidth={2.5} />
  Aprovado
</span>

Filter chips

Containers

Cards & Métricas

Border /18, sombra de 1px, hover discreto. Sem decoração — hierarquia via tipografia.

Pipeline ativo

32

candidatos em andamento

Conversão

18%

contratados no funil

Testes pendentes

9

aguardando resposta

Vagas ativas

6

posições abertas

Card padrão
<article
  className="rounded-xl border border-[#8D9999]/18 bg-white p-4 sm:p-5
             shadow-[0_1px_2px_rgba(37,48,46,0.04)]
             transition-[border-color,box-shadow]
             hover:border-[#8D9999]/30
             hover:shadow-[0_8px_20px_rgba(37,48,46,0.06)]"
>
  {children}
</article>

Navegação

Tabs

Indicador neon embaixo da aba ativa, transição 180ms.

Visão executiva do match: score global, alinhamento DISC, recomendação direta.

Tab (ativa)
<button
  role="tab"
  aria-selected={active}
  className={`relative inline-flex shrink-0 items-center gap-1.5 px-3 py-3
              text-sm font-bold transition-colors
              ${active ? "text-[#25302e]" : "text-[#8D9999] hover:text-[#4A5452]"}`}
>
  {label}
  {active && (
    <span className="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-[#C4FF57]" />
  )}
</button>

Demonstração interativa com a primitiva real do app.

Modal · uso com ModalShell
import {
  ModalShell, ModalHeader, ModalBody, ModalFooter, useModalTitleId,
} from "@/app/_components/ui/Modal";

const titleId = useModalTitleId();

{open && (
  <ModalShell labelledBy={titleId} onClose={close} size="xl" zIndex={1100}>
    <ModalHeader
      id={titleId}
      eyebrow="Relatório IA · Match"
      title="Marina Costa"
      description="People Partner Senior · 92% de match"
      variant="dark"
      onClose={close}
    />
    <ModalBody>{/* conteúdo scrollável */}</ModalBody>
    <ModalFooter>{/* ações sticky */}</ModalFooter>
  </ModalShell>
)}

Movimento

Motion

150–300ms · cubic-bezier(0.2, 0, 0, 1). Sempre respeita prefers-reduced-motion.

Skeleton

Shimmer 1.4s

Pop in

scale 0.96→1, 180ms

Fade up

Item de lista entrando

opacity + translateY, 300ms

Domínio

Psicometria

DISC, avatares determinísticos por nome, match score em deep-chumbo + neon.

DISC

DDominância65%
IInfluência80%
SEstabilidade45%
CConformidade35%

Avatares & Score

Ana
Rafael
Bianca
Lucas
Júlia
Marcos

Match score

92%75%48%

Layout

Spacing

Sistema 4pt. gap-3 dentro de cards, gap-6 entre blocos.

  • gap-14px
  • gap-28px
  • gap-312px
  • gap-416px
  • gap-520px
  • gap-624px
  • gap-832px

Acessibilidade

Pre-Delivery Checklist

O que verificar antes de mergir qualquer UI.

Touch ≥ 44×44px
cursor-pointer em clicáveis
focus-visible:ring-2 neon
tabular-nums em dados
aria-label em ícones-botão
ESC + backdrop fecham modal
Contraste body ≥ 4.5:1
prefers-reduced-motion
min-h-dvh (não 100vh)
Lucide stroke 2.2–2.5
Sem emoji como ícone
Label visível por campo