# Klubs — Manual de marca

> Referência oficial da marca Klubs para pessoas e IAs: logotipo, versões, cores, tipografia e regras de uso.
> Versão web: https://brand.klubs.co · Este arquivo: https://brand.klubs.co/brand.md

Klubs é uma plataforma de cursos, comunidades, eventos e pagamentos para criadores e empresas. O nome é sempre escrito com inicial maiúscula em texto corrido (**Klubs**) e em minúsculas no logotipo (**klubs.co**).

## Resumo rápido

- Cores: Ink `#1D2027` (primária), Rocket Red `#FF4F4F` (destaque), Mist `#E9E9E9` (neutra).
- Fonte: **Inter** (Google Fonts).
- Logo preferencial: lockup colorido (`klubs-lockup-cor.svg`) sobre fundo claro.
- Em fundo escuro: versão clara (`-claro`). Em fundo claro ou colorido sem usar o vermelho: versão escura (`-escuro`).
- O ponto vermelho é a assinatura da marca: nunca mude a cor dele na versão colorida.
- Nunca distorça, rotacione, recolora, aplique sombra/contorno ou coloque o logo sobre fundo poluído.

## Logotipo

A marca tem três peças:

| Peça | Descrição | Quando usar |
|---|---|---|
| **Lockup** | Símbolo + wordmark lado a lado | Assinatura principal: sites, apresentações, materiais institucionais |
| **Wordmark** | O texto "klubs.co" | Espaços horizontais ou quando o símbolo já aparece por perto |
| **Símbolo** | "k." dentro de um círculo | Avatares, favicon, ícone de app, espaços quadrados |

### O ponto

O ponto vermelho (Rocket Red) aparece no símbolo, logo após o "k", e no ".co" do wordmark. É o único elemento vermelho do logo e não deve ser separado do restante da marca.

### Versões e arquivos

Cada peça existe em três versões. SVG é vetorial; PNG tem 2000 px de largura com fundo transparente.

| Peça | Versão | Cores | Usar sobre | SVG | PNG |
|---|---|---|---|---|---|
| Lockup | Colorida | Ink + Rocket Red | Fundos claros | https://brand.klubs.co/assets/logos/svg/klubs-lockup-cor.svg | https://brand.klubs.co/assets/logos/png/klubs-lockup-cor.png |
| Lockup | Clara | Mist | Fundos escuros | https://brand.klubs.co/assets/logos/svg/klubs-lockup-claro.svg | https://brand.klubs.co/assets/logos/png/klubs-lockup-claro.png |
| Lockup | Escura | Ink | Fundos claros e coloridos | https://brand.klubs.co/assets/logos/svg/klubs-lockup-escuro.svg | https://brand.klubs.co/assets/logos/png/klubs-lockup-escuro.png |
| Wordmark | Colorida | Ink + Rocket Red | Fundos claros | https://brand.klubs.co/assets/logos/svg/klubs-wordmark-cor.svg | https://brand.klubs.co/assets/logos/png/klubs-wordmark-cor.png |
| Wordmark | Clara | Mist | Fundos escuros | https://brand.klubs.co/assets/logos/svg/klubs-wordmark-claro.svg | https://brand.klubs.co/assets/logos/png/klubs-wordmark-claro.png |
| Wordmark | Escura | Ink | Fundos claros e coloridos | https://brand.klubs.co/assets/logos/svg/klubs-wordmark-escuro.svg | https://brand.klubs.co/assets/logos/png/klubs-wordmark-escuro.png |
| Símbolo | Colorida | Círculo Ink, "k" Mist, ponto Rocket Red | Qualquer fundo | https://brand.klubs.co/assets/logos/svg/klubs-simbolo-cor.svg | https://brand.klubs.co/assets/logos/png/klubs-simbolo-cor.png |
| Símbolo | Clara | Círculo Mist, "k." vazado | Fundos escuros | https://brand.klubs.co/assets/logos/svg/klubs-simbolo-claro.svg | https://brand.klubs.co/assets/logos/png/klubs-simbolo-claro.png |
| Símbolo | Escura | Círculo Ink, "k." vazado | Fundos claros e coloridos | https://brand.klubs.co/assets/logos/svg/klubs-simbolo-escuro.svg | https://brand.klubs.co/assets/logos/png/klubs-simbolo-escuro.png |

