Brand Identity System · 2026

01 — Brand Book

Comunidade
Sem Codar

Este documento define a identidade visual e a voz da maior plataforma da América Latina para aprender No Code, IA e Automações. Use-o como referência para manter a marca consistente em todos os pontos de contato.

Missão

Democratizar a criação de tecnologia, permitindo que qualquer pessoa construa aplicativos, agentes de IA e automações sem escrever código.

Visão

Ser a maior escola de No Code e IA da América Latina e ajudar nossos alunos a faturarem coletivamente R$1 bilhão com projetos digitais.

Valores

Resultado acima de tudo. Comunidade que transforma. Método prático. Acesso democrático à tecnologia.

+25.000
Alunos na Comunidade
+R$106 MI
Faturados pelos alunos
+480
Prêmios de faturamento

03 — Cores

Paleta de cores

A paleta da Sem Codar é ousada e moderna. O azul como cor primária transmite confiança e tecnologia; o roxo adiciona personalidade; o verde CTA converte.

Cores base
#1C1C1C
Preto
Fundo principal, textos
RGB 28, 28, 28
#FBF9F4
Branco
Textos sobre fundo escuro
RGB 251, 249, 244
#0058D4
Azul
Cor primária da marca
RGB 0, 88, 212
#AF6DFF
Roxo
Destaques, hover, personalidade
RGB 175, 109, 255
Cores de ação & status
#84CC16
Verde CTA
Botões primários, calls-to-action
RGB 132, 204, 22
#63D059
Verde
Sucesso, aprovado, positivo
RGB 99, 208, 89
#F84F2E
Vermelho
Alertas, erros, urgência
RGB 248, 79, 46
#FACC15
Amarelo Ênfase
Highlights em texto, stats
RGB 250, 204, 21
#FFB801
Amarelo
Atenção, conquistas, prêmios
RGB 255, 184, 1
Neutros
#F5F0E8
Creme
Fundos de seções modo claro
RGB 245, 240, 232
#27272A
Cinza Escuro
Bordas, separadores, cards
RGB 39, 39, 42
Clique em qualquer cor para copiar o valor hex para a área de transferência.

04 — Tipografia

Tipografia

Quatro famílias tipográficas com papéis bem definidos — cada uma com personalidade própria, juntas formam a voz visual da Sem Codar.

Display
Sora
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0–9
Sora
400 · 600 · 700 · 800
Títulos, headings principais, UI de destaque
Google Fonts
Corpo & UI
Plus Jakarta Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0–9
Plus Jakarta Sans
400 · 500 · 600 · 700 · 800
Corpo de texto, UI, descrições, botões
Google Fonts
Mono & Código
JetBrains Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0–9
JetBrains Mono
400 · 500 · 700
Hexadecimais, código, valores técnicos, labels
Google Fonts
Script & Decorativo
Yellowtail
Sem Codar — No-Code · IA · Automação
Yellowtail
400 (regular)
Detalhes decorativos, personalidade, destaques especiais
Google Fonts
Hierarquia tipográfica
Display · 58px · 800
Sora · letter-spacing −0.03em
A maior plataforma
H2 · 40px · 700
Sora · letter-spacing −0.02em
Seção do brand book
H3 · 22px · 700
Plus Jakarta Sans
Subtítulo de seção
Body · 17px · 400
Plus Jakarta Sans · lh 1.78
Texto corrido para descrições e parágrafos. Mantenha line-height 1.6–1.8 para boa legibilidade em leitura contínua.
Label · 11px · 500
JetBrains Mono · uppercase
01 — label de seção
Mono · 14px · 500
JetBrains Mono
#0058D4 · rgb(0, 88, 212)
Exemplo de pairing
Sora + Yellowtail + Plus Jakarta Sans
Aprenda No-Code
do zero ao avançado
A Sem Codar é a maior plataforma de No-Code, IA e Automação da América Latina. Junte-se a mais de 100 mil alunos que já transformaram sua carreira sem precisar escrever uma linha de código.
Comunidade · No-Code · IA

05 — Iconografia

Iconografia

