Direto
A resposta vem na primeira frase. Contexto e detalhe ficam depois, para quem quiser.
01Tom de voz
Rápido, técnico e perto de você.
A Hostbraza promete velocidade, então a escrita também é rápida: frases curtas, dado concreto e o próximo passo. Nunca complicado sem necessidade, nunca vago para parecer simpático.
Técnico
Número, prazo e causa. Falamos com precisão e traduzimos quando o leitor não é da área.
Perto
Quem responde tem nome. Escrevemos como quem atende: em primeira pessoa, sem script e sem empurrar o problema.
Escrevemos assimE não assim
Migramos seu site hoje, sem custo e sem tirar do ar.
Soluções inovadoras para o seu negócio decolar na internet.
O servidor caiu às 14h02 e voltou às 14h09. A causa foi disco cheio, já corrigida.
Tivemos uma instabilidade pontual em nossos sistemas.
Elementor Pro, WP Rocket e Crocoblock já vêm no plano.
Diversos recursos premium inclusos para turbinar seu site!
02Logo
Uma chama, um hexágono, um nome.
A chama é a brasa do nome e traz dentro dela o H de Hosting. Cada formato vem em quatro versões, uma para cada fundo, em SVG e PNG. No computador, passe o mouse sobre uma faixa para ampliar e baixar.
Horizontal
Versão preferencial. Site, e-mail, documentos e assinaturas.
Vertical
Para espaços quadrados ou estreitos: stories, crachás e peças centradas.
Isotipo
O hexágono com a chama, sozinho. Onde o nome já aparece por perto.
Chama e ícone de app
Reduções para favicon, avatar e lojas de aplicativos. A chama solta só aparece onde o hexágono não cabe.
Selo Associado ABRACLOUD
Acompanha o logo em rodapés e materiais institucionais. Use o arquivo original, sempre sobre fundo escuro.
Chama de dados
O fundo vivo da marca: a chama inteira feita de quadradinhos, como dados passando num servidor.
- Fica atrás do conteúdo, em fundos escuros. Uma por tela.
- O mesmo estilo de quadradinhos pode vestir outras formas da marca.
- Na assinatura, o logo continua liso.
- Área de respiro
- Deixe em volta do logo um espaço livre de x, a metade da altura do hexágono.
- Tamanho mínimo
- 120 px de largura. Menor que isso, use o isotipo.
- Qual versão usar
- Colorido em fundo claro, Negativo em fundo escuro, Branco sobre azul e fotos.
Não altere o logo
A marca ganha força pela repetição. Qualquer variação fora dos arquivos desta página enfraquece o conjunto.
03Cores
Três azuis, um gradiente.
O Azul Hostbraza é a cor da marca. O Claro e o Profundo formam o gradiente e os fundos com brilho. Clique numa cor para copiar.
Fundos com brilho
O Brilho Braza é a Obsidiana com clarões nos três azuis. Vale só em fundos escuros, com texto branco, e dá profundidade onde o gradiente liso ficaria chapado.
Cores de status
Tema escuro
04Tipografia
Space Grotesk. Uma família só.
Do título à legenda, tudo em Space Grotesk. O que muda é o peso e o tamanho. A fonte é gratuita.
Seu site no topo.
Display
Hospedagem WordPress completa
Título
Servidores no Brasil e migração gratuita.
Subtítulo
A gente explica o que aconteceu, qual o impacto e qual o próximo passo. Sem exagero e sem promessa vaga.
Texto
Hospedagem · WordPress · Suporte
Legenda
O nome em texto
HostbrazaBrazaMailBrazaChatBrazaCommerceBrazaBrand
Quando o nome aparece escrito, o “braza” vai em negrito. Hostbraza é uma palavra só, com b minúsculo.
Pesos
AaLight300
AaRegular400
AaMedium500
AaSemiBold600
AaBold700
05Interface
Botões, campos e cantos.
O mesmo desenho em todo painel, plugin e aplicativo. Quem aprende a usar um produto da Hostbraza já sabe usar os outros.
Botões
Ícones em botões e campos
- O ícone entra quando ajuda a reconhecer a ação de relance: enviar, entrar, baixar, excluir.
- Fica sempre à esquerda do texto, na mesma cor dele. Um por botão.
- No campo, o ícone fica à esquerda e mostra o que digitar: e-mail, senha, busca.
- Botão sem ícone também está certo. Salvar e cancelar não precisam.
Campos de formulário
Normal
Em foco
Com erro Digite um e-mail completo.
O foco é sempre azul. O erro vem sempre com uma frase dizendo o que corrigir, nunca só com a cor.
Cantos
- CartãoO mais arredondado.
- Botão e campoSempre iguais entre si.
- EtiquetaSó uma bordinha.
Cantos médios em botões, campos, cartões e etiquetas. Em pílula ficam só as peças pequenas de vidro, como a busca, e a barra de abas dos aplicativos.
06Efeito vidro
Três vidros, cada um no seu lugar.
O vidro só aparece onde existe algo atrás dele: gradiente, chama ou foto. Cada um dos três tem um papel fixo, e é isso que mantém a marca com uma cara só.
Vidro Fosco
O padrão- Onde usar
- Tudo que tem texto para ler: cartões, menus, barras e janelas.
- Onde não usar
- Fundo liso, sem nada atrás. Ali, use um cartão comum.
Vidro Líquido
Peças pequenas- Onde usar
- Sobre gradiente ou foto: a busca, botões redondos e pílulas.
- Onde não usar
- Áreas grandes com texto, porque o fundo atrapalha a leitura.
Vidro Azul
O destaque- Onde usar
- Um aviso, uma oferta ou um selo.
- Onde não usar
- Mais de uma vez por tela, ou junto de um botão Marca.
07A marca nas redes
Em todo perfil, a mesma cara.
Um sistema só para foto, capa, destaque e blog: o Gradiente Braza ou fundo claro, a chama grande ao fundo e a assinatura “Seu site no topo.” Baixe pronto, no tamanho de cada rede.
AFotos e capas de perfil
Instagram · YouTube · LinkedIn · WhatsApp · Facebook
A foto Principal vale para todas as redes.
BCapas de destaques
Instagram · 1080 × 1920 px
Ícone branco e cheio sobre o gradiente, sem texto dentro do círculo.
CCapas de blog
1200 × 630 px · títulos reais do blog
Categoria, título em até três linhas e logo no canto superior esquerdo. Alterne os três modelos.
08Plugins
A marca dentro do WordPress.
Os painéis dos plugins são feitos em HeroUI com o tema da Hostbraza. O azul cheio fica no botão que pede ação, o azul suave nas ações de apoio, e o resto é neutro para o lojista focar no trabalho.
- Botão principal
- Azul Hostbraza
- Botão secundário
- Azul suave
- Fonte
- Space Grotesk
- Ícones
- Cheios, estilo iOS
- Logo
- Horizontal colorido, no cabeçalho
Família de pluginsHostbrazaBrazaMailBrazaChatBrazaPix
09Aplicativos
A marca no bolso.
Nos apps, o gradiente aparece no cartão que resume a conta e nos ícones das listas, e o azul marca a aba em que a pessoa está. O fundo segue claro, com um brilho suave no topo.
- Cor de destaque
- Azul Hostbraza
- Cartão de resumo
- Gradiente Braza
- Topo da tela
- Brilho suave em azul
- Ícones das listas
- Em ladrilho com o gradiente
- Barra de abas
- Flutuante, em Vidro Fosco
- Fonte
- Space Grotesk
No iPhone, as barras do sistema usam o vidro do próprio aparelho. A barra de abas da Hostbraza flutua em Vidro Fosco, para as duas conversarem.
Família de appsHostbrazaBrazaCommerceBrazaMailBrazaChat
10Princípios de design
Três perguntas antes de publicar.
Toda peça da Hostbraza passa pelo mesmo filtro. Se falhar em um dos três, volta para a mesa.
- 1
Velocidade se vê.
Uma mensagem por peça. Por tela, no máximo um fundo vivo, uma chama e um destaque. Se a pessoa precisa procurar o que importa, a peça ainda está lenta.
- 2
O azul cheio aponta.
O azul cheio aparece onde queremos o olho: no botão, no link, no número. O azul suave e os brilhos ficam de fundo, sem disputar com ele.
- 3
Técnico, com gente por trás.
Mostramos o dado real e explicamos em português claro. Precisão sem frieza, proximidade sem enrolação.
11Uso da marca
Uso correto da marca.
O nome e o logo Hostbraza são marca registrada. Parceiros, clientes e imprensa podem usar os materiais desta página dentro das regras abaixo.
Permitido
- Usar os arquivos desta página, 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.
- Escrever o nome como Hostbraza: uma palavra, só o H maiúsculo.
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.
Em dúvida sobre um uso? Fale com o time da Hostbraza antes de publicar.