A complete marketing website for a premium personal finance app — designed and shipped end-to-end with Claude Code.
Aurum is a personal finance app designed for those who want to build wealth on their own terms. The marketing website had one clear purpose: make paying for a finance app feel worth it.
In a category saturated by free, ad-supported products, Aurum's paid model is its core differentiator. When something is free, you are the product. This is explained upfront with honesty: Aurum Wealth isn't here to sell your data in exchange for a free product, instead, we offer a generous trial and keep the subscription price low to ensure the tools you need to build wealth isn't slowing that process down. Every element of the site needed to justify that value and choice and I aimed to accomplish this not just by showing off features, but through a cohesive and intentional design language. The website had to communicate sophistication, trust, and warmth. Every color, typography, and microanimation was chosen to make it feel like you're using an app that should cost much more.
One huge motivation of this project was to learn an end-to-end AI design and development process utilizing Claude Code. As a product designer, I'm familiar with website builders and Figma, but now I can leverage full tech stacks with Next.JS, Tailwind, and Vercel to ensure I had full control over the design while remaining performant.
Why Values Before Features
Most SaaS marketing sites open with feature lists. Aurum opens with principles. This was a deliberate structural decision. The goal was to build trust and differentiate ourselves before we sell the product. Before a user evaluates what Aurum does, they need to understand who Aurum is, what we stand for, and why they should trust us.
In a market crowded with free, ad-supported products, Aurum's paid model is its most honest differentiator: it means Aurum only profits when users genuinely find value. Expressing that as a value rather than a feature spec is the difference between marketing copy and brand voice. So "Built Differently, On Purpose" sits immediately below the hero, along with our four philosophy cards that tell you what we believe in and how our product is built. We're upfront and honest, we tell you exactly what our business model is and our intentions.
Show who you are before you show what can you do. In premium categories, identity precedes utility.
Structural principle — homepage narrative arc
After that foundation is set, the features land differently. Users are not evaluating a transaction — they are deciding whether to join something they already respect. That shift in emotional context is what the page architecture is designed to create. If we suceed in connecting with the user, as long as we deliver feature parity, the app will sell itself. Of course, we aim to do more than just deliver on parity.
01 — VISUAL DIFFERENTIATION
Fintech marketing has a dominant look: clinical grids, blue-green palettes, feature checklists. Breaking that convention without breaking user trust meant every visual choice had to feel deliberate and used to invoke a specific emotion.
02 — CONVERTING WITHOUT A FREE TIER
No free hook to lean on. The design itself had to communicate enough value and trust that paying upfront felt worth it.
The process began with strategic positioning before any visual decisions were made. A competitive sweep of personal finance products surfaced three principles that grounded every design choice that followed:
With strategic direction set, three foundational decisions defined the visual language of the entire site — each chosen to reinforce the "premium but approachable" positioning:
The palette centers on warm gold (#B1821B) — evoking financial heritage rather than fintech startup culture. Paired with Cormorant Garamond for display type (a serif with genuine historical weight) and DM Sans for body copy, the typographic system communicates both prestige and legibility in a single pairing.
A paper-grain SVG texture applied at low opacity across all backgrounds adds tactile warmth that breaks the sterile flatness of typical SaaS marketing. Glassmorphic cards — backdrop-blur with gold-tinted borders — layer above this texture, creating depth without visual complexity. Two design principles guided every subsequent decision:
Every element must earn its place. Decoration without function is a signal of insecurity in a financial product.
Design Principle 1
The homepage should feel like the app. The first experience of reading it is the first taste of Aurum.
Design Principle 2
Rather than designing page-by-page, the site was architected as a design system first. Color tokens, typography scale, UI components, animation easing curves, and spacing increments were all codified in CSS custom properties before any section was assembled — giving the codebase the same visual consistency as the design.
The result: a Next.js App Router project with Tailwind CSS v4, Framer Motion for animations, and OGL/WebGL for the hero orb — all driven by a coherent design token layer that makes the visual language maintainable and extensible.
The homepage is structured as a complete marketing funnel: Hero → Philosophy → Features -> Proof → CTA. Each section builds emotional investment incrementally.
The gold orb is the signature and impactful moment, utilizing a React Bits component with subtle flowing animation, it was designed to feel calm and luxurious; reflective of the brand. As it glows and shifts from a light blue to gold, it communicates sophistication before any copy is read.
The cards were designed to be minimalistic, but still feel intentional. With a warm off-white color picked to resemble parchment to invoke the sense of wealth and prestige.
The roman numeral watermarks was added to break the whitespace, identify the section, and create the feeling of heritage. This is extended into the golden subtitle headings throughout each of the website sections.
Small microanimations were done to elevate the website.
Built with Claude Code, End to End
Aurum is not a website that used AI for copywriting. Claude Code was the primary collaborator from the first brainstorm to the production deploy — a true end-to-end AI-assisted product build. This is what that workflow actually looked like, and why it matters for how product designers should think about their role.
01 — BRAINSTORM
Competitive analysis and positioning
Mapping the alternatives landscape — Mint, YNAB, Copilot, Empower, Wealthsimple — to find the white space. Claude synthesized research into three core differentiators that drove every visual decision downstream.
02 — ARCHITECTURE
Tech stack selection and project scaffold
Next.js 16 App Router, TypeScript, Tailwind CSS v4, Framer Motion, OGL for WebGL. Claude evaluated tradeoffs against solo-dev constraints and generated the full project scaffold with design tokens baked in from session one. Before even working on the website, I had Claude Code understand our design system, code out component tokens
03 — BUILD
Iterative component development
Each section built as a conversation. Describe intent, Claude generates the component, review in browser, iterate. The pipeline was also built in through local dev -> staging -> production website.
I added input where necessary. For example the main hero orb was added via my suggestion of utilizing the reactbits library, whereas our ongoing email waitlist form is connected to loops.so. Through development and interation there were plenty of moments where Claude Code created great layouts, but I had to really fine-tune things with my own design vision. For example, the roman numeral sections and watermarks was my idea, going back to the core principles of making the design feel sophisticated and luxurious.
04 — SEO AND STRUCTURED DATA
Schema.org implementation and metadata strategy
I installed specific SEO Claude skills and leveraged that to build out my strategy. This included full JSON-LD structured data, Open Graph tags, Twitter cards, canonical URLs, and a dynamic sitemap. We explored keywords to target and the tone of our marketing copy. We also implemented strategies for AEO, llms.txt, and optimized for AI searches.
05 — DEPLOY AND OPTIMIZE
Vercel production deploy with analytics from day one
Vercel Analytics and Speed Insights wired in at deploy. Sub-3s load via lazy-loaded WebGL, code-split routes, and optimized asset delivery. Full mobile responsive pass — 640px and 768px breakpoints across every section — shipped in a single session.
The result is not just a faster workflow, but a completely different one. As the designer, I stayed in the decision seat, but the AI handles the implementation complexity that would otherwise require a full engineering sprint.
Creative Flair: Where Craft Comes In
Claude Code is fantastic at setting up the infrastructure, scaffolding the project, and even ideating various UI patterns. But its the design direction and animation choices that make Aurum feel handcrafted were deliberate selections, each picked because it expressed something the generic implementation path could not. I provided extensive context in order to create something that doesn't look like a generic vibe-coded website, and I think I achieved it.
FRAMER MOTION — SPRING PRESETS
Physics-based motion as brand expression
Every interactive element uses one of two spring presets: Standard Spring for single-element transitions (stiffness 200, damping 25) and List Stagger for multi-item reveals where each item enters 80ms after the last. These presets encode the brand motion language — responsive but not snappy, confident but not stiff.
REACTBITS COMPONENTS
Animated UI primitives that earn attention
ReactBits provided the extra spice on top of the framer motion animated components. The most impactful use of this is the orb effect in the hero, which provides an impactful first impression. Certain other elements like hover glare is applied sparingly to certain cards. I didn't want to overuse these, so when users discover them, it feels special. Each replaces a static element with one that activates precisely when it should: SplitText on the hero headline for a letter-by-letter reveal on load, CountUp on the metrics strip so numbers animate into view on scroll, BlurIn for section entrances, and ShinyText for the gold CTA button highlight effect.
The Aurum website shipped as a complete, production-ready marketing site built end-to-end with Claude Code. This was an extremely successful experiment on my part, because this is a completely new workflow. I purposefully chose not to do what I normally would, which included wireframing, prototyping, etc, going through the full design process. For this project, everything ran through Claude Code, utilizing MCP connections with GitHub and Vercel, as well as custom Claude skills to fill in my expertise gaps.
The result was fantastic. I believe the website came out much better than I had hoped and my goal is to take things to the next level and build out a full SaaS app end-to-end with Claude Code.
Here's what was shipped in this project:
✅ Full waitlist funnel live — email capture integrated with Loops API, with duplicate detection and multi-state feedback.
✅ Fully responsive across mobile, tablet, and desktop. All sections rebuild at 640px and 768px breakpoints.
✅ Vercel Analytics and Speed Insights integrated from deployment day one.
✅ Complete SEO and AEO: Schema.org structured data, llms.txt, keyword optimization, and more.
✅ Sub-3s page load with lazy-loaded WebGL, code-split routes, and optimized asset delivery.
✅ Built end-to-end with Claude Code — a proof of concept for the designer-as-developer workflow at production quality.
The most meaningful outcome: a personal finance product that feels different from everything else in the market. Not through features, but through craft and emotion.