Usamos Lucide Icons como biblioteca padrão — ícones outline com traço consistente, estilo limpo e moderno. Combinam perfeitamente com a tipografia e a identidade da Sem Codar.

Lucide Icons — biblioteca padrão

lucide.dev
zap
star
sparkles
rocket
bot
cpu
workflow
layers
users
target
trending-up
check-circle
Tamanho mínimo
16px em UI; 24px para destaque; 40px+ para ícones decorativos
Cor padrão
Azul --c-blue para ícones de destaque; roxo --c-purple para contextos especiais; cinza para utilitários
Estilo
Exclusivamente outline — nunca filled. Consistência visual é prioridade.
Peso do traço
Padrão Lucide: 1.5px — não altere o stroke-width dos ícones

06 — Fotografia & Imagens

Fotografia & Imagens

As imagens da Sem Codar devem transmitir ambição, resultado e movimento. Pessoas reais comemorando conquistas, telas de produtos e tecnologia em ação.

Aprovado
  • Pessoas reais em contexto de trabalho ou celebração
  • Screenshots de produtos com resultados visíveis (faturamento, métricas)
  • Fundo escuro ou neutro que não compete com o conteúdo
  • Tom quente e energético
  • Contraste alto e cores vibrantes
  • Imagens de produto com UI limpa e legível
Evitar
  • Stock photos genéricas sem contexto real
  • Imagens com logos de concorrentes visíveis
  • Paleta de cores que conflita com a identidade
  • Imagens de baixa resolução ou mal iluminadas
  • Pessoas em poses artificiais ou não naturais
  • Filtros pesados que distorcem as cores da marca
Tratamento de imagem
Dark Base
Para overlays em imagens de fundo
Blue Tint
Para destaques e banners hero
Purple Tint
Para seções criativas e especiais
Green CTA
Para seções de resultado e conversão
Gold Tint
Para conquistas e depoimentos

07 — Voz & Tom

Voz & Tom

A voz da Sem Codar é direta, ambiciosa e humana. Falamos como um mentor que já chegou lá e quer que você chegue também — sem enrolação, sem promessas vazias.

Direto
Vai ao ponto. Sem rodeios, sem jargão desnecessário.
Ambicioso
Fala em resultados reais e grandes metas.
Humano
Pessoas reais, histórias reais, conquistas reais.
Confiante
Afirmações fortes, sem hesitação ou qualificadores.
Inclusivo
Qualquer pessoa pode criar com tecnologia.
Copy: certo vs. errado
Evitar

"Aprenda a criar soluções tecnológicas inovadoras utilizando metodologias no-code avançadas para transformar seus processos de negócio de forma eficiente."

Usar

"Crie seu primeiro app hoje. Sem código. Sem enrolação. Do zero ao faturamento."

Evitar

"Potencialmente, com dedicação e esforço, você poderá talvez alcançar resultados positivos em sua jornada de aprendizado."

Usar

"Nossos alunos já geraram mais de R$106 milhões. O próximo pode ser você."

Vocabulário da marca
Usamos
  • Comunidade
  • Faturar / Faturamento
  • No Code
  • Agente de IA
  • Automação
  • Método
  • Resultado
  • Campo de batalha
  • Virada de chave
  • MicroSaaS
Evitamos
  • Curso (preferimos "Comunidade")
  • Fácil / Simples demais
  • Disrupto / Disruptivo
  • Sinergia
  • Jornada de aprendizado
  • Conteúdo exclusivo
  • Aprenda no seu ritmo
  • Revolucionário

08 — Exemplos de Aplicação

Exemplos de aplicação

Referências de como a identidade Sem Codar se aplica nos diferentes pontos de contato com a marca.

Post para redes sociais
No Code + IA
Crie seu agente de IA hoje.
Sem escrever uma linha de código.
Entre na Comunidade →
Sem Codar
+R$106 MI
faturados pelos nossos alunos
O próximo pode ser você.
semcodar.com.br
Card de produto / curso
No Code
Criação de Apps com Bubble
Do zero ao app publicado. Sem código, sem complicação.
24aulas
Incluído na
Comunidade
IA & Agentes
Agentes de IA com n8n
Automatize processos completos com agentes inteligentes.
18aulas
Incluído na
Comunidade
Automações
Automações com Make
Conecte ferramentas e escale no piloto automático.
20aulas
Incluído na
Comunidade
Email / Newsletter

