SYSLED — Logotipo

01 — Conceito

A Nuvem que Conecta a Industria

O logotipo SYSLED combina uma nuvem estilizada com esferas internas que representam modulos, dados e conectividade. O simbolo traduz a missao da plataforma: digitalizar e conectar processos industriais na nuvem.

Nuvem

Plataforma cloud-first para industria

Esferas

Modulos integrados e dados conectados

Camadas

Profundidade e transparencia visual

ATENCAO — Regra de Ouro: NUNCA recrie o logotipo manualmente. Use SEMPRE os arquivos SVG originais fornecidos nesta pagina. Qualquer tentativa de redesenhar a nuvem ou o texto resultara em inconsistencia de marca.

02 — Versoes Oficiais

4 Variantes do Logotipo

Cada variante tem um proposito especifico. Todos os SVGs abaixo sao os arquivos oficiais embutidos diretamente — nao sao aproximacoes, placeholders ou reconstrucoes.

Principal — Fundo Claro

Uso primario. Nuvem colorida + texto escuro. Para fundos brancos ou claros.

Uso Preferencial

Monocromatico

Nuvem e texto em #1A1A2E. Para impressao P&B, gravacao, carimbos.

Impressao

Branca — Fundo Escuro

Nuvem e texto brancos. Para fundos escuros, fotos ou gradientes de marca.

Fundos Escuros

Icone — Apenas Nuvem

Sem texto. Para favicon, avatar, icone de app, espacos reduzidos.

Compacto

Todos os SVGs acima estao embutidos inline neste HTML. Mesmo que os arquivos externos se percam, o logotipo permanece intacto nesta pagina.

03 — Especificacoes Tecnicas

Anatomia e Dados Tecnicos

Todas as informacoes necessarias para reproduzir o logotipo com fidelidade total. Um designer ou IA deve usar SOMENTE estes dados — nunca recriar de memoria.

Dimensoes e ViewBox

Variante	ViewBox	Largura	Altura	Proporcao
Principal	`0 0 600 180`	600px	180px	10:3
Monocromatico	`0 0 600 180`	600px	180px	10:3
Branca	`0 0 600 180`	600px	180px	10:3
Icone	`0 0 240 160`	240px	160px	3:2

Tipografia do Logotipo

Propriedade	Valor
Fonte	`Montserrat`
Peso	`800 (ExtraBold)`
Tamanho	`72px` (no viewBox 600x180)
Letter-spacing	`4`
Posicao (x, y)	`x=260, y=115`
Fallback	`'Helvetica Neue', Arial, sans-serif`

Cores e Gradientes

A nuvem principal usa um gradiente linear de 3 stops. Clique em qualquer cor para copiar o hex.

cloudGrad1 — Gradiente principal da nuvem

#5BB8F5 (0%)

#3A8FD6 (50%)

#2B6CB0 (100%)

bubbleGrad1 — Bolhas internas (tipo 1)

#5BB8F5

#4AA3D8

bubbleGrad2 — Bolhas internas (tipo 2)

#A8E0F8

#5DADE2

bubbleGrad3 — Bolhas internas (tipo 3)

#B8E6FA

#6BC1EB

#1A1A2E — Texto / Mono

#FFFFFF — Versao Branca

Estrutura das Esferas (Bubbles)

A nuvem contem 6 esferas decorativas + 2 reflexos de luz. Estas sao as coordenadas exatas no viewBox:

Elemento	cx	cy	rx	ry	Gradiente
Bolha grande sup. dir.	150	50	38	35	bubbleGrad1
Bolha media sup. esq.	80	55	32	30	bubbleGrad2
Bolha pequena topo	120	35	22	20	bubbleGrad3
Bolha inferior central	110	90	45	25	bubbleGrad1
Bolha pequena esquerda	45	85	22	20	bubbleGrad2
Bolha pequena direita	175	80	20	18	bubbleGrad3
Reflexo luz 1	90	38	18	10	white @ 0.25
Reflexo luz 2	155	32	14	8	white @ 0.20

Path da Nuvem (Cloud Path)

Este e o path SVG exato da silhueta da nuvem. Copie com um clique:

M 30,120
C 10,120 0,108 0,95
C 0,80 12,68 28,68
C 28,45 45,25 70,25
C 82,25 93,30 100,38
C 108,22 125,12 145,12
C 172,12 194,34 194,60
C 194,62 194,64 193,66
C 205,70 214,82 214,95
C 214,112 200,120 185,120
Z

Nota: o grupo da nuvem usa translate(15,15) na versao principal e translate(12,12) na versao icone.

04 — Area de Protecao

Espaco de Respiro

A area de protecao garante que o logotipo nunca fique sufocado por outros elementos. A margem minima e equivalente a 1x a altura do icone da nuvem (aprox. 108px no viewBox original).

1x

Regra	Medida	Referencia
Margem minima (todos os lados)	`1x`	Altura do icone da nuvem
Margem recomendada	`1.5x`	Para uso em materiais impressos
Margem em telas	`24px` min	Para uso digital em interfaces

