Leo Reed | Web Design

Selected work

WORK

Live sites and the system behind them. Each one is designed and built by me, published, and checked on desktop and phone.

Featured · Marketing site + interactive demo

B2B SAAS · CREATIVE ANALYTICS·15s loop

Verrow: a marketing site where the hero is a working product demo

A marketing site for a fictional analytics tool that shows paid social teams which ad is winning, and why. With no client logos to show, the proof is the product itself. Click any ad in the hero and the panel redraws its hook rate, hold rate, retention curve, and the reason it wins or fades. In Figma, one Home frame becomes 1440, 768, or 390 by switching a variable mode, and the prototype’s clicks set modes too. In Framer, the Home page is one code component that supports keyboard use and reduced motion.

Marketing Site
Interactive Demo
Figma Variables
Prototyping
Framer
Accessibility

Visit live site

Figma91 variables in 5 collections · Breakpoint modes 1440 / 768 / 390 · Light and Dark · prototype on variable modes · Dev Mode notes
FramerOne code component · keyboard-selectable demo · reduced motion · Monthly / Yearly pricing math in code
ContrastWCAG AA on all 24 text pairs in use, lowest 5.22:1
PageSpeedPerformance 98 on mobile, 99 on desktop · Accessibility 98 · Best Practices 100
TypeInstrument Serif · Geist · Geist Mono

Fictional brand, created by Leo Reed. Not a real product.

The Verrow site at desktop, tablet, and phone widths — The same page at 1440, 768, and 390

Behind the work · the demo, the Figma file, and the decisions

Verrow hero demo with Problem / solution selected: retention curve below the account average and the reason it is fading — One click: why this ad is fading

Verrow Figma file: the Home frame at three breakpoints with Dev Mode notes — Figma: one frame, three Breakpoint modes, Dev Mode notes

DecisionA demo instead of a video in the hero. It answers the visitor’s question in one click. The cost is more build work for keyboard and reduced-motion support.
DecisionPriced per seat with a monthly creative allowance, not a percentage of ad spend. Costs are easy to predict, and the limit is spelled out right under the plans.
DecisionMock data that adds up. Hold rate is computed from each retention curve, so a media buyer won’t find a wrong number.
DiscardedAn autoplay-only hero. It looked good the first time, then felt like a still image.
Next timeTest the demo with three media buyers before polishing it, and run a screen reader pass during the build, not after.

Animated hero · English and Arabic

FINTECH · BILINGUAL HERO·0:23

Kandil: a hero that turns the page into Arabic

A website hero for a fictional money-transfer app. An amount is typed, the rate locks, and one click turns the page into right-to-left Arabic in place: layout, text, and buttons all mirror. Then night mode, and back to English. Made for products that launch in English and Arabic at the same time.

Animated Hero
Arabic RTL
Bilingual Layout
UI Animation
Sound Design

Watch it full screen

Format23s · 16:9 · 1080p
LanguagesEnglish · Arabic, right to left
AudioOriginal music · custom UI sound

Fictional brand, created by Leo Reed. Not a real financial product.

Design system + Framer site

B2B SAAS · SOLAR ENERGY·17s loop

Kelvet: a design system where every color is a temperature

A design system for a fictional monitoring platform that solar installers use to monitor every home they’ve installed. Every base color is the color of light at a real kelvin value, so solar readings sit on the warm side and grid readings on the cool side. In Figma: 59 variables in three layers, with Day/Night and Kelvet/Partner as variable modes, 12 components, and a handoff page with measured contrast, where two colors failed WCAG AA, so I darkened them. In Framer: the landing page on the same tokens, with a live Day/Night and Partner switch.

Design System
Figma Variables
Components
Framer
Dark Mode
White-label

Visit live site

Figma59 variables in 3 layers · Day/Night and Kelvet/Partner modes · 8 text styles · 12 components with variants and properties
FramerLanding page on the same tokens · Day and Night · Kelvet and Partner brands
LayoutFluid, from desktop to phone
TypeFunnel Display · Funnel Sans · Martian Mono

Fictional brand, created by Leo Reed. Not a real product.

The Kelvet landing page in Figma, rendered in four variable modes: Day and Night, Kelvet and Partner — The same Figma page in four modes: Day and Night, Kelvet and the white-label Partner brand

Behind the work · handoff, foundations, components, and the Figma landing

Kelvet Figma file: handoff page with tokens, CSS variables and contrast ratios — Handoff: every token mapped to a CSS variable, with measured contrast

Kelvet Figma file: primitives and theme tokens — Foundations: primitives and theme tokens

Kelvet Figma file: component sheet — 12 components, all on variables

Kelvet landing page in Figma, desktop and phone — Landing page built from instances, desktop and phone

Framer site · CMS and components

AI SAAS · FRAMER CMS·7 pages

Acme AI: a Framer site your team can keep adding to

A marketing site for a fictional AI-agents company, built so the team can run it without a designer. Use cases live in the Framer CMS: add an entry and it shows up as a card and gets its own page from one template. The navbar, footer, and cards are native components with props, and every page has desktop, tablet, and phone layouts.

Framer
CMS
Components
Responsive
Handoff

Visit live site

CMS6 use cases · one page template
Built withFramer · native components with props
BreakpointsDesktop · tablet · phone
Live atjolly-road-079103.framer.app

Fictional brand, created by Leo Reed. Not a real product.

Behind the work · home, template page, and phone layout

Acme AI use-case page generated from the CMS template — CMS template page

Acme AI home page on a phone — Phone layout

Framer site · AI product launch page

AI AGENT · FRAMER·1 page

Solenne: a launch page where one line of light writes the wordmark