Oi, [Nome] 👋

Você está a 1 passo de criar seu primeiro agente de IA

Na aula de hoje você vai aprender como configurar um agente que responde clientes, agenda reuniões e qualifica leads — tudo no automático.

Assistir aula agora →
© 2025 Comunidade Sem Codar · semcodar.com.br

09 — Sistema de Design

Componentes

Componentes prontos para uso em qualquer projeto. Copie o HTML e aplique as variáveis CSS de tokens.css.

Botões

btn · sólido CTA principal — fundo sólido, border-radius pill
Ver código 
<button class="btn btn--primary">Começar agora →</button>
<button class="btn btn--secondary">Saiba mais →</button>
<button class="btn btn--ghost">Ver detalhes →</button>
btn · liquid glass Glassmorphism premium — backdrop-filter blur + inset highlight por cor
Ver código 
<button class="btn-glass btn-glass--green">
  <span class="btn-glass__shimmer"></span>
  Começar agora →
</button>
btn · glass + ícone Ícone Lucide embutido + texto. Variante icon-only para ações compactas
Ver código 
<button class="btn-glass btn-glass--green btn-glass--icon">
  <span class="btn-glass__shimmer"></span>
  <i data-lucide="zap" class="btn-glass__icon"></i>
  Automatizar agora
</button>
<button class="btn-glass btn-glass--icon-only btn-glass--neutral">
  <span class="btn-glass__shimmer"></span>
  <i data-lucide="heart" class="btn-glass__icon"></i>
</button>
btn · glass tamanhos Small / Default / Large — proporções consistentes em escala
Ver código 
<button class="btn-glass btn-glass--green btn-glass--sm">Pequeno →</button>
<button class="btn-glass btn-glass--green">Padrão →</button>
<button class="btn-glass btn-glass--green btn-glass--lg">Grande →</button>
btn · glass estados Disabled e loading — visual glass preservado, interatividade bloqueada
Ver código 
<button class="btn-glass btn-glass--green" disabled>
  Desabilitado
</button>
<button class="btn-glass btn-glass--purple btn-glass--loading">
  <span class="btn-glass__spinner"></span>
  Carregando
</button>

Badges

badge Status, categorias e destaques
No-Code IA Automações Novo
Ver código 
<span class="badge badge--purple">No-Code</span>
<span class="badge badge--green">IA</span>
<span class="badge badge--yellow">Automações</span>
<span class="badge badge--red">Novo</span>

Feature Cards

feature-card Ícone + título + descrição. Variantes: escuro, roxo, bordado

Automações

Automatize processos repetitivos com IA.

Agentes IA

Crie agentes que trabalham por você 24/7.

Aplicativos

Sistemas completos sem escrever código.

Ver código 
<div class="feature-cards">
  <div class="feature-card feature-card--dark">
    <i data-lucide="zap" class="feature-card__icon"></i>
    <h4 class="feature-card__title">Automações</h4>
    <p class="feature-card__desc">Automatize processos repetitivos com IA.</p>
  </div>
</div>

Bento Grid

bento-grid Grid assimétrico de features — padrão da seção 'O que vou receber'

Plataforma Exclusiva

Acesso completo ao ambiente de aprendizado.

Trilhas

Percursos sob medida.

Tutor IA

Suporte com IA treinada.

Mentorias Ao Vivo

Encontros semanais com professores.

Ver código 
<div class="bento">
  <div class="bento__card bento__card--wide">
    <i data-lucide="monitor" class="bento__icon"></i>
    <h4 class="bento__title">Plataforma Exclusiva</h4>
    <p class="bento__desc">Acesso completo ao ambiente de aprendizado.</p>
  </div>
  <div class="bento__card">...</div>
</div>

Pricing Card

pricing-card Preço riscado + cupom com desconto + parcelamento grande + CTA
−42% OFF
de R$2.582 por apenas
R$ 1.497

