Brand Assets
Kit completo da marca SYSLED: logos, cores, tipografia, templates e todos os recursos necessarios para aplicar a identidade visual corretamente.
Kit de Marca SYSLED
Este kit reune todos os assets oficiais da marca SYSLED em um unico lugar. Siga as diretrizes de uso para manter a consistencia visual em todas as aplicacoes — digitais, impressas e institucionais.
Pronto para Uso
Todos os arquivos em formatos vetoriais e rasterizados, prontos para aplicacao imediata.
Consistencia
Assets padronizados que garantem uniformidade em todas as plataformas e materiais.
Protecao da Marca
Regras claras de uso que preservam a integridade e o reconhecimento da marca.
Arquivos do Logotipo
4 variantes oficiais do logotipo SYSLED. Todos os SVGs sao vetoriais e escalaveis sem perda de qualidade. Para specs completas, consulte a pagina do Logotipo.
Logo Principal
Versao completa colorida para fundos claros
Logo Branca
Para fundos escuros ou coloridos
Logo Monocromatica
Impressao P&B, contextos minimalistas
Icone (Nuvem)
Favicons, avatares, espacos reduzidos
Paleta Resumida
Cores oficiais da marca para uso rapido. Clique em qualquer swatch ou valor hex para copiar. Para a paleta completa, consulte a pagina de Cores.
Cores Primarias
Cores Neutras
Gradientes
Fontes Oficiais
Para diretrizes completas de tipografia, consulte a pagina de Tipografia.
Montserrat
Titulos, headings, logotipo, numeros de destaque
Inter
Corpo de texto, paragrafos, UI, labels
JetBrains Mono
Codigo, valores tecnicos, specs, tokens
Organizacao dos Arquivos
Estrutura recomendada para organizar os brand assets em qualquer projeto ou repositorio.
Tokens CSS Completos
Bloco CSS pronto para copiar e colar em qualquer projeto. Inclui cores, tipografia, espacamento, sombras e border-radius padrao da marca.
/* ================================================ SYSLED — Design Tokens Versao 2.0 | Marco 2026 ================================================ */ :root { /* Cores Primarias */ --sysled-blue-primary: #2B6CB0; --sysled-blue-medium: #3A8FD6; --sysled-blue-light: #5BB8F5; --sysled-blue-pale: #A8E0F8; /* Cores Secundarias */ --sysled-cyan-dark: #2E86C1; --sysled-cyan-medium: #3AAFCF; --sysled-cyan-light: #48C9B0; /* Neutras */ --sysled-dark-primary: #0F172A; --sysled-dark-secondary: #1E293B; --sysled-gray-600: #475569; --sysled-gray-400: #94A3B8; --sysled-gray-200: #E2E8F0; --sysled-gray-100: #F8FAFC; --sysled-white: #FFFFFF; /* Gradientes */ --sysled-gradient-brand: linear-gradient(135deg, #5BB8F5, #3A8FD6, #2B6CB0); --sysled-gradient-accent: linear-gradient(135deg, #5BB8F5, #48C9B0); --sysled-gradient-dark: linear-gradient(135deg, #0F172A, #1E3A5F); --sysled-gradient-cover: linear-gradient(135deg, #1a4e8a, #1d6ea0, #1a7a8f); /* Tipografia */ --sysled-font-heading: 'Montserrat', sans-serif; --sysled-font-body: 'Inter', sans-serif; --sysled-font-mono: 'JetBrains Mono', monospace; /* Espacamento */ --sysled-space-xs: 4px; --sysled-space-sm: 8px; --sysled-space-md: 16px; --sysled-space-lg: 24px; --sysled-space-xl: 32px; --sysled-space-2xl: 48px; --sysled-space-3xl: 64px; /* Border Radius */ --sysled-radius-sm: 6px; --sysled-radius-md: 12px; --sysled-radius-lg: 20px; --sysled-radius-full: 9999px; /* Sombras */ --sysled-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --sysled-shadow-md: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06); --sysled-shadow-lg: 0 8px 40px rgba(0,0,0,0.12); /* Transicoes */ --sysled-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --sysled-ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1); --sysled-ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --sysled-duration-fast: 200ms; --sysled-duration-normal: 300ms; --sysled-duration-slow: 400ms; }
Google Fonts Import
/* Adicionar no <head> do HTML ou no topo do CSS */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
Links do Brandbook
Acesso direto a cada modulo do manual de identidade visual SYSLED.
12 — Brand Assets
Voce esta aqui. Kit completo da marca.
Pagina atualUso dos Brand Assets
Regras fundamentais para uso correto dos assets da marca SYSLED.
Sempre use os arquivos SVG oficiais do kit — nunca recrie o logo manualmente
Nunca altere cores, proporcoes ou elementos do logotipo
Use a versao correta do logo para cada tipo de fundo (claro, escuro, colorido)
Nunca use a logo colorida sobre fundos escuros ou a branca sobre fundos claros
Mantenha a area de protecao ao redor do logo (min. 50% da altura da nuvem)
Nunca coloque elementos visuais invadindo a area de protecao do logo
Use apenas Montserrat, Inter e JetBrains Mono — as fontes oficiais da marca
Nunca substitua as fontes por alternativas — mesmo que visualmente parecidas
Checklist de Implementacao
Verifique cada item ao implementar a identidade visual SYSLED em qualquer projeto ou material.