---
name: Bader Brand OS — Nancy edition
source: https://brand.bader.es/
generated_at: 2026-06-29T12:11:06Z
status: derived-from-official-brandsite
---

# Bader Brand OS — Nancy edition

Este `DESIGN.md` transforma o brandsite oficial da Bader num contrato prático para agentes Nancy, designers e desenvolvimento web. Preserva a identidade oficial e adiciona uma camada de uso digital consistente: nomes semânticos, tokens, acessibilidade, componentes e critérios anti-slop.

## 1. Fonte e escopo

Fonte primária: <https://brand.bader.es/>. Foram extraídas 20 páginas/sections com conteúdo, 1.547 elementos do `documentData` público e 296 ficheiros no manifest público. Foram baixados seletivamente 214 assets essenciais: fontes, logos, favicon, avatares, ícones e imagens usadas nas páginas.

### Páginas extraídas

- **Home** — `https://brand.bader.es/home`
- **Introducción** — `https://brand.bader.es/introduccion`
- **Identificadores** — `https://brand.bader.es/elementos-identificadores`
- **Tipografía** — `https://brand.bader.es/elementos-tipografia`
- **Color** — `https://brand.bader.es/elementos-color`
- **Elementos gráficos** — `https://brand.bader.es/elementos-graficos`
- **Fotografía** — `https://brand.bader.es/elementos-fotografia`
- **Fotografía 2** — `https://brand.bader.es/page-20`
- **Papelería** — `https://brand.bader.es/expresion-papeleria`
- **Presentaciones** — `https://brand.bader.es/expresion-presentaciones`
- **Identificación personal** — `https://brand.bader.es/expresion-identificacion-personal`
- **Digital Web** — `https://brand.bader.es/expresion-digital-web`
- **Digital RRSS** — `https://brand.bader.es/expresion-digital-redes-sociales`
- **Digital YT** — `https://brand.bader.es/expresion_digital_youtube`
- **Carteles y folletos** — `https://brand.bader.es/expresion-comunicacion-carteles`
- **Publicaciones** — `https://brand.bader.es/expresion-comunicacion-publicaciones`
- **Señalización** — `https://brand.bader.es/expresion-espacios-senalizacion`
- **Espacios efímeros** — `https://brand.bader.es/expresion-espacios-efimeros`
- **Merchandising** — `https://brand.bader.es/expresion-merchandising`
- **Packs** — `https://brand.bader.es/expresion_packs`

## 2. Personalidade visual

Bader é uma marca dental com uma identidade minimalista, higiénica e técnica, mas não fria. O contraste entre verde oscuro profundo, verde claro vibrante e branco comunica:

- **Confiança e segurança** — verde oscuro `#003841`.
- **Frescura, vitalidade e renovação** — verde claro `#70D44B`.
- **Higiene e limpeza** — branco `#FFFFFF`.

A marca deve parecer limpa, profissional, precisa, luminosa e próxima do setor dental. Evitar estética genérica SaaS, gradientes gratuitos, sombras pesadas e cores não derivadas da paleta corporativa.

## 3. Tokens de cor

### Oficiais

- `bader-green-dark`: `#003841`
- `bader-green-light`: `#70D44B`
- `bader-white`: `#FFFFFF`

### Camada digital Nancy

- `surface.default`: branco.
- `surface.soft`: `#F4F8F6`, usado apenas como descanso visual.
- `text.primary`: verde oscuro.
- `text.inverse`: branco.
- `text.accent-on-dark`: verde claro.
- `text.accessible-green-on-white`: `#2F7D32`, derivado digital para links/textos verdes sobre branco quando WCAG exige mais contraste.

### Regra crítica de acessibilidade

`#70D44B` sobre branco tem contraste baixo para texto. Usar em fundos, formas gráficas, pontos, círculos, linhas, logotipo sobre fundo oscuro e botões com texto verde oscuro.

Para texto verde sobre branco, usar verde oscuro ou `#2F7D32` quando for necessário manter sensação de verde vivo.

## 4. Tipografia

Fonte titular principal: **Bader Sans** — grandes titulares, nomes de produto, destaques e momentos de marca.

Fonte de sistema e corpo: **Helvetica Neue LT Pro** — Roman para corpo, Light para subtítulos, Medium para titulares secundários e Bold para destacados.

Escala oficial extraída:

- `H0`: Bader Sans, 100/104.
- `H1`: Helvetica Neue LT Pro Light, 65/102.
- `H2`: Helvetica Neue LT Pro Roman, 41/63.
- `H3`: Helvetica Neue LT Pro Medium, 25/39.
- `H4`: Helvetica Neue LT Pro Bold, 20/30.
- `P`: Helvetica Neue LT Pro Roman, 18/24, tracking 1.
- `Small`: Helvetica Neue LT Pro Light, 11/17.
- `Button`: Helvetica Neue LT Pro Roman, 15/24, uppercase.

## 5. Logotipo e identificadores

Usar sempre as versões oficiais extraídas para principal em verde oscuro + ponto verde claro; verde claro + ponto branco em fundos escuros; ponto branco em fundo verde claro; preto/branco apenas quando estritamente necessário.

Zona de respeito: usar a altura completa do identificador como módulo quadrado para áreas de proteção. Tamanho mínimo: 40 px digital e 8 mm impresso.

## 6. Elementos gráficos

Sistema gráfico oficial: linhas com acabamentos arredondados; círculos, semicírculos, circunferências e linhas retas; rede de pontos; escala por metade; composição limpa com função clara.

Ícones: minimalistas, sem recheio, linha com cortes estratégicos, sempre em harmonia com a tipografia. Em fundo claro: ícones verde claro sobre círculo verde oscuro. Em fundo escuro: ícones verde oscuro sobre círculo verde claro.

## 7. Fotografia

A fotografia não é decoração; é conteúdo. Usar imagens naturais, limpas, bem iluminadas, com fundo branco/neutro para catálogo, ambiente positivo, higiénico e profissional. Filtros corporativos podem ser aplicados sobre imagens editoriais em opacidade 50–70%, mas não em fotos de produto de catálogo ou detalhe.

## 8. UI digital recomendada

Botão primário: fundo verde oscuro, texto branco. Botão acento: fundo verde claro, texto verde oscuro. Cards brancos em fundos suaves, borda verde oscuro com opacidade baixa e sombra leve verde.

Predomínio de branco, grandes titulares Bader Sans, blocos verdes para separar seções e pontos/linhas com função: ofertas, novidades, separadores, etapas.

## 9. Do / Don't

### Fazer

- Manter o verde oscuro como base de confiança.
- Usar verde claro como energia/acento.
- Usar branco como espaço respirável e sensação clínica.
- Fazer a tipografia ter protagonismo.
- Usar fotografia real e luminosa.
- Usar elementos gráficos com função.

### Não fazer

- Não adicionar paletas externas sem necessidade.
- Não usar gradientes genéricos.
- Não usar `#70D44B` para texto pequeno em branco.
- Não colorir fotos de produto quando isso altera a percepção do produto.
- Não usar sombras pesadas ou estética SaaS genérica.
- Não inventar novas versões do logo.

## 10. Entregáveis gerados

- `tokens/bader.tokens.json`
- `tokens/bader.css`
- `tokens/tailwind.bader.config.cjs`
- `brandbook/bader-brandbook-nancy.html`
- `assets/brand_core/`
- `reports/source_audit.md`
