About this template
Before rebuilding a landing page for a fintech product, read Aurex Finance: the composition and the specification behind it are both here. The palette runs black #000000 underneath, white #FFFFFF for the type and muted blue #AFDDFF carrying the accents, and the type is Manrope. Delivery is React and Tailwind CSS, captured at 1920x1410 so the frame is fixed before any code is written. The brief spends its motion budget on 900ms transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. It is the right reference for a fintech product landing page that has to look deliberate on the first screen.
Designed for
- If three people have to edit this landing page, give content leads type from 12px to 68px and 20px spacing steps rather than a screenshot.
- Product marketers who need the landing page to still read with 6.5s of looping video behind the copy.
- People who brief a model on a landing page will use the 29,337-character prompt as the starting point.
What's included
- Links collapse at one width. Wordmark, links and the #AFDDFF action share one baseline, which is what keeps a thin row from looking accidental. The links are set below the wordmark in size, and the #AFDDFF action is the only element in the bar with any weight.
- Measured against the viewport. The brief names the numbers: type from 12px to 68px, 20px spacing steps, 900ms transitions and cubic-bezier(0.16, 1, 0.3, 1) easing. That is why the composition holds together, because there is no invented spacing step between the type and the frame. The brief states values rather than proportions, so the composition keeps its relationships when the copy changes length. Change the subject, not the steps.
- The video is the background, not a panel. The 1920x1410 video runs 6.5s on a loop behind the copy, muted and inline, with no tint layer between the two. Export at 1920x1410 or wider and the cover crop keeps working.
- Panels carry the middle. The grid is the structure: panels of the same size, set in Manrope, arranged so the eye moves across rather than down. Panel heights are driven by the copy, so a longer line does not break the alignment of the row.
Motion & interaction
Ambient motion without a scroll library
The background clip runs 6.5s at 1920x1410 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. The loop is cropped to cover, which means the composition does not depend on a particular frame size.
Durations from the brief
The timings are short and consistent (900ms using cubic-bezier(0.16, 1, 0.3, 1)), so hover and press states read as one system instead of a set of separate effects. If the easing changes, the duration has to be revisited with it. Time the feedback exactly.
What to change first in Aurex Finance
When you drop your own media in, keep the crop and the layer order. The media is a 6.5s 1920x1410 loop. That placement is what keeps the copy legible. Set the new copy at the same display size and re-check the contrast before you add anything.
What a fintech product gains here
Count the decisions in this landing page and they trace back to one document: 29,337 characters naming the frame at 1920x1410, the type and the rhythm. It gives a fintech reader the shortest honest route to the offer.
How the landing page reflows
A fluid scale and a stepped one look similar on a wide screen. Narrow the viewport and the difference shows: a clamp between 12px and 68px against fixed jumps. The order is the last thing to change.
Frequently asked questions
Is the Aurex Finance prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 1920x1410, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Aurex Finance landing page in a different stack?
Aurex Finance 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.
Where did the Aurex Finance design come from?
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 1920x1410.
