A história. Curta, porque a marca é direta.

Klubora = klub (raiz germânica antiga, "clube") + -ora (sufixo latino que marca o momento, como em agora, embora, aurora). Significado literal: o momento do clube — o instante em que a casa se abre.

Os três significados da íris

O símbolo da Klubora é uma íris. Três lâminas triangulares irradiando de um miolo indigo. Não é enfeite — é definição. A íris carrega três funções que a marca opera:

Síntese narrativa

Toda organização baseada em membros gira em torno de um único instante: quem entra, quem pertence, quem é reconhecido pela casa. Por séculos, esse momento foi feito à mão — papel, carimbo, livro de registro. Depois, planilha. Depois, ERP dos anos 2000. Klubora é a primeira plataforma construída para operar esse momento como software moderno deveria.

Posicionamento de mercado

Klubora é o sistema operacional para organizações baseadas em membros — a alternativa moderna brasileira aos ERPs antigos, com app na marca do cliente, cobrança recorrente integrada ao Asaas e compliance LGPD por organização.

Best-fit customer (ICP locked)

• Quem. Diretor, presidente ou gerente de operações.
• Onde. Organização estabelecida — clube, associação, comunidade, federação, academia, co-working.
• Tamanho. 200 a 5.000 membros pagantes.
• Por quê. Cobrança recorrente + compliance (LGPD, NFS-e) + necessidade de presença digital própria.

Taglines

Sistema do logo. Símbolo, wordmark, lockups.

A marca da Klubora é composta por dois elementos: o símbolo Iris e o wordmark "klubora". Eles operam isolados ou em lockup. O símbolo é a forma reconhecível da marca; o wordmark, sua voz tipográfica. Tudo o resto é regra de uso.

2.1 Símbolo · Iris

Geometria canônica

O símbolo é construído em viewBox 80×80. Três lâminas triangulares idênticas, definidas pelo path M 40,40 L 71,22 L 40,4 Z, rotacionadas em 0°, 120° e 240° em torno do centro. Opacidades decrescentes 1.0 / 0.85 / 0.7 sobre a cor base. Miolo: circle cx="40" cy="40" r="6" em #3D4EE8 (klu-indigo). O miolo nunca muda de cor.

<svg viewBox="0 0 80 80">
  <path d="M 40,40 L 71,22 L 40,4 Z" fill="#0E1116"/>
  <path d="M 40,40 L 71,22 L 40,4 Z" fill="#0E1116"
        transform="rotate(120 40 40)" opacity="0.85"/>
  <path d="M 40,40 L 71,22 L 40,4 Z" fill="#0E1116"
        transform="rotate(240 40 40)" opacity="0.7"/>
  <circle cx="40" cy="40" r="6" fill="#3D4EE8"/>
</svg>

Variantes de cor

2.2 Wordmark

O wordmark é a palavra klubora — sempre minúscula — em Inter Medium 500. Tracking em -0.012em. Sem ligaduras, sem ornamentos, sem ajustes ópticos manuais por glyph. A consistência tipográfica é parte da identidade.

Wordmark sozinho — quando usar

• Cabeçalho de documento longo onde o símbolo ficaria pequeno e morto.
• Materiais editoriais com tom de revista — capa de whitepaper, post longo, relatório anual.
• Body copy onde a marca é mencionada inline ("...Klubora opera...").
• Contextos onde já existe o símbolo em outro lugar da peça (cabeçalho + assinatura no rodapé).

2.3 Lockups

Cinco configurações canônicas. Cada uma tem uso específico — e nenhuma é "default decorativo". Use o lockup que serve a peça.

2.4 Clear space

O lockup precisa de respiro. A regra é: spacing mínimo ao redor = altura do símbolo × 0.5. Para uso premium (capa de deck, hero, contracapa), use 1× a altura do símbolo. Nada deve invadir essa zona — nem texto, nem outro logo, nem borda.

2.5 Tamanhos mínimos

2.6 Do's

2.7 Don'ts

Sistema de cor. Restrito por desenho.

A paleta da Klubora é deliberadamente pequena: uma primária quase-preta, um único accent indigo, neutros temperados e quatro semânticas. Restrição é o mecanismo. A primária funciona como moldura neutra para coexistir com a marca de cada tenant — qualquer organização ao lado dela vibra, nenhuma briga.

3.1 Tabela completa

Primária e accent

Neutros

Semânticas

3.2 Combinações aprovadas

Cada par tem contraste WCAG aferido. Verde = passa AAA, azul = passa AA, branco = passa AA Large only.

3.3 Combinações proibidas

3.4 Aplicação por contexto

Texto

• Primário: klu-ink em fundo paper.
• Secundário: klu-stone em fundo paper.
• Disabled: klu-stone com 50% opacidade.
• Inverso: klu-paper em fundo ink ou graphite.

