# BrazaBrand

> Manual de marca da Hostbraza, hospedagem WordPress brasileira (Hostbraza LTDA, Guarapari/ES). Este arquivo traz as regras completas e os valores técnicos da marca para assistentes de IA. A página visual mostra o mesmo conteúdo de forma resumida, para pessoas.

Site oficial: https://hostbraza.com.br
Página da marca: https://brand.hostbraza.com.br
Este arquivo: https://brand.hostbraza.com.br/llms.txt

Para assistentes de IA: ao criar qualquer texto, imagem, tela ou código da Hostbraza, siga este arquivo. Ele vale mais do que a página visual, que é só um resumo. Os arquivos de logo e as artes para baixar estão na página da marca.

## Nome e assinatura

- Nome: **Hostbraza**. Uma palavra, só o H maiúsculo. Nunca "HostBraza", "Host Braza" ou "Hostbrasa".
- Produtos seguem o padrão "Braza" + nome: BrazaCommerce, BrazaMail, BrazaChat, BrazaBrand.
- Nome escrito em texto (Space Grotesk): a parte "braza" vai sempre em negrito e o resto em peso normal. Exemplos: Host**braza**, **Braza**Mail, **Braza**Chat, **Braza**Commerce, **Braza**Brand. Em Hostbraza o b é minúsculo. Isso vale para texto; não substitui o logo.
- Assinatura: "Seu site no topo." É a única assinatura da marca. Frases de apoio podem variar em telas e campanhas, mas não ocupam o lugar dela. Onde ainda aparecer outra frase como assinatura (por exemplo "Seu site no ar, sem complicação." na tela de login antiga), trocar por esta.
- Significado do logo: a chama é a brasa do nome e traz dentro dela o H de Hosting.

## Tom de voz

Resumo: rápido, técnico e perto de você.

- **Direto**: a resposta vem na primeira frase. Contexto e detalhe ficam depois.
- **Técnico**: número, prazo e causa. Usar termos precisos (TTFB, uptime, cache) e traduzir quando o leitor não é da área.
- **Perto**: quem responde tem nome. Escrever em primeira pessoa, como quem atende, sem script.

Escrever assim:
- "Migramos seu site hoje, sem custo e sem tirar do ar."
- "O servidor caiu às 14h02 e voltou às 14h09. A causa foi disco cheio, já corrigida."
- "Elementor Pro, WP Rocket e Crocoblock já vêm no plano."

Evitar:
- "Soluções inovadoras para o seu negócio decolar na internet."
- "Tivemos uma instabilidade pontual em nossos sistemas."
- "Diversos recursos premium inclusos para turbinar seu site!"

Evitar também: exclamações em série, promessas sem número, jargão sem explicação.

## Logo

Formatos:
- **Horizontal**: hexágono com a chama à esquerda do nome. Versão preferencial (site, e-mail, documentos, assinaturas).
- **Vertical**: hexágono acima do nome. Para espaços quadrados ou estreitos.
- **Isotipo**: só o hexágono com a chama. Onde o nome já aparece por perto.
- **Chama**: a chama sem o hexágono. Só onde o hexágono não cabe (favicon, avatar).
- **Ícone de app**: quadrado no Gradiente Braza com a chama branca.

Versões de cor (cada formato tem as quatro):
- **Colorido**: símbolo em gradiente, chama branca, nome em marinho #001042. Para fundos claros.
- **Negativo**: símbolo em gradiente, chama branca, nome branco. Para fundos escuros.
- **Branco**: tudo branco, chama vazada. Sobre o gradiente, o azul e fotos.
- **Uma cor**: tudo em Obsidiana #0A0B0F, chama vazada. Quando a impressão não aceita gradiente.

Regras:
- Área de respiro: espaço livre em volta do logo igual à metade da altura do hexágono.
- Tamanho mínimo do horizontal: 120 px de largura na tela, 30 mm impresso. Abaixo disso, usar o isotipo (mínimo 24 px).
- Não distorcer, não rotacionar, não trocar as cores, não aplicar sombra, contorno ou brilho.
- O marinho #001042 só aparece como cor no nome do logo colorido. Nunca usar como cor visível de fundo, botão ou texto. Ele pode entrar de forma transparente, como sombra, como tinta do Vidro Líquido e como véu para escurecer o gradiente atrás de texto pequeno.

