HF Studio
Guia visual
Cores, tipografia, formas, componentes e movimento do site. Tudo nasce da logo: a moldura de viewfinder, as linhas de velocidade, o F cortado na diagonal e o play.
A marca
Use sempre a versão com fundo transparente. Branca sobre fundos escuros e fotos, preta sobre fundos claros. Mantenha uma área livre ao redor igual à altura da letra H. Tamanho mínimo: 64 px de largura na tela, 20 mm impresso.
- Usar a logo em preto ou branco puros
- Escurecer a foto antes de colocar a logo
- Manter a proporção original
- Colorir a logo com o rosa ou o violeta
- Esticar, girar ou aplicar sombra
- Colocar sobre foto clara sem contraste
Palco escuro, um destaque
A marca é preto e branco. O site vive no escuro, como uma sala de cinema, e usa um único rosa para chamar a ação. O violeta aparece só como luz de fundo, nunca em texto ou botão.
#08070BFundo da página#100E16Faixas e superfícies#1A1722Cards, campos, tags#2C2836Bordas e divisórias#F4F2F7Texto principal#A9A4B6Texto secundário#FF2E8ADestaque: botões, foco, REC#6A3DFFSó em brilhos de luz| Combinação | Uso | Contraste |
|---|---|---|
| Paper sobre Ink | Texto corrido e títulos | Alto (acima de 15:1) |
| Mute sobre Ink | Descrições e legendas | Bom (acima de 7:1) |
| Ink sobre Pink | Texto de botão | Bom (cerca de 6:1) |
| Pink sobre Ink | Ícones, sublinhados, palavras de destaque | Bom para títulos grandes |
Condensada, inclinada, em caixa alta
Os tamanhos seguem uma escala: cada nível é cerca de 1,33× o anterior no computador e 1,2× no celular, crescendo junto com a tela até 1440px (valores abaixo: celular → computador). O título usa Saira Condensed em itálico pesado, com cortes retos que combinam com a logo. O texto usa Manrope, fácil de ler em telas pequenas. Etiquetas e dados usam Saira com espaçamento largo, como a palavra STUDIO na logo.
42 → 72px36 → 54px30 → 40px22 → 28px18 → 20pxProduzimos vídeos que fazem o seu negócio ser visto, lembrado e escolhido.
16 → 17px / 1.65O texto corrido usa 16 px, entrelinha generosa e no máximo 65 caracteres por linha, para leitura confortável no celular e no computador.
12px · +0.2emEtapa 1 · Pré-produçãoVindas da logo
Quatro elementos repetem a linguagem da marca em todo o site. Use com moderação: um por bloco.
A moldura de câmera em volta de fotos e destaques. Rosa em imagens principais, branca no resto.
O corte diagonal do F. Aplicado no canto superior direito de fotos, cards e chamadas.
As cinco lâminas da logo, usadas como marcador antes de títulos de seção.
O triângulo da logo, sempre dentro de um quadrado com corte, sobre os vídeos do portfólio.
Peças prontas
| Item | Especificação |
|---|---|
| Largura máxima | 1240 px, margem lateral de 16 px no celular até 48 px no desktop |
| Grade | Home e serviços em 3 colunas, portfólio em 3 / 2 / 1 conforme a largura |
| Espaço entre seções | 64 px no celular, até 120 px no desktop |
| Foco do teclado | Contorno rosa de 2 px, afastado 3 px |
| Bordas | 1 px em Line. Sem cantos arredondados: só canto cortado |
Corte seco, saída suave
Pouco movimento, sempre com propósito. Todas as animações desligam para quem ativa "reduzir movimento" no aparelho.
| Onde | Efeito |
|---|---|
| Botões | Sobem 2 px e clareiam ao passar o mouse; a seta avança 4 px |
| Vídeos do portfólio | O fundo amplia 12% e o play fica rosa |
| Redes sociais | Ícone sobe 3 px e vira rosa |
| REC | Ponto rosa pisca a cada 1,6 s no selo do topo |
Direção de imagem
Pessoas reais, luz de estúdio, roupa preta com a logo aparente. Fotos com fundo neutro ou concreto, tom frio e um leve contraste. Sempre com o corte diagonal no canto e uma moldura rosa nas fotos principais.
Como falamos
- Próximo e direto, sem jargão
- Verbos de ação nos botões: "Pedir orçamento", "Ver portfólio"
- Frases curtas, promessas que dá para cumprir
- Exageros como "o melhor do Brasil"
- Termos técnicos sem explicar
- Textos longos sem título
Dados para preencher antes de publicar
- Telefone e link do WhatsApp, e-mail, endereço e horário (em
src/_data/site.js) - Links reais de Instagram, YouTube e LinkedIn e o CNPJ
- Vídeos do portfólio: preencher
provider/videoId/srcemsrc/_data/works.js - Logos dos clientes, nomes e cargos da equipe
- Fotos reais da equipe em
src/assets/img/ - Conferir os textos de "O Studio" e dos serviços com a história real da HF Studio