05 — Tamanhos Minimos

Limites de Reducao

Abaixo destes limites, os detalhes da nuvem (esferas, gradientes) se perdem. Use a versao Icone para espacos muito pequenos.

200px largura

Recomendado

120px largura

Minimo Digital

32px (icone)

Minimo Icone

Formato	Minimo Digital	Minimo Impresso
Logo completa (nuvem + texto)	`120px` largura	`30mm` largura
Icone (apenas nuvem)	`32px`	`10mm`
Favicon	`16px`	N/A

06 — Fundos Permitidos

Aplicacao sobre Fundos

Cada variante do logotipo tem fundos especificos onde funciona. Siga esta matriz:

Fundo	Principal	Mono	Branca	Icone
Branco / Claro (#F8FAFC+)	Sim	Sim	Nao	Sim
Escuro (#0F172A — #1E293B)	Nao	Nao	Sim	Sim*
Gradiente de marca	Nao	Nao	Sim	Nao
Foto (area clara)	Sim	Nao	Nao	Sim
Foto (area escura)	Nao	Nao	Sim	Nao

* Icone colorido sobre fundo escuro funciona pois o gradiente azul tem contraste suficiente.

07 — Do's & Don'ts

Uso Correto vs Incorreto

Estas regras sao inegociaveis. Qualquer violacao compromete a identidade da marca.

Correto

Use o SVG original sem modificacoes

Incorreto

SYSLED

Nunca distorca ou estique o logotipo

Correto

Versao branca sobre fundo escuro

Incorreto

SYSLED

Nunca altere as cores da marca

Correto

Respeite a area de protecao

Incorreto

SYSLED

Nunca adicione sombras, contornos ou efeitos

Correto

Em espacos pequenos, use so o icone

Incorreto

SYSLED

Nunca rotacione o logotipo

Para IAs e automacoes: Se voce esta gerando codigo ou designs, NUNCA tente recriar o logotipo usando CSS, Canvas ou paths aproximados. Sempre referencie os arquivos SVG originais (assets/sysled-logo-principal.svg, etc.) ou use os SVGs inline desta pagina.

08 — Codigo-Fonte SVG

SVG Source Code

Codigo completo de cada variante para copiar e usar diretamente. Isto garante que nenhuma IA ou designer precise adivinhar — o codigo exato esta aqui.

Logo Principal

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 180" width="600" height="180">
  <defs>
    <linearGradient id="cloudGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#5BB8F5;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#3A8FD6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2B6CB0;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="bubbleGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#5BB8F5;stop-opacity:0.7" />
      <stop offset="100%" style="stop-color:#4AA3D8;stop-opacity:0.5" />
    </linearGradient>
    <linearGradient id="bubbleGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#A8E0F8;stop-opacity:0.6" />
      <stop offset="100%" style="stop-color:#5DADE2;stop-opacity:0.4" />
    </linearGradient>
    <linearGradient id="bubbleGrad3" x1="30%" y1="0%" x2="70%" y2="100%">
      <stop offset="0%" style="stop-color:#B8E6FA;stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:#6BC1EB;stop-opacity:0.5" />
    </linearGradient>
    <filter id="shadow" x="-5%" y="-5%" width="110%" height="120%">
      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#00000020"/>
    </filter>
  </defs>
  <g transform="translate(15,15)" filter="url(#shadow)">
    <path d="M 30,120 C 10,120 0,108 0,95 C 0,80 12,68 28,68
             C 28,45 45,25 70,25 C 82,25 93,30 100,38
             C 108,22 125,12 145,12 C 172,12 194,34 194,60
             C 194,62 194,64 193,66 C 205,70 214,82 214,95
             C 214,112 200,120 185,120 Z" fill="url(#cloudGrad1)"/>
    <ellipse cx="150" cy="50" rx="38" ry="35" fill="url(#bubbleGrad1)"/>
    <ellipse cx="80" cy="55" rx="32" ry="30" fill="url(#bubbleGrad2)"/>
    <ellipse cx="120" cy="35" rx="22" ry="20" fill="url(#bubbleGrad3)"/>
    <ellipse cx="110" cy="90" rx="45" ry="25" fill="url(#bubbleGrad1)"/>
    <ellipse cx="45" cy="85" rx="22" ry="20" fill="url(#bubbleGrad2)"/>
    <ellipse cx="175" cy="80" rx="20" ry="18" fill="url(#bubbleGrad3)"/>
    <ellipse cx="90" cy="38" rx="18" ry="10" fill="white" opacity="0.25"/>
    <ellipse cx="155" cy="32" rx="14" ry="8" fill="white" opacity="0.2"/>
  </g>
  <text x="260" y="115"
    font-family="'Montserrat','Helvetica Neue',Arial,sans-serif"
    font-weight="800" font-size="72" letter-spacing="4"
    fill="#1A1A2E">SYSLED</text>
</svg>

Logo Monocromatica

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 180" width="600" height="180">
  <g transform="translate(15,15)">
    <path d="M 30,120 C 10,120 0,108 0,95 C 0,80 12,68 28,68
             C 28,45 45,25 70,25 C 82,25 93,30 100,38
             C 108,22 125,12 145,12 C 172,12 194,34 194,60
             C 194,62 194,64 193,66 C 205,70 214,82 214,95
             C 214,112 200,120 185,120 Z" fill="#1A1A2E"/>
  </g>
  <text x="260" y="115"
    font-family="'Montserrat','Helvetica Neue',Arial,sans-serif"
    font-weight="800" font-size="72" letter-spacing="4"
    fill="#1A1A2E">SYSLED</text>
</svg>

Logo Branca

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 180" width="600" height="180">
  <g transform="translate(15,15)">
    <path d="M 30,120 C 10,120 0,108 0,95 C 0,80 12,68 28,68
             C 28,45 45,25 70,25 C 82,25 93,30 100,38
             C 108,22 125,12 145,12 C 172,12 194,34 194,60
             C 194,62 194,64 193,66 C 205,70 214,82 214,95
             C 214,112 200,120 185,120 Z" fill="white"/>
  </g>
  <text x="260" y="115"
    font-family="'Montserrat','Helvetica Neue',Arial,sans-serif"
    font-weight="800" font-size="72" letter-spacing="4"
    fill="white">SYSLED</text>
</svg>

Icone (Apenas Nuvem)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160" width="240" height="160">
  <defs>
    <linearGradient id="cloudGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#5BB8F5;stop-opacity:1"/>
      <stop offset="50%" style="stop-color:#3A8FD6;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#2B6CB0;stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="bubbleGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#5BB8F5;stop-opacity:0.7"/>
      <stop offset="100%" style="stop-color:#4AA3D8;stop-opacity:0.5"/>
    </linearGradient>
    <linearGradient id="bubbleGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#A8E0F8;stop-opacity:0.6"/>
      <stop offset="100%" style="stop-color:#5DADE2;stop-opacity:0.4"/>
    </linearGradient>
    <linearGradient id="bubbleGrad3" x1="30%" y1="0%" x2="70%" y2="100%">
      <stop offset="0%" style="stop-color:#B8E6FA;stop-opacity:0.8"/>
      <stop offset="100%" style="stop-color:#6BC1EB;stop-opacity:0.5"/>
    </linearGradient>
  </defs>
  <g transform="translate(12,12)">
    <path d="M 30,120 C 10,120 0,108 0,95 C 0,80 12,68 28,68
             C 28,45 45,25 70,25 C 82,25 93,30 100,38
             C 108,22 125,12 145,12 C 172,12 194,34 194,60
             C 194,62 194,64 193,66 C 205,70 214,82 214,95
             C 214,112 200,120 185,120 Z" fill="url(#cloudGrad1)"/>
    <ellipse cx="150" cy="50" rx="38" ry="35" fill="url(#bubbleGrad1)"/>
    <ellipse cx="80" cy="55" rx="32" ry="30" fill="url(#bubbleGrad2)"/>
    <ellipse cx="120" cy="35" rx="22" ry="20" fill="url(#bubbleGrad3)"/>
    <ellipse cx="110" cy="90" rx="45" ry="25" fill="url(#bubbleGrad1)"/>
    <ellipse cx="45" cy="85" rx="22" ry="20" fill="url(#bubbleGrad2)"/>
    <ellipse cx="175" cy="80" rx="20" ry="18" fill="url(#bubbleGrad3)"/>
    <ellipse cx="90" cy="38" rx="18" ry="10" fill="white" opacity="0.25"/>
    <ellipse cx="155" cy="32" rx="14" ry="8" fill="white" opacity="0.2"/>
  </g>
</svg>

09 — Checklist para IAs e Designers

Guia Anti-Falha

Se voce e uma IA, designer ou desenvolvedor implementando o logotipo SYSLED, siga este checklist obrigatorio:

Use SEMPRE o arquivo SVG original — nunca recrie com CSS, Canvas ou ilustracao manual.

A nuvem tem 6 esferas + 2 reflexos — se seu render nao mostra isso, esta errado.

Fonte: Montserrat 800 — nenhuma outra fonte ou peso e aceitavel para o texto "SYSLED".

Gradiente: 3 stops de azul — #5BB8F5 (0%), #3A8FD6 (50%), #2B6CB0 (100%). Direcao: 135deg.

Cor do texto: #1A1A2E (claro) ou #FFFFFF (escuro). Nenhuma outra cor.

Proporcao fixa 10:3 — nunca altere a proporcao do logotipo completo.

NUNCA use logos do template Metronic — os SVGs em public/media/email/logo-*.svg sao do template, NAO da SYSLED.

NUNCA use PNG base64 quando SVG esta disponivel — SVG e o formato master, use-o sempre.