About this template
Celestial Renewal is the landing page reference for a health or wellbeing product, and the brief behind it is a full build spec rather than a mood board. “Expert beauty and holistic wellness, delivered with warmth and intention” is the line the layout is built to carry. The palette is deep blue #010A17 underneath and blue #0A4267 carrying the accents, set in Instrument Serif. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. The brief spends its motion budget on 75ms transitions, cubic-bezier(0.22,1,0.36,1) and a looping video bed. Keep it open while you write: the 7,343-character brief is the part that transfers to your own page.
Designed for
- This landing page is built for agencies that need the 1464x1080 frame to survive three rounds of client edits.
- Agencies pitching a health or wellbeing product landing page who want type from 36px to 110px and 40px spacing steps quoted in the deck so the estimate still holds after the kickoff.
- This landing page serves founders who need one screen of proof that health copy can carry 5.9s of looping video.
What's included
- Navigation held to one row. The top row holds the wordmark, four to five links and a single action tinted #0A4267, sized to stay quiet against the rest of the page. A mobile overlay takes over below the tablet breakpoint. The links are set below the wordmark in size, and the #0A4267 action is the only element in the bar with any weight. Test the bar over your own media before giving it a background.
- Numbers carried into the build. The brief fixes type from 36px to 110px, 40px spacing steps, 75ms transitions and cubic-bezier(0.22,1,0.36,1) easing and leaves the rest to the arrangement, which is the opposite of a scale that grows on its own. The type and the layout share the same steps, so nothing drifts when one of them is substituted.
- Full-frame video, no panel. The brief specifies the video at 1464x1080 with a loop of 5.9s, and every text element is placed against that frame. Export at 1464x1080 or wider and the cover crop keeps working.
- A navigation bar that gets out of the way. Keep the link count to four or five; the row is sized for that. The reference was captured at 1464x1080.
Motion & interaction
Short, named durations
Every state change in the specification has a duration attached: transitions settle around 75ms on cubic-bezier(0.22,1,0.36,1). Nothing is left at the browser default, which is why the page feels authored rather than animated. Because the values are short, a rebuild that slows them down is immediately visible.
Rendered, not illustrated
Runtime rendering is the design decision here (a WebGL canvas), and the layout is built to leave it room. The scene responds to the viewport instead of sitting behind it as an image. Keep the interface flat around it.
The argument this landing page makes
If your first screen currently explains three things, this is the version that explains one. navigation, the announcement badge, the stats row, the feature list and the background clip are staged in reading order, with type from 36px to 110px and 40px spacing steps setting the rhythm. It gives a health reader the shortest honest route to the offer.
How Celestial Renewal sequences the first read
A feature-led layout lists what the product does; this one routes the reader to a single decision. The route is visible in navigation, the announcement badge, the stats row, the feature list and the background clip and in how type from 36px to 110px and 40px spacing steps space them. A health reader gets the offer before the options.
How the landing page reflows
There is no separate mobile design to maintain. the type is clamped between 36px and 110px and the navigation collapses into a mobile menu, and the same hierarchy carries across. The mobile version is a decision, not a fallback.
Frequently asked questions
What do I get when I copy the Celestial Renewal brief?
The captured brief runs 7,343 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.
How much of Celestial Renewal depends on React and Tailwind CSS?
Celestial Renewal 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.
What drives the motion in Celestial Renewal?
The motion is specified at the same level of detail as the layout: state changes settle in the 75ms range on cubic-bezier(0.22,1,0.36,1). Port the composition first and the timings second, because they are easier to match once the layout holds.
