Fotografia & Imagens
Diretrizes para estilo fotografico, tratamento de cor, enquadramento, overlays de marca e banco de imagens da SYSLED.
Fundamentos Visuais
A fotografia da SYSLED transmite tecnologia, confianca e modernidade industrial. Cada imagem deve reforcar o posicionamento da marca como plataforma indtech inteligente.
4 Categorias de Imagem
Toda imagem usada em materiais da SYSLED deve se encaixar em uma destas 4 categorias. Cada uma tem tratamento de cor e proposito especifico.
Filtros e Color Grading
Todas as fotos devem receber tratamento de cor para manter consistencia visual. O tom geral e frio (azulado), com saturacao moderada.
Filtro Padrao SYSLED
/* Filtro padrao para fotos SYSLED */
.photo-sysled {
filter:
saturate(0.85) /* Reducao leve de saturacao */
contrast(1.05) /* Contraste sutil */
brightness(0.95); /* Levemente mais escura */
mix-blend-mode: normal;
}
/* Overlay azul opcional */
.photo-sysled::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(15, 23, 42, 0.3), /* #0F172A */
rgba(43, 108, 176, 0.15) /* #2B6CB0 */
);
mix-blend-mode: multiply;
}
Comparativo de Filtros
filter: nonesaturate(0.85)saturate(0.6)saturate(0)Parametros Exatos
| Contexto | Saturacao | Contraste | Brilho | Overlay |
|---|---|---|---|---|
| Padrao (geral) | 0.85 | 1.05 | 0.95 | Nenhum |
| Hero / Cover | 0.60 | 1.10 | 0.85 | Gradiente azul |
| Background sutil | 0.30 | 1.00 | 1.10 | Blur 8-16px |
| Monocromatico | 0.00 | 1.05 | 1.05 | Opcional |
Gradientes sobre Fotos
Quando a foto precisa de texto sobreposto, use um overlay gradiente da paleta SYSLED. Nunca coloque texto diretamente sobre fotos sem tratamento.
/* Overlay tipo 1: Dark bottom (ideal para cards com texto inferior) */
.overlay-dark-bottom::after {
background: linear-gradient(180deg, transparent 30%, rgba(15,23,42,0.85) 100%);
}
/* Overlay tipo 2: Brand gradient (ideal para heroes e covers) */
.overlay-brand::after {
background: linear-gradient(135deg, rgba(26,78,138,0.85), rgba(26,122,143,0.7));
}
/* Overlay tipo 3: Uniform dark (ideal para texto centralizado) */
.overlay-uniform::after {
background: rgba(15, 23, 42, 0.6);
}
Enquadramento e Proporcoes
Regras de composicao para manter consistencia em todos os materiais visuais.
Regra dos Tercos
Posicione o elemento principal em um dos 4 pontos de intersecao. Em fotos de maquinas, alinhe o equipamento principal no terco esquerdo ou direito.
Proporcoes por Contexto
| Formato | Proporcao | Resolucao Min. | Uso |
|---|---|---|---|
| Hero Desktop | 16:9 | 1920 x 1080 | Homepage, landing pages |
| Card | 4:3 | 800 x 600 | Blog, listagens de produto |
| Quadrado | 1:1 | 1080 x 1080 | Instagram, avatar |
| Open Graph | 1200:630 | 1200 x 630 | Link previews, social |
| Banner LinkedIn | 1584:396 | 1584 x 396 | Capa do perfil |
| Story | 9:16 | 1080 x 1920 | Instagram/WhatsApp Stories |
Fontes e Diretrizes
Quando nao houver fotos proprias, use bancos de imagens seguindo estas regras rigorosas.
Bancos Recomendados
| Banco | Tipo | Melhor Para | Licenca |
|---|---|---|---|
| Unsplash | Gratuito | Industria, tecnologia, equipes | Livre para uso comercial |
| Pexels | Gratuito | Ambientes corporativos, backgrounds | Livre para uso comercial |
| Adobe Stock | Pago | Fotos premium de alta resolucao | Licenca comercial padrao |
| Shutterstock | Pago | Variedade e escala | Licenca comercial padrao |
Termos de Busca Recomendados
Aplicacao do Logotipo em Imagens
Regras para posicionar o logotipo SYSLED sobre fotografias e imagens de fundo.
| Regra | Valor |
|---|---|
| Versao sobre fundo escuro/foto | Logo Branca (sempre) |
| Versao sobre fundo claro/foto | Logo Principal ou Mono |
| Area de protecao sobre foto | 1.5x (maior que o padrao) |
| Posicao preferencial | Canto inferior direito ou centro |
| Opacidade minima do overlay | 50% sob o logo |
| Tamanho maximo sobre foto | 30% da largura da imagem |
Uso Correto vs Incorreto
Exemplos praticos do que fazer e do que evitar na fotografia da marca.
Tom frio, filtro SYSLED aplicado, contraste equilibrado
Tom quente/alaranjado — conflita com a identidade azul da marca
Texto com overlay escuro — legibilidade garantida
Texto direto sobre foto — baixo contraste, ilegivel
Fotos reais de industria, maquinas, tecnologia
Imagens genericas sem relacao com industria/tecnologia
Validacao de Imagem
Antes de usar qualquer imagem em materiais SYSLED, valide com este checklist: