DEV Internacional

DIVE

DevInternacionalVirtualEcosystem

O design system do quadro de mentoria da DEV Internacional. Role a página: a vaga desce a trilha com você e atravessa o quadro até a oferta.

Uma busca por vaga no exterior tem muitas etapas.

O DIVE mostra todas num lugar só. Cada mentorado da DEV Internacional tem um quadro: cada vaga vira um card e cada etapa do processo seletivo vira uma coluna. O mentor enxerga o quadro de todos e sabe quem precisa de um empurrão.

  • O mentorado move os próprios cardsArrasta a vaga de coluna conforme o processo anda, anota a entrevista, registra o salário.
  • O mentor acompanha todos os quadrosVê cada mentorado sem editar nada, comenta no card e prepara a próxima conversa.
  • O card avisa o que precisa de atençãoFollow-up vencido, entrevista amanhã, empresa que sumiu: a faixa no topo do card diz em palavras.
  1. AplicadasA vaga entra no quadro quando o mentorado se candidata.
  2. Entrevista comportamentalA empresa respondeu. A entrevista aparece no card e na Agenda.
  3. Desafio técnicoO prazo do desafio fica no topo do card até a entrega.
  4. OfertaO card chega à última coluna. O mentor vê junto com o mentorado.

O card que acompanha a sua rolagem é uma dessas vagas. A cada parada ele muda de coluna e de faixa, igual no quadro de verdade.

Tipografia

Três famílias do Google Fonts, cada uma com um trabalho. A Funnel Sans é a fonte padrão de todas as telas.

Funnel Display

Títulos: login, página 404, CRM e o nome de quem está no painel. Nunca em texto corrido.

font-display
Vagas no mundo

Funnel Sans

Toda a interface: cards, colunas, botões, formulários, tabelas. Base de 14px.

font-sans

Clique no logo ou no nome da empresa para ver todas as vagas abertas dela e uma apresentação da empresa.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz · ç ã õ é ê

Fira Code

Tudo que é contado, datado ou codificado: empresa, salário, prazo, contagem da coluna.

font-mono
WISE£ 75–90kFollow-up hoje12

0 1 2 3 4 5 6 7 8 9 · há 3 dias · 14:00

Escala

EstiloAmostraTamanho / altura / pesoOnde
display-hero40460 / 60 / 700Página não encontrada
display-titleCobranças20 / 28 / 500Título de página no CRM
display-panelAna Souza18 / 22 / 500Nome no painel de detalhe
bodyClique no logo da empresa para ver todas as vagas abertas.14 / 20 / 400Texto corrido, campos, tabelas
card-roleSenior Frontend Engineer14 / 18.2 / 600Título da vaga no card
lane-titleEntrevista comportamental14 / 20 / 600Título da coluna
chipRemoto12 / 16 / 500Tags e badges
bannerEntrevista amanhã, 14:0012 / 15 / 600Faixa de status do card
companyWise11 / 16 / 600Empresa acima do título
metahá 3 dias11 / 16 / 500Datas e última atividade
count1212 / 16 / 600Contagem da coluna, salário

Cores

Uma cor de marca, um marinho e muitas cores de estado. Cada amostra mostra o tema claro à esquerda e o escuro à direita. Clique para copiar o valor.

Superfícies e texto

Estados do card

Toda faixa tem texto e ícone além da cor. Cada estado usa três tokens: o texto, o fundo suave e a borda.

Tema claro
Próximo evento ou indicação
Vaga parada
Follow-up com mais de 14 dias
Ghosting, de propósito não é vermelho
Aguardando a empresa
Salário e desfechos positivos
Tema escuro
Próximo evento ou indicação
Vaga parada
Follow-up com mais de 14 dias
Ghosting, de propósito não é vermelho
Aguardando a empresa
Salário e desfechos positivos

Colunas

Só pintam a bolinha antes do título da coluna.

  • Triagem
  • Aplicadas
  • Contato
  • Oferta
  • Aprovada
  • Desafio técnico
  • Desafio de código
  • Reprovada
  • Revisão de portfólio
  • Entrevista comportamental

Logo de empresa sem imagem

Iniciais em Fira Code sobre uma cor escolhida pelo nome da empresa.

Componentes

A interface usa shadcn/ui no estilo base-nova, montado sobre Base UI, com ícones Lucide. Os componentes são código do projeto em src/components/ui: para mudar um, edite o arquivo, não a tela.

  • shadcn/uibase-nova
  • Base UI@base-ui/react
  • Lucidelucide-react
  • cvavariantes
Mesmos tokens do app.

Botões

button.tsx
default
outline
secondary
ghost
destructive
link
xs
sm
default
lg
icon
icon ghost
com ícone
outline com ícone
carregando
disabled

Campos

input.tsx · textarea.tsx

Select e combobox

select.tsx · combobox.tsx
Coluna

O select escolhe de uma lista fechada. O combobox filtra enquanto você digita.

Checkbox

checkbox.tsx

Toggle

toggle.tsx · toggle-group.tsx
toggle group, um ativo
default
outline
só ícone

Badges

badge.tsx
Novo
default
Remoto
secondary
Mentor
outline
Reprovada
destructive

Abas

tabs.tsx
Senior Frontend Engineer na Wise, remoto, £ 75–90k.

Ícones

lucide-react

Traço de 2px, 16px dentro de botões e campos. Clique para copiar o nome do componente.

Aplicadas