Ir para o conteúdo principal
FIECPortal de Talentos

Página interna de revisão

Sistema de design

Todas as cores e componentes base do Portal de Talentos FIEC, para revisão visual. Nada nesta página representa dado real.

Cores institucionais

Escalas do vermelho e do azul da FIEC, calculadas em OKLCH com matiz fixo e rampa perceptiva de luminosidade.

Vermelho institucional

Ação primária e ênfase. O tom base é o 600 (#B84659).

brand-red-50

brand-red-100

brand-red-200

brand-red-300

brand-red-400

brand-red-500

brand-red-600

Base — #B84659

brand-red-700

brand-red-800

brand-red-900

Azul institucional

Navegação, cabeçalhos, links e área administrativa. O tom base é o 700 (#494B7C).

brand-blue-50

brand-blue-100

brand-blue-200

brand-blue-300

brand-blue-400

brand-blue-500

brand-blue-600

brand-blue-700

Base — #494B7C

brand-blue-800

brand-blue-900

Neutros

neutral-0

#FFFFFF — Superfícies e cartões

neutral-25

#FCFBFA — Fundo principal

neutral-50

#F7F7F6 — Fundo secundário

neutral-100

#EEEEEC — Divisórias

neutral-300

#C9C9C5 — Bordas e desabilitado

neutral-600

#666762 — Texto secundário

neutral-800

#2E302D — Texto principal

neutral-950

#171815 — Títulos

Cores semânticas

success

Sucesso e conclusão

warning

Atenção e pendência

error

Erro e bloqueio

info

Informação e orientação

Paleta editorial

Cores da bandeira de Indaiatuba, dessaturadas. Uso restrito a gráficos, categorias e elementos editoriais. Nunca em botões ou navegação.

chart-1

chart-2

chart-3

chart-4

chart-5

Tipografia

Archivo nos títulos, Instrument Sans no corpo do texto. Escala em tokens.

  • text-5xl

    Título de destaque

  • text-4xl

    Título de página

  • text-3xl

    Título de seção

  • text-2xl

    Subtítulo

  • text-xl

    Título de cartão

  • text-lg

    Texto grande

  • text-base

    Texto padrão do corpo

  • text-sm

    Texto auxiliar e rótulos

  • text-xs

    Legenda e metadados

Espaçamento, raios e sombras

Escala de espaçamento com base de 4 pixels. Sombras discretas.

Espaçamento

  • 14px
  • 28px
  • 312px
  • 416px
  • 624px
  • 832px
  • 1248px
  • 1664px

Raios de borda

  • rounded-xs
  • rounded-sm
  • rounded-md
  • rounded-lg
  • rounded-xl
  • rounded-2xl
  • rounded-full

Sombras

  • shadow-xs
  • shadow-sm
  • shadow-md
  • shadow-lg

Botões

Uma única ação primária por tela. Todos os botões têm 44 pixels de altura mínima e foco visível.

primary

secondary

tertiary

destructive

link

Campos de formulário

Todo campo tem label associado. O erro é descrito em texto, com ícone, nunca apenas por cor.

Estado normal

Campos com dica de preenchimento.

Conte em poucas linhas o que você já fez e o que procura.

Turno disponível*campo obrigatório
Você pode rever os termos a qualquer momento.

Erro e desabilitado

A mensagem diz o que fazer em seguida, sem culpar quem preencheu.

Informe um e-mail completo, como nome@escola.br.

Escolha uma vaga para continuar.

Registre a autorização do responsável para seguir.

Modelo de trabalho

Cartão, badges de status e avisos

Cada status tem ícone e rótulo em texto.

Estágio em Manutenção Industrial

Empresa parceira — Indaiatuba, SP

Candidatura enviadaEm análiseNova vagaDocumento pendentePrazo encerradoArquivada

A empresa responde pela plataforma. Você recebe um aviso a cada atualização.

Cadastro em andamento

Faltam duas etapas. Você pode continuar de onde parou a qualquer momento.

Candidatura enviada

A empresa responde pela plataforma. Acompanhe em “Minhas candidaturas”.

Documento pendente

Envie o comprovante de matrícula para concluir a inscrição.

Modal e toast

O modal prende o foco e fecha com a tecla Esc. O toast anuncia o resultado da ação.

Stepper de formulário

Formulários longos são divididos em etapas, com progresso sempre visível.

Estados de tela

Cada estado diz o que aconteceu, qual a situação atual e qual o próximo passo.

Nenhuma vaga por aqui ainda

Assim que uma empresa parceira publicar uma vaga do seu curso, ela aparece nesta lista.

Carregando vagas…