LC
Brandbook v1.0 · 2026
Executa em minutos.
Time livre para
o que importa.
Implementadora de IA para times de marketing e vendas. Não é consultoria — são protótipos funcionando.
2min
WhatsApp → campanha no ar via Meta API
40s
Criativos gerados e prontos para publicar
0h
Do time em execução operacional
1
Pessoa + IA = resultado de um time inteiro
Visão Geral
O que está neste brandbook
Fonte única de verdade para a identidade da Lory Cantelli. Serviços de implementação de IA — fase 1.
Status do Sistema
Estratégia de Marca100%
Sistema de Cores100%
Tipografia100%
Design Tokens90%
Voz & Tom100%
Componentes UI30%
Marca
Estratégia de Marca
Posicionamento, onlyness, tribo e o inimigo da marca — aplicando o Zag Framework (Marty Neumeier).
Onlyness Statement
"Sou a única implementadora de IA que entrega protótipos funcionando —
não consultoria, não teoria — para empresários que querem resultado antes de acreditar."
não consultoria, não teoria — para empresários que querem resultado antes de acreditar."
TRIBO
O Empresário
Tem time de marketing/vendas. Já tem resultado. Acredita em IA. Não sabe por onde começar.
INIMIGO
Processo Operacional
Times presos em execução manual. Hype de IA sem entrega. Cursos sem protótipo.
POSIÇÃO
Implementadora
Não consultora. Não educadora. Executa. Uma pessoa + IA que entrega mais do que um time.
Diferenciação Competitiva
| Agências | Consultores de IA | Lory Cantelli | |
|---|---|---|---|
| Entrega | Time grande | Recomendações | Protótipo funcionando |
| Velocidade | Semanas | Dias de análise | Minutos / mesmo dia |
| Quem faz | Time anônimo | Consultor | A Lory + IA |
| Risco | Alto | Médio | Baixo — vê antes |
Marca
Princípios de Design
O que guia todas as decisões — aplicando Functional vs. Perceptual Patterns (Alla Kholmatova).
01
Resultado antes da explicação
Mostre o resultado antes de explicar o método. O empresário precisa sentir "isso funciona" antes de entender como.
02
Direto ao ponto
Elimine tudo que não contribui para ação ou compreensão. O tempo do empresário é o recurso mais escasso.
03
Concreto, nunca abstrato
Toda afirmação tem número, tempo ou exemplo real. Sem números = sem credibilidade.
04
Humano com tecnologia
A IA é ferramenta. A Lory é protagonista. Nunca o contrário — o empresário contrata uma especialista.
Marca
Voz & Tom
Voz é quem você é. Tom é como você se adapta ao contexto. Aplicando framework Kate Kiefer Lee.
VOZ
Direta
Vai ao ponto. Sem aquecimento antes de dizer o que precisa ser dito.
VOZ
Concreta
Só fala o que pode provar. Se não tem número ou exemplo, não fala.
VOZ
Acessível
Fala com o empresário, não com o dev. Zero jargão de IA.
VOZ
Responsável
Assina o que faz. É a Lory — não "nossa equipe" ou "nossa tecnologia".
Exemplos
✓ Fazer
"Seu time perde 3 horas por dia em tarefas que a IA faz em minutos."
✕ Não fazer
"No cenário atual, muitas empresas enfrentam desafios de produtividade."
✓ Fazer
"Campanha no ar em 2 minutos. Aqui está o vídeo."
✕ Não fazer
"Resultados surpreendentes em tempo recorde com nossa solução de IA."
✓ Fazer
"Eu implementei isso para um cliente de e-commerce semana passada."
✕ Não fazer
"Nossa solução foi aplicada com sucesso em diversos clientes do setor."
Fundações
Sistema de Cores
Preto como base. Gradiente azul→roxo como único elemento de cor — o que o torna memorável. Aplicando Vignelli Canon.
click to copy
brand-black
#000000 · rgb(0,0,0)
click to copy
brand-white
#ffffff · rgb(255,255,255)
click to copy
brand-gradient
#0693e3 → #9b51e0
click to copy
brand-blue
#0693e3 · rgb(6,147,227)
click to copy
brand-purple
#9b51e0 · rgb(155,81,224)
click to copy
neutral-700
#333333 · Backgrounds de cards
click to copy
semantic-success
#00d084 · Confirmações
click to copy
semantic-error
#cf2e2e · Erros, alertas
click to copy
neutral-100
#f3f3f3 · Backgrounds claros
Fundações
Tipografia
Inter — família única, 9 pesos. Escala modular Perfect Fourth (1.333). Aplicando Elements of Typographic Style.
Lory Cantelli
Executa em minutos.
Resultado antes da explicação.
Protótipos funcionando.
Um empresário, um time liberado.
Não é consultoria. Não é curso. É implementação — você vê o protótipo funcionando antes de decidir qualquer coisa.
Texto secundário, notas e metadados de suporte.
Label de Seção · Eyebrow · Metadado
Fundações
Espaçamento & Grid
Base unit 8px. Todo espaçamento é múltiplo de 8. Aplicando Grid Systems (Müller-Brockmann).
space-1
8px
Gaps mínimos, padding interno
space-2
16px
Padding de componentes padrão
space-3
24px
Padding de cards, gaps entre grupos
space-4
32px
Separação de blocos relacionados
space-6
48px
Entre seções relacionadas
space-8
64px
Entre seções independentes
space-12
96px
Respiro de hero, seções principais
Grid Responsivo
MOBILE
4 colunas
< 768px · Gutter 16px · Margem 16px
TABLET
8 colunas
768–1024px · Gutter 20px · Margem 32px
DESKTOP
12 colunas
> 1024px · Gutter 24px · Max 1280px
Fundações
Design Tokens
Fonte única de verdade para código. Nomeados por propósito, nunca por valor visual. Aplicando Design Token Taxonomy (Jina Anne).
Cores
| Token | Valor | Uso | ||
|---|---|---|---|---|
| --brand-primary | #0693e3 | Ações principais, links, identidade | ||
| --brand-secondary | #9b51e0 | Ponta do gradiente, destaque | ||
| --text-default | #ffffff | Texto sobre fundos escuros | ||
| --background-primary | #000000 | Background principal | ||
| --background-card | #333333 | Cards e superfícies elevadas |
Tipografia
| Token | Valor | Uso | |
|---|---|---|---|
| --font-family | 'Inter', sans-serif | Única família — todos os elementos | |
| --text-base | 16px / 1rem | Body padrão | |
| --text-h1 | 40px / 800 | Título principal de página |
Espaçamento
| Token | Valor | rem | |
|---|---|---|---|
| --space-1 | 8px | 0.5rem | |
| --space-2 | 16px | 1rem | |
| --space-4 | 32px | 2rem | |
| --space-8 | 64px | 4rem |
Diretrizes
Do & Don't
Guia rápido de uso correto da identidade da marca.
Comunicação
✓ Comunicação
✓ Abrir com resultado concreto
✓ Números e tempo real ("40 segundos")
✓ Nomear quem fez ("Eu implementei...")
✓ Terminar com o que muda pro empresário
✓ Números e tempo real ("40 segundos")
✓ Nomear quem fez ("Eu implementei...")
✓ Terminar com o que muda pro empresário
✕ Comunicação
✕ Abrir com contexto longo
✕ Termos vagos ("rapidamente")
✕ Esconder autoria ("nossa solução")
✕ Terminar com o que a tecnologia faz
✕ Termos vagos ("rapidamente")
✕ Esconder autoria ("nossa solução")
✕ Terminar com o que a tecnologia faz
Visual
✓ Visual
✓ Fundo preto como padrão
✓ Gradiente no CTA principal
✓ Texto branco sobre fundo escuro
✓ Espaçamento múltiplo de 8px
✓ Inter em todos os textos
✓ Gradiente no CTA principal
✓ Texto branco sobre fundo escuro
✓ Espaçamento múltiplo de 8px
✓ Inter em todos os textos
✕ Visual
✕ Fundo branco como padrão
✕ Gradiente em todos os elementos
✕ Texto cinza sobre fundo preto
✕ Valores arbitrários de padding
✕ Roxo ou azul isolados (só gradiente)
✕ Gradiente em todos os elementos
✕ Texto cinza sobre fundo preto
✕ Valores arbitrários de padding
✕ Roxo ou azul isolados (só gradiente)
Conteúdo
✓ Publicar
✓ Cases com resultado em tempo e R$
✓ Vídeos de protótipos funcionando
✓ Demonstrações reais (antes/depois)
✓ Diagnóstico de problema reconhecível
✓ Vídeos de protótipos funcionando
✓ Demonstrações reais (antes/depois)
✓ Diagnóstico de problema reconhecível
✕ Não publicar
✕ Dicas genéricas de IA
✕ Conteúdo teórico sem entrega
✕ Rankings de "melhores ferramentas"
✕ Tutoriais técnicos de ferramentas
✕ Conteúdo teórico sem entrega
✕ Rankings de "melhores ferramentas"
✕ Tutoriais técnicos de ferramentas
Brandbook — Marca
Pitch Deck
A história da marca em slides. Use como base para apresentações de vendas, parcerias e onboarding de clientes.
Brandbook — Marca
Logo
O logo da Lory Cantelli é tipográfico — o nome completo em Tasa Orbiter Display, weight 800. Sem ícone separado na fase 1.
Lory Cantelli
Lory Cantelli
Lory Cantelli
Lory Cantelli
Regras de Uso
✓ Correto
Use sempre a fonte original — Tasa Orbiter Display, 800. Mantenha o kerning padrão.
✓ Correto
Área de respiro mínima: 1× a altura da letra "L" em cada lado do logo.
✓ Correto
Tamanho mínimo digital: 120px de largura. Impresso: 30mm.
✗ Errado
Nunca distorça ou esticue o logo. Sempre escale proporcionalmente.
✗ Errado
Não aplique sombra, contorno ou efeitos sobre o logo.
✗ Errado
Não use o gradiente em fundos claros — falta contraste. Use versão preta.
Brandbook — Marca
Icons
Sistema de ícones da marca. Fase 1 usa emojis curados + ícones outline da biblioteca Lucide (24px, stroke 1.5px).
Ícones de Marca — Emojis Curados
🤖IA Agent
⚡Velocidade
🎯Resultado
🔁Automação
📊Dados
✉️Copy
💬Conversas
🚀Lançamento
🧠Estratégia
⚙️Sistema
💡Insight
📱Mobile
🎨Criativo
📈Crescimento
🔒Segurança
🌐Digital
Diretrizes de Estilo
Biblioteca Recomendada
Lucide Icons — outline, 24px base, stroke-width 1.5px. Estilo limpo e técnico, compatível com a identidade da marca.
Regras de Uso
Sempre 24px (UI) ou 20px (inline texto). Cor: var(--n200) padrão, var(--blue) destaque, var(--white) ativo.
Brandbook — Marca
Moodboard
A sensação visual da marca. Referências de tom, textura e direção estética que guiam decisões de design.
Dark. Preciso. Rápido.
A sensação principal da marca
Gradiente Signature
Aa
⚡🤖🎯
Tech. Funcional. Real.
Premium sem excesso
Direção Visual
📸
Fotografia
Autêntica, focada em resultado. Sem stock photo genérico. Pessoas reais, telas reais, dados reais.
🖥️
Interface
Dark mode, dados em destaque, UI limpa. Dashboards, terminais, fluxos de automação.
✍️
Tipografia
Headlines grandes e ousadas. Body limpo e legível. Hierarquia clara. Sem decoração desnecessária.
Design System — Tokens
Foundations
Os tokens primitivos — os valores brutos de cor, tamanho e espaço que formam a base de todo o sistema.
Cor — Paleta Primitiva
n900
n800
n700
n600
n500
n400
n300
n200
n100
Cor — Brand
Blue
#0693e3
Purple
#9b51e0
Gradient
Blue → Purple
Feedback
Success · Error · Warning
Design System — Tokens
Spacing Scale
Sistema de espaçamento baseado em múltiplos de 4px. Base unit: 8px. Todos os valores são divisíveis por 4.
Escala Completa
space-14px— Espaçamento mínimo, ícone + label
space-28px— Base unit, padding interno de tags
space-312px— Padding de botões pequenos
space-416px— Padding de cards, gap padrão
space-624px— Padding de seções internas
space-832px— Padding de containers médios
space-1248px— Margem entre seções
space-1664px— Padding de seções de página
space-2080px— Seção fullwidth (atual)
Design System — Tokens
Surfaces & Borders
Sistema de elevação e superfícies. Cada nível tem cor, borda e sombra definidos.
Surface 0
#0a0a0a
Surface 1
#111111
Surface 2
#1a1a1a
Surface 3
#222222
Surface Brand
blue 8%
Bordas
border-subtle1px solid #1a1a1a — divisórias
border-default1px solid #222 — cards
border-strong1px solid #555 — hover, focus
border-brand1px solid #0693e3 — ativo, selecionado
border-gradient2px gradient — destaque especial
Design System — Tokens
Layering
Sistema de z-index. Todos os layers têm nome semântico e valor fixo.
| z-base (0) | Conteúdo padrão | Fundo, backgrounds estáticos |
| z-raised (1) | Cards elevados | Cards com hover, elementos flutuantes leves |
| z-dropdown (100) | Menus dropdown | Seletores, autocomplete, popover |
| z-sticky (150) | Elementos fixos | Table headers, sticky nav |
| z-sidebar (200) | Sidebar | Navegação lateral |
| z-header (100) | Header fixo | Top navigation bar |
| z-overlay (300) | Overlay | Background de modais |
| z-modal (400) | Modal | Diálogos, sheets, drawers |
| z-toast (500) | Toast / Notificações | Feedback temporário |
| z-tooltip (600) | Tooltip | Dicas contextuais |
Design System — Tokens
Semantic Tokens
Tokens com papel definido — abstraem os primitivos e dão significado contextual ao sistema.
| Token | Valor | Uso |
|---|---|---|
| --color-bg-base | #0a0a0a | Background principal da página |
| --color-bg-surface | #111111 | Sidebar, panels, containers |
| --color-bg-elevated | #1a1a1a | Cards, modais |
| --color-bg-overlay | #222222 | Hover states, overlays leves |
| --color-text-primary | #ffffff | Títulos e textos principais |
| --color-text-secondary | #aaaaaa | Subtítulos, labels |
| --color-text-muted | #777777 | Texto auxiliar, placeholders |
| --color-text-disabled | #555555 | Elementos desabilitados |
| --color-brand-primary | #0693e3 | CTAs, links, focus rings |
| --color-brand-secondary | #9b51e0 | Destaque secundário, gradiente |
| --color-feedback-success | #00d084 | Sucesso, confirmações |
| --color-feedback-error | #cf2e2e | Erros, ações destrutivas |
| --color-feedback-warning | #fcb900 | Alertas, atenção |
| --border-default | 1px solid #222 | Borda padrão de cards |
| --border-interactive | 1px solid #0693e3 | Borda de elementos ativos |
Design System — Tokens
Token Export
Todos os tokens em CSS Custom Properties. Copie e cole no seu projeto.
CSS Variables · pronto para usar
/* ── Lory Cantelli — Design Tokens v1.0 ── */
/* Gerado automaticamente — não editar manualmente */
:root {
/* Escala Neutra */
--n900: #0a0a0a;
--n800: #111111;
--n700: #1a1a1a;
--n600: #222222;
--n500: #333333;
--n400: #555555;
--n300: #777777;
--n200: #aaaaaa;
--n100: #dddddd;
/* Brand */
--blue: #0693e3;
--purple: #9b51e0;
--black: #000000;
--white: #ffffff;
--gradient: linear-gradient(90deg, #0693e3 0%, #9b51e0 100%);
/* Feedback */
--success: #00d084;
--error: #cf2e2e;
--warning: #fcb900;
/* Tipografia */
--font-display: 'Tasa Orbiter Display', 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
/* Espaçamento (base 4px) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* Shadows */
--shadow-xs: 0 1px 4px rgba(0,0,0,0.4);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
--shadow-md: 0 4px 20px rgba(0,0,0,0.6);
--shadow-lg: 0 8px 40px rgba(0,0,0,0.7);
--shadow-blue: 0 4px 24px rgba(6,147,227,0.3);
}
Design System — Visual
Effects
Sombras, glows e efeitos de elevação. Use com intenção — o escuro como base torna cada sombra visível.
Shadow Scale
shadow-xs
0 1px 4px rgba(0,0,0,0.4)
shadow-sm
0 2px 8px rgba(0,0,0,0.5)
shadow-md
0 4px 20px rgba(0,0,0,0.6)
shadow-lg
0 8px 40px rgba(0,0,0,0.7)
glow-blue
0 4px 24px rgba(6,147,227,0.4)
glow-purple
0 4px 24px rgba(155,81,224,0.4)
ring-focus
0 0 0 2px #0693e3
blur-glass
backdrop-filter: blur(12px)
Design System — Visual
Patterns
Padrões de background para seções especiais. Usados com moderação para criar textura sem poluir.
Dot Grid
Grid Lines
Diagonal Hatch
Gradient Ambient
Blueprint Grid
Subtle Noise
Design System — Visual
Motion
Sistema de animação. Consistência no ritmo e curva de easing cria uma sensação de marca coesa.
Instant
duration: 0ms
Ações imediatas — toggle de visibilidade, resposta a clique. Sem animação.
Fast
duration: 100-150ms · ease-out
Hover states, fades curtos, micro-interações. A padrão para botões e links.
Normal
duration: 200-300ms · ease
Transições de componente — cards, dropdowns, tabs. O padrão para a maioria das animações.
Slow
duration: 400-600ms · ease-in-out
Entradas de página, modais, sidebars. Elementos grandes que precisam de tempo para assentar.
Dramatic
duration: 800-1500ms · cubic-bezier
Progress bars, counters, hero animations. Usados uma vez por página, para impacto.
Easing Padrão
cubic-bezier(0.4, 0, 0.2, 1)
Material-style ease. Sensação natural para entradas e saídas de elementos.
Design System — Visual
VFX
Efeitos especiais para momentos de destaque. Usados com parcimônia — um por seção no máximo.
Gradient Text
background: gradient; -webkit-background-clip: text
Glow Border
border: blue + box-shadow glow
Glassmorphism
backdrop-filter: blur(20px) + transparência
Design System — Components
Components
Biblioteca de componentes reutilizáveis. Todos construídos com os tokens do sistema.
Design System — Components
Buttons
Sistema de botões com 6 variantes e 3 tamanhos. Sempre use o botão certo para a ação certa.
Variantes
Tamanhos
Com ícone
Quando usar cada variante
Primary — Ação principal da tela. Um por página.
Secondary — Ações de suporte, secundárias.
Ghost — Ações terciárias, navegação, cancelar.
Gradient — CTAs de destaque, conversão, hero.
Destrutivo — Deletar, remover, ações irreversíveis.
Design System — Components
Cards
Cards são os container-padrão para agrupar conteúdo relacionado. Sempre com border e background elevado.
Variantes
Card Padrão
Border + background elevado. Hover com border azul e elevação sutil.
Card Ativo / Selecionado
Border brand + glow shadow. Estado selecionado ou destaque.
Card Brand
Background com tint do gradiente. Para cards de destaque ou featured.
Design System — Components
Forms
Campos de formulário. Consistência em padding, border-radius e estados (focus, error, disabled).
Campos
Este campo é obrigatório.
Design System — Components
Feedback
Alertas, badges e notificações para comunicar status e resultado ao usuário.
Alertas
✓ Implementação concluída com sucesso. O agente está rodando.
✕ Erro ao conectar com a API. Verifique as credenciais.
⚠ Atenção: o limite de requisições está próximo do teto mensal.
ℹ Nova versão disponível. Atualize para acessar os novos recursos.
Badges
Em andamento
Concluído
Erro
Rascunho
Novo
Beta
Design System — Components
States
Estados especiais: vazio, carregando, erro e sucesso. Todo componente que busca dados precisa cobrir esses estados.
📭
Estado Vazio
Nenhum dado ainda. Comece criando seu primeiro item.
⟳
Carregando...
Buscando dados da API. Aguarde.
⚠️
Erro ao carregar
Não foi possível buscar os dados. Tente novamente.
✓
Sucesso!
Operação concluída. As mudanças foram salvas.
Design System — Components
Tables
Tabelas de dados. Header em uppercase com letra pequena, rows com hover, bordas sutis.
Data Table
| Campanha | Status | Resultado | ROI |
|---|---|---|---|
| Agente de Copy IA | Ativo | +47% produção | +380% |
| Automação de Relatórios | Ativo | -12h/semana | +210% |
| Segmentação Inteligente | Em andamento | — | — |
| Dashboard Unificado | Rascunho | — | — |
Design System — Components
Lists
Listas de itens — checklist, ordenada, navegação e avatar list.
Checklist
✓ Agente de copy configurado
✓ Automação de e-mail ativa
✓ Dashboard de métricas
○ Integração com CRM
○ Treinamento da equipe
Lista de Itens
🤖
Live
Agente de Copy
Ativo · 3 fluxos
📊
Dev
Dashboard IA
Em construção
⚡
Soon
Automação Email
Planejado
Design System — Components
Charts
Diretrizes para visualização de dados. Cores, tipografia e estrutura de gráficos na marca.
Bar Chart — Simulação
Jan
Fev
Mar
Abr
Mai
Jun
Exemplo: crescimento de resultados mês a mês. Azul = meta atingida, gradiente = meta superada.
Cores em gráficos
Série primária
Série secundária
Positivo
Negativo
Neutro
Design System — Components
Sections
Blocos de seção reutilizáveis para montar páginas. Cada seção tem estrutura definida de título, desc e conteúdo.
Em desenvolvimento
Biblioteca de seções de página — Hero, Features, Testimonials, Pricing, FAQ, CTA. Em construção.
Q2 2026
Design System — Components
LP Sections
Seções específicas para landing pages de serviços e produtos da Lory Cantelli.
Em desenvolvimento
Hero com gradiente, Benefícios em grid, Prova social, Oferta, FAQ e CTA. Baseado nos templates de LP da marca.
Q2 2026
Design System — Components
Advanced
Componentes complexos — Modais, Drawers, Command Palette, Multi-step Forms.
Em desenvolvimento
Componentes avançados documentados à medida que forem construídos em projeto real.
Em andamento
Design System — Meta
Templates
Templates de página prontos para usar. Cada template implementa os tokens e componentes do sistema.
Design System — Meta
SEO
Tags meta, Open Graph e estrutura de títulos para manter consistência de marca nos resultados de busca e compartilhamentos.
Meta Tags — Padrão
<!-- SEO Base — Lory Cantelli -->
<meta name="title" content="Lory Cantelli — Implementação de IA para Marketing">
<meta name="description" content="Ajudo times de marketing a executar em minutos o que antes levava horas — usando IA, para o time focar no que gera resultado.">
<meta name="keywords" content="implementação IA, automação marketing, agentes IA, IA para vendas">
<!-- Open Graph -->
<meta property="og:title" content="Lory Cantelli — IA que executa">
<meta property="og:description" content="Implementação de IA para times de marketing e vendas. Protótipos que funcionam.">
<meta property="og:type" content="website">
<meta property="og:image" content="/og-image.png">
<!-- og:image — 1200×630px, fundo #0a0a0a, gradiente + logo -->
<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@lorycantelli">
Estrutura de Títulos
| Tag | Padrão | Observação |
|---|---|---|
| <title> | Lory Cantelli — [Página] | Máximo 60 caracteres |
| <h1> | 1 por página, headline principal | Tasa Orbiter Display 800 |
| <h2> | Seções principais | Descritivo, com keyword |
| <h3> | Sub-seções | Sem keyword forçada |
| <alt> | Descritivo + contexto da marca | Todas as imagens |