Arquivos oficiais, prontos para usar.

Escolha a versão adequada e baixe o arquivo original sem alterar proporções ou cores.

01

Logos

Assinaturas horizontais para cabeçalhos, documentos e comunicações.

01

Assinatura principal

Turquesa conduz a mira; azul destaca a pessoa e o nome Job.

Logo horizontal

02

Assinatura alternativa

Azul conduz a mira; turquesa destaca a pessoa e o nome Job.

Logo horizontal

02

Ícones

Símbolos compactos para favicons, menus, avatares e estados reduzidos.

Assinatura principalSVG vetorial · PNG transparente

Ícone SVG Ícone PNG

Assinatura alternativaSVG vetorial · PNG transparente

Ícone SVG Ícone PNG

03

Animações

Assets de carregamento para transições, inicialização e processamento.

Carregamento JobForgedÍcone central pulsante; mira turquesa em rotação suave de 1,5 segundo.<JobForgedLoadingAnimation size={112} />

Baixar SVG animado

Carregamento JobForged — cores invertidasMira azul e personagem turquesa, com o mesmo movimento suave.<JobForgedLoadingAnimation size={112} variant="inverted" />

Baixar SVG animado

Animação principalTurquesa na mira e azul na pessoa.<BrandAsset src="/brand/jobforged-loader.svg" width={112} height={112} alt="Carregando" />

Baixar SVG animado

Animação alternativaAzul na mira e turquesa na pessoa.<BrandAsset src="/brand/jobforged-loader-alternate.svg" width={112} height={112} alt="Carregando" />

Baixar SVG animado

Paleta da JobForged

Escolha a cor pela sua função. As amostras e os valores acompanham o tema selecionado no cabeçalho.

Tema claro

Clique em uma amostra para copiar seu valor.

01

Identidade da marca

Turquesa para ações principais. Azul para informação e destaques complementares.

02

Estrutura e leitura

Fundo, superfície, bordas e texto formam as camadas da interface.

03

Estados e mensagens

Mantenha essas cores em todas as marcas. Combine-as com texto e ícones para comunicar o estado.

04

Foco e interação

Indica qual controle está selecionado ao navegar pelo teclado.

Duas fontes, uma hierarquia fácil de reconhecer.

Montserrat lidera; Open Sans sustenta a leitura. A combinação equilibra personalidade de marca e clareza em interfaces densas.

Aa

Montserrat VariableFonte primária

Títulos, navegação, botões, métricas e labels curtas. Use pesos de 600 a 780 para dar direção e presença.

Aa

Open Sans VariableFonte secundária

Parágrafos, campos, tabelas, descrições e conteúdos longos. Use pesos de 400 a 650 para maximizar a leitura.

Display · Montserrat 52/58Talentos que movem negócios.

Heading · Montserrat 32/40Visão completa do processo.

Body · Open Sans 15/24

Informação organizada para o RH decidir com mais segurança, contexto e agilidade.

Label · Montserrat 12/16ETAPA ATUAL · ENTREVISTA

Identidade aplicada aos componentes

Par tipográfico da demonstração

Sua empresa

Prévia de identidade visual. Os dados desta demonstração não são registros da empresa.

Identidade da equipe

Títulos e textos usam o par tipográfico selecionado.

As cores e fontes desta prévia seguem os mesmos tokens utilizados pelo painel empresarial.

Pares de tipografia para empresas

A identidade JobForged é a referência. As outras três combinações estão disponíveis para a identidade do painel empresarial e das prévias de vagas.

JobForged · padrão

Uma vaga que combina com você.

Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.

Montserrat + Open Sans

Contemporâneo

Uma vaga que combina com você.

Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.

Poppins + Inter

Objetivo

Uma vaga que combina com você.

Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.

Manrope + Open Sans

Editorial

Uma vaga que combina com você.

Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.

Lora + Inter

Botões compactos, claros e consistentes.

Cantos discretos e cores leves mantêm as ações acessíveis sem competir com o conteúdo.

Use ícone quando ele acelerar o reconhecimento da ação.

Outline para ações secundárias; ghost para baixa ênfase; somente ícone em ações reconhecíveis, sempre com nome acessível.

Mesmas variantes compartilhadas com o painel e a Landing Page.

Fundo escuro fixo: contraste preservado nos dois temas.

Link de navegaçãoTexto com mudança de cor e linha inferior no hover.

Preenchido

