About this template
Wellbeing OS keeps its decision trail: the brief that produced this hero section runs 5,051 characters. The colour scheme is deep orange #2C221C underneath and orange #BF9423 carrying the accents, and the page is set in Helvetica, Segoe UI, Roboto. Delivery is React and Tailwind CSS, captured at 1460x1080 so the frame is fixed before any code is written. Motion is confined to 400ms transitions, cubic-bezier(0.16,1,0.3,1) and a looping video bed. It is most useful when the Health hero section has to survive a copy change without a redesign.
Designed for
- Product marketers who need the hero section to still read with 5.8s of looping video behind the copy.
- Made for content leads rewriting a hero section whose headline has to stay as long as Wellbeing OS's.
- This hero section serves marketers who have to defend the #BF9423 choice to a brand owner in the room.
What's included
- Top row: wordmark, links, one action. Links sit on one line at a single size, and the #BF9423 action closes the row on the right so the eye finishes where the navigation ends. The links are set below the wordmark in size, and the #BF9423 action is the only element in the bar with any weight.
- Measured against the viewport. The layout is solved against fixed values (160px spacing steps, 400ms transitions and cubic-bezier(0.16,1,0.3,1) easing), which is what keeps the first screen composed at any width. The list is short enough that a reviewer can check it element by element.
- A clip, not an illustration. The 1460x1080 frame is filled by a single loop that plays behind the copy and asks for no controls. A poster frame at 1460x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
- The type carries the tone. The display line is set in Helvetica, Segoe UI, Roboto at a size the brief fixes, which makes the headline a composition element rather than a paragraph. The size steps are fixed values, which is what lets a face swap keep the same hierarchy.
Motion & interaction
Ambient motion without a scroll library
Ambient movement is one 5.8s clip at 1460x1080, 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.
Timing kept in the brief
The brief fixes the transition value at 400ms, so a rebuild cannot substitute a slower default. Every state change names a value, so the browser default is never used. The timings are part of the design, not a finishing pass.
How Wellbeing OS sequences the first read
A strict order costs you flexibility later. Add a section above the fold and 160px spacing steps and 400ms transitions have to be re-cut, because the sequence is load-bearing rather than decorative. A health reader gets the offer before the options.
What moves in Wellbeing OS
The brief ties every transition to a value (400ms transitions, a 5.8s media loop and hover and press states). That is what keeps the page from feeling like a template with an animation preset dropped on top of it. Nothing animates for its own sake in this hero section.
What to change first in Wellbeing OS
Most people start with the accent colour. Start with the promise instead: rewrite the display line, then re-test orange #BF9423 against your own media. The composition is the reusable part, and it survives a different brand.
Frequently asked questions
How long is the prompt behind Wellbeing OS?
The captured brief runs 5,051 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 does the entry name React and Tailwind CSS at all?
Wellbeing OS 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.
Can I ship a page rebuilt from Wellbeing OS without crediting it?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 1460x1080.