Use o cupom DESCONTO200 e pague

12× R$127
ou R$1.297 à vista
· ASSINATURA ANUAL · 🔒 7 dias de garantia
Ver código 
<div class="pricing-card">
  <span class="pricing-card__discount-tag">−42% OFF</span>
  <div class="pricing-card__header">
    <span class="pricing-card__from">de <s>R$2.582</s> por apenas</span>
    <div class="pricing-card__price-row">
      <span class="pricing-card__price-currency">R$</span>
      <span class="pricing-card__price">1.497</span>
    </div>
  </div>
  <div class="pricing-card__coupon">
    <p class="pricing-card__coupon-text">Use o cupom <strong class="pricing-card__code">DESCONTO200</strong> e pague</p>
    <div class="pricing-card__installment">
      <span class="pricing-card__x">12×</span>
      <span class="pricing-card__value">R$127</span>
    </div>
    <span class="pricing-card__cash">ou R$1.297 à vista</span>
  </div>
  <button class="pricing-card__cta">QUERO ME INSCREVER →</button>
</div>

Value Stack (Seção de Preços)

value-stack Checklist com itens e preços + Pricing Card ao lado
  • Curso Appmakers — Vibe Coding & No Code R$997
  • Curso Automakers — Agentes IA R$997
  • Tutor IA Incalculável
  • VALOR TOTAL: R$2.582,00
Ver código 
<div class="value-stack__scene">
  <ul class="value-stack__list">
    <li class="value-stack__item">
      <span class="value-stack__label">
        <span class="value-stack__check"></span>
        Curso Appmakers
      </span>
      <span class="value-stack__price">R$997</span>
    </li>
    <li class="value-stack__total">
      <span class="value-stack__total-label">VALOR TOTAL:</span>
      <span class="value-stack__total-value">R$2.582,00</span>
    </li>
  </ul>
</div>

FAQ Accordion

faq-accordion Lista expansível de perguntas e respostas com ícone + — liquid glass
Quero saber mais sobre o curso +

Aqui vai a resposta detalhada sobre o curso e seus conteúdos. O programa cobre automação, IA e no-code do zero ao avançado.

Qual a carga horária? +

O curso tem mais de 200 horas de conteúdo prático, incluindo aulas gravadas, mentorias ao vivo e projetos reais.

Preciso saber programar? +

Não! O método Sem Codar foi criado para quem não tem background técnico. Você aprenderá a construir sistemas completos com ferramentas visuais e IA.

Ver código 
<div class="faq">
  <details class="faq__item">
    <summary class="faq__question">
      Pergunta aqui <span class="faq__icon">+</span>
    </summary>
    <div class="faq__body">
      <p class="faq__answer">Resposta aqui.</p>
    </div>
  </details>
</div>

Trust Badges

trust-badges 3 selos de confiança: pagamento, acesso, garantia
PAGAMENTO SEGURO Seus dados protegidos e compra 100% segura.
ACESSO IMEDIATO Login enviado ao seu e-mail logo após a compra.
GARANTIA DE 15 DIAS 100% do seu dinheiro de volta sem burocracia.
Ver código 
<div class="trust-badges">
  <div class="trust-badge">
    <i data-lucide="shield-check" class="trust-badge__icon"></i>
    <span class="trust-badge__title">PAGAMENTO SEGURO</span>
    <span class="trust-badge__desc">Seus dados protegidos.</span>
  </div>
</div>

Social Proof Bar

social-proof-bar 3 pills com ícone + texto curto — prova social horizontal
Ver código 
<div class="social-proof-bar">
  <span class="sp-pill"><i data-lucide="book-open" class="sp-pill__icon"></i> Curso Completo</span>
  <span class="sp-pill"><i data-lucide="users" class="sp-pill__icon"></i> Mentorias Ao Vivo</span>
  <span class="sp-pill"><i data-lucide="shield" class="sp-pill__icon"></i> Garantia 15 dias</span>
</div>

Stats Banner