Pacote completo (.zip): https://brand.klubs.co/assets/klubs-logos.zip

Proporções: lockup e wordmark são horizontais (~4:1 e ~4.6:1); o símbolo é quadrado (1:1).

### Área de proteção e tamanho mínimo

- Medida de referência **x** = diâmetro do ponto vermelho do símbolo.
- Mantenha no mínimo **1x** livre em todos os lados do logo.
- Tamanho mínimo do lockup: **96 px** de largura (digital) / **25 mm** (impresso).
- Tamanho mínimo do símbolo: **24 px** / **6 mm**.
- Prefira sempre SVG.

## Cores

### Principais

| Nome | HEX | RGB | HSL | Papel |
|---|---|---|---|---|
| Ink | `#1D2027` | 29 32 39 | 222 15% 13% | Primária: textos, fundos escuros, logo |
| Rocket Red | `#FF4F4F` | 255 79 79 | 0 100% 65% | Destaque: o ponto, CTAs, alertas |
| Mist | `#E9E9E9` | 233 233 233 | 0 0% 91% | Neutra: logo em fundo escuro, superfícies |

### Apoio

| Nome | HEX | Papel |
|---|---|---|
| Paper | `#FAFAFA` | Fundo claro padrão |
| White | `#FFFFFF` | Cards e superfícies elevadas |
| Slate | `#686B73` | Texto secundário em fundo claro |
| Graphite | `#2F3137` | Superfícies elevadas em fundo escuro |

### Proporção

Ink ~55%, Mist/Paper ~35%, Rocket Red ~10%. O vermelho funciona porque é raro: use para o ponto, ações principais e destaques pontuais, nunca como cor de fundo dominante.

### Tokens CSS

```css
:root {
  --klubs-ink: #1D2027;
  --klubs-red: #FF4F4F;
  --klubs-mist: #E9E9E9;
  --klubs-paper: #FAFAFA;
  --klubs-white: #FFFFFF;
  --klubs-slate: #686B73;
  --klubs-graphite: #2F3137;
}
```

## Tipografia

- Família: **Inter** — https://fonts.google.com/specimen/Inter
- Fallback: `ui-sans-serif, system-ui, sans-serif`

| Nível | Peso | Tamanho de referência | Tracking |
|---|---|---|---|
| Display | 700 | 40–56 px | -0.035em |
| Título | 600 | 26 px | -0.02em |
| Subtítulo | 500 | 18 px | normal |
| Corpo | 400 | 15–17 px | normal |
| Legenda | 400 | 12 px | normal, cor Slate |

Detalhe de marca: títulos podem terminar com um ponto em Rocket Red (ex.: "Cores**.**"), ecoando o ponto do logo.

## Não faça

- Distorcer ou esticar o logo.
- Rotacionar o logo.
- Trocar as cores do logo (inclusive o ponto vermelho).
- Aplicar sombras, brilhos ou outros efeitos.
- Usar a versão sem contraste (ex.: logo escuro sobre fundo Ink).
- Aplicar sobre fundos poluídos, gradientes ou fotos sem contraste.
- Usar só o contorno do logo.
- Desrespeitar a área de proteção.

## Instruções para IAs

Ao gerar materiais, interfaces ou código com a marca Klubs:

1. Use apenas as cores listadas acima; Rocket Red só como destaque.
2. Use Inter como fonte.
3. Referencie os logos pelas URLs oficiais acima, sem recriar ou redesenhar o logotipo.
4. Escolha a versão do logo pelo fundo: colorida em fundo claro, clara em fundo escuro, escura em fundo colorido.
5. Escreva "Klubs" em texto corrido; "klubs.co" apenas como logotipo ou domínio.