CTA

• Primário: background klu-ink, texto klu-paper. Cor "calma" para CTA — autoridade sem cor.
• Accent (uso pontual): background klu-indigo, texto klu-paper. Em pricing, focus ring, link inline.
• Secundário: background transparente, borda klu-fog, texto klu-ink.
• Ghost: sem borda, texto klu-ink, hover muda fundo para fog.

Backgrounds

• Light mode: paper. Não usar branco puro #FFFFFF.
• Dark mode: ink (canvas), graphite (surface elevado).
• Hero institucional: ink full-bleed com paper para texto principal.

Badges, chips, status

Padrão: cor sólida do foreground, fundo na mesma cor a 12% de opacidade, borda na mesma cor a 30%.

// Pattern (success badge)
background: rgba(30, 142, 92, 0.12);
color: #1E8E5C;
border: 1px solid rgba(30, 142, 92, 0.30);

Tipografia. Inter no corpo. Instrument no manifesto.

Klubora é uma marca tipográfica antes de qualquer coisa. Inter faz o trabalho diário — UI, body, dashboard, copy de marketing. Instrument Serif aparece quando a marca conta uma história — manifesto, capa de relatório, hero institucional. Nenhuma terceira fonte é tolerada.

4.1 Famílias

Alternativa premium (futura): Söhne (Klim Type Foundry, comercial) substitui Inter. Mantém o mesmo desenho e métricas próximas. Adoção depende de orçamento — Inter é a régua oficial até decisão contrária.

Importação

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

4.2 Escala tipográfica

4.3 Disciplina de pesos

Use apenas 400 (Regular), 500 (Medium) e 600 (Semibold). Nunca Bold (700).

A restrição é parte da identidade. Bold é teatral demais para Klubora; semibold já carrega autoridade. Em UI moderna de B2B sério (Stripe, Linear, Vercel), o pico fica em 600 — Klubora segue o mesmo princípio.

4.4 Pairings

Default — Inter + Inter

Editorial — Instrument Serif + Inter

Técnico — Inter + JetBrains Mono

Voice & tone. Como Klubora fala.

Klubora não fala como startup procurando validação, nem como ERP da década passada. Fala como empresa que opera — direta, técnica quando precisa, próxima quando cabe, madura sempre. Esta é a régua de copy oficial.

5.1 Cinco adjetivos-âncora

1. Claro. Frase curta. Palavra concreta. Zero rodeio.
2. Confiante. Afirma sem se desculpar. Não usa "achamos que talvez".
3. Próximo. Fala com gestor, não pra gestor. PT-BR sem corporativês.
4. Técnico-acessível. Asaas, NFS-e, RBAC, push — pelo nome real, sem virar manual.
5. Maduro. Tom de empresa que opera, não de startup pedindo validação.

5.2 Do's

5.3 Don'ts

5.4 Glossário

Lista enforced. O revisor final faz busca por palavras proibidas antes de publicar qualquer copy.

Vocabulário Iris (camada poética)

Quando a copy assume tom institucional ou de manifesto, o vocabulário Iris substitui terminologia de SaaS genérico. Use com economia — em momentos de impacto, não em micro-copy.

5.5 Pronome e pessoa

• "Você" com gestor. Segunda pessoa direta. Sempre.
• "A gente" em redes sociais e blog. Coloquial controlado.
• "Klubora" em copy institucional. Nunca "nós da Klubora".

5.6 Sobre emojis

• Em copy formal (home, decks, e-mail outbound, contrato): zero.
• Em redes sociais: um, no máximo, e só se substituir uma palavra com economia. Nunca decorativo.

5.7 Quando usar cada tagline

Imagery direction. Editorial documental.

Klubora documenta operação real, não cenários encenados. Foto editorial documental, ilustração técnica, ícones de linha. Recusa total a estoque sorridente, blob illustration e cenas montadas. Cada imagem precisa parecer ter sido feita para esta peça, não comprada num banco.

6.1 Fotografia

Estilo

• Editorial documental. Pessoas reais em contexto de gestão — mesa de diretoria, hall de clube, arquibancada vazia, cozinha de evento, escritório de operações.
• Luz natural. Janela como fonte primária. Sem softbox de produto.
• Profundidade rasa (f/2.8 ou equivalente em mobile). Foco no humano, fundo desfocado.
• Pessoas presentes mas não posadas. Gestão vista por dentro. Sem sorriso para câmera.
• Dessaturação -15 a -25%. Drift quente em pós (+200K) que conversa com paper.
• Crop: 16:9 e 4:5.

Referências de tom