stats-banner Número grande em destaque — glassmorphism premium, dark e light
Mais de 10.000 alunos formados na América Latina
Ver código 
<div class="stats-banner">
  <span class="stats-banner__label">Mais de</span>
  <span class="stats-banner__number">10.000</span>
  <span class="stats-banner__sub">alunos formados na América Latina</span>
</div>

Logo Strip

logo-strip Faixa horizontal de logos de parceiros ou ferramentas
Make Lovable n8n Supabase Bolt Cursor
Ver código 
<div class="logo-strip">
  <div class="logo-strip__track">
    <span class="logo-strip__item">Make</span>
    <span class="logo-strip__sep"></span>
    <span class="logo-strip__item">Lovable</span>
    <span class="logo-strip__sep"></span>
    <!-- duplicate items for seamless loop -->
  </div>
</div>

Stat Card com Ranking

stat-card Cards de ranking em múltiplas cores — escuro e claro
#2
Profissão mais
promissora
R$8.500/mês
Fonte: IBGE 2024
#1
Área mais
contratada
R$12k/mês
LinkedIn 2024
38%
Crescimento
anual do setor
+6.400 vagas
IDC Brasil 2024
94%
Taxa de
empregabilidade
Tech & IA
FIESP 2024
47k
Vagas abertas
em automação
BR · 2024
Catho · SINE
Ver código 
<!-- Variantes de cor disponíveis -->
<div class="stat-card">              <!-- roxo (padrão) -->
<div class="stat-card stat-card--blue">    <!-- azul -->
<div class="stat-card stat-card--green">   <!-- verde -->
<div class="stat-card stat-card--yellow">  <!-- amarelo -->
<div class="stat-card stat-card--light">   <!-- claro / branco -->

Data Highlight Card

data-highlight Stat grande à direita com fonte de dados — para prova de mercado
340%
de crescimento em vagas No Code nos últimos 2 anos
Fonte: LinkedIn Jobs 2024
Ver código 
<div class="data-highlight">
  <div class="data-highlight__visual">
    <i data-lucide="trending-up" class="data-highlight__icon"></i>
  </div>
  <div class="data-highlight__content">
    <div class="data-highlight__stat">340%</div>
    <div class="data-highlight__desc">crescimento em vagas No Code</div>
    <span class="data-highlight__source">Fonte: LinkedIn Jobs 2024</span>
  </div>
</div>

Testimonial Cards

testimonial-card Foto + nome + resultado em destaque — depoimento de aluno
JS

"Saí do zero e hoje faturei R$12k no primeiro mês com automações."

João Silva +R$12.000 em 30 dias
Ver código 
<div class="testimonial-card">
  <div class="testimonial-card__avatar">JS</div>
  <div class="testimonial-card__body">
    <p class="testimonial-card__quote">"Depoimento do aluno aqui."</p>
    <div class="testimonial-card__author">
      <strong>Nome do Aluno</strong>
      <span class="testimonial-card__result">Resultado em destaque</span>
    </div>
  </div>
</div>

Guarantee Block

guarantee-block Selo de garantia + texto em caixa bordada + CTA

Garantia Incondicional de 15 Dias

15 DIAS

Se em 15 dias você não estiver satisfeito, devolvemos 100% do seu investimento. Sem perguntas, sem burocracia.

Ver código 
<div class="guarantee-block">
  <h3 class="guarantee-block__title">Garantia Incondicional de 15 Dias</h3>
  <div class="guarantee-block__seal">
    <i data-lucide="shield-check" class="guarantee-block__icon"></i>
    <span>15 DIAS</span>
  </div>
  <p class="guarantee-block__text">Texto da garantia aqui.</p>
  <button class="btn btn--primary">GARANTIR MINHA VAGA →</button>
</div>

Tool Tag Cloud

tool-tag-cloud Tags agrupadas por categoria de ferramentas
No-Code
Lovable Bolt Bubble
Agentes IA
n8n Make Zapier
Design
Figma Canva
Ver código 
<div class="tool-tag-cloud">
  <div class="tool-tag-group">
    <span class="tool-tag-group__label">No-Code</span>
    <div class="tool-tag-group__tags">
      <span class="tool-tag">Lovable</span>
      <span class="tool-tag">Bolt</span>
    </div>
  </div>
