Back
Case study · sensory-experience studio

Love Letter NYC

Description
A sensory studio’s aura photography and reflective writing, brought onto the web — anchored by an interactive aura built in After Effects, and a brand system the two founders run themselves. Less about a single screen than a system: prices sourced from Square rather than typed onto the canvas, a design system that keeps every new page consistent, and copy the founders update without a designer in the loop.
Visit loveletter.nyc →
Tools
Framer
After Effects
Timeline
April – June 2026
Role
Design engineer
Focus
Interaction
Brand
Web
Love Letter NYC homepage
01 — Context

An intimate studio that has to work as a storefront.

Love Letter is a sensory-experience studio on Manhattan’s Lower East Side (138 Eldridge Street) — founded Valentine’s Day 2024, physical studio opened 2025. Guests see their energy rendered as an aura portrait, then make meaning of it through guided reflective writing: the letter.

It had to feel like the studio — soft, editorial, intimate — while functioning as a storefront: bookable sessions, prices that change, gift cards, and private events. The hard part wasn’t one screen. It was a system where pricing stays truthful and the brand stays consistent across every page and breakpoint.

02 — The centerpiece

An interactive aura, built in After Effects.

Love Letter photographs a person’s aura as color. I animated that in After Effects — an aura orb that moves and shifts instead of sitting still as a photo.

It ties their aura photography and the letter together in the digital product.

03 — Brand & design system

A soft, editorial system.

The auras already had their own color key — seven, each with its own name, reading, and gradient. I turned that key into reusable assets in their brand kit, so they can pull the same colors into anything they design down the line.

Romie sets the display headings and Inter does the rest — body, nav, labels, buttons. Warm paper background, two shades of ink, all saved as reusable styles.

Vermilion
#ED8835#E54242#E54242
Ember
#FFD522#F9B52B#ED8835
Sun
#77AA55#B1C441#FFD522
Glade
#488FD1#A3BE8C#77AA55
Tide
#745FC1#5767C4#488FD1
Veil
#B185E0#B364D8#745FC1
Aura
#E077B1#C565D6#B185E0
Thank you for being you.
Display M
Romie · 400
56 / 62 / 0 · Sentence case
Hero & section headings
Reservation policy
Display S
Romie · 400
18 / 27.2 / 0.28 · Uppercase
Page-header heading
Private readings by appointment — one reader, one spread, an unhurried space to bring a question.
Nav / Body
Inter · 500
12 / 14.1 / 0.8 · Uppercase
Body · labels · nav · CTAs
CTA

Signature interaction — the label rolls up while a hairline underline slides in from the left.

04 — Live pricing

Edit the price once in Square.

Prices are never hand-typed as the source of truth. Square holds the catalog, a Cloudflare Worker syncs it to the site, and each price binds by item ID — so the page always reflects the studio.

01
SquareCatalog + prices. The source of truth.
02
Cloudflare WorkerSyncs on change. Binds each price by item ID.
03
FramerThe live site. Always reflects the studio.
05 — Client handoff

The founders run everything in plain text.

Right-panel editing

Editable copy lives in each component's property controls, not loose on the canvas. The founders type plain text and it renders in the right style.

One edit, everywhere

Components share the same props across breakpoints, so one edit updates desktop, tablet, and phone at once.

CMS for Events

The Events page runs on a CMS collection. The founders add, edit, and reorder events, and the page updates itself.

Routed inquiries

Contact-form submissions are sorted by type, so general questions, private events, and gift cards each go where they should.

06 — Selected screens

Four pages built on the same layout.

Reserve
About screen
About
Letters
Events
End of case study
Thanks for scrolling.