About this template
TrustFlow shows one way to build the landing page for a fintech product, and publishes the instructions that produced it. Colour is limited to white #FFFFFF underneath and black #191919 for the type, set in Inter. Delivery is React and Tailwind CSS, captured at 1462x1080 so the frame is fixed before any code is written. Motion is limited to 200ms transitions and a looping video bed. If you are briefing a fintech landing page, start from this composition and replace the subject.
Designed for
- If the motion has to be dropped, the landing page still reads, with a fixed 15px display size and 11px spacing steps doing the hierarchy work.
- Product marketers who need the landing page to still read with 6.3s of looping video behind the copy.
- People who brief a model on a landing page will use the 6,275-character prompt as the starting point.
What's included
- Navigation without a background. Navigation is a single row with no second level under it. The bar sits over the 1462x1080 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.
- The sizes are in the brief, not in a scale. Type and spacing are drawn from one list here: a fixed 15px display size, 11px spacing steps and 200ms transitions. The smallest and largest values in that list set the range the composition works in.
- Numbers on the baseline. The figures are set in Inter at a size closer to the headline than to the body copy. Numbers share the interface face, so they belong to the page instead of interrupting it.
- The bar shares the page grid. The bar overlays the landing page instead of pushing it down, so the composition keeps the full height of the first screen. Copy this pattern when you need navigation that survives a loud first screen.
Motion & interaction
A small interactive surface
The interactive layer is deliberately small: hover states on the buttons and links rather than on every card. Interactive targets are large enough to tap and the pointer treatment is consistent across them.
Timing kept in the brief
Hover, press and focus all resolve in 200ms, which is what makes the interface feel immediate. Because the values are short, a rebuild that slows them down is immediately visible.
The timing behind the landing page
Keeping motion this small means the page leans on the type and the frame instead. If 200ms transitions, a 6.3s media loop and hover and press states were removed entirely, the composition would still stand. Nothing animates for its own sake in this landing page.
What to change first in TrustFlow
Change the content first and check the frame afterwards. a fixed 15px display size, 11px spacing steps and 200ms transitions are the values to protect while you swap the copy. Keep the media crop; it is doing as much work as the type.
Why the fintech brief holds
Restraint costs you room for proof above the fold. This brief accepts that cost and spends the first screen on the offer, with a fixed 15px display size and 11px spacing steps fixed so a proof section can be added below without a rework. TrustFlow states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
Is the TrustFlow prompt a finished spec or a starting point?
The captured brief runs 6,275 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 rebuild the TrustFlow landing page in a different stack?
TrustFlow 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 TrustFlow 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 1462x1080.
