Dossier

Item: Dossier
Rating: 7.1

Framer template for motion-first digital product studios

A Framer Marketplace template by archipelagy. Its words and photos are demo content.

Live preview Get this template Save page

7.1/10MABTU rating

DESKTOP · 1440 × 11,096/ ↗

MOBILE · 390

Section outline · Home

01heroHeavy headline with product image cut through it
02aboutLarge intro paragraph and small pill
03workLarge rounded art-directed case tiles with metrics226
04servicesArrowed list, sub-services right-aligned1,584
05testimonialsHorizontal row of image, quote and award cards1,028
06workFull-width OUTBOUND scene
07footerGrey rounded panel with contact columns

Rating · Home

Visual design7.3

UX & clarity6.8

Originality7.1

Craft & consistency6.8

Motion6.5

Performance & a11y7.0

This page scores 7.0; the site score weights the home page double.

Main colours

Light·off white background·mono

Typography

Clash Groteskheading · sans · self-hosted Clash Groteskbody · sans · self-hosted Poppinsaccent · sans · self-hosted

Stack & style

Framer Lenis React

Minimal Bold typography 3D Photography-led Rounded / soft Product-UI-led Marquee Smooth scroll Text reveal

Design DNA

Template: digital product studio on cool grey #EEF0F2. Headings are a heavy tight black grotesk ending in full stops ('Work.', 'What we do.', 'Big wins.', 'Let's talk.'). The hero sets 'Digital product studio.' with an orange product image punched through the middle of the words. Work is a grid of large rounded tiles of art-directed scenes (phone on deep green, watch on lime, a lavender NOVA poster, an orange OUTBOUND luggage print) with small captions and metrics. Services are an arrowed list with right-aligned sub-items that fade in on scroll, stories a horizontal row of mixed cards, and the footer a grey rounded 'Let's talk.' panel.

Worth borrowing

Punch a product image through the middle of the hero headline so type and image interlock.
End every section title with a full stop in a heavy tight grotesk for a clipped studio voice.
Stage each case in its own coloured set (green, lime, lavender, orange) so the work grid reads like a campaign.