About this template
Before rebuilding a hero section for a health or wellbeing product, read Healcure: the composition and the specification behind it are both here. The headline reads “Healthcare for Good. Today. Tomorrow. Always.”, and the rest of the hero section is arranged around it. The palette is muted blue #374251 underneath. Delivery is Tailwind CSS, captured at 1466x1080 so the frame is fixed before any code is written. Motion is limited to a looping video bed. Take it on when the hero section needs a decided order before any new sections are added.
Designed for
- Start from 14px spacing steps and let the palette follow, because the spacing is what makes this hero section read.
- This hero section serves founders who need one screen of proof that health copy can carry 5.4s of looping video.
- Founders who brief an agency will use the 1466x1080 frame as the acceptance test for the first round.
What's included
- The nav is deliberately thin. The bar overlays the hero section instead of pushing it down, so the composition keeps the full height of the first screen. The bar sits over the 1466x1080 composition without a background of its own, so the media runs edge to edge underneath it. If your own page has more sections, group them rather than widening the bar.
- The sizes are in the brief, not in a scale. The brief fixes 14px spacing steps and leaves the rest to the arrangement, which is the opposite of a scale that grows on its own. There is no invented intermediate value between the named ones; the measurement list is the whole system.
- A stat strip, not a table. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the hero section from turning into a feature list. Labels are set at one size, so a long label does not change the height of the row.
- The announcement pill. The badge is the only element allowed above the headline, which is what makes it read as an announcement instead of chrome. The pill sits at the smallest step in the brief, so it reads as a label rather than as a second title.
Motion & interaction
Ambient motion without a scroll library
Ambient movement is one 5.4s clip at 1466x1080, looping quietly behind the copy rather than reacting to the pointer. Because it is muted, the loop can run under the copy without competing for sound or focus. Shoot or export at 1466x1080 or wider.
Almost no motion
The brief leaves animation out and lets the 1466x1080 layout carry the page, with hover and press states the only changes. The composition holds still, so the hierarchy has to carry the page and it does.
What to change first in Healcure
If your brand runs a heavier palette, test it against the frame before you commit. muted blue #374251 carries the page, so a darker accent needs more contrast than the reference uses. The frame and the scale are what to leave alone.
The order behind the hero section
The brief runs 3,021 characters and names the reading order explicitly: navigation, the announcement badge and the stats row, with 14px spacing steps between them. A health reader gets the offer before the options.
The numbers behind the hero section
Type is the first number: 14px spacing steps. The spacing follows from it, and everything else on the page is positioned against those two values. Nothing in this hero section depends on a default.
Frequently asked questions
What does the brief behind Healcure actually contain?
The captured brief runs 3,021 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.
Can I use Healcure in a client project?
The reference was collected from sceneai.art, and the media belongs to them. Rebuild the composition with your own copy, imagery and palette, and check the source site's terms before you ship anything taken from it.
Why is Healcure's prompt not printed here?
Everything quoted on the page comes from the captured 3,021-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