Contornado

Transparente

PadrãoPronto para interação

HoverElevação e contraste suave

FocusContorno visível pelo teclado

DesabilitadoAção temporariamente indisponível

Controles limpos, previsíveis e prontos para o produto.

Todo campo vazio orienta o próximo passo. Todo valor ausente comunica seu estado.

Verbo + dado + ...
Use 2–4 palavras. Prefira até 28 caracteres.

Nome

E-mail

Label sempre visível. Formatos e requisitos ficam na ajuda.

Campo vazio orienta. Valor ausente informa.

Sem dado: Não informado
Em carregamento: Carregando...
Indisponível: Indisponível
Zero real: 0

Não preencha com dados fictícios.

O asterisco vermelho em negrito junto ao título indica um campo obrigatório. Campos sem asterisco são opcionais.

Mantenha a indicação no título, nunca no placeholder. Informe o que falta na validação.

Nome completo *

Complemento

Motivo *

Nome da vaga *

Use um título reconhecido pelo mercado.

Foco compartilhado

Usa --jf-ui-focus, o mesmo token dos formulários do app.

E-mail do responsável

Usado apenas nas comunicações sobre a vaga.

Buscar candidato

Pesquise por dados ou competências do perfil.

Senha de acesso

A senha precisa ter pelo menos 8 caracteres.

DesabilitadoEm breve

Estado inativo do mesmo componente compartilhado.

Modelo de trabalho

Selecione uma modalidade para a vaga.

Competências desejadas

Selecione mais de uma competência sem perder contexto.

Data da entrevista

Escolha uma data no calendário da JobForged.

Período de entrevistas

Escolha a data inicial e depois a data final do período.

Etapa do processo

Selecione uma etapa existente ou crie outra.

Benefícios da vaga

Selecione benefícios existentes ou adicione novos.

Experiência com SaaSInglês avançado

PlenoSênior

Notificações de candidatosReceber um alerta sempre que um novo perfil entrar no funil.

Estado atual: ativado.

Arquivo do candidatoPDF, DOC ou DOCX · até 10 MBSelecionarImagem do perfilPNG, JPG ou WEBP · até 5 MBSelecionar

Documentos da candidatura0/6Adicione arquivos...Arraste ou selecione até 6 documentosSelecionarNovos arquivos são adicionados à lista sem substituir os anteriores.

Galeria da empresa0/8Adicione imagens...Arraste ou selecione até 8 imagensSelecionarAs imagens aparecem em miniaturas e podem ser removidas individualmente.

Intensidade: 50%

Arraste ou use as setas para ajustar o valor.

Cor principal

Apresentação

Descrição da vaga

Peças pequenas que formam experiências completas.

Combine status, pessoas e notificações com o mesmo vocabulário visual em todo o produto.

Painel / Organização

Dados da empresa

Ações e informações seguem o mesmo padrão em todas as áreas.

Identificação da empresa

Título e contexto do módulo

Alterações da organização aparecem neste espaço.

Status

AprovadoEm avaliaçãoNão selecionadoNovo

Pessoas

BS

Beatriz SouzaProduct Designer

AM

André MartinsCustomer Success

Esta demonstração usa os quatro sons padrão nas notificações de autenticação, empresa, vagas e backoffice.

Som dos alertasAtive ou silencie os sons de status neste navegador.

Clique em um status para ver o popup e ouvir o som associado.

Carregando informações…

O mesmo componente é utilizado no painel empresarial e no backoffice.

Biblioteca de ícones62 símbolos SVG distintos, auditados por significado

Pesquisar ícones

Categoria

62 resultados

Caixa de entradacaixa-entrada

Widgetswidgets

Homehome

Dashboarddashboard

Empresaempresa

Organizaçãoorganizacao

Usuáriosusuarios

Administradoradministrador

Recrutadorrecrutador

Avaliadoravaliador

Candidatocandidato

Permissõespermissoes

Segurançaseguranca

Bloqueiobloqueio

Vagavaga

Currículocurriculo

Documentodocumento

Documento validadodocumento-validado

Candidaturacandidatura

Kanbankanban

Fundos que organizam sem distrair.

Catálogo auditado dos padrões usados na JobForged. Cada miniatura utiliza o próprio CSS documentado.

ClaroEscuro

Cor sólidaBase da aplicaçãovar(--ds-bg)

Sustentar páginas extensas sem competir com o conteúdo.