</div>

Hero Section

hero Headline + destaque colorido + subtexto + CTA principal
+10.000 alunos América Latina

Qualquer pessoa pode criar Aplicativos e Agentes de IA sem programar.

A maior escola No Code & IA da América Latina.

Ver código 
<section class="hero">
  <div class="hero__eyebrow">
    <span class="sp-pill">+10.000 alunos</span>
  </div>
  <h1 class="hero__title">
    Headline principal com <em class="hero__highlight">destaque colorido</em>.
  </h1>
  <p class="hero__sub">Subtexto de suporte.</p>
  <button class="btn btn--primary">CTA principal →</button>
</section>

Chat Bubbles

chat-bubbles Bolhas de dor/frustração — usadas na seção de identificação do problema
"Quero criar um app mas não sei programar"
"Já tentei aprender código e desisti"
"Tenho uma ideia mas não sei por onde começar"
Ver código 
<div class="chat-bubbles">
  <div class="chat-bubble chat-bubble--left">Mensagem do usuário</div>
  <div class="chat-bubble chat-bubble--right">Outra mensagem</div>
</div>

Founder / Bio

founder-bio Foto + nome + título + bio + badges de credenciais
RN

Renato Asse

Founder & CEO, Sem Codar

Empreendedor serial, educador e especialista em No Code & IA. Ajudou mais de 10.000 pessoas a criarem seus primeiros produtos digitais.

Forbes Under 30 10k+ alunos Speaker
Ver código 
<div class="founder-bio">
  <div class="founder-bio__avatar">RN</div>
  <div class="founder-bio__content">
    <h4 class="founder-bio__name">Nome</h4>
    <p class="founder-bio__title">Título</p>
    <p class="founder-bio__text">Bio aqui.</p>
    <div class="founder-bio__badges">
      <span class="tool-tag">Badge</span>
    </div>
  </div>
</div>

Final Closer

final-closer Headline em caps + urgência + CTA único centralizado

ÚLTIMA CHANCE

Sua vida pode mudar
nos próximos 30 dias.

Junte-se a mais de 10.000 alunos que já transformaram suas carreiras.

Ver código 
<div class="final-closer">
  <p class="final-closer__eyebrow">ÚLTIMA CHANCE</p>
  <h2 class="final-closer__title">Sua vida pode mudar<br>nos próximos 30 dias.</h2>
  <p class="final-closer__sub">Subtexto de urgência aqui.</p>
  <button class="btn btn--primary">GARANTIR MINHA VAGA →</button>
</div>

News / Article Cards

news-card Cards de prova social com headline de notícia + fonte
Folha de S.Paulo

"No Code cresce 340% e vira tendência entre empreendedores brasileiros"

Exame

"Ferramentas de IA permitem criar apps em minutos sem escrever código"

Ver código 
<div class="news-cards">
  <div class="news-card">
    <span class="news-card__source">Nome do Veículo</span>
    <p class="news-card__headline">"Manchete da notícia aqui"</p>
  </div>
</div>

Footer

footer Rodapé com logo, tagline, links de navegação e CNPJ
A escola de No Code & IA da América Latina.
CNPJ: XX.XXX.XXX/0001-XX © 2025 Sem Codar. Todos os direitos reservados.
Ver código 
<footer class="doc-footer">
  <div class="doc-footer__brand">
    <span class="doc-footer__logo">Sem Codar</span>
    <span class="doc-footer__tagline">Tagline aqui.</span>
  </div>
  <div class="doc-footer__meta">
    <span class="doc-footer__cnpj">CNPJ: XX.XXX.XXX/0001-XX</span>
    <span class="doc-footer__copy">© 2025 Sem Codar.</span>
  </div>
</footer>

10 — Sistema Visual

Background

O sistema de background da Sem Codar opera em dois modos: escuro (padrão) e claro. Cada camada é definida por variáveis CSS semânticas que garantem contraste, hierarquia e coesão visual.

