Nacionalidade Europeia — sistema de design

Style guide do hotsite

← Ver a landing page

Conceito

Modern luxury + heritage + editorial. A referência a documentos antigos aparece na tipografia serifada, na numeração romana e no papel off-white — nunca em texturas envelhecidas. Portugal entra por tom, não por bandeira: verde profundo, um vinho discreto e um dourado usado em detalhes mínimos.

Paleta

Ivory #FAF7F1 Fundo principal
Papel #F5F0E6 Seções alternadas
Areia #EFE7DA Placeholders, hover suave
Linha #DED2BE Bordas e divisores
Verde profundo #38442F CTA, footer, seção de serviços
Charcoal #24211D Texto e seção de transição
Vinho #6B2E33 Hover, acentos pontuais
Champagne #C9A96A Numerais e detalhes
Dourado escuro #8A6A3B Eyebrows sobre claro
Erro #B4564C Bordas de validação

Contraste: charcoal #24211D sobre ivory #FAF7F1 = 14.5:1. Ivory sobre verde #38442F = 9.6:1. O dourado #C9A96A só é usado em elementos gráficos e sobre fundo escuro em tamanho grande — nunca em texto corrido claro.

Tipografia

Display / Newsreader 400 · clamp(38–64px) · LH 1.06 · LS -.02em

Sua história pode estar mais perto

H2 / Newsreader 400 · clamp(30–46px) · LH 1.12

Perguntas frequentes

H3 / Instrument Sans 600 · 18px

Análise do caso

Body / Instrument Sans 400 · 16–17px · LH 1.65 · máx 56ch

Uma cidade mencionada pela família, um nome num documento antigo ou uma data aproximada podem ser o começo da pesquisa.

Eyebrow / 12px · LS .16em · uppercase · dourado escuro

Como funciona

Espaçamento

Escala base 4px. Usados: 4 · 8 · 12 · 14 · 20 · 26 · 34 · 48 · 64 · 80 · 120. Seções verticais: clamp(64px, 8vw, 120px). Container: 1180px, gutter 24px. Grid responsivo sem media queries: repeat(auto-fit, minmax(280px, 1fr)).

8px
12px
20px
26px
34px
48px
64px

Botões

Primário · hover vinho
Secundário
Link editorial Conte-me sobre o seu caso →
Loading · desabilitado
Chip · inativo / ativo
Sobre fundo escuro

Inputs

Componentes

Card de serviço (fundo verde no site) 03

Localização de Certidões

Busca e obtenção dos documentos necessários.

Passo numerado
02

Análise do caso

É analisado o vínculo familiar e o caminho necessário.

Accordion (fechado / aberto)
Vocês fazem apostilamento?+
Vocês acompanham todo o processo?–

Sim. O acompanhamento vai da pesquisa inicial até as etapas seguintes.

Placeholder de imagem
livro de registros

Fotografia

Buscar

  • Retrato real da profissional em luz natural, com documentos ou livros à vista — nada de fundo de estúdio.
  • Mãos folheando livros de assentos, lupa sobre caligrafia antiga.
  • Páginas de registros paroquiais, certidões, carimbos, cartas.
  • Fotografias de família em preto e branco, granuladas.
  • Vilas, azulejos e detalhes arquitetônicos portugueses em plano fechado.

Evitar

  • Pessoas segurando passaporte ou apontando para bandeiras.
  • Apertos de mão corporativos e advogados de terno.
  • Filtros sépia pesados ou molduras vintage.
  • Cartões-postais turísticos genéricos de Lisboa.

Tratamento: contraste médio, temperatura levemente quente, sem saturação alta. Todas as imagens em enquadramento 4:5 (retratos) ou 1:1 (detalhes).

Notas de UX

Formulário em página única Escolhido em vez de multi-step: o visitante chega por Instagram ou WhatsApp e quer ver o esforço total de uma vez. Fieldsets com títulos serifados dividem visualmente sem esconder campos nem exigir cliques extras.
Só 4 campos obrigatórios Nome, email, telefone e a história. Todo o bloco do antepassado é opcional e traz o aviso "preencha apenas o que souber" — coerente com a promessa da página de que poucas pistas bastam.
Validação só após tentar enviar Nada fica vermelho enquanto a pessoa digita. Ao submeter, os campos inválidos ganham borda e mensagem específica, mais um alerta geral acima do botão.
CTA repetido cinco vezes Header, hero, seção do problema, serviços, sobre e transição final — sempre apontando para a mesma âncora do formulário. Texto alterna entre "Quero avaliar meu caso" e "Conte-me sobre o seu caso".
Chips em vez de radios Nacionalidade e "já possui documentos" usam botões de 46px de altura: mais fáceis de tocar no celular e mais rápidos de escanear que uma lista de radios.
Responsivo sem breakpoints Todos os grids usam auto-fit + minmax e a tipografia usa clamp(). O layout reflui em qualquer largura, o que simplifica a portagem para as views do Rails.
Acessibilidade Labels reais em todos os campos, aria-expanded no accordion e nos chips, foco visível em vinho com offset, alvos de toque de 44px+ e hierarquia h1→h2→h3 contínua.
Prova social preparada A seção funciona com um depoimento em destaque, com três cards, ou com ambos. Enquanto não houver textos reais, os placeholders ficam entre colchetes para não parecerem conteúdo publicado.
Success state no lugar do formulário O formulário é substituído pela confirmação, sem mudar de página, com prazo esperado de resposta e um caminho de saída ("Enviar outro caso"). Evita a dúvida de "será que enviou?".