About this template
Before rebuilding a landing page for a health or wellbeing product, read Mind-Body Healing: the composition and the specification behind it are both here. The page's own headline reads “Holistic wellness. Transformative results”, and the composition is built around those exact words. The palette is muted indigo #D1C4E9 underneath and magenta #AD4A80 carrying the accents, set in Inter. The reference is built with React and Tailwind CSS, and the layout decisions are stated independently of it. The brief spends its motion budget on 500ms transitions and a looping video bed. This reference is for a health or wellbeing product that wants the first screen settled before the build starts.
Designed for
- Growth teams reskinning a health or wellbeing product landing page who want the 1468x1080 frame kept while the offer copy changes.
- This landing page serves founders who need one screen of proof that health copy can carry 6.8s of looping video.
- Made for a solo founder shipping one landing page for a health or wellbeing product and no design system behind them.
What's included
- Links collapse at one width. The bar carries the wordmark, the section links and one #AD4A80 button, measured at 100vh sections and 500ms transitions so it never grows into a second header. The links are set below the wordmark in size, and the #AD4A80 action is the only element in the bar with any weight. The bar is a handful of elements, so it rebuilds without a component library.
- The poster frame matters. The media is one 6.8s clip cropped to cover the 1468x1080 frame, so it never letterboxes at any width. The loop is short enough (6.8s) that the eye reads it as texture rather than as a timeline.
- The scale is the styling. The type is Inter at the top of the scale, with the supporting copy dropped well below it so the hierarchy needs no colour to read. Tracking is set per size, so the display line and the caption do not share one letter-spacing value. The scale is quoted; use it.
- The nav is deliberately thin. The bar sits over the 1468x1080 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Ambient motion without a scroll library
Ambient movement is one 6.8s clip at 1468x1080, looping quietly behind the copy rather than reacting to the pointer. The clip is short enough to loop without a visible seam, which matters more than its resolution. Shoot or export at 1468x1080 or wider.
Durations from the brief
The timings are short and consistent (500ms), so hover and press states read as one system instead of a set of separate effects. Because the values are short, a rebuild that slows them down is immediately visible.
How the landing page reflows
You cannot fix a narrow screen by shrinking it. This brief handles the change in the type and the navigation instead: the section is held at 100vh and the navigation collapses into a mobile menu. The hierarchy is what survives the reflow.
What a health or wellbeing product gains here
The reason this works for a health or wellbeing product is that it never asks the reader to assemble the message. The page says it out loud: “Holistic wellness. Transformative results”. Layout, type and colour are decided (muted indigo #D1C4E9 and magenta #AD4A80, set in Inter), so the first screen reads as a finished argument rather than a pile of parts. It gives a health reader the shortest honest route to the offer.
Reading Mind-Body Healing as a spec
The brief is a specification. It states 100vh sections and 500ms transitions, and it names the media frame at 1468x1080 before anything is designed around it. Nothing in this landing page depends on a default.
Frequently asked questions
How long is the prompt behind Mind-Body Healing?
The captured brief runs 5,232 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
Why is Mind-Body Healing's prompt not printed here?
Everything quoted on the page comes from the captured 5,232-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Do I need React and Tailwind CSS to rebuild Mind-Body Healing?
Mind-Body Healing was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
