gera.

01

Conceito da marca

O gera existe pra tirar o profissional de social media do "criar do zero toda semana". A marca precisa transmitir: prático, direto, confiável — sem parecer corporativo ou frio.

02

Logotipo

O logo é só tipografia — não existe (e não precisa existir) um símbolo/ícone separado. A marca é o próprio nome.

Regras de uso

• Fonte do logotipo: Sora, peso 800 (ExtraBold), sempre minúsculo.
• O ponto final é sempre laranja (#c9743d), nunca da mesma cor do texto.
• Espaço de respiro mínimo ao redor do logo: altura de uma letra "g" em cada lado.
• Tamanho mínimo recomendado: 16px de altura da caixa alta, pra manter o ponto legível.
• Não fazer: não usar com maiúscula ("Gera"), não trocar a cor do ponto, não adicionar sombra, contorno ou efeito 3D, não esticar/distorcer.

03

Paleta de cores

Clique em qualquer cor pra copiar o hex. Essa é a paleta completa usada em todo o produto — não adicionar cores fora dessa lista sem necessidade real.

04

Tipografia

Duas famílias apenas. Nada de terceira fonte, nem pra números ou ícones de texto.

Escala de tamanhos usada

05

Ícones & estilo visual

O gera não usa um kit de ícones ilustrados. O estilo visual é minimalista: check-marks, pontos e cantos arredondados fazem o trabalho de "ícone".

• Check de lista: símbolo "✓" simples, cor verde (#3fa76b), nunca um ícone de check dentro de círculo colorido.
• Bullet de item bloqueado/em breve: ponto "•" cinza (#7c7a68) no lugar do check.
• Setas: seta de texto simples "→" no final de CTAs em texto ("Abrir o Gera Proposta →"), não ícone SVG.
• Se precisar de ícones de verdade (ex: dentro do app real — configurações, notificação, perfil): usar um set de line icons fino e monocromático (recomendado: Lucide ou Phosphor, peso "regular"/"light"), sempre na cor do texto ao redor — nunca colorido por si só.
• Avatar de usuário: círculo sólido na cor laranja com iniciais em branco, peso 700, não usar foto com borda decorativa.

06

Grid, espaçamento & cantos

07

Componentes de UI

Os blocos abaixo são os mesmos usados na versão web — reaproduzir com os mesmos valores no app nativo/mobile.

Barra superior + navegação

• Fundo olive fixo (sticky) no topo, sempre visível ao rolar.
• Aba ativa: texto branco 100% + sublinhado laranja de 2px. Abas inativas: branco a 62% de opacidade.
• Badge de plano no canto direito, sempre visível — reforça pro usuário que ele está num plano pago.

Card de ferramenta

• Título do card sempre na cor laranja (diferente do resto da marca, que usa laranja só como acento — aqui é regra fixa do card).
• Card desabilitado: opacidade 72%, sem hover/elevação, cursor padrão (não pode parecer clicável).

Botões

• Primário: fundo laranja, texto branco, sem borda. Usar só 1 por tela/seção.
• Secundário/ghost: transparente com borda cinza-clara, texto ink.
• Nunca usar o olive como cor de botão de ação — olive é reservado pra navegação/estrutura.

Moldura "de app" (onde cada ferramenta abre)

Essa moldura reforça a sensação de "aplicativo dentro do aplicativo" — cada ferramenta parece uma aba de navegador própria, mesmo sendo tudo a mesma plataforma.

08

Estrutura do aplicativo

Isso é o que já existe funcionando na versão web (protótipo), mais o que falta pra virar um produto completo com login e cobrança.

Já existe (protótipo web)

Falta pra virar produto (o que o dev precisa planejar)

09

Acesso & assinatura mensal

Você perguntou como controlar quem pagou e tem acesso — isso não é uma questão de identidade visual, é arquitetura do sistema. Aqui vai o caminho recomendado, em linguagem simples, pro seu amigo desenvolvedor levar daqui pra frente.

As 3 peças que precisam existir

• 1. Autenticação — sistema de login (e-mail/senha ou magic link) pra saber quem é quem. Ferramentas prontas: Supabase Auth, Firebase Auth, Clerk.
• 2. Cobrança recorrente — plataforma que cobra por mês automaticamente e avisa seu sistema quando alguém paga, atrasa ou cancela. Opções comuns no Brasil: Stripe Billing (internacional, mais robusto), ou Hotmart / Kiwify / Cakto (nacionais, mais simples de configurar, já lidam com Pix/boleto).
• 3. Controle de status — uma tabela no banco de dados ligando usuário → status da assinatura. É essa tabela que decide se a pessoa entra no app ou vê uma tela de "assinatura pendente".

Como os status costumam funcionar

A plataforma de cobrança avisa seu sistema automaticamente (isso se chama webhook) toda vez que o status de alguém muda — seu sistema só precisa "escutar" esse aviso e atualizar a tabela. Não precisa checar manualmente.

Fluxo simplificado

1. Pessoa cria conta (e-mail + senha)
2. É direcionada pro checkout (Stripe/Hotmart/Kiwify)
3. Paga → plataforma de pagamento avisa seu sistema (webhook)
4. Seu sistema marca essa conta como "ativo"
5. No login, o app checa: "esse usuário está ativo?"
   → sim: libera o dashboard
   → não: mostra tela "Assine pra continuar"

10

Tokens prontos (CSS)

Cole isso direto no projeto — são as variáveis reais usadas na versão web, prontas pra virar tokens no design system do app (Figma, Tailwind config, etc.).

:root{
  --cream:  #f7f4ec;   /* fundo principal   */
  --cream-2:#f2ece0;   /* fundo alternativo */
  --olive:  #454927;   /* cor primária      */
  --olive-dk:#363821;  /* hover / contraste */
  --ink:    #22231a;   /* texto principal   */
  --muted:  #7c7a68;   /* texto secundário  */
  --orange: #c9743d;   /* acento / CTA      */
  --peach:  #f0e2ce;   /* fundo de badge    */
  --green:  #3fa76b;   /* sucesso / incluso */
  --red:    #c0483a;   /* alerta / riscado  */
  --line:   #e4ddd0;   /* bordas            */
  --white:  #ffffff;   /* fundo de cards    */
}

font-family (títulos): 'Sora', sans-serif;   /* 600 / 700 / 800 */
font-family (corpo):   'Inter', sans-serif;  /* 400 / 500 / 600 */

radius-card:   14px;
radius-button: 8px;
radius-pill:   20px;
radius-frame:  16px;

container-max: 1180px;