Assinatura principal
Turquesa conduz a mira; azul destaca a pessoa e o nome Job.
Logo horizontal
Manual da marcaDesign SystemIr para o conteúdo01 01 02 02 Assinatura principalSVG vetorial · PNG transparente 
Assinatura alternativaSVG vetorial · PNG transparente03 
Carregamento JobForgedÍcone central pulsante; mira turquesa em rotação suave de 1,5 segundo.Baixar SVG animado
Carregamento JobForged — cores invertidasMira azul e personagem turquesa, com o mesmo movimento suave.Baixar SVG animado
Animação principalTurquesa na mira e azul na pessoa.Baixar SVG animado
Animação alternativaAzul na mira e turquesa na pessoa.Baixar SVG animado01 02 03 04 Aa Aa JobForged · padrão Contemporâneo Objetivo Editorial Estado atual: ativado. Clique em um status para ver o popup e ouvir o som associado. Carregando informações… 4 pxMicro 8 pxÍcone e texto 12 pxControles próximos 16 pxGutter móvel 24 pxGrupos 32 pxCards 48 pxBlocos 64 pxSeções Envelope principalDesktop como referência Limites por contextoLargura não é densidade 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 Evite mock Vagas8Dado demonstrativo · mock Candidaturas42Dado demonstrativo · mock Entrevistas6Dado demonstrativo · mock Equipe4Dado demonstrativo · mock
Identidade visual · v1.3Interfaces claras e humanas.
Interfaces claras e humanas.
Decisões mais inteligentes.
O sistema visual da JobForged une precisão, proximidade e tecnologia. Esta base mantém o produto consistente em qualquer tela, nos temas claro e escuro.
Manual da marca para LLMEste documento será ampliado quando o Design System estiver concluído e servirá para transportar as regras visuais da JobForged entre ferramentas e modelos de linguagem.
Baixar documento para LLMArquivos oficiais, prontos para usar.
Escolha a versão adequada e baixe o arquivo original sem alterar proporções ou cores.
Logos
Assinaturas horizontais para cabeçalhos, documentos e comunicações.
Assinatura alternativa
Azul conduz a mira; turquesa destaca a pessoa e o nome Job.
Logo horizontal
Ícones
Símbolos compactos para favicons, menus, avatares e estados reduzidos.
Assinatura principalSVG vetorial · PNG transparente
Assinatura alternativaSVG vetorial · PNG transparente
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} />Carregamento JobForged — cores invertidasMira azul e personagem turquesa, com o mesmo movimento suave.<JobForgedLoadingAnimation size={112} variant="inverted" />Animação principalTurquesa na mira e azul na pessoa.<BrandAsset src="/brand/jobforged-loader.svg" width={112} height={112} alt="Carregando" />Animação alternativaAzul na mira e turquesa na pessoa.<BrandAsset src="/brand/jobforged-loader-alternate.svg" width={112} height={112} alt="Carregando" />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.
Identidade da marca
Turquesa para ações principais. Azul para informação e destaques complementares.
Estrutura e leitura
Fundo, superfície, bordas e texto formam as camadas da interface.
Estados e mensagens
Mantenha essas cores em todas as marcas. Combine-as com texto e ícones para comunicar o estado.
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.
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.
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
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.
Uma vaga que combina com você.
Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.
Montserrat + Open SansUma vaga que combina com você.
Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.
Poppins + InterUma vaga que combina com você.
Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.
Manrope + Open SansUma vaga que combina com você.
Conheça a equipe, os desafios e as oportunidades de crescimento antes de se candidatar.
Lora + InterBotões compactos, claros e consistentes.
Cantos discretos e cores leves mantêm as ações acessíveis sem competir com o conteúdo.
Principais · com e sem ícone
Use ícone quando ele acelerar o reconhecimento da ação.
Transparentes · com e sem ícone
Outline para ações secundárias; ghost para baixa ênfase; somente ícone em ações reconhecíveis, sempre com nome acessível.
Ações de risco e fundos escuros
Mesmas variantes compartilhadas com o painel e a Landing Page.
Fundo escuro fixo: contraste preservado nos dois temas.
Botão de menu
Navegação do cabeçalho
Link de navegaçãoTexto com mudança de cor e linha inferior no hover.
Tamanhos
Preenchido
Contornado
Transparente
Estados
Controles limpos, previsíveis e prontos para o produto.
Todo campo vazio orienta o próximo passo. Todo valor ausente comunica seu estado.
Placeholder · curto e direto
Verbo + dado + ...
Use 2–4 palavras. Prefira até 28 caracteres.
Label sempre visível. Formatos e requisitos ficam na ajuda.
Valores · mostre o estado
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.
Preenchimento obrigatório
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.
Inputs essenciais
Use um título reconhecido pelo mercado.
Usa --jf-ui-focus, o mesmo token dos formulários do app.
Usado apenas nas comunicações sobre a vaga.
Pesquise por dados ou competências do perfil.
A senha precisa ter pelo menos 8 caracteres.
Estado inativo do mesmo componente compartilhado.
Dropdowns
Modelo de trabalhoSelecione uma modalidade para a vaga.
MultiDropdown
Competências desejadasSelecione mais de uma competência sem perder contexto.
Calendários
Data da entrevistaEscolha uma data no calendário da JobForged.
Período de entrevistasEscolha a data inicial e depois a data final do período.
Variações com novas opções
Etapa do processoSelecione uma etapa existente ou crie outra.
Benefícios da vagaSelecione benefícios existentes ou adicione novos.
Checkbox e rádio
Toggle button
Notificações de candidatosReceber um alerta sempre que um novo perfil entrar no funil.
Uploads individuais
Uploads múltiplos
Novos arquivos são adicionados à lista sem substituir os anteriores.
As imagens aparecem em miniaturas e podem ser removidas individualmente.
Range Input · controle de faixa
Arraste ou use as setas para ajustar o valor.
Color Input · HEX e picker
Multiline Input · texto multilinha
Rich Text · parâmetros no texto
Peças pequenas que formam experiências completas.
Combine status, pessoas e notificações com o mesmo vocabulário visual em todo o produto.
Estrutura das páginas internas
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 e pessoas
Status
AprovadoEm avaliaçãoNão selecionadoNovo
Pessoas
BS
Beatriz SouzaProduct Designer
AM
André MartinsCustomer Success
Notificação do aplicativo
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.
Navegação e estados do painel
Carregando informações…O mesmo componente é utilizado no painel empresarial e no backoffice.
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ção
var(--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 elevada
var(--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-softCriar 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-accentConectar 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-borderSugerir 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-mutedDar 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-accentReforç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.
--jf-ui-space-1--jf-ui-space-2--jf-ui-space-3--jf-ui-space-4--jf-ui-space-6--jf-ui-space-7--jf-ui-space-8--jf-ui-space-9Composiçã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.
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.
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
- 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.
- 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
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