Nascemos pra fazer
marketing do jeito novo.
A Fenice Lab é a agência que renasce em IA. Saímos da agência tradicional — Willian e Dante depois de anos lá dentro — porque o jogo mudou e a gente quis criar do zero o que vinha depois.
Vimos cliente pagando caro por agência grande, processo lento e relatório vazio. A gente quis o oposto: marca forte, performance medida e equipe enxuta com IA dentro do fluxo.
Nativa em IA do início ao fim. Conselho de 13 IAs especializadas (UX, copy, dev, tráfego, BI, jurídico) que apoia o time humano em cada decisão.
Identidade visual + portal do cliente + tráfego pago + relatório vivo. Tudo num só fluxo, mesma equipe, sem hand-off entre agências.
/* importe os tokens vivos do DS */ import './colors_and_type.css' // tokens --fen-* /* uso direto no CSS */ .btn { background: var(--fen-terra); color: var(--fen-avorio); } .card { border: 1px solid var(--fen-argilla); border-radius: var(--fen-r-lg); }
Voz em
uma palavra.
Como a Fenice fala — em cinco atributos. Cada um vem com uma frase real que a gente usa de verdade no Instagram, na proposta e na conversa com o cliente.
"Vamos juntos botar a sua marca pra renascer."
"Sua marca vira presença. Performance vira número."
"Falo com você do mesmo jeito que falo com a Adelia. Sem firula corporativa."
"ROAS 16,93× na Suprema em maio. Não é promessa — é o número que rodou."
"3 entregas no mês. Ponto. Sem "sinergia", sem "disrupção"."
Terra, terracota,
e nada de azul.
A regra é simples: Terra #B23A2E como primária, Terracota #CC7A4D como acento único, neutros quentes pra todo o resto. Sem azul, sem dourado, sem segunda cor de destaque.
Voz em
tipografia.
Fraunces no display (serifa moderna, 900 italic para acento). Inter pra tudo de UI e corpo de leitura. JetBrains Mono só pra número, código e dado. Nunca uma segunda sans alternativa.
62 / 900
34 / 900
20 / 600
15 / 1.6
11 / caps
Como cada tipografia se comporta em peça real. Use estas combinações como receita pronta para post, story e impresso.
presença diária.
MARCA
FOGO
POST
Plano-foco
Fraunces italic 800 para a frase-marca · Inter 500 para a assinatura. Centralizar no Caffè. Espaço generoso.
Mistura Fraunces sólido com Fraunces outline (text-stroke 2px terracota). Funciona sobre fundo escuro ou foto escurecida.
Eyebrow Inter 800 caps + Fraunces para palavra-chave + preço em Fraunces destaque. Fundo terra ou terracota quente.
1 só fonte display por peça · corpo sempre Inter · JetBrains Mono só pra número/código (nunca em frase) · italic só pra acentuar.
Duas displays competindo · Inter no headline · cor além do terroso · texto longo em italic · acento dourado (proibido na Fenice).
Forma, raio,
sombra.
Escala 4pt em todo o sistema. Cantos arredondados, nunca pílula (exceto tag de status). Sombras quentes na base Caffè — sem dropshadow cinza-azulado.
↔ Espaçamento
◐ Cantos / Raios
◉ Sombras quentes
Peças vivas
da interface.
Alvo de toque ≥ 44px, anel de foco terracota e raio padrão de 12px. CTAs sobre gradiente fogo; Ink só pra ação secundária forte.
| Cliente | Status | Posts no mês |
|---|---|---|
| SSuprema Pizza | Ativo | 14 |
| AArena Gourmet | Em setup | 6 |
Peças vivas
da interface.
Quatro padrões reusados em todos os produtos — do portal do cliente ao painel da agência.
O wordmark
e a flor da vida.
Os dois sinais que carregam a Fenice por todo o sistema. O wordmark em Fraunces 900 com o ponto sempre em terracota. O grafismo da Flor da Vida nas 15 variações abaixo — todas dentro dos tokens terrosos, nada fora.
Da versão base às variações 3D, glow, vidro, neon, textura, editorial e animadas. Todas usam exclusivamente os tokens terrosos.
✓ Faça
- "Bom dia, Dani"
- "1 post esperando você."
- "+31% de seguidores no mês"
✕ Evite
- "Prezado usuário"
- "Você possui 1 pendência."
- "Otimização cross-funnel"
Até onde
a flor reduz.
Abaixo do mínimo a Flor da Vida perde definição — os círculos se sobrepõem e o símbolo vira mancha. Respeite os limites por suporte.
Até onde a
marca vai.
A Fenice é precisa: tom caloroso, paleta restrita, tipografia disciplinada. O que cabe dentro da marca, e o que quebra ela.
✓ O que a Fenice faz
- Falar de "você" — sempre. Tom direto, caloroso, brasileiro.
- Usar Terracota (#CC7A4D) como acento único. Uma só cor de destaque por peça.
- Fotografia em luz quente — luz da hora dourada, tons terrosos, gente de verdade.
- Mostrar dado real (ROAS, número, cliente, mês). Prova vence promessa.
- Fraunces para o que tem peso editorial. Inter para tudo de UI e leitura.
- Espaço generoso, hierarquia clara, respeito ao olhar.
✕ O que a Fenice não faz
- Dourado em hipótese alguma — é a cor da Arena, não da Fenice.
- Azul, ciano, verde corporativo. Quebram a paleta terrosa.
- Mais de uma cor de destaque na mesma peça (terracota + brasa não convivem).
- Fonte sans alternativa. Inter é único. Helvetica/Roboto não substituem.
- Tom corporativo: "soluções de marketing", "sinergias", "ROI 360°".
- Imagem de banco genérica, escritório clichê, gente fake em conferência.
Desktop, tablet
e celular.
Sistema de breakpoints, grid e regras de layout por produto. Painel da Agência = desktop-first. Portal do Cliente = mobile-first. Sites públicos = fluidos.
| Token / nome | Largura | Dispositivos típicos | Direção |
|---|---|---|---|
| --fen-bp-sm · sm | ≤ 600 px | Celular (portrait) | mobile-first |
| --fen-bp-md · md | 601 – 880 px | Celular (landscape) · tablet pequeno | adaptativo |
| --fen-bp-lg · lg | 881 – 1200 px | Tablet · laptop 13" | adaptativo |
| --fen-bp-xl · xl | ≥ 1201 px | Desktop · monitor 16"+ (padrão do Painel) | desktop-first |
| Breakpoint | Colunas | Gutter | Margin lateral |
|---|---|---|---|
| sm (≤ 600 px) | 4 colunas | 12 px | 16 px |
| md (601–880 px) | 8 colunas | 16 px | 24 px |
| lg (881–1200 px) | 12 colunas | 20 px | 28 px |
| xl (≥ 1201 px) | 12 colunas | 24 px | 32 px (+ container 1200 px) |
- Layout com sidebar fixa (232 px) + main fluid
- xl (≥1201 px): visão completa — sidebar visível
- lg (881–1200 px): sidebar colapsa em 72 px (só ícones), toggle «/»
- md/sm (≤880 px): sidebar escondida — nav vira menu hambúrguer sobreposto
- Frame: 1280×800 px no desktop; fluido no tablet
- Tabelas e grids: ≤ md viram lista empilhada
- Frame de celular (390×844 px) centralizado no desktop
- Navegação via bottom-nav (5 abas)
- Scroll vertical único, sem sidebar
- Em desktop: o frame do celular flutua sobre fundo Argilla
- Touch targets mínimos: 44×44 px
- Fonte mínima: 14 px · espaçamento generoso
- Container: max 1200 px, margens adaptativas
- Hero: texto em clamp(), imagem full-bleed
- sm: 1 coluna, padding 16 px, fontes reduzidas via clamp
- md: 1–2 colunas, padding 24 px
- lg+: 2–3 colunas, padding 32 px
- Deck comercial: 1920×1080 fixo (apresentação, não web)
/* mobile-first (portal, sites) */
@media (min-width: 601px) { /* md */ }
@media (min-width: 881px) { /* lg */ }
@media (min-width: 1201px) { /* xl */ }
/* desktop-first (painel da agência) */
@media (max-width: 1200px) { /* lg — sidebar colapsa */ }
@media (max-width: 880px) { /* md — sidebar some */ }
@media (max-width: 600px) { /* sm — layout 1 col */ }