Use: Painel, formulários e páginas de gestão.
Evite: Como destaque de ação.
Tema: Claro + escuro
Em uso: Todas as páginas administrativas

ClaroEscuro

Cor sólidaSuperfície elevadavar(--ds-surface-raised)

Separar conteúdo temporário da base.

Use: Modais, menus e notificações.
Evite: Em todas as áreas da página.
Tema: Claro + escuro
Em uso: Alertas do Design System

ClaroEscuro

Degradê radialHalo da marca--ds-brand-soft + --ds-accent-soft

Criar foco suave em áreas institucionais.

Use: Hero e prévias de marca.
Evite: Atrás de tabelas ou texto denso.
Tema: Claro + escuro
Em uso: Fundamentos

ClaroEscuro

Degradê linearTransição JobForged--ds-brand + --ds-accent

Conectar as duas cores da identidade.

Use: Banners e indicadores especiais.
Evite: Como fundo geral do painel.
Tema: Claro + escuro
Em uso: Banners da Home

ClaroEscuro

GradeGrade técnica--ds-border

Sugerir estrutura e precisão sem ruído.

Use: Previews técnicos e documentação.
Evite: Em formulários longos.
Tema: Claro + escuro
Em uso: Pré-visualizações do manual

ClaroEscuro

Padrão repetidoPontos de contexto--ds-text-muted

Dar profundidade a áreas vazias compactas.

Use: Empty states e onboarding.
Evite: Atrás de dados ou gráficos.
Tema: Claro + escuro
Em uso: Estados vazios

ClaroEscuro

Elementos abstratosÓrbitas abstratas--ds-brand · --ds-accent

Reforçar o conceito de mira da marca.

Use: Fundamentos e áreas institucionais.
Evite: Em superfícies operacionais pequenas.
Tema: Claro + escuro
Em uso: Hero de Fundamentos

Espaço também comunica hierarquia.

A interface deve respirar. Margens, gutters e intervalos consistentes separam contextos, reduzem a sensação de sufoco e ajudam cada informação a ocupar o espaço certo.

Princípio prioritário

Organizar sem comprimir.

Proximidade indica relação; distância indica mudança de assunto. Nunca compense excesso de conteúdo diminuindo indiscriminadamente os espaços. Reorganize, agrupe e priorize.

→

4 pxMicro--jf-ui-space-1

8 pxÍcone e texto--jf-ui-space-2

12 pxControles próximos--jf-ui-space-3

16 pxGutter móvel--jf-ui-space-4

24 pxGrupos--jf-ui-space-6

32 pxCards--jf-ui-space-7

48 pxBlocos--jf-ui-space-8

64 pxSeções--jf-ui-space-9

Composição de widgets

Em coleções de cartões, use 8 px entre detalhes próximos, 16 px entre controles, 24 px dentro de grupos e 32 px entre assuntos. Divisórias separam contextos; espaço em branco conecta elementos do mesmo grupo.

8 px16 px24 px32 px

Dimensões dos botões

Altura, espaçamento interno e distância entre ícone e texto seguem a escala de cada tamanho.

TamanhoAlturaPadding H/VFonte / linhaÍcone / gapRaio / bordaUso

Extra pequeno28 px10 / 5 px12 / 16 px14 / 6 px6 / 1 pxTabelas

Pequeno32 px12 / 7 px12 / 16 px14 / 6 px7 / 1 pxFiltros

Médio40 px14 / 10 px13 / 18 px16 / 8 px8 / 1 pxPadrão geral

Grande48 px20 / 14 px14 / 20 px18 / 8 px10 / 1 pxAções principais

Envelope principalDesktop como referência

Conteúdo até 1180 pxÁrea útil ampla, centralizada e protegida por gutters.Em monitores maiores, o espaço externo cresce igualmente dos dois lados.

Limites por contextoLargura não é densidade

Página pública / Landing1180 pxConteúdo comercial e institucional

Autenticação e adesão1180 pxFormulário + contexto lado a lado

Documentos legais1180 pxEnvelope amplo; leitura interna até 900 px

Aplicação administrativaFluidoLimitado conforme densidade do módulo

ResponsividadeO conteúdo se adapta; o gutter nunca desaparece.

Desktop≥ 1180 pxConteúdo máximo de 1180 pxGutter mínimo de 24 pxSeções: 64–112 px

