familygroup

00 · Fundamentos

A marca

O símbolo é uma chama/gota laranja-lava com as letras F+G entrelaçadas em negativo. Abaixo, os assets reais do acervo (PNG, fundo transparente) — símbolo isolado, lockups horizontal e vertical, monograma FG e a versão 3D.

Símbolo isolado · cor

Lockup horizontal · cor

Lockup vertical · cor

Monograma F / G / símbolo

Versão 3D

01 · Fundamentos

Cores

As quatro cores oficiais. HEX é fato; CMYK é conversão determinística; Pantone é aproximação a validar na gráfica. Use sempre os tokens, nunca HEX solto.

⚠️ Laranja Lava em quadricromia (CMYK) e sublimação perde saturação (gamut). Em peças físicas preferir tinta spot Pantone; fechar por prova de cor no substrato real.

02 · Fundamentos

Tipografia

Fonte oficial PP Mori (variável), renderizada aqui no fallback declarado "PP Mori", "Inter", system-ui, Arial. O wordmark mantém "family" reto + "group" itálico.

Fallback: PP Mori → Inter (web) → Arial (impressão). O par reto×itálico do wordmark é preservado mesmo em fallback. Licença PP Mori para distribuição a gráficas/web = follow-up.

03 · Fundamentos

Contraste WCAG

Ratios pela fórmula WCAG 2.1. Texto normal ≥ 4.5:1; texto grande ≥ 3:1; AAA ≥ 7:1. Os pares de risco estão destacados e são proibidos para texto — esta matriz governa TODAS as quatro partes do brand book.

Regra de bolso: corpo sobre claro → Off-black. Sobre Lava → sempre Off-black (nunca Off-white). Lava + Light Blue só como bloco/gradiente decorativo, jamais texto entre eles. Nenhuma peça deste brand book usa par proibido como texto.

04 · Fundamentos

Grid & espaçamento

Desktop: 12 colunas, margem lateral 96px, calha 24px, largura útil 1248px (mockup 2880×1800 @300DPI = viewport 1440 @1×). Espaçamento na escala base-8.

Escala base-8 (espaçamento)

05 · Fundamentos

Área de proteção & mínimos

Unidade X = altura do símbolo (a gota/chama com F+G). Respiro mínimo 0,5·X em todos os lados do lockup e do símbolo isolado. Nada (texto, borda, outro logo) invade essa faixa.

familygroup

Faixa azul tracejada = respiro 0,5·X ao redor do lockup. Mínimos impressos: lockup ≥ 20 mm de largura; símbolo isolado ≥ 10 mm de altura (digital: lockup ≥ 32 px / símbolo ≥ 24 px). O fator 0,5·X é derivado da grade do manual p.10 — confirmar contra o vetor-mestre Family Group - ID.ai é follow-up.

06 · Biblioteca

Os 5 componentes de marca

A biblioteca renderizada em HTML/CSS real. Todas as variantes usam apenas pares de contraste aprovados — nenhum par proibido aparece como texto.

2 · Selo circular Selo

Badge artesanal: "family · group" curvado ao redor do símbolo isolado. 3 cores. Conteúdo sempre em par de contraste aprovado.

Laranja

Azul

Preto

Selos = assets reais do acervo (PNG, fundo transparente). O símbolo central é a chama/gota com F+G.

3 · Faixa / Ribbon Faixa

Tira horizontal: wordmark + símbolo + pílulas dos 3 pilares. Altura 64px (space-7). 3 cores.

Lava · conteúdo Off-black (4.94:1)

familygroupuma igrejauma famíliauma missão

Azul · conteúdo Off-black (10.18:1)

familygroupuma igrejauma famíliauma missão

Preto · conteúdo Off-white (13.39:1), pílulas Lava

familygroupuma igrejauma famíliauma missão

4 · Lockup do logo Lockup

Símbolo + "family" reto + "group" itálico. Matriz Estilo (Cor/Mono) × Polaridade (Positivo/Negativo) = 4 variantes. O wordmark nunca fica Lava sobre Off-white.

Cor / Positivo

Cor / Negativo

Mono / Positivo

Mono / Negativo

Lockups = assets reais do acervo (PNG, fundo transparente). Símbolo (chama/gota com F+G) + wordmark familygroup.

07 · Governança

