About this template
Health Portal 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. It leads with “Trusted Dentist in West New York” and gives that line the frame rather than shrinking it into a card. The palette is white #F9F8F9 underneath, deep orange #1D110C for the type and red #990A09 carrying the accents. The build is React and Tailwind CSS; every measurement in it is written down, which is what makes it reusable. The motion budget is 2000ms transitions and cubic-bezier(0.16,1,0.3,1). It is most useful when the Health landing page has to survive a copy change without a redesign.
Designed for
- Founders who brief an agency will use the 640x472 frame as the acceptance test for the first round.
- Made for studios that have to explain 767px behaviour to a client without building a prototype first.
- People who brief a model on a landing page will use the 16,908-character prompt as the starting point.
What's included
- Links before the action. The top row holds the wordmark, four to five links and a single action tinted #990A09, sized to stay quiet against the rest of the page. Under 767px the links collapse into a full-screen overlay. Labels are short enough to fit one line at 767px, and the active item is marked with weight rather than with a pill.
- Fluid where it needs to be. The top of the scale is fluid (a clamp between 180px and 200px) and the rest is fixed, so the frame stays composed as the viewport narrows. The type changes size, not role, as the viewport narrows. Design the narrow layout, do not squeeze it.
- Structure in one screen. The landing page is built so the copy lands before anything else: the type carries the hierarchy, the 640x472 frame holds the composition, and the supporting values stay quiet. The page is one composition at 640x472, which is why it holds together when the copy changes.
- Navigation without a background. Below 767px the links collapse instead of wrapping onto a second line.
Motion & interaction
One duration for the controls
Hover, press and focus all resolve in 2000ms, which is what makes the interface feel immediate. Every state change names a value, so the browser default is never used. If you change the easing, change it everywhere.
Position, not a timer
Scroll reveal runs while the page is moving, so the composition has a defined resting state. The page changes at the reader's pace rather than on a schedule.
The numbers behind the landing page
Most references show the result and keep the numbers. This one reverses that: 200px spacing steps, 2000ms transitions, cubic-bezier(0.16,1,0.3,1) easing and a 767px breakpoint are published beside the page, so the result can be reproduced instead of approximated. Nothing in this landing page depends on a default.
The order behind the landing page
When a health reader lands on a single screen, they scan before they read. The layout answers that: navigation, the headline, the announcement badge, the stats row and the card grid are sized to be scanned, with 200px spacing steps and 2000ms transitions keeping each stop distinct. A health reader gets the offer before the options.
Why the health brief holds
16,908 characters of brief produce one screen with no filler. The values in it are explicit (200px spacing steps and 2000ms transitions), which is why the composition still reads when the words change. Health Portal states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
How long is the prompt behind Health Portal?
The captured brief runs 16,908 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 Health Portal depends on React and Tailwind CSS?
Health Portal 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.
How do the 2000ms transitions in Health Portal behave?
The motion is specified at the same level of detail as the layout: state changes settle in the 2000ms range using 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.
