Outline Studio

Item: Outline Studio
Rating: 7.4

Framer template for independent digital design agencies

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

Live preview Get this template Save page

7.4/10MABTU rating

Home

W W O O R R K K

About

DESKTOP · 1440 × 19,231/ ↗

MOBILE · 390

Section outline · Home

01heroFull-bleed B&W photo with huge wordmark
02studioStatement and figures table
03workStacked giant project codes with images
04marqueeScrolling type over photo
05servicesFour-column service list
06clientsGrey wordlist with thumbnails
07processTabs with big numeral
08testimonialsSingle quote
09awardsYear / project / award table
10pricingTwo cards
11contactTwo contact cards
12footerColumns with logo mark

Rating · Home

Visual design8.0

UX & clarity7.0

Originality7.6

Craft & consistency7.6

Motion7.0

Performance & a11y6.0

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

Main colours

Light·white background·mono

Typography

BDO Groteskheading · sans · self-hosted BDO Groteskbody · sans · self-hosted

Stack & style

Framer React Three.js Google Fonts

Editorial Monochrome Photography-led Swiss grid Marquee Pricing table Process steps Smooth scroll Tabs Text reveal

Design DNA

Template: white #FFFFFF and black only, grayscale motion-blurred studio photography. Hero is a full-bleed B&W photo with 'Outline©' in a huge neo-grotesk (~150px) bottom-left. Sections are numbered 01–08 with small labels at the far left and right edges and a light ~24px statement left. Signature work index: project codes (001A, NODE, N°07, FORM, ØR, M42, DB09) stacked in ~90px grotesk with small product photos overlapping. A greyed client wordlist with B&W thumbnails, an AGENCY DIGITAL DESIGN marquee over a photo, tabbed process with big 01 numeral, awards table, pricing cards and two-card contact.

Worth borrowing

Index projects as stacked giant codes with small product images overlapping the letters.
Number every section at the far-left edge with a matching label at the far right for a strict frame.
List clients as a long grey wordlist with the current one in black and B&W thumbnails beside it.