About this template
Wellness Balance shows one way to build the hero section for a health or wellbeing product, and publishes the instructions that produced it. It leads with “Discover our new plant-based supplements for daily balance and clean energy” and gives that line the frame rather than shrinking it into a card. The colour scheme is white #ECEDEC underneath and white #FEFDF9 for the type, and the page is set in DM Sans. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. Motion comes down to 0.8s transitions and cubic-bezier(0.16, 1, 0.3, 1). It is the right reference for a health or wellbeing product hero section that has to look deliberate on the first screen.
Designed for
- Made for agencies that pitch health work and need a 640x472 frame in the first reply to the client.
- In-house squads extending this hero section who need type from 28px to 35px and 110px spacing steps carried into the new blocks unchanged.
- People who brief a model on a hero section will use the 7,840-character prompt as the starting point.
What's included
- Top row: wordmark, links, one action. The bar is one row of text and one action, measured at type from 28px to 35px and 110px spacing steps so it reads as a strip rather than as a band. The bar sits over the 640x472 composition without a background of its own, so the media runs edge to edge underneath it. The bar is a handful of elements, so it rebuilds without a component library.
- Figures as typography. The figures are set in DM Sans at a size closer to the headline than to the body copy. Figures are set at one weight, so the row does not rank its own statistics.
- The bar shares the page grid. If your own page has more sections, group them rather than widening the bar. The reference was captured at 640x472.
- The spacing steps are quoted. Sizes are quoted rather than inherited: type from 28px to 35px, 110px spacing steps, 0.8s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing. Swap the face or the copy and those relationships still hold. Because the values are fixed, a substitution changes the look without changing the rhythm.
Motion & interaction
Pointers only where they help
Every interactive element does one thing (a slider that pages through content on demand), which is what keeps the states predictable. Hover and focus are specified together, so the pointer and the keyboard get the same information.
Short, matched timings
One duration covers the interactions (0.8s on cubic-bezier(0.16, 1, 0.3, 1)), which is what keeps hover and press reading as one system. Easing is specified alongside the duration (0.8s), so a rebuild cannot quietly substitute a different feel. Do not ship the browser default.
The argument this hero section makes
Restraint costs you room for proof above the fold. This brief accepts that cost and spends the first screen on the offer, with type from 28px to 35px and 110px spacing steps fixed so a proof section can be added below without a rework. It gives a health reader the shortest honest route to the offer.
What to change first in Wellness Balance
Start with the copy, not the colour. Rewrite “Discover our new plant-based supplements for daily balance and clean energy” as one sentence about your product, then set it in DM Sans at the size the brief uses. Substitution is cheaper than composition, and that is the point.
The timing behind the hero section
The animation budget is stated: 0.8s transitions and a word-by-word headline. Nothing in the hero section moves without a value attached to it. Nothing animates for its own sake in this hero section.
Frequently asked questions
What do I get when I copy the Wellness Balance brief?
The captured brief runs 7,840 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 Wellness Balance depends on React and Tailwind CSS?
Wellness Balance 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 Wellness Balance?
The motion is specified at the same level of detail as the layout: state changes settle in the 0.8s range on cubic-bezier(0.16, 1, 0.3, 1). Port the composition first and the timings second, because they are easier to match once the layout holds.