• Apartamento Magazine — interiores documentais, luz natural, gente em contexto.
• Stripe Press — direção fotográfica de capa de livro: editorial, calma, controlada.
• Documentário de longa-metragem — não publicidade.

Don't

6.2 Ilustração

Estilo

• Diagramas técnicos editoriais — linhas finas (1.5px), monocromáticas em klu-ink ou bicrômicas (klu-ink + klu-indigo).
• Não personagens. Ilustração explica conceito (fluxo, sistema, arquitetura), não conta uma história sentimental.
• Geometria + tipografia. Onde for útil, anotar com Inter ou JetBrains Mono.

Referências

• MIT Press — capas e diagramas internos.
• Stripe Press — ilustração de livro técnico.
• Increment magazine — diagramas de arquitetura de software.
• Pentagram para Mastercard / Slack / Lyft — diagrama editorial.

Don't

6.3 Iconografia

Sistema

• Lucide React como base. Já em uso no admin. Cobertura ampla, qualidade alta.
• Stroke 1.5px (não o default 2px da Lucide). Ajuste no override CSS.
• Estilo linha apenas, exceto estados ativos pontuais.
• Tamanhos canônicos: 14, 16, 20, 24, 32px.
• line-cap round, line-join round. ViewBox 24×24, padding ótico interno de 2px.

Quando criar ícone próprio

Quando um conceito de produto não tem ícone na Lucide (e.g. íris). Mantenha as mesmas regras: stroke 1.5px, line-cap round, viewBox 24×24, monocromático.

Motion principles. Animação serve à compreensão.

A Klubora se move com economia. Animação não é decoração — é confirmação de estado, aparição de overlay, resposta a ação. Se o usuário não aprende algo com o movimento, ele não deve existir.

7.1 Easing de marca

--ease-brand: cubic-bezier(0.32, 0.72, 0, 1);

Curva "calm-snap": início rápido, desaceleração longa. Sentido: software responsivo mas que nunca parece apressado. Esta é a única curva oficial para easing — substitui defaults (linear, ease-out, ease-in-out) em qualquer transição de produto.

7.2 Durações

7.3 Quando animar

Aplicações. Como a marca vive.

Esta é a régua de uso da marca em cada superfície real — do site institucional ao "Powered by" no rodapé do app de tenant. Cada bloco mostra o canônico, o que ajusta e o que não toca.

8.1 Web — site klubora.com

• TopNav: lockup horizontal à esquerda (44px altura do símbolo), links centro em klu-stone, CTA primário à direita.
• Hero: headline em h1 (Inter Medium 500) ou h1 alternativo institucional em Instrument Serif. Sub em body-lg klu-stone. Dois CTAs.
• Footer: wordmark à esquerda + colunas (Produto, Empresa, Legal, Contato). Copyright e links menores em klu-stone.

8.2 App admin · dashboard

• Sidebar: klu-graphite full-bleed. Lockup horizontal no topo (paper). Lista de navegação em body-sm.
• Active state: background rgba(255,255,255,0.06), dot interno em klu-indigo.
• Main: background paper. h4 do painel sem text-transform. Stat cards com border klu-fog.

8.3 Mobile · iOS + Android

8.4 Marketing · sales deck

• Capa: wordmark grande + tagline em klu-paper sobre klu-ink. Símbolo opcional como mark-only no canto superior.
• Slide tese: headline em Instrument Serif 56px ("Um clube é uma organização, não um chat"). Sub em Inter body-lg klu-stone.
• Slide pricing: card único centralizado em klu-paper, número grande (R$ 7), unidade em mono klu-stone.
• Footer de slide: wordmark pequeno + número de slide em mono.

8.5 Marketing · social

• Instagram feed (1080×1080): quote em Instrument Serif centralizado em klu-paper, mark-only do símbolo no canto inferior direito a 32×32. Margem mínima 80px.
• LinkedIn cover (1584×396): wordmark grande + tagline funcional. Lado direito reservado para imagem editorial dessaturada.
• X cover (1500×500): minimal — Iris centralizada e wordmark abaixo, ambos em klu-paper sobre klu-ink.
• Story (1080×1920): apenas headline em Instrument Serif + Iris no rodapé. Sem decoração extra.

8.6 E-mail signature

• Tabela HTML compatível com Outlook (sem flexbox, sem grid CSS).
• Símbolo Iris em SVG inline ou PNG @2x. Lockup horizontal opcional.
• Nome em Arial 14px (Inter falha no Outlook), klu-ink.
• Cargo em klu-stone 12px. Sem ícones decorativos, sem banners de campanha.

8.7 Print · papelaria

