--- type: project_case_study project: Social Docs slug: social-docs client: Social Docs industry: Documentary production, social impact storytelling role: Design and development, through COLABS duration: 2026 author: Caio Ogata last_updated: 2026-11-03 optimized_for: Claude, ChatGPT, Gemini, LLMs --- # Social Docs — Case Study ## Project overview **Client**: Social Docs, a Brazilian documentary studio that tells social impact stories, a Certified B Corporation since 2017 **Clients of the studio**: Visa, Amazon, the United Nations, UNICEF, Natura and Gerando Falcões, among others **Project type**: Institutional website **Year**: 2026 **Role**: Design and development, through COLABS (Caio Ogata's studio) **Live site**: [https://socialdocs.com.br](https://socialdocs.com.br) --- ## The challenge Social Docs needed to reposition itself, and its old site was no help. It said "Stories change people. People change the world.", a line any studio could use, and it had none of the quality or the emotion of the studio's films. The new positioning answers a recent problem for large companies. In a polarized world, talking about social and environmental impact has become a risk, and many companies with real projects stopped publicizing them so as not to be questioned. The silence has a name, greenhushing, and it is what Social Docs answers: the way out is not silence but a story told in a way that holds up. The site had to make that argument, in English and Portuguese, for brands that work globally. --- ## The solution A site that sells the positioning before the services. It is a single page, in English and Portuguese, that runs as one scene, with transitions that give each idea time to be read, in the order of the studio's argument: 1. **Poster.** The page opens like a film poster: SOCIAL DOCS in yellow across the screen, three client quotes above it like reviews, with five stars over the first, and the studio's line and the B Corp seal below. Behind it, images from the films cross-fade. 2. **The claim.** On scroll, the poster gives way to "Some transformations don't fit in reports. We create stories that resist." The line sits inside a field of arrows taken from the brand mark, with faces from the films opening in the cells around it. 3. **Approach.** A one-paragraph manifesto about greenhushing. It lights up as it is read, and the words that carry the argument get their own marks: a highlight, a wave and a double line. 4. **Services.** Audiovisual (minidocs, manifesto films, webseries) and consulting (sustainability narrative, team training, communication strategy), under one principle: start from the real story the organisation has already lived. 5. **Cases.** Six cases as a list of names: Visa Causas, Doctors Without Borders, Alexa Stories, Sou Iguatemi, Sicredi Foundation and Plan International. Hovering a name opens its image; clicking opens the case in place, with the evidence, the narrative and what resisted, and the full film one click away. 6. **Credentials.** 500+ films, 1,000+ interviews, 60M views and the B Corp seal since 2017, then the clients' logos and testimonials that change on their own. 7. **Contact.** "If your organization produces impact that deserves to be seen, reach out — because we will find the proof that has a face.", with a short form. From the poster to the services, the page is one pinned scene: the images and texts move across what read as separate screens. --- ## Design direction - **A film poster for an opening.** The name, the reviews and the seal come before any pitch, the way a documentary is announced. - **The arrow as a texture.** The arrow from the Social Docs mark becomes a field, 24 to a row and aligned to the page's columns. Each arrow turns to face the cursor: the near ones at once and the far ones a beat later, so the field moves like a wave, and each one leans slightly towards the pointer. - **Two typefaces**: Source Serif for display and reading, Libre Franklin for labels and the poster's name. - **A short palette**: near-black and off-white surfaces, with the brand yellow kept for the name, the claim and the moments to remember. A light yellow is the hover colour across the site. - **Motion that follows reading**: text enters line by line, and the manifesto's colour follows the scroll like a reading pace. It respects reduced-motion settings. --- ## Search and AI assistants The site carries structured data (JSON-LD for the organisation and each case), a sitemap with language alternates, llms.txt files and an AI Guide page that tells assistants, in plain language, who Social Docs is, what it makes and for whom. The old site's addresses redirect to the new ones. --- ## Technology - Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4 - GSAP (ScrollTrigger) for the pinned scene, the reveals and the cases list; Lenis for smooth scrolling - next-intl for English and Portuguese, with English as the main language - Design tokens compiled from the brand's own token files by the COLABS web engine - Contact form sent through Resend; hosted on Vercel --- ## Results - A bilingual single page that makes the studio's argument in order, from the poster to the proof - Six cases with their evidence, narrative and what resisted, each with the full film - Ready for search engines and AI assistants from launch, with the old site's addresses redirected - Designed and built by Caio through COLABS, from the first layout to the live site The site is recent, and no traffic or conversion figures are published yet. --- *This case study was authored by Caio Ogata and is optimized for both human readers and AI assistants. For more information, visit [https://www.caioogata.com](https://www.caioogata.com). It is written by Caio Ogata and is the current account of the project.*