A launch page for a fictional AI agent that clears inbox and ops work. In the hero, a single line of amber light writes the wordmark, the same device as the launch film, so the page and the video read as one brand. Below it: the film, three steps (Reads, Works, Asks), and one call to action. Built in Framer with a custom code component for the hero.

Framer
Launch Page
Animated Hero
Code Components
Responsive

Visit live site

SectionsAnimated hero → Film → How it works → Quiet by design → CTA
Built withFramer · React code component for the hero
TypeHost Grotesk · Fragment Mono
Live atpersistent-lychee-350569.framer.app

Fictional brand, created by Leo Reed. Not a real product.

Behind the work · desktop sections and phone layout

Solenne launch page hero on desktop — Hero

Solenne launch page section on desktop — Steps and details

Solenne launch page on a phone — Phone layout

3D web hero · Three.js

PRODUCT · WEBGL·1 page

Orlith: a 3D hero with a poster-first load

A product page for a fictional designer lamp, with a real-time 3D model in the hero. A still poster shows while the model loads, so the first screen never sits blank. The scene caps its resolution on phones and lowers it on its own if the frame rate drops below 48 fps to keep it usable on mid-range devices.

Three.js
WebGL
3D Hero
Performance
Responsive

Visit live site

3D model284 KB, compressed with meshopt
LoadingPoster image first, then the live scene
PerformancePixel ratio capped at 1.5 on phones, 2 on desktop · auto quality drop under 48 fps
Live atorlith.leoreed.com

Fictional brand, created by Leo Reed. Not a real product.

Behind the work · desktop sections and phone layout

Orlith page hero with the 3D lamp on desktop — 3D hero

Orlith page details section on desktop — Details

Not ready for a full project? Send me your page. Within 48 hours, you’ll get a recorded review with the first fixes I’d make, in order.

Get a page review

What I do

SERVICES

Framer sites

Launch pages and small marketing sites, designed and built in Framer, ready for your own domain.

Design systems

Figma variables in layers, components with variants, and usage notes your developers can follow.

Animated heroes

A first screen that moves like your product: live UI, a video loop, or a 3D scene.

Page reviews

A recorded walkthrough of your current page with the fixes I'd make first, in order.

Fixed prices

PRICING

Intro pricing for my first projects. Rates go up after that.

00 · HERO

Animated website hero

$4005 days

One first screen that shows your product moving
Live UI, a video loop, or a light 3D scene
Built into your Framer site, 2 revision rounds

01 · LAUNCH PAGE

Framer launch page

$6007 days

One page, up to 6 sections, with an animated hero
Desktop, tablet, and phone layouts
Basic SEO, forms, and a recorded handoff
2 revision rounds, project transferred to you

02 · SYSTEM

Design system starter

$75010 days

Figma variables in 3 layers, with light and dark modes
12 core components with variants and properties
One example page built only from instances
Usage notes in the file, 2 revision rounds

Smaller jobs and add-ons

Framer page review (recorded, 48 hours) $150
Second brand mode for a design system +$250
Extra revision round +$75
Rush (half the standard time) +30%

Process

HOW IT WORKS

01 · Day 0

Brief

Send me your site, your Figma file, or just the idea. I reply within 24 hours and send a plan and quote within 2 days. A 50% deposit books your slot.

02 · Days 1–2

Structure

A section-by-section outline with the copy in place, so you approve the page before any visual design.

03 · Days 3–6

Design and build

I design and build in the same tool, so what you review is the real page on a preview link, on desktop and phone.

04 · Days 5–10

Launch

Two revision rounds, then I connect your domain, publish, and send a short video on how to edit it yourself.

Typical turnaround: 5–10 days

Who you work with

ABOUT

I'm Leo, a web designer working in Framer and Figma. I design and build the site myself, so the page you approve is the page that goes live, and you work directly with me from the first outline to the launch. Every project here is a self-initiated piece I made for a fictional brand, so you can see how I work before you hire me.

Framer Expert · View my Framer profile

How I work

I work in writing: briefs by email or Loom, preview links with comments, no calls needed. 50% to start and 50% before launch. Two revision rounds. Once it's paid, the Framer project and the Figma file are yours.

Before you ask

FAQ

Do I need a paid Framer plan?

Only to publish on your own domain. Framer bills that plan to you directly. I build in my workspace and transfer the project to you once it's paid.

Can my team edit the site later?

Yes. Text, images, and sections are editable in Framer, and you get a short recorded walkthrough of how to change them.

What do you need from me?

Your logo, colors, and copy, or a rough draft of it. No copy yet? I'll draft it in the outline, and you approve it before I design.

Can you build a system for my existing product?

Yes. I start from your current screens, pull out the colors, type, and spacing you already use, and rebuild them as variables and components in Figma.

How do payments work?

50% to start, 50% before launch. Quotes and invoices in USD.

Do we need a call?

No. I work async: a written plan, an outline, and a preview link with comments. Calls are optional.

What's not included?

Paid plans and domains, stock photos or fonts you need to license, and back-end features like logins or payments.

Are these client projects?

Every piece here is a self-initiated project for a fictional brand, labeled as such. Yours will be built from your real brand and content.

Contact

LET'S TALK

Launching soon or outgrowing your current site? Send me what you have (a Figma file, a live page, or just the idea), and I'll tell you how I'd build it.

Start a brief

Replies within 24 hours · 2 revision rounds included

Email

Best for briefs and budgets.

projects@leoreed.com

Not sure what you need?

Answer a few quick questions and my AI assistant will recommend a service with price and timeline, plus a brief you can send me.

Quick estimate Get an estimate

Send a Loom

Walk me through your current site or Figma file in a short Loom and email me the link.

Site walkthrough Send a Loom

Connect or send a message about your project.

Leo Reed on LinkedIn Open profile

Start a brief