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 03 
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 Estado atual: ativado. 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 Nenhuma vaga criada ainda Ainda não recebemos candidaturas Sua agenda está livre Sua equipe administrativa ainda está vazia Nenhum resultado corresponde aos filtros Nenhuma atividade recente
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.
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
Botõ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
Altura 40 px · padding 14 px · gap 8 px · raio 8 px. Use ícone de 16 px 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.
O manual agora utiliza a mesma biblioteca oficial das futuras telas. Estados, dimensões, foco e comportamento serão reaproveitados sem reconstruir componentes por página.
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.
Rich text
Peças pequenas que formam experiências completas.
Combine status, pessoas e notificações com o mesmo vocabulário visual em todo o produto.
Status
AprovadoEm avaliaçãoNão selecionadoNovo
Pessoas
BS
Beatriz SouzaProduct Designer
AM
André MartinsCustomer Success
Alertas rápidos
Clique para visualizar a notificação.
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-border · célula 24 pxSugerir 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 · 16 pxDar 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-9Conteú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.
Crie a primeira vaga da sua organização para começar a receber candidaturas.
Quando alguém se candidatar a esta vaga, o perfil aparecerá aqui.
As entrevistas e compromissos do processo seletivo aparecerão neste espaço.
Convide outros profissionais para colaborar nos processos seletivos da organização.
Revise os termos pesquisados ou inicie um novo cadastro para alimentar esta área.
Novas publicações, candidaturas e atualizações aparecerão aqui.
Elementos para dashboards.
Referências visuais reutilizáveis para indicadores e gráficos da aplicação.
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
Uma miniatura fiel da aplicação.
A proporção, a navegação e a densidade de informação antecipam a tela real do produto — com o dashboard como primeira experiência.