Com mastro
Assinatura. Login, impressos, material comercial.
Mínimo 24 px.
Mínimo 24 px.
Manual de identidade · v2
Sistema de direção de prova ao vivo para ciclismo de estrada. Este documento define a marca, a regra de cor que o produto exige e os limites de uso. Tudo aqui sai de uma geometria única versionada no repositório — não há um segundo lugar onde a marca exista.
01
O flamme rouge é a bandeirola vermelha pendurada sobre a estrada a um quilômetro da chegada. Está em toda prova de estrada do mundo, e é o objeto mais reconhecível do ciclismo depois da própria bicicleta. Para quem trabalha em prova, ela não precisa de legenda.
A marca é essa bandeirola reduzida ao essencial: um retângulo com a mordida em V na ponta. Nenhum gradiente, nenhuma textura, nenhuma perspectiva — porque o primeiro contato com esta marca não é um cartaz, é um favicon de 16 px, e o segundo é uma folha fotocopiada numa prancheta.
02
Não são variações de gosto. A 16 px o mastro tem meio pixel de espessura, e some ou borra conforme o arredondamento de cada navegador — o que sobra é uma bandeirola torta. O ícone sem mastro ocupa a caixa inteira e continua nítido em qualquer tamanho.
EMPILHADA · sempre com mastro
A assinatura empilhada é a de material de marca — site, impresso, proposta. Ela não tem versão sem mastro: duas linhas de texto ao lado de uma bandeirola solta perdem o eixo, e é o mastro que dá a vertical contra a qual as duas linhas se apoiam.
As duas palavras ocupam a mesma largura, e a largura é a
da palavra mais larga — a outra estica até bater. Não é um número
escolhido: é o que sobra quando FLAMME e ROUGE
recebem a mesma entreletra e a coluna assume a maior.
É a assinatura EM LINHA que tem as duas versões de mastro, e a escolha é de espaço vertical, não de gosto: num cabeçalho de altura fixa o mastro gasta altura sem acrescentar reconhecimento, e some visualmente no tamanho em que aquele cabeçalho roda. Mesma marca em dois contextos, não duas marcas.
Em linha as palavras não casam de largura. Empilhadas elas formam um bloco e precisam casar; lado a lado o que dá ritmo é a entreletra corrida, e igualar as larguras abriria um buraco entre as duas.
A área de proteção é a própria profundidade da mordida — a marca traz sua unidade de medida consigo, então a regra não depende de tabela. Nada de texto, borda ou outro logotipo entra nesse retângulo.
03
Paleta curta de propósito. O rouge é a única cor de marca; o resto é estrutura.
O rouge da marca não aparece dentro da superfície operacional. No painel da direção e no app do motorista, vermelho significa uma coisa só: alguém precisa de socorro. Um alerta de acidente, um veículo sem sinal.
Se a marca ocupar o cabeçalho em vermelho, o olho para de tratar vermelho como urgência em vinte minutos de prova — e a cor perde o poder exatamente onde ele é necessário. Não é preciosismo de design: é a diferença entre o diretor ver o alerta pelo canto do olho ou não ver.
Por isso a marca tem duas aplicações, e escolher entre elas não é estética:
A bandeirola é reconhecível pelo recorte, não pela cor. Ela não perde identidade em branco.
04
A página mais útil de qualquer manual. Cada item abaixo é uma coisa que vai acontecer se não estiver escrita.
Proporção original, cor sólida, cantos vivos.
Esticar ou achatar. A proporção 7:5 é a marca.
Girar. A bandeirola pende na horizontal, sempre.
Contornar. Vira ruído abaixo de 32 px.
Recolorir fora da paleta. Rouge, branco ou asfalto.
Sombra, brilho, gradiente ou bisel.
Versão com mastro abaixo de 24 px. Use o ícone.
Rouge sobre vermelho ou sobre foto sem contraste.
05
Duas formas oficiais. Isso não é redundância: doze caracteres em duas palavras seriam encurtados de qualquer jeito na prática, e a diferença entre uma marca e duas é essa redução ter sido desenhada de propósito em vez de acontecer sozinha.
Flamme RougeFlamme06
A folha impressa é o teste mais duro: preto e branco, sem cor para carregar o reconhecimento.
Favicon 16 px · rouge
Ícone do app · branco sobre rouge
Painel · monocromática
Folha impressa · monocromática
07
A face é Barlow Condensed, e a escolha vem da forma da marca: a bandeirola é horizontal, e uma condensada acompanha essa horizontalidade em vez de brigar com ela. FLAMME em 300 e ROUGE em 700 — o contraste de peso dá ritmo ao empilhamento e faz a palavra vermelha carregar peso visual junto com a cor, em vez de cor e peso competirem pelo mesmo trabalho.
tabular-nums obrigatório. Distância, tempo e velocidade mudam sozinhos na tela; sem largura fixa o número pula e o olho perde a leitura.
Um <text> em SVG só desenha na fonte pedida se ela
existir na máquina que abre o arquivo. Aberto solto, colocado num editor
de terceiros, impresso ou rasterizado por uma ferramenta sem a Barlow,
o letreiro caía para a reserva — e ROUGE saía com serifa.
Por isso as letras dos arquivos de marca são curvas,
geradas a partir do arquivo da fonte por npm run brand.
O SVG é autocontido: a mesma forma em qualquer máquina, com ou sem fonte
instalada, na tela e no papel. É o que se espera de um arquivo de
logotipo — e a razão pela qual ele nunca deve ser recomposto à mão.
LETREIRO · Barlow Condensed 300 / 700, 0,10 em
Flamme Rouge
INTERFACE · 400 / 650
Carro de fechamento a 12,4 km do carro de abertura.
DADOS · tabular-nums
18:42:07 · 12,4 km · 38 km/h
08
Tudo aqui é gerado por npm run brand. Um SVG ou PNG
editado à mão é apagado na próxima execução — e isso é o comportamento
desejado, não um efeito colateral.
A geometria e as cores vivem num lugar só,
src/brand/mark.ts, e o gerador importa de lá. Até há
pouco ele mantinha uma cópia dos mesmos seis valores — batiam porque
foram digitados iguais, não porque um lesse o outro. Mudar a
bandeirola agora é mudar um arquivo.
| Arquivo | Uso |
|---|---|
| src/brand/mark.ts | Geometria, cores, nomes e a regra de aplicação, para o produto. |
| scripts/build-brand.mjs | Gera todos os arquivos abaixo. Converte o letreiro em curva a partir de @fontsource/barlow-condensed. |
| public/icon.svg | Favicon vetorial. Nítido em qualquer densidade. |
| public/favicon-32.png | Rede para navegadores sem favicon vetorial. |
| public/icon-192.png public/icon-512.png | Ícone do PWA. Branco sobre rouge. |
| public/icon-maskable-512.png | Maskable, marca a 46% da caixa. O sistema recorta na forma que ele escolhe; fora da zona segura a ponta é decepada. |
| public/apple-touch-icon.png | iOS, 180 px. |
| public/brand/mark-rouge.svg | Símbolo em rouge. |
| public/brand/mark-mono-dark.svg public/brand/mark-mono-light.svg | Monocromáticas. Uso obrigatório em tela operacional. |
| public/brand/mark-with-pole.svg | Símbolo com mastro, mínimo 24 px. |
| public/brand/signature.svg public/brand/signature-dark.svg | Assinatura empilhada, sobre claro e sobre escuro. Site, impressos, comercial. Sempre com mastro. Letras em curva, sem dependência de fonte. |
| public/brand/signature-inline.svg public/brand/signature-inline-dark.svg | Assinatura em linha, com mastro. Site e onde houver largura. |
| public/brand/signature-inline-no-pole.svg public/brand/signature-inline-no-pole-dark.svg | Assinatura em linha, sem mastro. Cabeçalho do painel e do app do motorista. |
| public/brand/email-mark.png | Bandeirola em bitmap, para e-mail. HTML de e-mail não renderiza SVG, e o letreiro ali é texto — ver seção 06. |