About this template
FAQ CTA is a health call-to-action block built from one written brief, and this page documents that brief. The page's own headline reads “Send Money Worldwide at the Best Rates”, and the composition is built around those exact words. The palette runs white #F0F0F0 underneath and bright red #FF4B2B carrying the accents, and the type is Inter. The reference is built with React and Tailwind CSS, and the layout decisions are stated independently of it. Motion comes down to 6.5s transitions. It is the right reference for a health or wellbeing product call-to-action block that has to look deliberate on the first screen.
Designed for
- Growth teams reskinning a health or wellbeing product call-to-action block who want the 640x468 frame kept while the offer copy changes.
- Made for a solo founder shipping one call-to-action block for a health or wellbeing product and no design system behind them.
- People who brief a model on a call-to-action block will use the 9,456-character prompt as the starting point.
What's included
- A navigation bar that gets out of the way. Links sit on one line at a single size, and the #FF4B2B 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 #FF4B2B action is the only element in the bar with any weight.
- Measured, not eyeballed. Nothing in the layout is left to feel: the brief quotes 10px spacing steps and 6.5s transitions and the build has to hit those values. The frame proportions are recorded with the sizes, so a rebuild gets the aspect right as well.
- One face, used with discipline. Typography is Inter, and the brief assigns the face a job rather than mixing for variety. Weight, tracking and size steps are all specified, so the hierarchy survives a substitution. A face swap is safe as long as the sizes and weights stay where the brief put them. One family with clear roles beats two that compete.
- The grid sets the order. Where a run of copy would go, this page puts a set of panels, which is what keeps the call-to-action block scannable. The accent inside the grid marks one element at most, so panels do not compete with each other. The reference was captured at 640x468.
Motion & interaction
A scene instead of a still
A live canvas is doing the visual work: a WebGL canvas. The brief keeps the interface plain around the canvas so the scene is the only spectacle.
Hover where it means something
Only the controls respond to the pointer (hover states on the buttons and links rather than on every card and tabs or an accordion that swaps content in place), so the page feels responsive without turning every element into a target. Each state changes one property, which keeps the feedback legible. If a state does not confirm an action, drop it.
What to change first in FAQ CTA
Start with the promise, not the decoration. Rewrite “Send Money Worldwide at the Best Rates” as one sentence that names what you do, then set it in Inter at the display size the brief uses. Replace bright red #FF4B2B with your own accent and check it against white #F0F0F0 before you touch anything else. If a new element does not help explain the offer or the next action, it belongs below the fold.
How the call-to-action block reflows
The brief describes what changes at each width (the motion has a reduced-motion branch), which means the mobile version is a decision rather than a squeeze. Contrast is held on the #FF4B2B accent over the media, and the video is muted and inline. The mobile version is a decision, not a fallback.
Why this composition works for health
When you brief a health call-to-action block, the hard part is deciding what the first screen refuses to say. FAQ CTA answers that in advance: one display line, navigation, the stats row, the card grid, the feature list and the form behind it. It gives a health reader the shortest honest route to the offer.
Frequently asked questions
How long is the prompt behind FAQ CTA?
The captured brief runs 9,456 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?
FAQ CTA 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 FAQ CTA?
Transitions are attached to interface states rather than to a scroll timeline, and they resolve in the 6.5s range. The brief records the values so a port can match them without guessing.
