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 for Canadians who want to build wealth on their own terms. The marketing website had one clear purpose: to 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. Aurum isn't here to sell your data for a free product; instead, we offer a generous trial and keep the subscription price low so the tools you need to build wealth don't slow that process down.
Every element of the site needed to justify that value, and I aimed to accomplish that not just by showing off features but through a cohesive, 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 major 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 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. That framing also reinforces the strategy of a Canadian-first product — Canadians respond to brands built explicitly for them, not retrofitted from the US, and leading with values instead of feature parity makes the homegrown DNA legible from the first scroll.
In a market crowded with free, ad-supported products, Aurum's paid model is its most honest differentiator: we only profit 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 for Canadians" sits immediately below the hero, alongside our four philosophy cards that tell you what we believe in and how the product is built. We're upfront and honest — we tell you exactly what our business model is, who we built this for, and what our intentions are.
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.
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 → Contribution Tracker → Features → Proof → CTA. Each section builds emotional investment incrementally — values come before features, the product appears before the price, and the closing CTA arrives only after trust is already in place.
The gold orb is the signature opening moment — a React Bits WebGL component with a slow, looped fade-in, designed to feel calm and luxurious rather than loud. As it shifts from light blue to gold, it communicates sophistication before any copy is read. The diamond motif (◆) — three of them sitting under the hero and scattered as decorative markers — is the brand's quiet signature, replacing what would otherwise be generic divider rules and section icons.
The cards are minimalist but intentional, using a warm off-white (#FAF8F4) chosen to resemble parchment and invoke wealth and prestige. The Roman numeral watermarks (I — Principles, II — One Ledger, III — Features, IV — Testimonials, V — Pricing) break the whitespace, identify each section, and create a feeling of heritage — the same typographic system carries the eyebrow pills and the section-opening headlines.
The latest layer of the design system is the Contribution Tracker — an editorial-split section that showcases real-time TFSA, RRSP, and FHSA room as the hero feature, with the dashboards rendered in React rather than as raster screenshots so they stay crisp at any zoom and never drift from the rest of the design tokens. The pricing page applies the same editorial language: a gold-pill billing switcher using motion's layoutId to slide between Monthly and Annual, paired with cross-faded price numerals that read as one coordinated motion. Every active state across the site uses the same three-stop gold gradient (#D4A440 → #B1821B → #8B6412) so the brand reads as a single continuous surface — from the homepage, to the pricing page, to the alternatives compare pages, to the editorial blog.
Microanimations were used deliberately to elevate every interaction. The same easing curve — cubic-bezier(0.22, 0.61, 0.36, 1) — runs across the entire site so motion reads as one designed language: hero text fading up on mount, the WebGL orb developing into view as its canvas boots, scroll-triggered cards rising just before they hit the fold, the pricing pill switcher sliding via motion's layoutId with cross-faded price numerals, and hover-lift CTAs deepening their gold shadows. Below are two examples demonstrating the spring physics used throughout the product.
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, Monarch, Wealthsimple. 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 because the workflow itself was new: I purposefully chose not to wireframe, prototype, or run the full design process. Everything ran through Claude Code, utilizing MCP connections with GitHub and Vercel as well as custom Claude skills to fill in 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:
✅ 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, FAQPage JSON-LD on alternatives.
✅ Sub-3s page load with lazy-loaded WebGL, code-split routes, and optimized asset delivery.
✅ Pricing page with gold-pill billing switcher, early-access discount badges, motion-driven price transitions, and hover-lift CTAs.
✅ Built end-to-end with Claude Code — a proof of concept for the designer-as-developer workflow at production quality.
