LEO REED

WEB DESIGNER

Framer launch pages in 7 days. Design systems in 10.For SaaS and app teams: tokens, components, and pages that stay consistent as your product grows.

Framer Expert · Featured design system: 59 variables, 12 components, WCAG AA contrast

OPEN FOR PROJECTS · REPLIES IN 24H

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 · 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, 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
  • Figma59 variables in 3 layers · 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
  • Live atkelvet-concept.framer.website

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

Kelvet Figma file: handoff page with tokens, CSS variables and contrast ratios
Handoff page in Figma: every token mapped to a CSS variable, with measured WCAG contrast
Behind the work · foundations, components, Figma landing, and every mode live
Kelvet Figma file: foundations, tokens in three layers
Foundations: primitives, theme, brand
Kelvet Figma file: component sheet
12 components, all on variables
Kelvet landing page in Figma, desktop and phone
Landing page built from instances
Kelvet landing page in Day mode
Day · Kelvet
Kelvet landing page in Night mode
Night · Kelvet
Kelvet landing page in the white-label Partner brand
Night · Partner (white-label)

Framer site · SaaS launch page

SAAS ANALYTICS · FRAMER·1 page

Revlane: a launch page for a revenue dashboard

A one-page launch site for a fictional revenue-analytics tool. The hero dashboard is live UI that builds itself as the page loads, the 12-second product film sits right under it, and three steps explain the setup. Built in Framer, with code components for the animated parts and native layouts for desktop, tablet, and phone.

  • Framer
  • Landing Page
  • Code Components
  • Responsive
  • Animated Hero
  • SectionsHero dashboard → Film → How it works → Numbers → Offer
  • Built withFramer · React code components
  • BreakpointsDesktop · tablet 810 · phone 390
  • Live atrevlane.leoreed.com

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

Behind the work · desktop sections and phone layout
Revlane landing page hero on desktop
Hero
Revlane landing page section on desktop
Setup and numbers
Revlane landing 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
  • SectionsAnimated hero → Film → How it works → Quiet by design → CTA
  • Built withFramer · React code component for the hero
  • TypeHost Grotesk · Fragment Mono
  • Live atsolenne.leoreed.com

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
  • 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
Orlith page on a phone
Phone layout

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

01

Framer sites

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

02

Design systems

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

03

Animated heroes

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

04

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

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

Leo Reed

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

01

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.

02

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.

03

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.

04

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.

05

How do payments work?

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

06

Do we need a call?

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

07

What's not included?

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

08

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.

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

LinkedIn

Connect or send a message about your project.

Leo Reed on LinkedIn Open profile
Start a brief