Engineering

Rebuilding the Marketing Site: From Template Vibes to Intentional Design

We gutted the entire Lumo marketing site — hero section, product showcase, testimonials, footer — and rebuilt it with a design language that actually communicates what we're building.

By Lumo Engineering•Feb 10, 2026•3 min read

The first version of the Lumo website looked like a template. Because it basically was one. We'd scaffolded it from a Next.js starter, swapped in our colors, written some copy, and shipped it. It communicated "this is a finance app" in the same way every other finance app landing page does: stock photo hero, three feature columns, a pricing table, footer. Forgettable.

PR #5 and #6 changed everything. We rebuilt every marketing page from scratch, added a Convex-powered release archive, and established the dark mode polish that the site runs on today.

The Design Philosophy

We wanted the site to feel like the app: calm, precise, trustworthy. Not aggressive "SIGN UP NOW" energy. Not the FinTech aesthetic of gradient backgrounds and floating cryptocurrency icons. Just clean typography, generous whitespace, and information presented in the order a thoughtful visitor would want it.

The new landing page follows a specific narrative arc:

  1. Hero — "Financial clarity that feels effortless." Device mockups showing the actual app UI, not stock screenshots. A waitlist form right at the top for visitors who already know they want in.
  2. Value Props — A bento grid showing what makes Lumo different: receipt scanning, income streams, privacy-first architecture. Each card has a specific claim, not generic marketing speak.
  3. Feature Highlights — The core modules, presented as a financial operating system rather than a list of checkboxes.
  4. Insight Section — A dashboard mockup showing what daily usage looks like. "Today's Signal" with real KPI cards.
  5. Testimonials — Social proof from beta testers.
  6. CTA — One final waitlist form for visitors who scrolled all the way down.

No "Learn More" buttons that go nowhere. No "Coming Soon" sections. Every element either explains the product or lets you sign up.

The Release Archive

PR #6 added the changelog page — a Convex-powered release archive with paginated build listings and full markdown release notes. This was built before the release system overhaul (which later stripped the APK upload requirements), so it initially required builds in the database to display anything.

The architecture uses cursor-based pagination from Convex:

const builds = await ctx.db
  .query("appBuilds")
  .withIndex("by_active_and_created_at")
  .order("desc")
  .paginate(paginationOpts);

Each release card displays:

  • Version number and build number
  • Platform badge
  • Relative timestamp ("2 days ago")
  • Full markdown release notes rendered with react-markdown + remark-gfm

Dark Mode: Not an Afterthought

Dark mode wasn't bolted on after the light design was done. Both themes were designed simultaneously using CSS custom properties:

:root {
  --royal-blue: #1d4ed8;
  --ink: #0b1220;
  --mist: #eef2ff;
  --background: #f7f9ff;
}
 
.dark {
  --royal-blue: #3b82f6;
  --ink: #e2e8f0;
  --mist: #0f172a;
  --background: #0b1120;
}

Every component references these tokens. Toggle the theme and every element updates instantly — no flash, no layout shift, no "oops, we forgot to style this card in dark mode." The 300ms CSS transition on background and color creates a smooth toggle that feels intentional rather than abrupt.

The scrollbar got custom styling too (thin, matching the theme), because if you're going to dark mode, you're going all the way. Nobody wants a bright white scrollbar on a dark page.

Device Mockups

The hero section features two phone mockups — an Android device and an iOS device — showing the actual Lumo UI. Not screenshots, not marketing renders. Real UI built in code:

  • The Android device shows the spending overview with transaction categories
  • The iOS device shows the dashboard with the "Available Cash" card and recent transactions
  • Both have proper device bezels, notch/Dynamic Island elements, and home indicators

Building mockups in code means they update automatically when we change the UI design. No Figma export pipeline, no "the mockup doesn't match the app" conversations.

What We Learned

The marketing site is a product too. It deserves the same attention to detail as the app itself. Visitors form an opinion about your engineering quality based on your landing page load time, your dark mode implementation, and whether your layout shifts on mobile.

We treat every element on the site as a trust signal. If the landing page is sloppy, why would anyone trust us with their financial data?

Abdul Rafay Founder, Syntax Lab Technology

Loading...