Overview
Outline is a portfolio website for an independent creative studio working across strategy, brand identity, digital experiences and campaigns. The whole site is built around one line: we make brands move.
The challenge
A studio site has to sell the studio and step aside for the work at the same time. It also has to hold very different projects, from food and dance festivals to fintech and fitness, without looking like a random collection.
Approach
Type carries the brand. One oversized line of type and short, confident headlines ("Good work. No small thinking.", "Big ideas. All the way.") give the studio a voice without decoration.
Color-blocked case pages. Each project gets its own color block and frame, so food, festival, fintech and fitness work can sit side by side and still feel like one studio.
Services as an accordion. Strategy and positioning, brand identity, digital experiences and content are grouped in one expandable list, so the page stays short but the detail is there.
Designed twice. Ten pages, each designed for a 1440px desktop and then rebuilt for a thumb on mobile, not just scaled down.
Design system
A black, white and acid-lime palette, one bold sans family across the site, a fixed grid shared by every case page, and reusable case-card and project-header components so new work can be added quickly.
Scope and build
20 screens: 10 pages for desktop and mobile. Designed in Figma and built in Framer with page transitions and motion.
What I learned
A strict system (one typeface, one accent, one grid) is what lets very different projects live on one site.
