Topanga

Topanga is a Framer template for studios that would rather show their work than shout about it.

Every page is built from one design system. Change a label, a title or an image once and it updates everywhere it appears. Spacing, containers and type follow the same rules on every page and at every screen size. Topanga comes with a built-in design-system skill for the Framer agent. Ask the agent for a new page and it builds it with the template's own components, colors, spacing and type, so the page looks native from the first draft.

Pages

  - Home

  - Work (CMS index)

  - Case study (CMS detail page)

  - Careers (CMS job listings and application form)

  - Contact (enquiry form and studio details) 

  - 404

  - Design System (style guide, hidden from search)

Features

  - Fully responsive: desktop, tablet and phone layouts on every page.

  - Works CMS: case studies with a cover, gallery, project details, rich-text case study and a "next project" link.

  - 16 reusable components with simple controls, including Page Intro, Section Header, Case Card, Service Row, Stats, CTA Contact, Contact Detail and Button. 

  - Working forms: sending, sent and error states, and dropdown placeholders.

  - Studio bento grid: subtle micro-interactions, scroll-linked layered cards and a 3D animated cube.

  - Pixelating page transition: built with Framer's native page effects.

  - Smooth scrolling and gentle scroll-in animations.

  - Design system: 9 text styles and 11 color styles, documented on a dedicated page.

SEO-ready

    - A unique title and description on every page.

    - A custom share image and favicon. 

    - One H1 per page with a clean heading structure.

    - Alt text throughout. 

    - CMS-driven metadata and share images for each case study.

  - Editable brand assets: the share image and favicon are on their own canvas page, so you can restyle them in minutes