# Design System — Mattos Filho

> Fonte: Guia da Marca Mattos Filho, versão 1.0 (abril/2022). Use este arquivo como referência de marca para gerar apresentações e materiais. Regra de ouro: **não invente**; siga o que está aqui. A prioridade cromática é sempre o **laranja**.

## Cores principais

| Cor | HEX | RGB | CMYK | Pantone |
|---|---|---|---|---|
| Laranja (primária) | `#EC7000` | 236 112 0 | 0 65 100 0 | 158C / 144U |
| Branco | `#FFFFFF` | 255 255 255 | 0 0 0 0 | — |
| Roxo | `#682895` | 104 40 149 | 76 93 0 0 | 267 C |

## Cores complementares

| Cor | HEX | RGB | Uso |
|---|---|---|---|
| Laranja claro | `#FFA900` | 255 169 0 | destaques, gráficos |
| Cinza claro | `#EBEBEB` | 235 235 235 | fundos, divisórias |
| Cinza médio | `#8F9191` | 143 145 145 | textos secundários |
| Cinza escuro | `#3C3C3C` | 60 60 60 | textos em fundo claro |
| Roxo vibrante | `#BD00F7` | 189 0 247 | acento pontual |
| Roxo escuro | `#3F0B65` | 63 11 101 | títulos, fundos escuros |

## Regras de acessibilidade (contraste)
- Título > 18pt; texto corrido < 18pt.
- Combinações **AAA** (ideal): roxo escuro `#3F0B65` sobre branco; branco sobre roxo `#682895`; roxo `#682895` sobre branco; cinza escuro `#3C3C3C` sobre branco; roxo escuro sobre laranja.
- Combinações **AA** (suficiente): laranja `#EC7000` sobre branco; laranja claro `#FFA900` sobre roxo; preto sobre laranja.
- Evite laranja sobre branco em texto corrido pequeno (contraste baixo). Referência: webaim.org.

## Logo
- Wordmark **MATTOS FILHO**. A letra **"A" é uma seta** (símbolo/ícone da marca) — alude à troca de conhecimento entre os talentos. As letras "TT" unidas remetem a vínculos duradouros.
- Versões: principal (horizontal), vertical, ícone (só a seta "A").
- Aplicar preferencialmente sobre **branco** ou sobre **laranja**. Versão negativa (branca) só quando o fundo exigir. Monocromática (preto/branco) apenas em casos extremos.
- Redução mínima: digital 120px (principal), 80px (vertical), 30px (ícone). Área de reserva = metade da altura do "X".
- **Nunca:** alterar cores/estrutura/posição dos elementos; trocar a tipografia do logo; adicionar ou remover elementos; usar o "A" como "V" invertido.

## Tipografia (uso corporativo)
- Fonte padrão dos materiais internos do escritório: **Segoe UI** (apresentações, documentos).
- Títulos: peso bold; texto corrido: regular. Se precisar de fonte para o wordmark do logo, use os arquivos oficiais do logo — não recomponha o logo com fonte de sistema.
- Em dúvida sobre fontes de peças institucionais, consultar Comunicação institucional e Branding.

## Assets a manter (biblioteca)
Ao extrair o design system, organize em subpastas:
```
assets/logos/                (logo principal, vertical, ícone, negativo)
assets/ilustracoes/
assets/icones/
assets/elementos-decorativos/ (círculos e diagonais laranja/roxo do brandbook)
```

## Elementos gráficos de apoio
- Formas do brandbook: **círculo laranja claro** (`#FFA900`) e **diagonais/triângulos** em laranja `#EC7000`, roxo `#682895` e roxo vibrante `#BD00F7` sobre branco. Use com moderação, sem competir com o conteúdo.

---
_Em caso de dúvida de marca, consultar as áreas de Comunicação institucional e Branding do Mattos Filho._