### Arquivos para baixar

Todos os logos têm endereço fixo, em SVG (vetor, para qualquer tamanho) e em PNG com fundo transparente. O endereço segue o padrão `https://brand.hostbraza.com.br/logos/NOME.svg` ou `.png`. Sempre baixar daqui: nunca redesenhar o logo nem gerar uma imitação.

| Arquivo (NOME) | O que é | Quando usar |
| --- | --- | --- |
| `hostbraza-horizontal-colorido` | Logo horizontal, símbolo em gradiente e nome em marinho | Fundo claro. É a versão preferencial. |
| `hostbraza-horizontal-negativo` | Logo horizontal, símbolo em gradiente e nome branco | Fundo escuro |
| `hostbraza-horizontal-branco` | Logo horizontal todo branco | Sobre o gradiente, azul ou foto |
| `hostbraza-horizontal-uma-cor` | Logo horizontal todo em Obsidiana | Impressão em uma cor |
| `hostbraza-vertical-colorido`, `-negativo`, `-branco`, `-uma-cor` | Símbolo em cima do nome | Espaços quadrados ou estreitos |
| `hostbraza-isotipo-colorido`, `-negativo`, `-branco`, `-uma-cor` | Só o hexágono com a chama | Onde o nome já aparece por perto |
| `hostbraza-chama-gradiente`, `-branca`, `-obsidiana` | A chama solta, sem o hexágono | Favicon, avatar, fundo |
| `hostbraza-icone-app` | Chama branca no quadrado em gradiente | Ícone de aplicativo |
| `hostbraza-chama-dados` | A Chama de dados, parada | Fundo escuro em peças sem movimento |

Exemplos: `https://brand.hostbraza.com.br/logos/hostbraza-horizontal-colorido.svg` e `https://brand.hostbraza.com.br/logos/hostbraza-isotipo-branco.png`.

Outros arquivos da marca:
- Imagem de compartilhamento (1200 × 630): `https://brand.hostbraza.com.br/og.jpg`
- Favicon: `https://brand.hostbraza.com.br/favicon.svg`
- Ícones de interface: não são arquivos da Hostbraza. São da família Ionicons, versão sólida, baixados de https://ionicons.com pelo nome (por exemplo `server`, `mail`, `key`, `download`).
- Fonte: Space Grotesk, no Google Fonts.
- Fotos de perfil, capas de redes, destaques e capas de blog são geradas na própria página, pelos botões de download. Ainda não têm endereço fixo.

Selo: "Associado ABRACLOUD", usado em rodapés e materiais institucionais, sempre sobre fundo escuro e sem alterações.

## Chama de dados

O fundo vivo da marca: a chama inteira desenhada com quadradinhos, como dados passando num servidor. É um tratamento oficial da chama, feito pela Hostbraza, para fundos e peças com movimento.

