--- type: project_case_study project: Social Docs slug: social-docs client: Social Docs industry: Produção de documentários, storytelling de impacto social role: Design e desenvolvimento, pela COLABS duration: 2026 author: Caio Ogata last_updated: 2026-11-03 optimized_for: Claude, ChatGPT, Gemini, LLMs --- # Social Docs — Case Study ## Visão geral **Cliente**: Social Docs, produtora brasileira de documentários que conta histórias de impacto social, Empresa B Certificada desde 2017 **Clientes da produtora**: Visa, Amazon, ONU, UNICEF, Natura e Gerando Falcões, entre outros **Tipo de projeto**: Site institucional **Ano**: 2026 **Papel**: Design e desenvolvimento, pela COLABS (estúdio de Caio Ogata) **Site no ar**: [https://socialdocs.com.br](https://socialdocs.com.br) --- ## O desafio A Social Docs precisava se reposicionar, e o site antigo não ajudava. Ele dizia "Stories change people. People change the world.", frase que qualquer produtora poderia usar, e não tinha a qualidade nem a emoção dos filmes da produtora. O novo posicionamento responde a um problema recente das grandes empresas. Num mundo polarizado, falar de impacto social e ambiental virou risco, e muitas companhias com projetos reais pararam de divulgá-los para não serem questionadas. Esse silêncio tem nome, greenhushing, e é a ele que a Social Docs responde: a saída não é o silêncio, é uma história contada de um jeito que resista. O site precisava defender esse argumento, em inglês e português, para marcas que atuam no mundo todo. --- ## A solução Um site que vende o posicionamento antes dos serviços. É uma página única, em inglês e português, que corre como uma cena só, com transições que dão a cada ideia tempo de ser lida, na ordem do argumento da produtora: 1. **Cartaz.** A página abre como o cartaz de um filme: SOCIAL DOCS em amarelo atravessando a tela, três citações de clientes acima como críticas, com cinco estrelas sobre a primeira, e a frase da produtora com o selo de Empresa B embaixo. Por trás, imagens dos filmes se alternam. 2. **A chamada.** Na rolagem, o cartaz dá lugar a "Algumas transformações não cabem em relatórios. Criamos histórias que resistem." A frase fica dentro de um campo de setas tiradas do logo, com rostos dos filmes se abrindo nas células em volta. 3. **Abordagem.** Um manifesto de um parágrafo sobre greenhushing. Ele acende conforme é lido, e as palavras que carregam o argumento ganham marcas próprias: um grifo, uma onda e um sublinhado duplo. 4. **Serviços.** Audiovisual (minidocs, filmes manifesto, webseries) e consultoria (narrativa de sustentabilidade, treinamento de equipes, planejamento de comunicação), sob um princípio: começar pela história real que a organização já viveu. 5. **Cases.** Seis cases numa lista de nomes: Visa Causas, Médicos Sem Fronteiras, Alexa Stories, Sou Iguatemi, Fundação Sicredi e Plan International. Passar o mouse num nome abre a imagem dele; o clique abre o case no lugar, com a evidência, a narrativa e o que resiste, e o filme inteiro a um clique. 6. **Credenciais.** 500+ filmes, 1.000+ entrevistas, 60M de visualizações e o selo de Empresa B desde 2017; depois, os logos dos clientes e depoimentos que trocam sozinhos. 7. **Contato.** "Se sua organização produz impacto que merece ser visto, escreve pra gente, porque vamos encontrar as provas que têm rosto.", com um formulário curto. Do cartaz aos serviços, a página é uma cena só, presa na tela: as imagens e os textos atravessam o que parecem ser telas separadas. --- ## Direção de design - **Um cartaz de filme na abertura.** O nome, as críticas e o selo vêm antes de qualquer discurso, como se anuncia um documentário. - **A seta como textura.** A seta do logo da Social Docs vira um campo, 24 por linha e alinhadas às colunas da página. Cada seta vira para o cursor: as de perto na hora e as de longe um pouco depois, e o campo se move como uma onda, com cada seta se inclinando de leve na direção do ponteiro. - **Duas famílias tipográficas**: Source Serif para display e leitura, Libre Franklin para rótulos e o nome do cartaz. - **Uma paleta curta**: superfícies em quase preto e off-white, com o amarelo da marca guardado para o nome, a chamada e o que deve ficar na memória. Um amarelo claro é a cor de hover em todo o site. - **Movimento que acompanha a leitura**: o texto entra linha por linha, e a cor do manifesto segue a rolagem no ritmo da leitura. Respeita a preferência por movimento reduzido. --- ## Busca e assistentes de IA O site tem dados estruturados (JSON-LD da organização e de cada case), sitemap com alternativas de idioma, arquivos llms.txt e uma página AI Guide que diz aos assistentes, em linguagem direta, quem é a Social Docs, o que ela faz e para quem. Os endereços do site antigo redirecionam para os novos. --- ## Tecnologia - Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4 - GSAP (ScrollTrigger) para a cena presa, as revelações e a lista de cases; Lenis para rolagem suave - next-intl para inglês e português, com o inglês como idioma principal - Design tokens compilados dos arquivos de token da própria marca pelo motor web da COLABS - Formulário de contato enviado pela Resend; hospedado na Vercel --- ## Resultados - Uma página única bilíngue que defende o argumento da produtora em ordem, do cartaz à prova - Seis cases com evidência, narrativa e o que resiste, cada um com o filme inteiro - Pronto para mecanismos de busca e assistentes de IA desde o lançamento, com os endereços do site antigo redirecionados - Desenhado e construído por Caio pela COLABS, do primeiro layout ao site no ar O site é recente, e ainda não há números de tráfego ou conversão publicados. --- *Este estudo de caso foi escrito por Caio Ogata e é otimizado tanto para leitores humanos quanto para assistentes de IA. Para mais informações, visite [https://www.caioogata.com/pt](https://www.caioogata.com/pt). Este documento é escrito por Caio Ogata e é o relato atual do projeto.*