Modo Escuro
Padrão
--bg #1C1C1C
--bg-2 #171717
--surface #252525
--surface-2 #2E2E2E
--bg Fundo principal do corpo #1C1C1C
--bg-2 Fundo alternado de seções #171717
--surface Cards, painéis, modais #252525
--surface-2 Superfícies elevadas, hover #2E2E2E
--border Bordas, divisores #363636
Modo Claro
Alternativo
--bg #FBF9F4
--bg-2 #F3EFE8
--surface #FFFFFF
--surface-2 #ECE9E3
--bg Fundo principal — creme #FBF9F4
--bg-2 Fundo alternado — creme escuro #F3EFE8
--surface Cards, painéis, modais #FFFFFF
--surface-2 Superfícies elevadas #ECE9E3
--border Bordas, divisores #DDD9D1

Anatomia das camadas

1
Fundo da página --bg + --bg-2 — alternados a cada seção via classes .section--dark e .section--cream
2
Orbs de luz ambiente 4 esferas com cores da paleta, blur(80–100px), position fixed, z-index: 1. Animação de flutuação lenta (20–30s).
3
Canvas de partículas Partículas mínimas em <canvas>, z-index: 0. Densidade baixa para não competir com o conteúdo.
4
Textura de ruído Overlay fractalNoise SVG com opacidade 2,8% (escuro) / 1,8% (claro) via body::before. Adiciona profundidade orgânica.

Regras de uso

Use sempre variáveis CSS

Sempre use var(--bg), var(--surface) e similares. Nunca hardcode valores hexadecimais diretamente no código de componentes.

Alterne seções sistematicamente

Use .section--dark para seções ímpares e .section--cream para pares. Isso cria ritmo visual e separa conteúdo naturalmente.

Não remova os orbs de luz

Os orbs ambiente são parte da identidade visual. Removê-los torna o background plano e sem personalidade. Ajuste opacidade se necessário, mas não elimine.

Não use brancos puros no dark mode

No modo escuro, use --text (#FBF9F4) ao invés de #FFFFFF. O creme quente é parte da identidade — branco puro parece frio e genérico.

Alternância de tema

O tema é controlado pelo atributo data-theme no elemento <html>. O script theme-toggle.js persiste a preferência no localStorage e respeita prefers-color-scheme.

html[data-theme="light"] { --bg: #FBF9F4; … }

11 — Navegação

Barra de Progresso

A barra de progresso de leitura fica fixa no topo da página e indica quanto o usuário percorreu do Brand Book. É um elemento funcional e expressivo — carrega toda a paleta da marca em um único traço.

72%

Anatomia do componente

1
Gradiente linear 4 cores
2
Shimmer animado (3s loop)
3
Glow radial (roxo + azul)
4
Ponto de progresso com halo
Altura
3px
Position
fixed; top: 0; left: 0
z-index
9999
Transição
width 80ms linear
Animação
progress-shimmer 3s linear ∞
will-change
width

Gradiente da marca

--c-blue #0058D4 0%
--c-purple #AF6DFF 33%
purple-light #C49AFF 66%
--c-green #63D059 100%
global.css 
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--c-blue),
    var(--c-purple),
    #C49AFF,
    var(--c-green)
  );
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  z-index: 9999;
  box-shadow:
    0 0 12px rgba(175, 109, 255, 0.55),
    0 0 4px  rgba(0, 88, 212, 0.4);
}

Ponto de progresso

Pseudoelemento ::after
Elemento .scroll-progress::after
Tamanho 8 × 8px
Posição right: -3px; top: 50%
Background radial-gradient(white → roxo)
Glow interno 0 0 12px 4px rgba(175,109,255,0.85)
Glow externo 0 0 24px 8px rgba(175,109,255,0.35)
scroll-spy.js — atualização da largura 
const bar = document.getElementById('scrollProgress');
window.addEventListener('scroll', () => {
  const scrolled = window.scrollY;
  const total = document.body.scrollHeight - window.innerHeight;
  const pct = total > 0 ? (scrolled / total) * 100 : 0;
  bar.style.width = pct + '%';
}, { passive: true });