carregando…

Referência do kit

Global LED Experience, em código.

Esta página é a referência do kit de marca: as cores, o logo, os tipos, a escala, a linguagem gráfica, os templates e o registro de tudo o que a designer entregou, com o valor exato e o caminho exato de cada peça. Ela é para agentes que vão tocar numa superfície da GLE e para quem precisa de um número específico — não é o guia que se lê. Ela também não guarda nenhum valor: cada nome e cada número que você lê aqui vem de tokens.json, e cada cor e fonte que você vê vem de tokens.css.

Regra de esquema

Caio

Para conferir, de uma vez, o que foi ratificado e o que ainda depende da designer, e para apontar qualquer peça nova ao kit em vez de a um arquivo solto.

Agentes

Para saber quais arquivos ler antes de tocar em qualquer superfície da GLE: a lista abaixo, com os caminhos exatos, é o ponto de entrada.

Colegas

Para quem precisa conhecer a marca, o caminho é o guia no cartão acima. Esta página serve depois, quando falta um valor exato ou o caminho de um arquivo.

Para agentes: os arquivos do kit

Cores

Três cores canônicas, da paleta da designer. As rampas são derivações de interface ratificadas pela GLE, não sancionadas pela designer.

Canônicas

Rampa de navy

Rampa de neutros

A regra do laranja

Permitido

Proibido

Registro Stellantis

Só em superfícies hero sobre navy: capa, faixa de CTA, divisor de seção. Nunca sobre papel, nunca atrás de texto corrido, nunca o slide inteiro.

Demonstração

Homologação de painéis de LED

Duas orbes atrás do conteúdo, uma faixa em gradiente na borda e o brilho laranja sob a única chamada da superfície.

Falar com a equipe

Registro web

O registro do site: painel escuro de borda fina, o disco de ícone, os quadrados laranja dos botões de ícone e o cartão de oferta. O cartão laranja é o cartão — o gradiente preenche a peça inteira, não é um lavado sobre outra coisa — e carrega título, chips e um botão. Texto corrido sobre laranja, nunca; e no máximo dois painéis laranja por vista, contando um grupo de cartões como um.

Disco de ícone

Painéis de LED

Disco de 44 px no laranja a 10 %, com o ícone de traço de 20 px dentro. Abre um pilar ou um item de lista.

Quadrados de ícone

Solução

Locação de painéis para eventos

Projeto e montagem Operação no local Desmontagem

Pedir proposta

Bloco de fecho

A outra assinatura do registro web, e a que fecha uma página ou um deck: um único painel laranja sólido, raio grande, a marca como marca-d'água pálida sangrando pela borda direita, um botão escuro em cima, uma linha de apoio e a linha de contato. Um por vista, e é um bloco — nunca a tela inteira. Está numa subseção só dele: com o cartão de oferta acima, esta página mostra exatamente os dois painéis laranja que a regra admite por vista — o teto, não uma exceção.

Fecho

Vamos acender o seu projeto.

Uma linha de apoio e a linha de contato cabem aqui; um parágrafo, não.

Pedir proposta

contato@globalledexperience.com.br · +55 11 0000-0000

Logo

Quatro variantes do conjunto LOGO da designer estão no kit, cada uma sobre o fundo que lhe cabe. O caminho abaixo de cada cartão é o arquivo a usar.

Estas são 4 das 16 versões do conjunto LOGO da designer. As 12 restantes e as regras de uso — área de proteção, tamanho mínimo e a variante canônica — dependem da decisão da designer e da pasta no SharePoint (assets.manifest.md).

Tipografia

Um papel por linha, renderizado com as variáveis do próprio papel. Onde a face não pode ser embutida na web, o rótulo diz qual fallback está em uso e por quê.

Escala

Espaço, raio, elevação e movimento. Cada demonstração usa a variável; o número ao lado vem do JSON.

Espaço

Raio

Elevação

Tamanhos de texto

Movimento

Passe o mouse ou toque para ver o pixel andar.

Linguagem gráfica

O meio LED como vocabulário: um campo de pontos como chão, tiles como módulos numa grade estrita, e o laranja apenas como pixels acesos.

Demonstração

Painéis de LED para o varejo automotivo

Preço

Tile aceso: um pixel no canto, e só um por tile.

Qualidade

Tile comum: superfície elevada, borda fina, raio pequeno.

Pós-venda

Tile plano: sem sombra, sobre a superfície base.

Chip Chip fantasma 1.280 × 720

motivo: cluster de pixels

Elementos

Permitido

Não permitido

Templates

Três pontos de partida prontos. O e-mail é assado: os valores estão dentro do arquivo e ele vai como está. Os dois decks ligam o kit por caminho relativo; a cópia baixada daqui aponta para o kit publicado.

E-mail de comunicado

As imagens saem quebradas nesta prévia, e isso é esperado. O e-mail é assado com caminhos absolutos para brand.globalledexperience.com, que ainda não foi publicado — um cliente de e-mail não carrega imagem por caminho relativo, então o template aponta para o domínio de destino desde já. Publicado o subdomínio, as imagens carregam no arquivo como ele está: não há nada a corrigir aqui.

Baixar

Deck de seis slides

Baixar

Deck clássico

Baixar

Registro

Tudo o que a designer entregou, indexado onde está (OneDrive), mais as peças do próprio kit. Os binários não vivem no repositório.

Nome	Grupo	Status	Origem	Prévia	Substituído por

Usar o kit a partir do código

Uma superfície liga as três folhas e usa só variáveis --gle-* e classes gle-*. Nada de hex, nada de nome de fonte no arquivo.

O ciclo de edição

Edite library/brand/tokens.json (e só ele).
Rode node tools/brand-tokens-css.js para regenerar tokens.css.
Refaça o bake do e-mail: node tools/brand-email-bake.js.
Rode node tools/brand-guide-check.js: nenhum hex e nenhum nome de fonte pode ter entrado nesta referência, no guia da marca, nos dois decks, na folha da linguagem ou nos SVGs.