• Cartão de visita (90×55mm): minimal. Frente com Iris centralizada + wordmark. Verso com nome, cargo, e-mail e site em klu-stone alinhados à esquerda.
• Papel timbrado: Iris no header (15mm), dados de empresa no footer em mono 10pt klu-stone. Margens generosas (25mm).
• Pasta de proposta comercial: capa em klu-paper texturizado, lockup vertical a 60mm de altura centralizado, sem mais nada.

8.8 "Powered by Klubora" para tenants

• Light: em fundo claro do tenant. Lockup completo em klu-stone 60% opacidade.
• Dark: em fundo escuro do tenant. Lockup paper a 70% opacidade. Miolo continua indigo.
• Mono: reprodução técnica/fac-símile. Sem cor — para fax, stamp, materiais impressos a uma cor.

Restrições de uso pelo tenant

8.9 Merchandise (referência futura)

Princípios para quando merchandise for produzido. Não obrigatório no V1.

• T-shirt: Iris pequena (40×40mm) na altura do peito, à esquerda. Cor única (paper em ink, ink em paper). Sem texto.
• Mug: wordmark horizontal centralizado. Material cerâmica fosca. Sem gradiente.
• Sticker: Iris isolada, die-cut. Distribuição interna do time + parceiros.
• Notebook: capa kraft com Iris debossada (sem cor). Páginas dot-grid.

Co-branding. Klubora coexiste, não compete.

A primária quase-preta da Klubora foi escolhida por uma razão: conviver com a marca de cada tenant sem brigar. Onde Stripe é roxo institucional e Linear é cinza-edgy, Klubora é tinta editorial neutra. Quando aparece junto de cliente, segue regras estritas de hospedagem.

9.1 Princípio host-friendliness

Klubora aparece dentro do ecossistema visual de cada tenant — clube com vermelho intenso, associação com azul-marinho, comunidade fitness com laranja. Se a primária Klubora fosse uma cor saturada, cada coexistência viraria conflito cromático. klu-ink como primária é uma escolha de moldura, não de protagonismo.

O "Powered by Klubora" e o painel admin se comportam como tipografia de catálogo museológico: presença reconhecível por forma, não por cor. A coexistência é desenhada — não acidental.

9.2 Quando Klubora aparece junto de marca de tenant

9.3 Quando Klubora NÃO aparece

9.4 Exemplos de coexistência

Asset inventory. Onde encontrar o que.

Todos os assets oficiais da Klubora vivem em docs/brand/assets/. Tokens em código vivem em apps/site/lib/tokens.ts e apps/site/app/globals.css. Esta é a única fonte de verdade.

10.1 Onde encontrar

10.2 Naming convention

10.3 Tokens em código

// apps/site/lib/tokens.ts
export const colors = {
  ink: "#0E1116",
  indigo: "#3D4EE8",
  paper: "#FAFAF7",
  fog: "#E8E8E3",
  stone: "#6B6B66",
  graphite: "#1F2228",
  success: "#1E8E5C",
  warning: "#B7791F",
  error: "#C44545",
} as const;

export const fontSize = {
  display: "4.5rem",
  h1: "3rem",
  h2: "2.25rem",
  h3: "1.5rem",
  h4: "1.25rem",
  h5: "1.0625rem",
  h6: "0.875rem",
  bodyLg: "1.125rem",
  body: "1rem",
  bodySm: "0.875rem",
  caption: "0.75rem",
  mono: "0.875rem",
} as const;

export const easing = {
  brand: "cubic-bezier(0.32, 0.72, 0, 1)",
} as const;

10.4 License & ownership

• Símbolo Iris e wordmark Klubora. Todos os direitos reservados, Klubora 2026.
• Inter. SIL Open Font License 1.1 (OFL) · uso comercial livre.
• Instrument Serif. SIL Open Font License 1.1 (OFL) · uso comercial livre.
• JetBrains Mono. SIL Open Font License 1.1 (OFL) · uso comercial livre.
• Trademark. Marca "Klubora" — depósito INPI BR pendente nas classes 9, 35, 41, 42 e 45. Ver 01-trademark-audit-klubora.md e 05-registration-runbook.md.

10.5 Como usar este manual

• Designers: use o sumário lateral. Para cada novo material, abrir o capítulo da superfície (Web, App, Print) e o capítulo da régua (Cor, Tipografia).
• Marketing/copy: capítulo 5 é a régua. Fazer busca por palavra proibida antes de publicar.
• Parceiros e tenants: capítulo 8.8 e capítulo 9 cobrem o "Powered by Klubora" e regras de coexistência.
• Devs: ler 10-brand-manual.md em paralelo a este HTML. Os tokens autoritativos vivem em apps/site/lib/tokens.ts.
• Em conflito, este manual prevalece sobre qualquer documento anterior. Para mudança, abrir issue interna no repo.

Klubora · Brand Manual · 2026 · Volume 1
Documento vivo · revisão 2026-04-27