Usos proibidos (don'ts)

Os erros mais comuns. Cada item traz o erro e o correto.

Parte II · EPIC-005

Sete aplicações spec

Regra de ouro transversal: em qualquer substrato Lava, texto/elemento legível é Off-black (4.94:1), nunca Off-white. Em tecido/superfície clara, símbolo em mono escuro. Laranja Lava em produção → preferir spot Pantone.

Vestuário

Story 5.1 · camiseta + boné

familygroup

familygroup

Camiseta escura: lockup central no peito (wordmark Off-white + símbolo Lava). Boné trucker: lockup no painel preto, aba Lava. Boné claro: símbolo mono escuro + pílulas.

Arte camiseta

16:9 · 135,47 × 76,2 mm (fato: MediaBox do PDF)

Técnica

Serigrafia / DTF (camiseta) · bordado (boné)

Mínimo

lockup 20 mm; símbolo 10 mm

Risco

F/G em bordado < ~40 mm pode fundir

Brindes & drinkware

Story 5.2 · eco bag + copo/caneca/squeeze/lata

familygroup

Eco bag tote Light Blue: símbolo gigante line-art Lava (decorativo, não texto) + lockup Off-black. Copo/caneca/squeeze/lata = derivados da marca (sem arquivo-fonte).

Eco bag

~38×42 cm · serigrafia 2 cores spot

Cor texto

Off-black sobre Light Blue (10.18:1)

Drinkware

sublimação / serigrafia vitrificada

Mínimo

símbolo 10 mm (crítico em lata)

Papelaria

Story 5.3 · adesivos + envelope carta

familygroupuma igreja

Adesivo faixa (2 variações Off-black/Off-white) + selos circulares (3 cores). Envelope DL Off-black com gradiente na aba; texto NUNCA sobre o gradiente.

Selos

⌀ 50 / 65 mm · sangria 3 mm radiais

Envelope

DL 110×220 mm (proporção do preview)

Sangria

3 mm padrão de gráfica

Mínimo

lockup 20 mm; símbolo 10 mm

Crachás & credenciais

Story 5.4 · 3 funções + cordão

volun-
tário

familygroup

multi-
mídia

familygroup

técni-
ca

familygroup

Cor do bloco diferencia a função (lido do acervo): voluntário=Lava, multimídia=Light Blue, técnica=Off-black. Título Off-black (ou Off-white na técnica). Cordão Lava transversal.

Formato

retrato ~85×124 mm (proporção 0,687 do PSD)

Contraste

4.94 / 10.18 / 13.39:1 ✅

Cordão

fita Lava, 15–20 mm, sublimação

Furo

ilhó ⌀ 5–6 mm + clipe giratório

Sinalização & wayfinding

Story 5.5 · placa + A3 + suspensa

Aud.
Principal

familygroup

de família
para família

Placa de recepção (4 variantes), aviso de cultos A3 e painel suspenso de wayfinding. Tamanho do texto governado pela distância de leitura, não pela escala digital.

Placa

300 / 400 mm quadrada · margem 20 mm

A3

297 × 420 mm · sangria 3 mm

Distância

≈ 5 mm de letra por metro

Suspensa

≥ 600×200 mm · alto contraste (13.39:1)

Fachada & relevo 3D

Story 5.6 · letra-caixa + chapa

uma igrejauma famíliauma missão

familygroup

Símbolo extrudado: face Lava sólida; profundidade com gradiente Lava→Light Blue (frente→recuo); vão interno Light Blue; sombra por standoff. Fascia Off-black + wordmark Off-white + pílulas outline.

Variante A

acrílico · extrude 50–80 mm · standoff 20 mm

Variante B

chapa/ABS · relevo 10–20 mm · colado

Símbolo mín.

X ≥ 300 mm em fachada

Cor

spot/PU com proteção UV (não CMYK)

Kit do voluntário

Story 5.7 · agregador por equipe

Recepçãocrachá Lava + camiseta + eco bag + cordão

Multimídiacrachá Light Blue + idem transversal

Técnicacrachá Off-black + idem transversal

Documento agregador: consolida crachá + vestuário + brinde + cordão por equipe. A diferenciação é a cor do crachá; camiseta, eco bag e cordão são transversais.

Equipes

3 (cores cobrem 3 das 4 oficiais)

Cordão

Lava, igual para todas

Pulseiras

no KV p.10 — spec pendente

Status

aguarda confirmação de liderança

Parte III · EPIC-006

Tokens de motion spec

Durações nomeadas (vinhetas medidas dos arquivos; micro/transition/enter são boa prática @60fps) e curvas de easing. smooth é o padrão da marca. Deltas exatos de keyframe = follow-up (abrir motion.aep).

Easing — barra de demonstração (CSS real)

Vinheta de marca

Master 16:9 — 3840×2160, 60 fps, 10,92 s, fundo preto, sem áudio. Estrutura: preto → monta lockup → hold → 3 pílulas em sequência → hold → fade. O corte 1:1 (highres.mp4) é símbolo-only. 9:16 não existe no acervo — produção declarada.

Vídeo real (master 16:9), se disponível: ../../Branding - Family Group-2/01 - Identidade Visual/04 - Motion/motion - family group 16x9.mp4 binário · não dependemos dele aqui

preview animado (CSS)

familygroup

uma igreja uma família uma missão

Demonstração CSS (não é o vídeo final), fiel à estrutura do master: monta o lockup (símbolo entra → wordmark assenta ao lado) → hold → 3 pílulas em sequência → hold → fade. Ciclo de 6 s; easing smooth no símbolo, out no wordmark/pílulas. Só transform/opacity. O símbolo fica ao lado do wordmark (lockup real), nunca sobreposto.

Lower-third (tarja de transmissão)

Canvas 1920×1080. Container ancorado inferior-esquerdo na action-safe; texto na title-safe. Barra de acento Lava de 4px; fundo Off-black; nome Off-white (13.39:1); cargo Light Blue (10.18:1).

preview animado (CSS) 1920×1080 · safe areas SMPTE

Pr. Samuel Galdino

Pastor presidente

Preview animado CSS (loop 5 s): a tarja desliza da esquerda + o bloco de acento Lava cresce a partir da base → segura → sai. Easing out (tarja) e smooth (acento). No vídeo final a entrada é ~0,5 s. Variantes: padrão (nome+cargo), só-nome (~116px), centralizada. Lava nunca recebe texto — só a barra de 4px.

End card / CTA

Fecho de vídeo (16:9 e 9:16). Símbolo 3D com gradiente ao centro; dois CTAs obrigatórios. Ordem: fundo → gradiente → símbolo → CTAs → wordmark.

preview animado (CSS)

inscreva-se próximos passos

Preview animado CSS (loop 5,5 s): o logo dá fade + leve scale, depois os CTAs sobem em sequência (primário → secundário, easing out). Só transform/opacity. Fundo = gradiente de assinatura; lockup colorido (wordmark Off-black, seguro em todo o intervalo). CTA primário bloco Off-black + texto Off-white (13.39:1); secundário outline Off-black + texto Off-black (≥10.18:1 sobre o gradiente). Duração final: ~20 s (YouTube) / ~6 s (social).

Transição stinger

Tipo A — símbolo cobre/revela (1,20 s, corte no frame 36). Tipo B — wipe de faixa de cor (0,60 s). Para OBS: WebM alfa / MOV ProRes 4444, 60 fps.

›1 · entra

2 · cobre

›3 · revela

preview animado

O 4º quadro é o preview animado CSS (loop 4,5 s): a faixa do gradiente varre left→right, o símbolo aparece no auge da cobertura e a faixa sai pela direita. Só transform/opacity. Transition point: 600 ms (Tipo A) / 300 ms (Tipo B). Mín. 10 s entre stingers. Símbolo é o único elemento de marca no stinger (não reabre o wordmark).

Peças de motion para a igreja

Quatro animações utilitárias para o dia a dia da comunicação — selo de live, contagem regressiva, card de versículo e cover de Reels. Todas em CSS real (só transform/opacity), ciclos suaves de 3,5–6 s com pausa, e desligam por completo em prefers-reduced-motion: reduce. Cores e contrastes seguem o design system.

Selo "estamos ao vivo"

Selo pulsante para overlays de transmissão e stories. Dot Off-black pulsa sobre o selo Lava (par decorativo seguro); o selo respira ~4%. Loop 3,6 s.

preview animado (CSS) estamos ao vivo

Contagem regressiva

Pré-culto / pré-live: dígitos 3 → 2 → 1 entram em fade-up sobre o gradiente de assinatura. Número em Off-black (regra: sobre gradiente → Off-black). Loop 6 s.

preview animado (CSS)

o culto começa em

321

prepare seu coração

Card de versículo

As linhas do versículo sobem em sequência (fade-up por linha), depois a referência em Light Blue. Texto Off-white sobre Off-black (13.39:1). Loop 6 s.

preview animado (CSS)

Porque onde estiverem

dois ou três reunidos

em meu nome, aí estou.

Mateus 18.20

Cover de Reels animado

Capa de Reels: símbolo entra com leve scale e assenta, título em duas linhas (reto + itálico) escalona em fade-up. Off-black sobre Light Blue (10.18:1). Loop 5 s.

preview animado (CSS)

palavrada semana

novo episódio · toda quarta

Parte IV · EPIC-007

Templates sociais spec

Três templates 9:16 (1080×1920, vertical-first). Os mockups esquemáticos abaixo já aplicam as correções de contraste recomendadas pelo design system (o acervo tinha pares proibidos — Frase e Batismos — que a produção deve corrigir).

9:16

imersão · nova vida

batismos

foto do batismo · LUT teal/orange

familygroup

9:16

agora na live

estamos online

ao vivo

assistir compartilhar

9:16

A força de uma flecha não está no alvo, mas na honra de quem a envia.

Pr. Samuel Galdino

retrato do pregador · placeholder

familygroup

⚠️ Correções de contraste aplicadas (vs. acervo): Batismos — título empilhado ba/tis/mos em Off-black sobre Light Blue (10.18:1; o acervo usava Lava 2.06:1), grafismo watermark do símbolo em line-art sangrando, zona de foto tratada com overlay teal/orange e lockup Off-white sobre a área escura. Frase — citação/crédito em Off-black sobre a área Lava/gradiente (4.94:1; o acervo usava Off-white 2.71:1), foto do pregador no terço inferior com overlay escuro e wordmark Off-white (13.39:1). Avisos — recriado como mockup de iPhone em CSS (moldura, dynamic island, player com selo "ao vivo" e CTAs); a tela é a zona de imagem, sem LUT em UI. Camadas de marca fixas; foto/texto editáveis.

YouTube — thumbnail & banner spec

familygroup

entrevista · convidado

família

Deise Roza

bem vindos
a nossa família

uma igrejauma famíliauma missão

Thumb 1280×720 (master 2371×1334): cena escura como zona de retrato + título "família" em Lava sobre Off-black (4,94:1) e nome do convidado em Off-white (13,39:1) — clicável e dentro do DS (corrige o par proibido Lava×Light Blue 2,06:1 do acervo). Monograma Off-white no canto. Banner: logo real (lockup colorido) centralizado na faixa central 1546×423 (tracejada); conteúdo essencial dentro da safe-area. Pílula azul → texto Off-black (nunca Off-white).

Perfis & avatares spec

Quatro variantes reais (PNG 1500×1500). Todas as redes exibem em círculo. Recorte seguro = 90% do lado; símbolo ≤ 45% da altura. Avatar primário recomendado: V2 (Lava sobre Off-black).

V1 · símbolo Off-white / Off-black

V2 · Lava / Off-black ⭐

V3 · Off-black / Lava

V4 · Lava / Off-white (diurna)

V1/V2 aprovados; V3 só com sombra Off-black; V4 frágil em contraste (só exibição grande). Light Blue como fundo de avatar = proibido (par crítico). Avatar = símbolo isolado, nunca o lockup. Diâmetro mín. de exibição ≈ 54 px.

UI Kit do website spec

Componentes web reais renderizados em HTML/CSS, estendendo a biblioteca Figma do design system. Grid 12 col @1440; base-8; todos os pares de contraste verificados.

Navbar + pílulas de navegação

familygroup

home ministérios grupos pequenos generosidade agenda

contato →

Active = pílula Lava + texto Off-black (4.94:1). "agenda" mostrada no estado Hover (Off-black + Off-white). Default = Off-black sobre Off-white.

Botões & estados

Hover do Lava escurece (nunca clareia — clarear cairia em par proibido). Rótulo de todo botão Lava é Off-black.

Hero com gradiente

family group

uma igreja uma família uma missão

Sobre o gradiente Lava→Light Blue, Off-black é o único texto seguro (≥10.18:1 em todo o intervalo). Faixa inferior Off-black com as pílulas dos pilares.

Cards