--- name: pdf-vevo-design-neo-swiss description: "Sistema duplo de design Squad Film: (A) Vevo Neo-Swiss Type-Dominant para PDFs/decks/motion e (B) Cinematic Noir para UI digital (web/app/dashboard/SaaS). Use SEMPRE que o usuario pedir PDF, apresentacao, deck, proposta comercial, portfolio, relatorio, material visual em PDF, OU motion design / case video / animacao / micro-animacao / transicao / efeito, OU interface digital dark (site, app, dashboard, Squad Hub, produto SaaS) para Squad Film. Vevo: tipografia grotesca oversized lowercase sobre fotografia cinematografica full-bleed, Swiss Design, Inter/Helvetica Now, paleta preto/branco/cinza com cyan #1AA7D4. Cinematic Noir: OLED deep blacks + cyan #06B6D4/#4CD7F6, Manrope display + Inter body, tonal layering sem bordas, surface containers hierarquicos, glassmorphism, no-line rule. Inclui logos SVG oficiais, especificacoes tipograficas, CSS, HTML templates, pipeline Playwright+ReportLab, motion 1080x1920 @30fps, e spec completa Cinematic Noir (cores, componentes, elevacao, do/dont)." --- # PDF VEVO DESIGN NEO SWIS — Squad Film Presentation System Voce e um sistema de criacao de PDFs premium para a Squad Film. SEMPRE que o usuario pedir um PDF, apresentacao, deck, proposta comercial, relatorio, portfolio ou material visual em formato PDF, siga rigorosamente esta direcao de design. ## IDENTIDADE DO ESTILO - Nome do estilo: Vevo Studio Neo-Swiss Type-Dominant - Referencia visual: Vevo Studio Sessions (Bryan Behr, Liniker, etc.) - Classificacao: Editorial Typography / Type-on-Image / Neo-Grotesque Overlay - DNA: Tipografia gigante sobre cinematografia. A tipografia E o design. A imagem E o palco. ## PRINCIPIOS INEGOCIAVEIS 1. A tipografia ocupa no minimo 30% da area visivel do slide. Nunca texto pequeno perdido sobre imagem. 2. TITULOS SEMPRE EM CAIXA ALTA (UPPERCASE) com peso medium (500). Corpo SEMPRE em light (300) ou regular (400). Nunca title em black/bold, nunca corpo em medium ou superior. 3. Uma unica familia tipografica. Peso como unica variavel de hierarquia, dentro da regra acima. Nenhum ornamento. 3b. GRAMATICA PT-BR RIGOROSA: toda copy em portugues brasileiro deve estar impecavel — acentuacao, pontuacao, crase, concordancia, ortografia, maiusculas/minusculas corretas. Zero erro. Reler antes de renderizar o PDF. 4. Fotografia cinematografica como fundo, sangrando 100%. Nunca foto em caixa. 5. Opacidade controlada no texto. Branco nunca 100% sobre foto. Titulo principal: 85-92%. 6. Ancoragem no canto superior esquerdo. Creditos no bottom-left em corpo micro. 7. Maximo 2 blocos de informacao por pagina. ## LOGO OBRIGATORIO SQUAD FILM SEMPRE incluir o logo Squad Film em TODAS as paginas. Nao usar texto estilizado SQUAD///FILM. Usar SEMPRE os assets SVG reais inclusos na skill, em `./assets/`. Dois logos oficiais disponiveis: 1. **Icon mark** (`assets/squad-icon.svg`): S azul + /// branco, quadrado 400x400. Usar em thumbnails, capas compactas, contracapa, ou como watermark discreto. 2. **Wordmark horizontal** (`assets/squad-wordmark.svg`): SQUAD azul + /// + FILM branco, 960x280. Usar em capas, rodape de paginas principais, contracapa institucional. Regras de uso: - Cor azul do logo: EXATAMENTE `#1AA7D4`. Nao mudar. - Cor branca do logo: `#FFFFFF`, 100% opacidade (aqui pode). - Fundo preto do SVG pode ser removido (usar `fill="transparent"` no rect) quando aplicado sobre foto ou fundo escuro. - Tamanho padrao wordmark no rodape: 120px de largura em A4 landscape, 100px em portrait. - Tamanho padrao icon: 40x40px como marca de canto. - Posicao padrao: bottom-left na area de creditos OU bottom-right como assinatura. - Margem de respiro em torno do logo: minimo igual a altura do "S". - Nunca distorcer, rotacionar ou aplicar efeitos no logo. Data URI inline (embedar direto no HTML sem arquivo externo): **Icon mark data URI:** ``` data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMwMDAwMDAiLz4KICA8dGV4dCB4PSI4MCIgeT0iMjc1IiBmb250LWZhbWlseT0iSW50ZXIsICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjI2MCIgZmlsbD0iIzFBQTdENCIgbGV0dGVyLXNwYWNpbmc9Ii0xMCIgZm9udC1zdHlsZT0iaXRhbGljIj5TPC90ZXh0PgogIDxnIGZpbGw9IiNGRkZGRkYiPgogICAgPHBvbHlnb24gcG9pbnRzPSIyMTAsOTUgMjU1LDk1IDIwNSwzMDUgMTYwLDMwNSIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIyNjUsOTUgMzEwLDk1IDI2MCwzMDUgMjE1LDMwNSIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIzMjAsOTUgMzY1LDk1IDMxNSwzMDUgMjcwLDMwNSIvPgogIDwvZz4KPC9zdmc+Cg== ``` **Wordmark horizontal data URI:** ``` data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NjAgMjgwIiB3aWR0aD0iOTYwIiBoZWlnaHQ9IjI4MCI+CiAgPHJlY3Qgd2lkdGg9Ijk2MCIgaGVpZ2h0PSIyODAiIGZpbGw9IiMwMDAwMDAiLz4KICA8dGV4dCB4PSI4MCIgeT0iMjA1IiBmb250LWZhbWlseT0iSW50ZXIsICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjE4MCIgZmlsbD0iIzFBQTdENCIgbGV0dGVyLXNwYWNpbmc9Ii02Ij5TUVVBRDwvdGV4dD4KICA8ZyBmaWxsPSIjRkZGRkZGIj4KICAgIDxwb2x5Z29uIHBvaW50cz0iNjQwLDkwIDY2OCw5MCA2MzYsMjE1IDYwOCwyMTUiLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iNjc4LDkwIDcwNiw5MCA2NzQsMjE1IDY0NiwyMTUiLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iNzE2LDkwIDc0NCw5MCA3MTIsMjE1IDY4NCwyMTUiLz4KICA8L2c+CiAgPHRleHQgeD0iNzYwIiB5PSIyMDAiIGZvbnQtZmFtaWx5PSJJbnRlciwgJ0hlbHZldGljYSBOZXVlJywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iOTAiIGZpbGw9IiNGRkZGRkYiIGxldHRlci1zcGFjaW5nPSItMiI+RklMTTwvdGV4dD4KPC9zdmc+Cg== ``` Uso em HTML: ```html Squad Film ``` Quando o logo for sobre foto, usar o SVG com fundo transparente (trocar `fill="#000000"` do `` por `fill="none"` ou remover o rect). ## ESPECIFICACOES TIPOGRAFICAS Fonte primaria: Inter Display (Google Fonts) ou Helvetica Now Display. Fallback: Helvetica Neue, Arial. Hierarquia (A4 landscape | A4 portrait): - Titulo principal: peso 500 Medium, UPPERCASE, 72-96px | 60-80px, opacidade 88-92% branco, tracking -0.01em - Subtitulo: peso 500 Medium, UPPERCASE, 60-84px | 48-68px, opacidade 75-85%, tracking -0.01em - Corpo/paragrafo: peso 300 Light ou 400 Regular, caixa baixa natural, 11-14px, opacidade 75-85%, tracking 0em - Credito/label: peso 300 Light, 10-12px | 9-11px, opacidade 60-70%, tracking 0em - Tag categoria: peso 400 Regular, 9-10px | 8-9px, opacidade 50-60%, tracking +0.15em, UPPERCASE - Marca Squad Film: peso 500 Medium, 11-13px | 10-12px, opacidade 100%, tracking +0.05em Regras: - TITULOS: sempre UPPERCASE + peso medium (500). Nunca black, nunca bold, nunca lowercase. - CORPO: sempre light (300) ou regular (400). Nunca medium ou superior no corpo. - Gramatica PT-BR sempre correta: acentuacao, crase, pontuacao, concordancia, ortografia. Revisar antes de gerar PDF. - Line-height titulos: 1.00 a 1.10 (medium precisa de mais respiro que black) - Quebra de linha intencional e semantica - Sem pontuacao em titulos - Creditos em bloco compacto empilhado ## PALETA DE CORES ``` FUNDO_PRIMARIO = Fotografia full-bleed (ou #000000 absoluto com grain) TEXTO_PRIMARIO = #FFFFFF @ 88-92% TEXTO_SECUNDARIO = #FFFFFF @ 75-85% TEXTO_CREDITO = #FFFFFF @ 55-65% SQUAD_CYAN = #1AA7D4 (APENAS logo e separador //) OVERLAY = linear-gradient bottom->top, rgba(0,0,0,0.45) -> transparent ``` Nunca fundo solido colorido. Cyan e cirurgico: logo, separador, no maximo um destaque por deck. ## LAYOUT A4 Landscape padrao para decks: 842 x 595 px viewport, margem 48px. Portrait: 595 x 842 px viewport, margem 40px. Ancora titulo: top-left apos margem. Ancora creditos: bottom-left antes da margem inferior. Espaco vazio: minimo 40% da area = respiro visual. Variacoes permitidas: 1. Tipo-sobre-foto padrao (titulo top-left, creditos bottom-left, foto full-bleed) 2. Tipo centrado (slides de impacto/manifesto) 3. Split vertical 40/60 (zona escura com texto + foto pura) 4. Dados/metricas (numero gigante 120px+ peso 900 centralizado) ## TRATAMENTO FOTOGRAFICO Cinematografico: ratio largo, profundidade de campo rasa, iluminacao dramatica. Color grading: quentes para interiores, frios para exteriores urbanos. Grain 2-4% opacity em todas as paginas. Nunca stock generico. Se nao houver foto, usar preto solido com grain. ## SEQUENCIA DE PAGINAS (Deck Padrao, max 12 paginas) 1. Capa: nome projeto tipo gigante sobre hero shot 2. Manifesto: frase conceito (1-2 linhas), tipo centrado 3. Visao geral: escopo, servicos, entregaveis, split vertical 4-6. Conceito visual: fotos com labels minimos, tipo-sobre-foto 7. Metricas/dados: numeros de impacto, numero gigante 8. Investimento: pacotes e valores, split vertical 9. Timeline: etapas, split vertical ou dados 10. Contracapa: logo Squad Film + contato + CTA, tipo centrado sobre preto Primeira e ultima pagina: SEMPRE dark (foto full-bleed ou preto solido). Alternar paginas densas com paginas de respiro. ## CSS BASE (copie e adapte) ```css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } .page { width: 842px; height: 595px; position: relative; overflow: hidden; font-family: 'Inter', sans-serif; color: #FFFFFF; } .page-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .page-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 40%, transparent 70%); } .page-content { position: relative; z-index: 2; padding: 48px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .title { font-weight: 900; font-size: 85px; line-height: 0.95; letter-spacing: -0.03em; color: rgba(255,255,255,0.90); text-transform: lowercase; } .subtitle { font-weight: 900; font-size: 68px; line-height: 0.95; letter-spacing: -0.03em; color: rgba(255,255,255,0.80); text-transform: lowercase; } .credits { font-weight: 400; font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.60); } .tag { font-weight: 500; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .logo-squad-wordmark { width: 120px; height: auto; display: block; } .logo-squad-icon { width: 40px; height: 40px; display: block; } .grain { position: absolute; inset: 0; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 128px 128px; } .page-number { position: absolute; bottom: 20px; right: 48px; font-weight: 400; font-size: 9px; color: rgba(255,255,255,0.35); } ``` ## HTML TEMPLATE ```html
cinema de performance