Como é feita (a chama numa caixa de 500 × 500):
- Grade alinhada com células de 9 unidades (1,8% da largura). Entra um quadradinho em cada célula cujo centro cai dentro da silhueta da chama. A chama é sempre toda em quadradinhos, nunca metade lisa e metade em dados.
- Cor: cada quadradinho recebe a cor do Gradiente Braza na sua posição horizontal (#0082F8 à esquerda, #1C40F2 à direita).
- Onda de luz na diagonal, devagar: `onda = 0,5 + 0,5 × sen((0,9x + y) × 0,016 − 1,1t)`, com t em segundos. O lado do quadradinho vai de 46% a 82% da célula e a opacidade de 0,34 a 0,90, conforme a onda.
- Piscar: a cada 0,6 s, cerca de 14% dos quadradinhos ficam apagados (opacidade 0,16) e cerca de 1 em 125 acende em #8FC2FF.
- Com `prefers-reduced-motion`, fica parada. Só anima enquanto está visível na tela.

Onde usar:
- Atrás do conteúdo, em fundos escuros (Obsidiana ou Brilho Braza), com opacidade perto de 85%. Uma por tela.
- Posição: grande, saindo de baixo, com a base cortada pela borda da faixa ou do quadro (entre 15% e 25% da altura). Deixar respiro embaixo da faixa para a base aparecer sob os cartões.
- Em peças sem movimento (capa, post, apresentação), usar o arquivo parado `hostbraza-chama-dados` (SVG ou PNG), disponível na página.
- O mesmo estilo pode vestir outras formas da marca (o isotipo, uma faixa, um fundo inteiro), sempre com a mesma grade, a mesma onda e o Gradiente Braza.

Limites:
- Na assinatura (cabeçalho, rodapé, documentos, favicon), o logo continua liso, nos arquivos oficiais.
- É um recurso da própria Hostbraza. Parceiros e terceiros continuam sem poder alterar o logo.

No código do BrazaBrand: `src/brand/dataFlame.js` (desenho) e `src/components/DataFlame.jsx` (componente React com canvas).

## Cores

| Nome | HEX | RGB | Uso |
| --- | --- | --- | --- |
| Azul Hostbraza | #0060FE | 0, 96, 254 | Azul oficial, chapado. Botões, links, ícones e texto azul. |
| Azul Claro | #0082F8 | 0, 130, 248 | Início do gradiente. Só em gradiente e áreas grandes. |
| Azul Profundo | #1C40F2 | 28, 64, 242 | Fim do gradiente. Hover e botão pressionado. |
| Obsidiana | #0A0B0F | 10, 11, 15 | Fundo escuro e texto. |
| Grafite | #71717A | 113, 113, 122 | Texto suave. |
| Geada | #E7E7EA | 231, 231, 234 | Linhas e bordas. |
| Gelo | #F3F5FB | 243, 245, 251 | Fundo claro. |
| Neve | #FFFFFF | 255, 255, 255 | Papel e cartões. |

Gradiente Braza: `linear-gradient(90deg, #0082F8, #1C40F2)`, sempre do Azul Claro para o Azul Profundo, da esquerda para a direita. O Azul Hostbraza é praticamente o ponto do meio desse gradiente. Usar em áreas grandes: topo de página, capas, fotos de perfil e destaques. Nunca atrás de texto longo.

Texto branco pequeno sobre o Gradiente Braza não passa no lado claro (3,8:1). Duas saídas:
- Em botão, usar o gradiente do botão, que começa no Azul Hostbraza: `linear-gradient(90deg, #0060FE, #1C40F2)` (5,1:1 no ponto mais claro).
- Em cartão ou faixa com texto pequeno, pôr um véu marinho por cima do gradiente: `rgba(0, 16, 66, 0.22)` ou mais (passa de 5:1).

Contraste de texto branco (WCAG):
- Sobre #0060FE: 5,1:1. Serve para qualquer tamanho de texto.
- Sobre #1C40F2: 6,9:1. Serve para qualquer tamanho de texto.
- Sobre #0082F8: 3,8:1. Só para texto grande (24 px ou mais). Não usar como fundo de botão com texto pequeno.

Texto suave: usar o Grafite #71717A sobre Neve (4,8:1). Sobre Gelo ele dá 4,4:1, abaixo do mínimo de 4,5:1, então ali o texto suave usa #63636B (5,5:1).

### Brilho Braza (fundos com brilho)

Fundos escuros com clarões de luz nos três azuis, sempre sobre a Obsidiana. Dão profundidade onde o gradiente liso ficaria chapado. Texto sempre branco.

Horizonte, a luz sobe de baixo (topos de página e faixas grandes):
```css
background:
  radial-gradient(120% 85% at 50% 118%, rgba(28, 64, 242, 0.95) 0%, rgba(0, 96, 254, 0.5) 30%, rgba(0, 96, 254, 0) 64%),
  radial-gradient(55% 45% at 88% -5%, rgba(0, 130, 248, 0.26), rgba(0, 130, 248, 0) 70%),
  #0A0B0F;
```

Canto, a luz entra pelo canto de cima à direita (faixas com texto à esquerda):
```css
background:
  radial-gradient(75% 95% at 100% 0%, rgba(28, 64, 242, 0.85) 0%, rgba(0, 96, 254, 0.3) 42%, rgba(0, 96, 254, 0) 72%),
  radial-gradient(50% 60% at 0% 100%, rgba(0, 130, 248, 0.2), rgba(0, 130, 248, 0) 70%),
  #0A0B0F;
```

Feixe, um facho de luz na diagonal (cartões e banners, sobre o tom de Cartão #15171D):
```css
background:
  linear-gradient(115deg, rgba(28, 64, 242, 0) 38%, rgba(28, 64, 242, 0.6) 56%, rgba(0, 130, 248, 0.3) 63%, rgba(0, 130, 248, 0) 80%),
  #15171D;
```

Regras:
- Só os três azuis da marca. Nada de roxo, rosa ou outras cores no brilho.
- A parte mais forte do brilho é o Azul Profundo, onde texto branco tem contraste de 6,9:1. O Azul Claro entra só em clarões fracos.
- Um brilho principal por bloco. Cartões de vidro por cima ficam bem, porque o vidro tem o que desfocar.
- Não usar em fundos claros: no tema claro, as faixas claras continuam lisas.
- Onde o BrazaBrand usa: faixas escuras (Horizonte e Canto) e o quadro da Chama de dados. O topo da página é o Gradiente Braza nos dois temas.
- O Gradiente Braza liso continua valendo para capas, fotos de perfil, botão Marca e o topo no tema claro.

### Cores de status

Carregam significado e são as mesmas em todos os produtos. Cada uma tem um tom para texto e ícone e um fundo suave para a etiqueta.

| Status | Uso | Texto (claro) | Fundo (claro) | Texto (escuro) | Fundo (escuro) |
| --- | --- | --- | --- | --- | --- |
| Verde | Deu certo, ativo, pago | #0E7036 | #DFF5E7 | #3DD68C | #12301F |
| Âmbar | Atenção, pendente | #9A5600 | #FDEFD2 | #F5B83D | #33260B |
| Vermelho | Erro, vencido | #C22727 | #FCE4E4 | #FF6B6B | #3A1517 |
| Cinza | Inativo, sem novidade | #5F5F68 | #EFEFF2 | #A1A1AA | #1E2129 |

Todos os pares passam de 4,5:1 de contraste. Texto branco sobre os tons de texto claros também passa (para botões de erro, por exemplo).

### Tema escuro

| Papel | HEX |
| --- | --- |
| Fundo | #0A0B0F (Obsidiana) |
| Cartão | #15171D |
| Cartão elevado ou controle | #1E2129 |
| Borda | #2A2D37 |
| Texto | #F3F5FB (Gelo) |
| Texto suave | #A1A1AA |
| Azul em texto, link e ícone | #0082F8 (Azul Claro) |
| Azul em botão | #0060FE (Azul Hostbraza), com texto branco |

No escuro, o Azul Hostbraza não tem contraste suficiente como texto (3,8:1 sobre a Obsidiana), por isso texto e ícone azuis usam o Azul Claro (5,2:1). Os botões continuam em Azul Hostbraza.

Outros valores do tema escuro:
- Faixa de fundo alternada (o papel do Gelo no claro): #101218.
- Etiqueta azul: fundo `rgba(0, 130, 248, 0.16)` com texto #0082F8.
- Cores de status: usar o par escuro de cada uma (tabela acima).

Como aplicar: todo produto começa seguindo o tema do sistema (`prefers-color-scheme`) e oferece um botão para trocar entre claro e escuro; a escolha da pessoa fica guardada e passa a valer no lugar do sistema. O ícone do botão mostra o tema para o qual ele leva: lua no claro, sol no escuro. O BrazaBrand funciona assim (atributo `data-theme` no `<html>`, papéis de cor em variáveis CSS). Telas de exemplo de produto e o logo colorido continuam claros dentro do tema escuro.

## Tipografia

Uma família só: **Space Grotesk** (Google Fonts, licença SIL Open Font, variável, pesos 300 a 700). A hierarquia vem do peso e do tamanho, nunca de uma segunda fonte.

| Papel | Tamanho / entrelinha | Peso | Espaçamento |
| --- | --- | --- | --- |
| Display | 64 / 64 px | Medium 500 | −3,5% |
| Título | 38 / 42 px | SemiBold 600 | −2% |
| Subtítulo | 19 / 28 px | Medium 500 | 0 |
| Texto | 16 / 26 px | Regular 400 | 0 |
| Dados | 16 / 26 px | Medium 500 | números tabulares |
| Legenda | 12 / 16 px | SemiBold 600 | caixa alta, +12% |

Download: https://fonts.google.com/specimen/Space+Grotesk

A letra do logo é a **Zaptron** (fonte comercial). Ela vive só dentro do logo, que já vem desenhado em SVG. Não use a Zaptron em títulos, números, botões, capas ou em qualquer outro texto, e não redesenhe o nome "Hostbraza" com outra fonte: quando precisar do nome em texto corrido, escreva em Space Grotesk seguindo a regra do negrito.

## Interface: botões, campos e cantos

Vale para o site, os painéis, os plugins e os aplicativos.

### Botões (estilo Suave)

Medidas: altura 44 px (36 a 40 px na versão pequena), 18 px de respiro nas laterais, cantos de 10 px, texto 15 px em peso 600. Ícone opcional à esquerda, com 17 px e 8 px de distância do texto.

| Tipo | Uso | Fundo | Texto | Com o mouse em cima |
| --- | --- | --- | --- | --- |
| Marca | A ação mais importante. Um só por tela. | Gradiente do botão, #0060FE → #1C40F2 | Branco | Mesmo fundo |
| Principal | A ação que conclui: salvar, enviar, pagar. | #0060FE | Branco | Fundo #1C40F2 |
| Secundário | Ações de apoio, ao lado da principal. | `rgba(0, 96, 254, 0.12)` | #1C40F2 | Fundo `rgba(0, 96, 254, 0.2)` |
| Discreto | Voltar, cancelar, ações de menor peso. | Transparente | #1C40F2 | Fundo `rgba(0, 96, 254, 0.08)` |
| Perigo | Excluir e outras ações sem volta. | #FCE4E4 | #C22727 | Fundo #C22727, texto branco |

- Sem borda e sem sombra: a diferença entre os tipos vem só do fundo.
- No tema escuro: Marca e Principal não mudam. Secundário usa fundo `rgba(0, 130, 248, 0.2)` e texto #8FC2FF. Discreto usa texto #8FC2FF.
- Foco pelo teclado: contorno de 2 px em Azul Hostbraza, afastado 3 px (branco sobre fundo azul ou escuro).

### Ícones em botões e campos

Ícones dão cara profissional e ajudam a reconhecer a ação de relance. São sempre da família Ionicons, versão sólida (a mesma dos destaques e dos produtos). Isso vale para todo ícone de interface, inclusive os pequenos de baixar, copiar, buscar e fechar: nada de ícone de traço fino.

- No botão: à esquerda do texto, 17 px, a 8 px do texto, na mesma cor do texto. Um ícone por botão.
- Usar quando o ícone é reconhecido sem ler: enviar (mail), entrar com senha (key), baixar (download), excluir (trash), contratar (flash), buscar (search), atualizar (refresh).
- Não é obrigatório: botões genéricos como Salvar, Cancelar e Continuar ficam sem ícone. Não colocar ícone só para enfeitar.
- Botão só com ícone, sem texto: apenas para ações conhecidas (buscar, atualizar, fechar), em quadrado de 40 a 44 px, sempre com nome acessível (`aria-label`).
- No campo: à esquerda, dentro do campo, 18 px, em Grafite, a 13 px da borda; o texto começa a 40 px da borda. O ícone mostra o que digitar: e-mail (mail), senha (lock-closed), busca (search), domínio (globe).
- Exemplo de referência, a tela de login: campo "E-mail" com ícone mail; botão Principal "Enviar código de acesso" com ícone mail; botão Secundário "Entrar com senha" com ícone key.

### Casos especiais de botão

- Login social (Google, Facebook, GitHub e outros): fundo branco com linha interna de 1 px em Geada, texto em Obsidiana, 44 px de altura e cantos de 10 px, com o logo oficial do serviço à esquerda. Não usar o azul suave aqui: as marcas de terceiros pedem fundo neutro.
- Botão Secundário sobre Vidro Fosco: trocar o fundo azul suave por `rgba(255, 255, 255, 0.72)`, mantendo o texto #1C40F2. Sobre o vidro o azul suave perde leitura.
- Link de apoio no topo de uma tela (por exemplo "Fale com o suporte"): botão Discreto com ícone. Sobre o gradiente, vira uma pílula de Vidro Líquido.

### Campos de formulário (com contorno)

- Altura 44 px, cantos de 10 px, 12 px de respiro nas laterais, texto 15 px.
- Fundo branco com linha interna de 1 px em Geada #E7E7EA. Texto em Obsidiana, texto de exemplo em Grafite.
- Rótulo acima do campo, 14 px em peso 600, a 6 px de distância.
- Foco: linha interna de 2 px em #0060FE mais um halo externo de 4 px em `rgba(0, 96, 254, 0.18)`.
- Erro: linha interna de 2 px em #C22727 e, abaixo do campo, uma frase de 13 px em #C22727 com ícone, dizendo o que corrigir. Nunca indicar erro só pela cor.
- No tema escuro: fundo do Cartão #15171D, linha na Borda #2A2D37, texto #F3F5FB.

### Cantos (médios)

| Peça | Raio |
| --- | --- |
| Etiqueta e chip de status | 6 px |
| Botão e campo | 10 px |
| Cartão | 12 px |
| Painel grande | 16 px |

Em pílula (raio total) ficam só as peças pequenas em Vidro Líquido, como a busca, e a barra de abas dos aplicativos.

### Espaçamento

Densidade normal: 12 px de respiro dentro de cartões e linhas de lista, 8 px entre itens da mesma lista.

## Efeito vidro

São três vidros, cada um com um papel fixo. O vidro só aparece onde existe algo atrás dele: gradiente, chama, foto ou conteúdo rolando. Sobre fundo liso, usar cartão sólido. Uma camada de vidro por vez.

| Vidro | Papel | Onde usar | Onde não usar |
| --- | --- | --- | --- |
| Fosco | O padrão | Tudo que tem texto para ler: cartões, menus, barras, janelas | Fundo liso, sem nada atrás |
| Líquido | Peças pequenas | Sobre gradiente ou foto: a busca, botões redondos, pílulas | Áreas grandes com texto |
| Azul | O destaque | Um aviso, uma oferta ou um selo | Mais de uma vez na mesma tela |

### Vidro Fosco

Claro (texto escuro):
```css
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.7);
```

Escuro (texto branco):
```css
background: rgba(10, 11, 15, 0.55);
backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.14);
```

### Vidro Líquido

Quase transparente, pouco desfoque e um brilho fino na borda. Sempre em pílula ou círculo. A referência de tamanho é a busca, com 56 px de altura.

Sobre o gradiente ou foto (texto branco). A tinta marinho segura o contraste do texto branco em cerca de 4,8:1 no ponto mais claro do gradiente:
```css
background: rgba(0, 16, 66, 0.16);
backdrop-filter: blur(12px) saturate(190%);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.18),
  inset 0 0 24px rgba(255, 255, 255, 0.12);
```

- Sobre fundo claro (texto escuro): trocar a tinta por `rgba(255, 255, 255, 0.34)` e a borda por `rgba(255, 255, 255, 0.85)`.
- Sobre fundo escuro (texto branco): tinta `rgba(255, 255, 255, 0.08)` e borda `rgba(255, 255, 255, 0.26)`.
- O campo de busca do topo do BrazaBrand é o exemplo de referência.

### Vidro Azul

O vidro tingido com o Gradiente Braza. Texto sempre branco.

```css
background: linear-gradient(135deg, rgba(0, 130, 248, 0.46), rgba(28, 64, 242, 0.46));
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
```

- Funciona melhor sobre a Obsidiana, sobre o gradiente ou sobre foto escura.
- Sobre fundo claro, subir a tinta para 0,62 e 0,66 e só usar com chama ou gradiente atrás: sobre Gelo puro o canto claro fica em cerca de 2,4:1 com texto branco, o que não passa.
- Texto curto: um título a partir de 18 px em peso 600 e uma frase de apoio.
- Um por tela, e nunca junto de um botão Marca (ver "Hierarquia e limite de efeitos").

Sem suporte a `backdrop-filter`, os três viram placas quase opacas: branco ou obsidiana a 94% (Fosco), marinho a 50% (Líquido) e o Gradiente Braza sólido (Azul).

## Telas de entrada (login e cadastro)

- Estrutura: formulário num cartão branco (cantos de 16 px, linha em Geada) sobre fundo Gelo; ao lado, um painel no Gradiente Braza com a chama branca grande ao fundo (opacidade perto de 16%) e a assinatura "Seu site no topo." em branco.
- Ordem dentro do cartão: título, frase de apoio, botões de login social, divisor "ou com seu e-mail", campo de e-mail com ícone, botão Principal com ícone, frase de ajuda e botão Secundário com ícone.
- Texto branco pequeno sobre o gradiente: escurecer a parte de baixo com um véu marinho por cima do gradiente, `linear-gradient(180deg, rgba(0, 16, 66, 0) 40%, rgba(0, 16, 66, 0.5) 100%)`, para o texto passar de 4,5:1 também no lado claro.

## Movimento

- Efeitos de escala (scale) suaves no hover: entre 1,03 e 1,2, com curva `cubic-bezier(0.2, 0.8, 0.2, 1)`.
- Fotos de perfil e destaques: anel tracejado azul que aparece, cresce e gira devagar (uma volta a cada 20 s) no hover.
- Respeitar `prefers-reduced-motion`.

## Redes

Perfis oficiais: Instagram (@hostbraza.com.br), YouTube (@HostbrazaOficial), LinkedIn (página Hostbraza) e WhatsApp.

Sistema visual: Gradiente Braza ou fundo claro, a chama grande e discreta ao fundo, e a assinatura "SEU SITE NO TOPO." em caixa alta com letras espaçadas.

| Peça | Tamanho |
| --- | --- |
| Foto de perfil | 1080 × 1080 px |
| Capa LinkedIn (página de empresa) | 1512 × 256 px |
| Banner YouTube | 2560 × 1440 px, área segura central 1546 × 423 px |
| Capa Facebook | 1640 × 624 px |
| Capa WhatsApp Business | 1211 × 681 px |
| Capa de destaque (Instagram) | 1080 × 1920 px |
| Capa de blog | 1200 × 630 px |

- Foto de perfil: a versão Principal (gradiente com chama branca) vale para todas as redes. Existem também a Obsidiana (fundo #0A0B0F com a chama branca, nunca azul, que some no escuro) e a Clara (fundo Gelo com a chama em gradiente).
- Destaques: ícone branco e sólido da família Ionicons, estilo iOS (licença MIT, ionicons.com), sobre o gradiente, sem texto dentro do círculo. Atuais: Planos (server), WordPress (browsers), Suporte (headset), Migração (cloud-upload), Clientes (people), Status (pulse).
- Capas de blog: categoria em caixa alta, título em até três linhas, logo no canto superior esquerdo. Três modelos (azul, clara, obsidiana), alternados.

## Produtos: plugins e aplicativos

Decisões que valem para todos os produtos da Hostbraza:
- Fonte: Space Grotesk em tudo, inclusive tabelas e formulários.
- Ícones de interface: Ionicons, versão sólida (estilo iOS).
- Cor de destaque: Azul Hostbraza #0060FE. Hover e pressionado: Azul Profundo #1C40F2.
- Gradiente Braza em áreas grandes (o cartão de resumo da tela inicial de um app) e nos ladrilhos de ícone. Com texto pequeno por cima, levar o véu marinho.
- Botões, campos, cantos e espaçamento: os da seção "Interface" acima.
- Vidro: no iOS, as barras do sistema usam o vidro nativo do aparelho. Nas peças desenhadas pela Hostbraza valem os três vidros da marca, cada um no seu papel (barra de abas e cartões sobre gradiente em Vidro Fosco).

Plugins (painéis dentro do WordPress): feitos em React com HeroUI 3 e Tailwind 4. O tema fica em `admin-app/src/index.css` de cada plugin. Valores do tema:
- `--accent` e `--brand`: #0060FE; `--brand-hover`: #1C40F2.
- `--font-sans`: "Space Grotesk".
- Cantos: 10 px em botões e campos, 12 px em cartões, 6 px em chips.
- Botão secundário no estilo Suave (fundo azul a 12%, texto Azul Profundo), no lugar do branco com borda.
- Logo horizontal colorido no cabeçalho de cada página, com 24 px de altura.
- Sem gradiente e sem vidro nos painéis: o fundo é o do WordPress.
- Família: Hostbraza, BrazaMail, BrazaChat, BrazaPix.

Aplicativos (iOS e Android, Expo/React Native): o tema fica em `src/theme/themes.ts` de cada app. Valores do tema:
- Primária: #0060FE. Gradiente da marca: #0082F8 → #1C40F2.
- Fundo claro: Gelo #F3F5FB. Texto: Obsidiana #0A0B0F. Texto suave: Grafite.
- Marca do app: quadrado arredondado no Gradiente Braza com a chama branca.
- Topo da tela: brilho suave. Um degradê vertical de `rgba(0, 96, 254, 0.2)` até transparente, que some antes do meio da tela, sobre o fundo Gelo. Sem faixa sólida e sem chama ao fundo.
- Ícone em ladrilho: nas listas, o ícone vai num quadrado de 36 a 40 px com cantos de 10 px, fundo no Gradiente Braza e desenho branco.
- Barra de abas: flutuante, em Vidro Fosco, com cantos em pílula e 12 px de distância das bordas da tela. Aba ativa em Azul Hostbraza, as outras em cinza #5F5F68. No iOS ela acompanha o vidro nativo do aparelho.
- Espaçamento normal: 12 px dentro de cada linha de lista e 8 px entre as linhas.
- Cantos: 12 px nas linhas e cartões, 16 px no cartão de resumo, 6 px nas etiquetas de status.
- Família: Hostbraza, BrazaCommerce, BrazaMail, BrazaChat.

## Hierarquia e limite de efeitos

Quem é o protagonista: a chama. O logo e a Chama de dados são o que a Hostbraza tem de só dela, e é isso que deve ficar na memória. Vidro, brilho e gradiente são apoio: dão acabamento, mas nunca são o assunto da tela. Em dúvida entre mais um efeito e mais espaço para a chama, ficar com a chama.

Limite por tela (o que se vê de uma vez, sem rolar):
- Um fundo vivo: Brilho Braza ou Gradiente Braza. Não os dois.
- Uma Chama de dados.
- Um destaque: o botão Marca ou um Vidro Azul. Não os dois.
- Vidro Fosco e Vidro Líquido entram onde tiverem papel, sempre uma camada só.
- Movimento: um elemento se mexendo sozinho por tela (a chama). O resto só reage ao toque ou ao mouse.

Se uma tela já tem o fundo vivo, a chama e o destaque, o resto é neutro: Neve, Gelo, Obsidiana, texto e linhas.

## Princípios de design

1. **Velocidade se vê.** Uma mensagem por peça. Por tela, no máximo um fundo vivo, uma chama e um destaque.
2. **O azul cheio aponta.** O azul cheio (#0060FE sólido ou o gradiente) aparece onde se quer o olho: botão, link, número. O azul suave, os brilhos e a Chama de dados ficam de fundo e não disputam com ele.
3. **Técnico, com gente por trás.** Dado real, explicado em português claro.

## Uso da marca

Permitido:
- Usar os arquivos oficiais, sem modificar, em materiais que citam a Hostbraza.
- Mostrar o logo em páginas de parceiros, clientes e imprensa, com link para o site oficial.
- Reduzir ou ampliar o logo mantendo a proporção e a área de respiro.

Não permitido:
- Alterar cor, proporção, tipografia ou desenho do logo.
- Usar a marca de modo que sugira parceria, patrocínio ou certificação que não existe.
- Colocar o logo sobre fotos ou fundos que atrapalhem a leitura.
- Criar logos, domínios ou perfis com o nome ou a chama da Hostbraza.