Tablet681–1179 pxEnvelope fluidoGutter de 24 pxGrids reorganizados

Mobile330–680 pxEnvelope fluidoGutter mínimo de 16 pxCards com 16–24 px internos

Faça

Separe seções antes de adicionar bordas.
Use 24–32 px dentro de containers principais.
Mantenha alinhamento vertical entre blocos relacionados.
Reduza colunas antes de reduzir o espaço interno.

Evite

Conteúdo encostado na borda do viewport.
Cards dentro de cards sem necessidade.
Intervalos diferentes para relações equivalentes.
Comprimir formulários para ocupar menos altura.

Empty States com contexto e próximo passo.

Use apenas quando os dados foram carregados com sucesso e não há conteúdo a apresentar.

Nenhum registro ainda

Os novos registros aparecerão neste espaço.

Nenhum banner configurado

Adicione um banner apenas quando houver um comunicado relevante.

Nenhuma vaga criada ainda

Crie a primeira vaga da sua organização para começar a receber candidaturas.

Ainda não recebemos candidaturas

Quando alguém se candidatar a esta vaga, o perfil aparecerá aqui.

Sua agenda está livre

As entrevistas e compromissos do processo seletivo aparecerão neste espaço.

Sua equipe administrativa ainda está vazia

Convide outros profissionais para colaborar nos processos seletivos da organização.

Nenhum resultado corresponde aos filtros

Revise os termos pesquisados ou inicie um novo cadastro para alimentar esta área.

Elementos para dashboards.

Referências visuais reutilizáveis para indicadores e gráficos da aplicação.

Resumo com até quatro indicadores

mock

Vagas8Dado demonstrativo · mock

Candidaturas42Dado demonstrativo · mock

Entrevistas6Dado demonstrativo · mock

Equipe4Dado demonstrativo · mock

Funil compactoUse em resumos quando o objetivo for identificar rapidamente a queda entre etapas.

Candidaturas486

Triagem218

Entrevistas94

Propostas28

Contratações17

Tabela comparativaCombine métricas exatas por vaga quando a leitura detalhada for mais importante que a tendência.

VagaCandidatosTempoMatch

Product Designer14218 dias92%

Customer Success9824 dias87%

People Analyst7616 dias89%

Gráfico de roscaMostre a participação de poucos canais dentro de um total conhecido.

1.284total

LinkedIn 38%
Portal de vagas 31%
Indicações 19%
Outros 12%

Gráfico de barrasCompare volumes discretos por período, vaga, área ou responsável.

S1

S2

S3

S4

S5

S6

Funil de recrutamento

Compare volume e conversão entre etapas sequenciais. Exemplo: da visualização da vaga até a contratação.

Visualizações2.480100%

Inícios1.32053%

Currículos84064%

Triagem48658%

Entrevistas16434%

Aprovados4226%

Contratados1843%

Gráfico de área

Evidencie a evolução de uma métrica e seu volume ao longo do tempo. Exemplo: candidaturas recebidas por mês.

Gráfico de linha

Compare tendências em períodos iguais. Exemplo: candidaturas atuais contra a média histórica.

Período atualMédia históricaMeta

Gauge de completude

Mostre um valor único dentro de uma escala conhecida. Exemplo: qualidade de preenchimento de uma vaga.

78%Estruturada

MODELOS DE E-MAIL

E-mails com a identidade JobForged.

Escolha um modelo para ver a prévia no tema atual e copiar ou baixar seu HTML.

Biblioteca de modelosSelecione um e-mail para ver o conteúdo.

7 modelos

Conteúdo de exemplo; as variáveis continuam no HTML exportado.

Interfaces claras e humanas.Decisões mais inteligentes.

Arquivos oficiais, prontos para usar.

Paleta da JobForged

Duas fontes, uma hierarquia fácil de reconhecer.

Identidade aplicada aos componentes

Uma vaga que combina com você.

Uma vaga que combina com você.

Uma vaga que combina com você.

Uma vaga que combina com você.

Botões compactos, claros e consistentes.

Controles limpos, previsíveis e prontos para o produto.

Peças pequenas que formam experiências completas.

Status

Pessoas

Fundos que organizam sem distrair.

Espaço também comunica hierarquia.

Organizar sem comprimir.

Composição de widgets

Dimensões dos botões

Empty States com contexto e próximo passo.

Elementos para dashboards.

Interfaces claras e humanas.
Decisões mais inteligentes.