Teardown

Teardown is a free dark, cinematic portfolio template for UX and product designers. Near black canvas, off white type in Satoshi, one lime accent for tiny details, and big rounded case study panels that carry the page.

THE SIGNATURE: ANNOTATION MODE

Every case study figure has an Annotate pill. Switch it on and the screen dims, glowing numbered pins appear and the notes open as a numbered list. Hover or tap a pin to read it, press Escape to close. It works with touch and keyboard. The notes are one text value per figure ("x,y,text|x,y,text"), so they live in the CMS.

MOTION

A hero name that sizes itself to fill the width, scroll reveals, slow image parallax, a cursor following View case pill on the home panels and a work index with a preview image that follows the cursor. Reduced motion is respected.

WHAT YOU GET

Home, Work, Case study (CMS), About, Notes, Note (CMS), Contact and a 404, with tablet and phone layouts.

4 demo case studies: problem, role, constraints, process, decisions, three annotated figures, huge outcome numbers and a next case link.

A small notes blog and a working contact form with success and error states.

Code components, each tested in a harness: Annotate Figure, Case Panel, Index Row, Hero Name, Pill Button, Navigation, Footer, Image, Copy Email.

THE DEMO

Noor Halvorsen, the clients, quotes and numbers are made up. The product screens are mockups drawn for this template; the one photo is from Unsplash. The About page has a small "My design stack" list with partner links, labelled as such and marked rel="sponsored". Swap it for your tools or delete it.

LIMITS

One design with demo copy; replace the text, mockups and numbers with your own work.

Pins are placed by percentages typed in the CMS, not dragged on the image.

The form posts through Framer forms and does not sync with a calendar.

Navigation and footer are code components, edited in the properties panel.

The free Framer plan shows the Made in Framer badge.