Luma

Live preview ->

Luma is a theme for a mobile app, before launch or after it. The first screen is a soft lavender and aqua gradient with a large headline, a serif accent line and three overlapping phones. The phone screens are built in HTML, so their text and numbers come from the config file, and any of them can be swapped for a real screenshot.

Below the hero come six feature cards, use-case tabs with a preview for each, a home-screen widget section, three steps, three pricing plans, an FAQ, the latest journal posts and a gradient sign-up panel above a dark footer.

Property	Value
Tier	Pro ($49)
Category	App Landing Page
Fonts	Inter Tight for headings, Inter for text, Instrument Serif for the accent line, all bundled locally
Palette	Pale blue canvas (`#edf3f7`), near-black ink (`#0e1116`), violet accent (`#6554c9`), lavender and aqua hero gradient
Motion	GSAP hero entrance, a small scroll offset on the side phones, content reveals and page fades
Styles	Tailwind CSS 4 for layout, plus `src/styles/global.css` for components
Content	Every string, phone screen, price, article and form field in `src/config/site.ts`
Languages	English by default; every route has a matching language route

Included routes

/ - hero, features, use-case tabs, widget details, how it works, pricing, FAQ, journal preview and sign-up panel
/download/ - the early-access page with the waitlist form
/support/ - the support page with the contact form and a direct email address
/blog/ and /blog/[slug]/ - the journal with category filters and three articles
/privacy/, /terms/

The production build generates 10 static pages, including the 404 page.

What makes Luma different

Phone screens you edit as text - a collections screen, a focus timer and a weekly chart, built in HTML from site.ts.
A waitlist before launch - the early-access page collects emails, and the download buttons point to it.
Pricing, FAQ and support - three display-only plans, an FAQ and a support page with a contact form.
Ready for more languages - add a language by copying one template file and registering it.

Luma-specific setup

Set the site address

Set url in src/config/site.ts to your full public address, for example https://example.com, or set PUBLIC_SITE_URL when you build. Canonical URLs, social images, language links and the structured data use it.

App name and branding

name, tagline and description set the app name and the default page title and description. branding sets the logo file and the favicon, and metadata sets the browser bar colour and the default social image (public/images/social.png, 1200 x 630). primary is the download button in the header.

Replace the phone screens

screens.library, screens.focus and screens.activity hold the text and numbers of the three phones: titles, list items, the timer, the chart values and the tab labels. When you have real screenshots, set a screen’s image to the file path and imageAlt to its description. The screenshot then fills the phone frame instead of the HTML screen, so use a tall portrait image. Leave image empty to keep the HTML version.

The phone screens are pictures of an app, not working controls. The timer and the buttons inside them do nothing.

Connect the forms

Luma has two forms: the waitlist form on /download/ (forms.waitlist) and the contact form on /support/ (forms.contact). Both start in demo mode: they check what is typed and say plainly that nothing was sent. Choose a provider for each one in its delivery setting:

delivery: defineDelivery({ provider: "formspree", formId: "YOUR_FORM_ID" }),
// or { provider: "formsubmit", recipient: "you@example.com" }
// or { provider: "netlify", formName: "luma-contact" }
// or { provider: "custom", endpoint: "/api/contact", encoding: "json" }

Custom endpoints accept json, multipart or urlencoded. Everything in this config is sent to the browser, so never put a secret key in it. Update the privacy line under each form and the privacy notice for your provider. Netlify detects forms when it builds the site, so deploy again after switching to it.

Change the form fields

forms.contact.fields and forms.waitlist.fields list the fields in the order they appear. Each has a name, a label, a type (text, email, tel, url, select or textarea), and optional required, placeholder, maxLength, autocomplete and fullWidth settings. The name is what your provider receives.

Pricing plans

pricing.plans holds the three plans: name, price, period, description, an optional badge and the button’s label and link. The plans only display prices. No payment is connected, so point each button wherever people sign up or download.

Add an article

Add an article to blog.posts, newest first. Its slug creates /blog/<slug>/. Each article has a category, a date in YYYY-MM-DD with a dateLabel to display, a reading time, a 3:2 cover image with its alt text, an intro, a takeaway and sections. Each section has an id, unique within the article, that feeds its table of contents.

The category buttons on /blog/ come from the categories you use, and a link such as /blog/?topic=Finding%20focus opens the journal with that category selected. The homepage shows the first three articles, and each article shows two others underneath.

Structured data

Every indexable page carries JSON-LD built from the copy you already have: the app as an organization and website, the journal as a blog and each article as a blog post with its author, dates and cover image. structuredData.publisher sets a different publisher name, logo or profile links, and blog.author sets the article author. Run npm run build and then npm run verify:schema after you change them. The theme’s docs/structured-data.md lists every field.

Add a language

Copy src/i18n/locales/template.ts to a new file, for example fr.ts, and translate what you need.
Import it and register it in src/i18n/config.ts with its label, HTML language and direction.
Run npm run check, npm test, npm run verify:i18n and npm run build.

Anything you leave out falls back to English. Lists such as navigation, features and articles replace the English list as a whole, so copy every item before translating. Keep article slugs the same in every language. A language menu appears once a second language is registered. Set direction: "rtl" for right-to-left languages; the use-case tabs follow the reading direction.

Change the palette

Colours are set in src/styles/global.css. The @theme block at the top names the main ones (--color-ink, --color-muted, --color-canvas, --color-violet and --color-aqua), and the component rules below use the same hex values, so search for a value to change it everywhere. The hero gradient is in the .hero rule. metadata.themeColor in site.ts sets the browser bar colour.

Tune the motion

The hero entrance, the side-phone scroll offset, the reveals, the tabs, the journal filter, the menu and the forms are in src/scripts/main.ts, which cleans them up between pages. Reduced-motion settings turn the animation off, and the content stays visible without JavaScript.

labels.credit in site.ts holds the “Created by aerolaunch.app” line in the footer. Edit it, or remove it from src/components/Footer.astro.

Coding assistants

AGENTS.md describes where content lives, how routes and languages work, the form providers, the structured data and the checks to run, and CLAUDE.md points Claude Code to it.

Next.js edition

Luma is also available as a Next.js edition: the same design as a Next.js 16 and React 19 project with TypeScript and Tailwind CSS 4, exported as static HTML. How it works, how to run it and how to deploy it: Next.js edition.

HTML edition

Luma is also available as a plain HTML template: the same design as ready-made HTML, CSS and JavaScript files that open straight from disk, with no build step. The tabs, the journal filter, the FAQ and both forms still work, and the README explains where the colours live and how to connect the forms.