# DINAVE — guia de implementação

Versão 1.0 · 11 de novembro de 2026

[Projeto editável no Figma](https://www.figma.com/design/dtvNgq1Xq4hmtpfpfnXnc9)

O brandbook tem como formato principal a consulta online num portal web de identidade. O Figma conserva os originais editáveis; os ficheiros SVG, PNG, JSON, CSS e ZIP permitem reutilizar o sistema. O portal de marca e o futuro website institucional têm funções diferentes: consultar a identidade e descarregar assets não implica que os exemplos de formulários ou páginas de serviço estejam ligados a operações reais.

## 1. Decisões da identidade

**Os tempos mudam. O rigor permanece.** é a mensagem central. A composição de passado, presente e futuro mostra a evolução da empresa e da mobilidade, mantendo um percurso comum.

A marca principal é o wordmark DINAVE contemporâneo. A expressão manuscrita identifica a herança na narrativa; a versão ciano e o brilho identificam o futuro. Estas expressões não constituem empresas, submarcas ou logótipos históricos verificados.

O ano de fundação é **1980**, confirmado no [site oficial](https://www.dinave.pt/). Preferir **“Desde 1980”** em conteúdos permanentes, para evitar atualizações anuais da idade da empresa. Uma referência a 2026 situa a proposta; não deve ficar codificada em conteúdos que pretendam acompanhar automaticamente o ano atual.

## 2. Logótipos

| Regra | Valor ou aplicação |
| --- | --- |
| Master horizontal | 448 × 64 unidades; proporção 7:1. |
| Área de proteção | 32 unidades de cada lado no master, equivalentes a metade da altura do D. Escalar proporcionalmente com a marca. |
| Largura mínima digital | 120 px, sujeita a revisão ótica no contexto final. |
| Largura mínima impressa | 24 mm, sujeita a prova no suporte final. |
| Positivo | `dinave-wordmark-rigor.svg` em fundos claros. |
| Negativo | `dinave-wordmark-ivory.svg` em fundos escuros. |
| Alternativa institucional | `dinave-wordmark-blue.svg`, mantendo contraste suficiente. |
| Expressão do futuro | `dinave-wordmark-future.svg` em aplicações narrativas escuras. |
| Uso compacto | Monograma D ou `dinave-favicon.svg`. A primeira apresentação da empresa deve privilegiar a assinatura completa. |

Conservar as proporções do SVG. Não esticar, inclinar, substituir letras, adicionar um símbolo de marca registada ou incorporar brilho destrutivamente na geometria. Aplicar o brilho como efeito separado apenas quando a narrativa o justifique. Não colocar efeitos luminosos em documentos técnicos.

O wordmark é uma reconstrução proposta a partir da referência visual. A aprovação gráfica do master antecede a sua adoção institucional.

## 3. Cores e temas

| Token | Hex | Papel |
| --- | --- | --- |
| `rigor` | `#121A20` | Identidade, texto principal e fundos escuros. |
| `marfim` | `#F4F0E8` | Fundo editorial claro e assinatura em negativo. |
| `petroleo` | `#163B50` | Estrutura institucional, superfícies escuras e ações. |
| `heranca` | `#B78B55` | Acento do passado; detalhes gráficos. |
| `futuro` | `#76DAEA` | Acento do futuro; contraste em superfícies escuras. |
| `nevoa` | `#5C6B75` | Texto secundário sobre marfim. |
| `linha` | `#C7CBC8` | Separadores em fundos claros. |
| `branco` | `#FFFFFF` | Superfícies claras e texto em ações escuras. |
| `bruma` | `#BCC5C9` | Texto secundário em fundos escuros. |
| `aco` | `#48565F` | Estrutura e separadores em fundos escuros. |

O texto névoa sobre marfim tem um contraste calculado de aproximadamente **4,84:1**. Este valor refere-se apenas a essa combinação, sem transparência, e não valida o contraste de toda a interface. Herança, futuro e linha são acentos gráficos; não os aplicar automaticamente a texto pequeno em fundo claro. Nos fundos fotográficos, verificar o contraste após o recorte e a sobreposição reais.

Preferir tokens semânticos (`--dinave-text`, `--dinave-background`, `--dinave-action-background`) nos componentes. Usar os nomes de paleta diretamente quando a cor tem significado narrativo, como a distinção entre herança e futuro.

## 4. Tipografia

- **Inter:** interface, títulos e texto corrido; pesos 400, 500, 600 e 700. No Figma, o peso 600 aparece como **Semi Bold**.
- **IBM Plex Mono Regular:** anos, referências de processo e etiquetas técnicas curtas.
- **Mr Dafoe:** apenas expressão gráfica de herança. Não usar em texto corrido, navegação ou documentos técnicos.

A fonte original do HERO não foi identificada. Inter é a escolha de aproximação visual desta proposta. Os tokens não descarregam nem incorporam fontes; devem ser ligadas pelo projeto final. Obter os ficheiros e conservar as licenças a partir das fontes oficiais: [Inter](https://rsms.me/inter/), [IBM Plex](https://github.com/IBM/plex) e [Mr Dafoe](https://fonts.google.com/specimen/Mr+Dafoe).

Usar a escala tipográfica do JSON/CSS como ponto de partida de implementação. Ajustar as quebras responsivas à medida disponível sem reduzir o texto ao ponto de prejudicar a leitura. As etiquetas em maiúsculas devem ser curtas. Os dados técnicos usam mono para distinguir referências, sem converter todas as descrições para esse estilo.

## 5. Espaço, forma e iconografia

A escala de espaçamento é **4, 8, 12, 16, 24, 32, 48 e 64 px**. O raio pequeno é **4 px**; o raio de botões em cápsula é **999 px**. Usar espaços da escala e ajustar dimensões estruturais ao layout, sem forçar todas as medidas a um múltiplo.

Os 24 ícones usam grelha 24 × 24, traço 1,5 e extremidades/uniões arredondadas. Utilizar os SVGs de `assets/icons/` ou o catálogo `assets/icons.json`. São vetores que herdam `currentColor` quando inseridos inline no HTML. Um SVG carregado através de `<img>` não herda automaticamente a propriedade `color` do elemento pai.

Em ações ambíguas, acompanhar o símbolo de texto. Se o botão já tem uma etiqueta visível, ocultar o SVG decorativo da árvore de acessibilidade com `aria-hidden="true"` e `focusable="false"`; evitar anúncios duplicados do título interno. Um botão composto apenas por ícone necessita de um nome acessível na ação. O símbolo de qualidade não é um selo de certificação.

### Princípios de design gráfico

| Princípio | Aplicação e critério de revisão |
| --- | --- |
| Hierarquia | Cada secção tem uma ideia principal identificável; título, demonstração e notas técnicas diferenciam-se por escala, peso e posição. Não atribuir o mesmo destaque a todas as informações. |
| Proximidade | Agrupar exemplos com a respetiva regra, legendas com a imagem e ações com o conteúdo a que pertencem. O espaço entre grupos deve exceder o espaço interno de cada grupo. |
| Similaridade | Repetir formas, traços e estilos para funções equivalentes. Não aplicar a mesma aparência a elementos com comportamentos diferentes. |
| Continuidade | O percurso visual liga as três épocas e conduz a leitura. As diagonais servem a narrativa; grelhas ortogonais organizam informação técnica. |
| Figura e fundo | O elemento a observar distingue-se do fundo. Controlar gradientes e efeitos para preservar a legibilidade dos logótipos, textos e controlos. |
| Contraste | Usar escala, peso, cor e espaço para tornar a prioridade clara. Rever pares de cor e fundos fotográficos reais; não depender apenas da diferença de cor para transmitir estado. |
| Alinhamento | Partilhar eixos entre títulos, corpo, imagens e controlos. Desvios devem ter intenção narrativa, sem produzir desalinhamentos acidentais. |
| Espaço | Preservar área de proteção da marca e margens dos suportes. Espaço vazio separa assuntos e facilita a observação; não preencher uma página apenas porque existe área disponível. |
| Tipografia | Limitar famílias e pesos às funções definidas. Manter largura de leitura confortável, entrelinha suficiente e quebras de título intencionais. A hierarquia deve sobreviver à mudança de largura. |

Estes critérios orientam a revisão do portal, das aplicações e do futuro website. Devem ser avaliados nas composições finais, com os conteúdos reais.

## 6. HERO e comportamento responsivo

O master desktop mede **1320 × 731**. A estrutura inclui imagem conceptual, proteção de contraste, assinaturas, navegação, título, corpo, CTA, linha temporal e faixa dos quatro pilares. Os textos, controlos e ícones devem ser implementados como elementos reais da interface; a imagem `dinave-hero-scene.png` é apenas a cena.

No mobile, existem **três estados a 390 × 1024**. São referências de composição das três épocas, não prova de navegação ou de animação já implementada. A construção responsiva deve manter o título e o CTA disponíveis e permitir compreender o percurso sem depender de uma largura desktop. Rever o recorte para que os veículos e os pontos de interesse permaneçam reconhecíveis.

Não repetir o screenshot completo do HERO como fundo com texto já rasterizado. Conservar a edição, o contraste, a pesquisa e a acessibilidade do conteúdo. Definir dimensões da imagem para reservar espaço e gerar variantes otimizadas para os tamanhos efetivamente usados. O formato do ficheiro de trabalho não obriga a entregar PNG integral no website.

## 7. Movimento

O brandbook define uma **sequência conceptual de seis segundos**: revelação das épocas, composição do percurso, iluminação breve das assinaturas e estabilização. A especificação é um guia de produção; não existe neste kit um vídeo animado concluído nem código de animação funcional.

Implementar a sequência numa camada independente do conteúdo. Título, CTA e navegação devem poder ser usados desde o início. Respeitar `prefers-reduced-motion: reduce` e apresentar nesse caso uma composição estática completa. O estado estático também deve funcionar como fallback enquanto os recursos visuais carregam. Se houver reprodução contínua, oferecer controlo visível de pausa. Não reiniciar a sequência em cada pequeno movimento de scroll.

## 8. Instalar os tokens no website

Importar `dinave-tokens.css` depois do reset da aplicação. O tema claro é o padrão. Para aplicar o tema escuro a uma página ou secção, usar `data-dinave-theme="dark"` no contentor; usar `data-dinave-theme="light"` para uma secção clara dentro de outra escura.

```html
<link rel="stylesheet" href="/styles/dinave-tokens.css">
<section class="dinave-section" data-dinave-theme="dark">
  <h1>Os tempos mudam. O rigor permanece.</h1>
  <a class="dinave-action" href="/empresa">Conhecer a DINAVE</a>
</section>
```

```css
.dinave-section {
  background: var(--dinave-background);
  color: var(--dinave-text);
  font-family: var(--dinave-font-sans);
  padding: var(--dinave-space-48) var(--dinave-space-24);
}

.dinave-action {
  display: inline-flex;
  align-items: center;
  gap: var(--dinave-space-12);
  min-height: 44px;
  padding: var(--dinave-space-12) var(--dinave-space-24);
  border-radius: var(--dinave-radius-pill);
  background: var(--dinave-action-background);
  color: var(--dinave-action-text);
  text-decoration: none;
}

.dinave-action:hover {
  background: var(--dinave-action-hover);
}

.dinave-action:focus-visible {
  outline: 2px solid var(--dinave-focus);
  outline-offset: 4px;
}
```

O exemplo demonstra a utilização das variáveis; os caminhos e o destino da ligação devem ser ligados à aplicação real. O CSS do kit define tokens, não o comportamento de um website completo. O JSON usa valores hexadecimais resolvidos e unidades em pixels para facilitar a integração, sem exigir um transformador de tokens.

## 9. Aplicações e produção

As 13 aplicações estão no Figma. Duplicar a composição adequada antes de personalizar e preencher os campos assinalados com `[]`. Confirmar nomes, funções, contactos, morada, identificação fiscal e conteúdos comerciais antes de distribuir.

Os estudos de papel de carta, proposta, dossier, cartão, envelope e sinalética estão em RGB. A arte-final exige o formato físico acordado, margens de segurança, sangria, perfil CMYK da gráfica, imagens com resolução adequada e prova de cor. Evitar uma conversão CMYK genérica apresentada como resultado final aprovado. Manter os SVGs vetoriais para produção, respeitando o fluxo de trabalho do fornecedor.

Os modelos de redes sociais indicam a dimensão do canvas. Confirmar os recortes e as zonas ocupadas pela interface na plataforma de publicação. A assinatura de email é um layout; a sua conversão em HTML e os testes nos clientes de email fazem parte da implementação posterior.

## 10. Conteúdos e imagem

A cena gerada representa uma visão conceptual. Não corresponde a uma fotografia histórica, à sede real ou a obras da DINAVE. Fotografias reais de pessoas, instalações e processos precisam de identificação correta e autorização de utilização. A assinatura manuscrita não deve ser apresentada como o logótipo real de 1980.

Usar o [site oficial DINAVE](https://www.dinave.pt/) e a [lista oficial de serviços](https://www.dinave.pt/index.php?Itemid=12&id=3&option=com_content&view=article) como ponto de partida para confirmar conteúdos. Não acrescentar certificações, garantias de aprovação, estatísticas ou resultados ambientais sem evidência. A redação adotada é **“Processos acompanhados”**. Uma página de sustentabilidade requer práticas e informações reais para além do seu posicionamento visual.

## 11. Critérios de aceitação da futura implementação

| Área | Critério verificável |
| --- | --- |
| Identidade | Usar o master aprovado, sem distorção; respeitar área de proteção, mínimos e variantes de contraste. |
| Conteúdo | Confirmar 1980; eliminar campos `[]`; validar contactos e serviços; retirar alegações sem suporte. |
| Estrutura | Renderizar títulos, textos, botões e ícones como elementos editáveis e acessíveis, separados da imagem conceptual. |
| Semântica | Usar títulos numa hierarquia lógica, landmarks para navegação/conteúdo e elementos HTML de ligação ou botão conforme a ação. As imagens informativas têm alternativa textual adequada; elementos decorativos não duplicam a leitura. |
| Composição gráfica | Verificar hierarquia, agrupamento por proximidade, continuidade, alinhamento, espaço e coerência tipográfica em cada secção; a identidade não depende de efeitos decorativos para ser reconhecida. |
| Responsividade | Rever, pelo menos, larguras de 390, 768 e 1320 px; sem overflow horizontal, texto cortado ou sobreposição de controlos. Verificar também ampliação de texto a 200%. |
| Legibilidade | Verificar contraste com as imagens e estados reais; não assumir que a paleta por si garante conformidade. |
| Navegação | Todas as ligações e CTAs conduzem ao destino definido; menu operável por teclado, foco visível e ordem de leitura lógica. |
| Controlos e downloads | Projetar alvos de toque com pelo menos 44 × 44 px, quando possível, e espaço entre ações. Indicar o tipo de ficheiro nos downloads; verificar que cada ficheiro abre e corresponde à variante anunciada. |
| Formulários | Etiquetas, validação, erros e confirmação compreensíveis; envio testado ponta a ponta com a integração final. Um layout Figma não satisfaz este critério. |
| Movimento | Conteúdo utilizável desde o início; fallback estático completo; reduced motion respeitado; pausa disponível quando há reprodução contínua. |
| Recursos | Fontes carregadas e licenciadas para o uso adotado; SVGs nítidos; imagem responsiva otimizada; dimensões reservadas para evitar saltos de layout. |
| Desempenho | Dar prioridade à imagem visível inicialmente; adiar recursos abaixo da primeira área visível e evitar vídeos ou animações pesados sem necessidade. Medir o carregamento e a interação na versão publicada, incluindo um dispositivo mobile ou emulação com recursos limitados. |
| Produção física | Medidas, materiais, sangria, perfil de cor e prova aprovados pelo responsável e pelo fornecedor. |
| Publicação | Aprovação do conteúdo e da versão final; metadados, favicon, página de erro e contactos verificados no domínio efetivamente publicado. |

Estes critérios são a lista de trabalho para a implementação. Não representam testes de um website já realizado nem uma declaração de conformidade WCAG. A verificação deve ser feita sobre a versão efetivamente implementada, com navegação, estados, recursos e conteúdos reais.