About this template
This is the landing page from USD Halo, published with the brief that produced it rather than as a screenshot. “An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi” is the line the layout is built to carry. Colour is limited to white #F5F5F5 underneath and deep indigo #2B2644 for the type, set in Inter. Delivery is React and Tailwind CSS, captured at 458x800 so the frame is fixed before any code is written. Use it as the reference when you are building a fintech product landing page and want a finished composition instead of a starting point.
Designed for
- Start from type from 13px to 16px and 100vh sections and let the palette follow, because the spacing is what makes this landing page read.
- People who brief a model on a landing page will use the 8,531-character prompt as the starting point.
- Made for content leads rewriting a landing page whose headline has to stay as long as USD Halo's.
What's included
- Top row: wordmark, links, one action. The bar overlays the landing page instead of pushing it down, so the composition keeps the full height of the first screen. The bar sits over the 458x800 composition without a background of its own, so the media runs edge to edge underneath it. Design the collapsed state before adding a sixth link.
- Every measurement is written down. The layout is solved against fixed values (type from 13px to 16px, 100vh sections and 15px spacing steps), which is what keeps the first screen composed at any width. Each value maps to one job: a type step, a gap, a radius or a transition.
- Labels under the figures. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the landing page from turning into a feature list. Labels sit under the figures at the smallest step in the brief, so the row reads as data rather than decoration.
- The grid sets the order. The grid is the structure: panels of the same size, set in Inter, arranged so the eye moves across rather than down. Panel order is the reading order, so nothing depends on position cues. Keep the reading order the panel order.
Motion & interaction
Interaction kept local
The page answers only where it can be acted on: hover states on the buttons and links rather than on every card. Because the states are simple, they port into any component system.
Continuous horizontal motion
A marquee runs across the composition on an endless loop, set in Inter, so the page has movement even where nothing animates on scroll. Because the strip is decorative, it can be paused or dropped without changing the layout.
How the landing page reflows
When the copy is long, the narrow layout breaks first. Here a clamp between 13px and 16px absorbs the change, and the section is held at 100vh. The narrow layout is a decision rather than a squeeze, and the hierarchy survives it.
What to change first in USD Halo
When you drop your own media in, keep the crop and the layer order. The media is a still at 458x800. That placement is what keeps the copy legible. The frame and the scale are what to leave alone.
Reading USD Halo as a spec
The brief is a specification. It states type from 13px to 16px, 100vh sections and 15px spacing steps, and it names the media frame at 458x800 before anything is designed around it. Nothing in this landing page depends on a default.
Frequently asked questions
Is the USD Halo prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 458x800, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the USD Halo landing page in a different stack?
USD Halo 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 USD Halo 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 458x800.
