# ValorBrain · Arquivos da marca

O kit reúne os arquivos oficiais para aplicar a identidade ValorBrain em
interfaces, apresentações e materiais de comunicação.

## Conteúdo

- **Logos em SVG:** assinaturas horizontal e vertical para fundos claros e
  escuros, símbolo padrão, símbolo óptico, versões monocromáticas e grade de
  construção. O nome da marca está convertido em curvas.
- **Ícones:** PNGs de 16, 32, 48, 180, 192 e 512 px, além do favicon em ICO.
- **Imagens:** ilustração de continuidade em PNG e WebP, capas para X e LinkedIn
  e sua arte de fundo.
- **Tokens:** CSS e JSON para cores, temas, tipografia, espaçamento e estados.

Os arquivos ficam na pasta `brand_assets` dentro do ZIP. Este guia acompanha
o pacote como `README.md`.

## Escolha do arquivo

Use **SVG** para design, impressão e layouts que precisam mudar de tamanho.
As versões de fundo claro e escuro já têm as cores adequadas para cada uso.
Os símbolos monocromáticos têm recortes transparentes: a cor do fundo aparece
no V e no ponto.

Use **PNG** para avatares e ferramentas que não aceitam SVG. O ícone de 16 px
usa a variante óptica. Use **WebP** para a ilustração na web e **PNG** quando
precisar de compatibilidade com outras ferramentas.

Símbolo padrão: mínimo de 28 px ou 6 mm. Entre 16 e 27 px, use o símbolo óptico.
Assinatura horizontal: mínimo de 168 px ou 36 mm de largura. Preserve as
proporções, as cores e a área de proteção; não distorça os arquivos.

## Tokens no frontend

Copie `brand_assets/valorbrain-tokens.css` para seu projeto e importe o arquivo.
Use os tokens por função, como `--vb-surface-canvas`, `--vb-text-primary`,
`--vb-action-bg` e `--vb-focus`.

O tema padrão é Paper. Para alternar, aplique `data-theme="light"` ou
`data-theme="dark"` na raiz da página. O JSON contém os mesmos tokens; seus
valores usam sintaxe CSS, incluindo referências `var()`.

Hanken Grotesk é a família da marca. Os logos já funcionam sem instalar fontes.
Arquivos de fonte para textos não acompanham o pacote; obtenha a distribuição
oficial com sua licença para usá-los em um projeto.

## Manual e exemplos

- [Manual da marca](https://brand.valorbra.in/#central-ativos)
- [Componentes, temas e arquivos](https://brand.valorbra.in/index.html#arquivos)