Projeto Petrobras
Vitalício
Família visual canônica usada em landings, criativos e anúncios. Identidade dark-promo industrial premium — preto absoluto, verde neon e amarelo gold.
brand-voice · SYSTEM · EXAMPLES · icons · components.json
quality-bar checklist · 9-12/12
Tokens & rules
Cores
Paleta rígida de 3 pilares: preto absoluto (territorio, 95%), verde neon (acao) e amarelo gold (escala/dinheiro). Nunca azul, nunca cinza claro.
Backgrounds
Brand greens
Brand yellows / gold
Alert / urgência
Texto
Gradientes
Sempre usar gradientes nos verdes e amarelos. Cor sólida fica chapada.
Tipografia
Dois pilares: PF Fusion Sans Pro Medium em títulos grandes apenas (h-hero, h-section, números ≥2rem). Sora em todo o resto.
PF Fusion Sans Pro — display only
All-caps por padrão, geometric heavy, condensada. Usar SOMENTE em títulos ≥2rem. Em tamanhos pequenos (cards, body) fica esticada e ilegível — usa Sora.
Sora — body, CTAs, labels
Humanist geometric sans, abertura generosa, ótima leitura em fundo escuro. Usar em TODO body, card-titles, bullets, captions, CTAs.
Word coloring 3-tone
Headlines tricromáticas. Branco padrão (70-80%) + verde conceito + amarelo promessa.
Espaçamento
Escala 8-pt: 4 / 8 / 16 / 24 / 32 / 48 / 64.
Bordas
Arredondamento sutil. Nunca exagerar — radius >16px parece "feito por IA".
Glows
Profundidade em fundo preto vem de luz neon — nunca sombra escura. Sombra preta sobre preto some.
Logo
Sempre com glow neon verde. Nunca recolorir, nunca distorcer, nunca usar sobre fundo claro.
<img src="assets/logo.webp" alt="Projeto Petrobras Vitalício" class="logo" style="width:260px">
Componentes
CTAs
Sempre com gradient + glow + arrow-circle suffix. Nunca cor sólida.
<a href="..." class="cta-green">Garantir minha vaga</a> <a href="..." class="cta-yellow">Ver programação</a>
Btn calendar (outline com SVG)
Barras topo
Alert (urgência) e Confirm (positiva). Nunca emoji ⚠ — usar SVG inline.
Alert bar (urgência)
<div class="alert-bar"> <strong>EDITAL IMINENTE</strong> · CESGRANRIO JÁ CONTRATADA </div>
Confirm bar (positiva)
Cards (com glass effect)
Background glass discreto + border-left accent (verde / amarelo / alert).
Idade 18-76, qualquer engenharia, pode estar cursando 7º+.
Pode liberar até 300.000 empregos na região Norte/Nordeste.
A Cesgranrio já foi contratada. Aulas entre 15/06 e 25/06.
<div class="card accent-green"> <div class="card-title">Nível superior</div> <p class="t-body">Texto do card.</p> </div>
Stat cards
Lesson cards
Card horizontal de aula (thumb + título + meta + CTAs). Auto-promovido pro DS canônico.
Avatares
Substitui emoji 👨🎓. Iniciais em fundo verde-escuro, texto verde-1.
Pills
Pill stamp (metadata destaque)
Pill subject (matéria/ênfase)
Pill time
Schedule row
Linha de programação clicável.
Reservatórios e produção: tudo que cai na prova.
Bullets com glow
Substitui emoji ✓. Bolinhas verde-1 com glow.
- Idade: 18 a 76 anos
- Qualquer curso de engenharia
- Pode estar cursando (7º período+)
- CREA não precisa agora
Meta chips (pill com SVG)
Countdown
Timer de 4 cells (dias / horas / min / seg). JS leve.
Thumb frame
Wrapper 16:9 com glow neon. Pra vídeos, imagens, embeds.
Voz da marca
Word coloring 3-tone
Headlines tricromáticas: branco padrão (70-80%), verde conceito, amarelo promessa.
Headlines — do's vs don'ts
CTAs — do's vs don'ts
Vocabulário
3 públicos
Como falar com cada um. Detalhes em docs/skills/brand-voice-rules.md.
Form input + label
Glass effect, focus ring verde, hover sutil. Sempre <label for> associado.
A gente usa só pra te chamar pelo nome no email.
<div class="form-group"> <label class="form-label" for="email">Email <span class="required">*</span></label> <input type="email" id="email" class="form-input" required> <p class="form-help">Não compartilhamos seu email.</p> </div>
Estados — erro / sucesso
aria-invalid="true" + aria-describedby pro form-error.
Por favor, informe um e-mail válido.
CPF validado.
Checkbox / radio
Modal
role="dialog" aria-modal="true" + focus trap + ESC fecha.
Você está dentro
Cadastro confirmado. As 5 aulas começam dia 15/06 às 20h. Quer adicionar tudo no Google Agenda agora?
<div class="modal-backdrop" role="dialog" aria-modal="true"
aria-labelledby="modal-title" aria-hidden="false">
<div class="modal">
<button class="modal-close" aria-label="Fechar">...</button>
<h3 id="modal-title" class="modal-title">Você está dentro</h3>
<p class="modal-body">Cadastro confirmado.</p>
<div class="modal-actions">
<a href="..." class="cta-green">Adicionar tudo</a>
</div>
</div>
</div>
Toast
role="status" aria-live="polite". 3 variantes: success, error, warning.
Inscrição confirmada
Você vai receber as aulas no e-mail cadastrado.
Erro ao enviar
Verifica sua conexão e tenta de novo.
Vagas acabando
Restam 7 vagas pra Engenharia de Petróleo.
Skip-to-content
Invisível até receber focus. WCAG 2.4.1.
<a href="#main" class="skip-link">Pular para o conteúdo</a> <!-- ... --> <main id="main">...</main>
Biblioteca SVG
Substitui emojis em landings. Click pra copiar SVG inline. Detalhes em docs/design-systems/petrobras-vitalicio/icons.md.
O que acontece quando alguém pede uma landing
Da ativação da skill até o deploy em produção. Tudo automático — pessoa só dá o prompt e aprova preview.
A barra é Apple, Linear, Stripe
Não "site OK de SaaS". Memorável. 7 critérios obrigatórios + checklist 12 itens. Codificado em docs/skills/frontend-quality-bar.md.
Referências (não "bonito" — craft)
7 critérios obrigatórios — toda landing nova
≥3 tipos diferentes de layout. Misturar editorial full-bleed, asymmetric, overlap, bento, intimista, denso técnico. Card 3-col uniforme em ≤30-40% das seções.
Noise overlay (SVG turbulence 1-3% opacity) · vignettes radiais · linhas técnicas (blueprint) · numeração monospace de seção (/// 02 · NOME) · ::selection custom. Trocar logo NÃO pode virar template genérico.
Hero clamp(3rem, 9vw, 6rem). Section editorial clamp(6rem, 22vw, 16rem). text-wrap: balance em headlines, pretty em parágrafos, font-feature-settings: tnum em números.
Hero com staggered reveal (logo 0.1s → headline 0.2 → sub 0.32 → CTA 0.42 → photo 0.5 → stats 0.85-1.15). SEMPRE cubic-bezier(0.16, 1, 0.3, 1). Respeitar prefers-reduced-motion.
Loading: shimmer/skeleton, nunca spinner. Empty: ilustração + CTA. Error: mensagem + ação de recuperação. Disabled: opacity + cursor + filter, nunca só opacity. Transitions 200-300ms, NUNCA instantâneo.
translateY(-2px) é o "Comic Sans dos hovers". Cada produto tem signature. Nossa: border-color rgba(15,252,132,0.55) + box-shadow inset 1px white 8%.
Stats count-up ao viewport (1.4s easeOutQuint) · progress bars animadas ao scroll · countdown live em CTA quando há urgência factual · hover surprise em elemento inesperado. Sem isso, landing fica "competente mas esquecível".
Checklist pré-push (12 itens · mín 9/12)
Skill lp-c01-landing valida mentalmente antes de declarar pronto. Score reportado no relatório final pra auditoria.
body::before SVG turbulence)translateY genérico)Targets de score
Score & issues v1 → v4
Avaliação contra frameworks Brad Frost / Nathan Curtis / GOV.UK / USWDS / EightShapes 8+1. Histórico: v1 (64) → v4 (~92) após embutir frontend-quality-bar.md. Relatório completo em docs/audits/v1-audit-report.md.
Score consolidado
Score consolidado: 64/100. Alvo v4: 92+/100.
O que tá bom (mantém)
- Tokens via CSS custom properties — zero hardcoded values
- Glass effect, gradients, glows neon (identidade forte)
- Naming consistente, brandbook completo
- Word coloring 3-tone codificado
- Auto-promoção de patterns canônicos via skill
Quick wins aplicados (v4)
- :focus-visible global em CTAs/btn-calendar (a11y crítico)
- :disabled state em CTAs (opacity, cursor, pointer-events)
- prefers-reduced-motion baseline (transitions desabilitam quando user pediu)
- .skip-link canônico (WCAG 2.4.1)
- .sr-only utility pra texto de screen reader
- Lifecycle status nos componentes (@status canonical|stable|experimental)
Componentes adicionados (v4)
- Forms completos: form-input, form-textarea, form-label, form-error, form-success, form-check
- Modal: modal-backdrop, modal, modal-close, modal-title, modal-body, modal-actions
- Toast: toast-container, toast (success / error / warning)
- Footer canônico: footer-canonical com links e meta
AI metadata (v4)
tokens.json— W3C DTCG Format (cores, gradients, spacing, typography, motion, semantic aliases)components.json— Catálogo de 25 componentes com slots, states, a11y notes, lifecycle, sources
Próximas melhorias (v5)
- Visual regression testing — screenshot baseline + diff em cada deploy
- Lighthouse CI no GitHub Action — score postado no commit
- Storybook se virar app/produto (não landings estáticas)
- Testes unitários nos componentes JS (countdown, modal trap)
Landings ativas
Aplicações reais do design system em produção.