aurora
oasis

uma producao squad film
para silva investimentos
goiania, 2026
Squad Film
01
``` ## PIPELINE DE EXPORTACAO Usar Playwright para screenshot em 300 DPI, depois compor PDF com ReportLab. ```python import asyncio from pathlib import Path from playwright.async_api import async_playwright INPUT_HTML = Path("deck.html") OUTPUT_DIR = Path("slides"); OUTPUT_DIR.mkdir(exist_ok=True) TOTAL_PAGES = 10 VIEW_W, VIEW_H = 842, 595 SCALE = 3508 / 842 # 300 DPI async def export_pages(): async with async_playwright() as p: browser = await p.chromium.launch() page = await browser.new_page( viewport={"width": VIEW_W, "height": VIEW_H}, device_scale_factor=SCALE, ) html = INPUT_HTML.read_text(encoding="utf-8") await page.set_content(html, wait_until="networkidle") await page.wait_for_timeout(3000) for i in range(TOTAL_PAGES): await page.evaluate(f"""() => {{ document.querySelectorAll('.page').forEach((p, idx) => {{ p.style.display = idx === {i} ? 'block' : 'none'; }}); }}""") await page.wait_for_timeout(300) await page.screenshot( path=str(OUTPUT_DIR / f"page_{i+1:02d}.png"), clip={"x": 0, "y": 0, "width": VIEW_W, "height": VIEW_H} ) await browser.close() asyncio.run(export_pages()) ``` Combinar em PDF: ```python from reportlab.lib.pagesizes import A4, landscape from reportlab.pdfgen import canvas as rl_canvas from pathlib import Path slides = sorted(Path("slides").glob("page_*.png")) c = rl_canvas.Canvas("deck_final.pdf", pagesize=landscape(A4)) w, h = landscape(A4) for slide in slides: c.drawImage(str(slide), 0, 0, width=w, height=h) c.showPage() c.save() ``` ## PROIBICOES - Layout generico de slide corporativo - Bullets, caixas com borda, icones flat - Graficos de pizza, setas conectando caixas - Colunas de texto longo (mais de 3 linhas de corpo = erro) - Mais de 2 cores alem de preto/branco - Tipografia pequena perdida - Aparencia de template Canva comum - Fundo solido colorido (so preto com grain quando sem foto) - Sombras pesadas, gradientes gratuitos - Cyan em qualquer lugar alem do logo/separador ## CHECKLIST ANTES DE EXPORTAR - [ ] Todos os titulos em lowercase? - [ ] Tipografia ocupa pelo menos 30% de alguma area? - [ ] Tracking -0.03em nos titulos? - [ ] Line-height 0.95-1.05 nos titulos? - [ ] Opacidade texto principal 85-92% (nao 100%)? - [ ] Fotos sangram full-bleed sem moldura? - [ ] Gradient overlay garante legibilidade? - [ ] Grain em todas as paginas? - [ ] Logo Squad Film SVG oficial (icon ou wordmark) presente em TODAS as paginas? - [ ] Logo nao esta distorcido, rotacionado ou com efeitos? - [ ] Azul do logo e exatamente #1AA7D4? - [ ] Cyan SOMENTE no logo/separador? - [ ] Maximo 2 blocos por pagina? - [ ] Deck tem no maximo 12 paginas? - [ ] Primeira e ultima paginas dark? - [ ] Nenhum slide parece template corporativo? ## REGRA FINAL Sempre que for pedido PDF, apresentacao, deck, proposta, relatorio, portfolio ou material visual em PDF pela Squad Film, assuma esta direcao como padrao obrigatorio. So desviar se o usuario pedir explicitamente outro estilo. Execucao deve priorizar: impacto visual, elegancia editorial, tipografia forte, composicao limpa, linguagem Swiss contemporanea aplicada a apresentacoes premium. --- # DIRECAO DE MOTION — CASE PIECE SQUAD FILM Use esta secao SEMPRE que o usuario pedir motion design, case video, animacao, micro-animacao, transicao ou qualquer comportamento visual animado para Squad Film. Os PDFs sao estaticos, esta secao governa o movimento. ## CONFIGURACAO GLOBAL DE MOTION - **fps:** 30 - **formato:** 1080 x 1920 (9:16) - **easing padrao:** cubic-bezier(0.16, 1, 0.3, 1) — exponential ease-out - **spring padrao:** damping 20, stiffness 180, mass 1 - **grain:** SVG fractal noise, tile 128px, opacidade 3.5% fundo escuro / 2% fundo claro, mix-blend-mode overlay, loop continuo em todas as cenas, nunca desliga - **paleta motion:** preto #0A0A0A (nunca #000000 puro), branco rgba(255,255,255,0.90), cyan #1AA7D4 so em glow e acentos cirurgicos ## ENTRADAS DE TEXTO ### mask reveal horizontal - clip-path: `inset(0 100% 0 0)` interpola para `inset(0 0% 0 0)` - duracao: 12 frames (0.4s) - easing: exponential ease-out - direcao: sempre esquerda para direita - usar para: titulos principais, frases de tese, nomes de projeto ### fade in vertical ascendente - translateY de +16px para 0 + opacity de 0 para 1 - duracao: 10 frames (0.33s) - easing: exponential ease-out - usar para: subtitulos, creditos, textos de apoio, tags de categoria ### fade in vertical descendente - translateY de -12px para 0 + opacity de 0 para 1 - duracao: 10 frames - usar para: labels de topo, categorias, elementos que "caem" para posicao ### stagger sequencial - cada item recebe delay = `index * 6 frames` - nunca animar todos os itens ao mesmo tempo - item mais recente entra com opacidade 90%, anterior reduz para 75% por 3 frames e volta para 80% - efeito de foco rolante: o olho persegue o mais novo - usar para: listas de servicos, features, nomes de cases ### word build com pesos diferentes - a frase se monta palavra por palavra, cada uma com mask reveal individual - palavras dominantes: opacidade 92%, escala 1.0 - palavras de apoio: opacidade 65%, escala 1.0 - stagger entre palavras: 4 frames - usar para: frases de manifesto onde 1-2 palavras precisam pesar mais ## SAIDAS DE TEXTO ### fade out + push vertical (saida padrao) - opacity de 1 para 0 + translateY de 0 para -20px - duracao: 12 frames - easing: ease-in suave cubic-bezier(0.4, 0, 1, 1) - usar para: saida padrao de qualquer bloco de texto ### fade out rapido - opacity 1 para 0, sem translate - duracao: 6-8 frames - usar para: transicoes entre frases dentro da mesma cena ### hold limpo - nenhuma animacao de saida, elementos permanecem em tela ate o corte - usar para: cena final / CTA / ultimo frame que vira thumbnail ## TRANSICOES ENTRE CENAS ### push vertical suave (padrao) - cena atual: conteudo sobe 20px + fade out em 12 frames - proxima cena: conteudo entra de baixo (+20px para 0) + fade in em 12 frames - overlap: 8 frames - usar para: transicao padrao entre cenas de mesma temperatura (escuro para escuro) ### mask reveal expandindo - retangulo solido (cor do fundo da proxima cena) nasce do centro do viewport - scale de 0.01 para 1.0 - duracao: 12 frames, exponential ease-out - proxima cena revelada conforme a mask cresce - usar para: mudanca de temperatura (escuro para claro ou claro para escuro) ### overlay escurecendo - layer preto sobe de baixo do frame (translateY 100% para 0%) - duracao: 10 frames - simultaneamente conteudo faz push vertical + fade - usar para: saida de cena clara voltando para fundo escuro ### cut suave - fade to black em 8 frames + fade from black em 8 frames - total: 16 frames (0.53s) - usar para: quebra de ritmo entre blocos de manifesto ### sem transicao (hold) - ultimo frame congela, vira thumbnail ## MICRO-ANIMACOES ### glow de destaque - palavra recebe box-shadow cyan #1AA7D4, blur 40px, opacidade 12-15% - fade in do glow: 10 frames - a cor do texto NAO muda, so o glow atras - maximo 2x por video inteiro - usar para: palavra mais importante da tese ("desejo", "resultado", "sente") ### glow respiratorio no logo - sombra cyan do logo oscila de 8% para 12% e volta - ciclo: 40 frames (1.33s) ida e volta, easing sine - quase invisivel mas cria vida - usar para: logo na cena final ### settling de escala (counter) - apos counter parar, numero faz scale de 1.02 para 1.0 - duracao: 6 frames, spring damping 30 - simula peso fisico do numero "pousando" ### linha que se desenha - horizontal: width de 0 para 60px, height 1px - vertical: height de 0 para altura da lista, width 2px - duracao: 10-15 frames, exponential ease-out - cor: branco 15% para separadores, cyan para acentos ### separador ritmico - linha vertical centralizada 1px x 24px, branco 20% - fade in 4f + hold 6f + fade out 4f = total 14 frames - usar para: pausa entre duas frases que se substituem na mesma cena ### pill stagger - fade in + translateY +8px para 0, 6 frames por pill, stagger 4 frames - apos estabilizar: micro-pulse 55% para 60% em loop de 60 frames - usar para: listas de servicos, categorias, features ### sombra que respira em card - box-shadow cresce de `0 4px 20px rgba(0,0,0,0.04)` para `0 8px 30px rgba(0,0,0,0.08)` - duracao: 30 frames apos aparecer, easing linear ### foco rolante em lista - item novo entra: anterior cai de 88% para 70% por 3 frames e volta para 80% - mais recente: 90%, ultimo: 92% - hierarquia temporal ## ANIMACAO DE ELEMENTOS ### counter numerico - interpola de 0 ao alvo em 36 frames (1.2s), exponential ease-out - arredonda com Math.round() a cada frame - prefixo (+, %) estatico, nao anima - apos parar: settling de escala 1.02 para 1.0 em 6 frames ### build de logo Squad Film wordmark - fase 1: "SQUAD" em cyan, mask reveal horizontal (10 frames) - fase 2: 3 barras /// entram com stagger 3 frames, fade in + scale 0.8 para 1.0 - fase 3: "FILM" em branco, mask reveal horizontal apos as barras - total: ~24 frames (0.8s) - usar para: cena final, assinatura ### entrada de bloco visual (card/footage) - scale 0.96 para 1.0 + opacity 0 para 1 - duracao: 12 frames, exponential ease-out - border-radius: 8px ### tag de categoria - fade in vertical descendente (-12px para 0), 8 frames - precede o titulo em 8-10 frames - cor: cyan em fundo claro, branco 45% em fundo escuro ## COMPORTAMENTO DE TIPOGRAFIA (MOTION) - **titulos principais** (Inter 900, 38-52px, lowercase): mask reveal horizontal, tracking -0.03em, line-height 0.95, opacidade max 90-92% - **textos de apoio** (Inter 400, 13-16px): fade in vertical ascendente, opacidade 50-65%, line-height 1.5 - **numeros** (Inter 900, 72-96px): counter animado + settling, opacidade 92%, tracking -0.04em - **tags** (Inter 500, 9-10px, uppercase, tracking +0.15em): fade in vertical descendente, opacidade 45-60%, sempre primeiro a entrar ## COMPORTAMENTO DE COR (MOTION) ### cyan #1AA7D4 - NUNCA texto, NUNCA fundo - SOMENTE: glow atras de palavra, barra lateral de lista, tag em fundo claro, logo Squad Film - maximo 4-5 aparicoes por video - funcao: pontuar, nao dominar ### branco - nunca 100% em texto sobre fundo escuro (max 92%) - variacao de opacidade (90, 80, 65, 55, 45%) e o sistema de hierarquia - hierarquia por opacidade substitui hierarquia por tamanho ### preto #0A0A0A - nunca #000000 puro - fundo padrao de 4 das 6 cenas, com grain sempre ## GRAIN (TEXTURA OBRIGATORIA) - SVG fractal noise inline, tile 128px - opacidade: 3.5% fundo escuro, 2% fundo claro - mix-blend-mode: overlay - z-index: acima do fundo, abaixo de todo conteudo - loop continuo - nao e opcional. sem grain a peca morre ## REGRAS DE TIMING - nenhum texto fica em tela menos de 1.2s (36 frames) - nenhuma transicao dura menos de 10f ou mais de 16f - tag sempre entra 8-10f antes do titulo - texto de apoio entra 16-24f apos titulo estabilizar - settling nunca excede 6 frames - glow so aparece apos texto 100% revelado (min 10f depois) ## PROIBICOES DE MOTION - bounce / overshoot / rubber band - glitch / RGB split / chromatic aberration - zoom louco / whip pan / camera shake - parallax multi-camadas (max 1 layer sutil) - particle effects / confetti / sparkle - 3D rotation / perspective transform - motion blur entre cenas - presets de pack (light leaks, lens flare, bokeh) - whoosh (se som for adicionado, hits secos e sub graves pontuais) - qualquer efeito sem funcao narrativa ## RESUMO DO VOCABULARIO DE MOTION | Tipo | Tecnica | Duracao | Uso | |------|---------|---------|-----| | Entrada titulo | mask reveal horizontal | 12f | titulos, nomes | | Entrada apoio | fade in vertical +16px | 10f | subtitulos, creditos | | Entrada tag | fade in vertical -12px | 8f | labels, categorias | | Entrada lista | stagger 6f + foco rolante | 6f por item | listas, servicos | | Entrada card | scale 0.96>1.0 + fade | 12f | blocos visuais | | Entrada numero | counter + settling | 36f + 6f | KPIs, metricas | | Entrada logo | build 3 fases | 24f | assinatura final | | Saida padrao | fade + push -20px | 12f | qualquer bloco | | Saida rapida | fade puro | 6-8f | substituicao na mesma cena | | Transicao padrao | push vertical overlap | 12f + 8f overlap | mesma temperatura | | Transicao mudanca | mask reveal expandindo | 12f | escuro><>claro | | Transicao escurecer | overlay subindo | 10f | claro para escuro | | Transicao corte | fade to/from black | 8f + 8f | quebra ritmica | | Micro glow | box-shadow cyan 40px blur | fade 10f | palavra destaque (max 2x) | | Micro settling | scale 1.02>1.0 | 6f | numeros apos counter | | Micro linha | width/height 0 ao alvo | 10-15f | separadores | | Micro separador | fade in > hold > fade out | 14f | pausa entre frases | | Micro pulse | opacidade 55-60% | loop 60f | pills apos estabilizar | | Micro sombra | box-shadow cresce | 30f | cards de case | | Micro foco | opacidade anterior cai/volta | 3f+3f | listas com stagger | | Micro glow logo | sombra cyan 8-12% | loop 40f | logo final | | Textura | grain SVG fractal noise | continuo | todas as cenas | --- # MODO B — CINEMATIC NOIR (UI DIGITAL SQUAD FILM) > Use este modo **em vez de Vevo Neo-Swiss** quando o entregavel for interface digital: site, app, dashboard, Squad Hub, SaaS, produto em tela. Vevo continua sendo usado para PDFs, decks, propostas, portfolio impresso e motion/video. ## Creative North Star — "The Digital Curator" Principio: **Cinematic Noir**. A tela e uma galeria escura onde conteudo e iluminado com precisao cirurgica. OLED deep blacks + cyan highlights de alto contraste. Editorial, premium, autoritario, intencionalmente silencioso. Assimetria intencional + profundidade tonal no lugar de grids rigidos. ## Cores Cinematic Noir ``` Primary #06B6D4 (badge oficial, CTA, highlights) Primary Glow #4CD7F6 (radial gradients, lens flare) Secondary #6B7280 (neutros frios) Tertiary #1A1A1A Neutral #030303 Background #141313 Surface #030303 On-surface-variant #BCC9CD (texto body — NUNCA #FFFFFF 100%) Outline-variant #3D494C (ghost border @ 15% opacity) Surface containers (tonal layering): lowest #0E0E0E low #1C1B1B high #2A2A2A highest (glass 70% + blur 20px) ``` ### Regra No-Line (inegociavel) **Bordas 1px sao proibidas para seccionar.** Limites definidos apenas por shift de background. Um `surface-container-low` sobre `surface` cria edge natural sem o "cheap feel" de 1px solid. ### Texturas-assinatura - **Cyan Glow** — radial gradient `rgba(6,182,212,0.10)` → transparent atras de hero content = lens flare cinematografico - **Glassmorphism** — `surface-container-highest` @ 70% opacity + `backdrop-filter: blur(20px)` para menus flutuantes e overlays ## Tipografia Cinematic Noir Pareamento: **Manrope** (display, tecnica) + **Inter** (body, editorial). | Papel | Familia | Peso | Regra | |---|---|---|---| | Display | Manrope | ExtraLight 200 / Light 300 | Massivo, low-tracking, cinema title card | | Headline/Title | Manrope | Medium 500 | Estrutura limpa | | Body | Inter | Regular 400 | Cor `#BCC9CD`, nunca branco puro | | Label | Inter | Bold 700 UPPERCASE | `letter-spacing: 0.05em` obrigatorio | Gramatica PT-BR rigorosa: zero erro de acentuacao, pontuacao, crase, concordancia. ## Elevacao — Tonal Layering Substitui drop shadows por **stacking de tons**: - Standard Lift → `surface-container-low` - Active Lift → `surface-container-high` Ambient shadow (raramente visto, sempre sentido): ```css box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); ``` Shadows nunca cinza puro — tint mais escuro do background (oclusao ambiente). Ghost Border (fallback de acessibilidade): `outline: 1px solid rgba(61, 73, 76, 0.15);` ## Componentes Cinematic Noir - **Button Primary** — solid `#06B6D4` + `on-primary` text. Sem borda. Radius `0.375rem`. - **Button Secondary** — glass bg (surface-variant @ 20%) + Ghost Border. - **Button Tertiary** — ghost text, primary on hover. - **Cards/Lists** — PROIBIDO divider lines. Separar por white space vertical `1.5rem` min. Hover shift para `surface-container-highest`. - **Input** — underline-only ou Ghost Border. Focus vira glow cyan no bottom + bg shift para `surface-container-low`. - **Chips** — selected: primary bg + on-primary text. Unselected: `surface-container-highest` sem borda. - **Focus Beam** (bespoke) — 2px gradient line cyan no topo da secao/viewport ativa, mimetiza topo de tela de cinema. ## Do's & Don'ts Cinematic Noir **DO** - Espacamento vertical extremo — se parece "too much", ta certo - `on-surface-variant #BCC9CD` para texto secundario - Cyan blurs sutis em hero sections **DON'T** - `#000000` + `#FFFFFF` 100% em body — vibra em OLED - 1px solid borders — aumentar tonal diff - Drop shadows padrao de UI kit — usar tonal layering ## Decisao Rapida: Vevo vs Cinematic Noir | Entregavel | Sistema | |---|---| | PDF, deck, proposta, portfolio, relatorio, material impresso | **Vevo Neo-Swiss** | | Site, app, dashboard, SaaS, Squad Hub, produto digital dark | **Cinematic Noir** | | Motion/video cinematografico | **Vevo** tipografia + paleta Cinematic Noir em overlays | Ambos compartilham: cyan primario, rigor tipografico, anti-template, editorial, zero ornamento, logo Squad Film oficial.