About this template
Cross-Border keeps its decision trail: the brief that produced this landing page runs 6,698 characters. “Complete the form and our team will contact you soon” is the line the layout is built to carry. The palette runs bright yellow #FFDA00 underneath, black #1A1A1A for the type and deep teal #002A35 carrying the accents, and the type is Helvetica, Arial. The reference is built with React and Tailwind CSS, and the layout decisions are stated independently of it. Motion is confined to 0.6s transitions and a looping video bed. It is the right reference for an industrial company landing page that has to look deliberate on the first screen.
Designed for
- Anyone using an AI builder who wants a brief that already contains a 1440x1080 frame instead of leaving it to the model.
- This landing page answers the builder who wants to know what 12vh sections and 20px spacing steps actually controls in the layout.
- This landing page serves founders who need one screen of proof that industrial copy can carry 5.8s of looping video.
What's included
- Top row: wordmark, links, one action. The top row holds the wordmark, four to five links and a single action tinted #002A35, sized to stay quiet against the rest of the page. A mobile overlay takes over below the tablet breakpoint. The links are set below the wordmark in size, and the #002A35 action is the only element in the bar with any weight.
- Every measurement is written down. The layout is solved against fixed values (12vh sections, 20px spacing steps and 0.6s transitions), which is what keeps the first screen composed at any width. The frame proportions are recorded with the sizes, so a rebuild gets the aspect right as well.
- One clip does the work. The 1440x1080 frame is filled by a single loop that plays behind the copy and asks for no controls. A poster frame at 1440x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
- The type carries the tone. Type is the styling system here: Helvetica, Arial at the display size, the same face across the interface, and no second accent colour doing the work. The face is paired with fixed sizes, which is what keeps the display line and the interface text related.
Motion & interaction
Ambient motion without a scroll library
One 5.8s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. The clip is muted and inline, so the first frame is available without an interaction.
Fast enough to feel deliberate
Every state change in the specification has a duration attached: transitions settle around 0.6s. Nothing is left at the browser default, which is why the page feels authored rather than animated. Easing is specified alongside the duration (0.6s), so a rebuild cannot quietly substitute a different feel.
The argument this landing page makes
Cross-Border is the landing page reference for an industrial company, and it answers the problem that audience actually has. The page says it out loud: “Complete the form and our team will contact you soon”. The palette stays disciplined (bright yellow #FFDA00 and deep teal #002A35) and the type is set in Helvetica, Arial, so nothing in the composition depends on a borrowed trend. When you brief a build, this is the part worth copying: one promise at display size, with the supporting detail held below it. Cross-Border states the offer once and lets the composition repeat it rather than adding a second claim.
The numbers behind the landing page
The brief is a specification. It states 12vh sections, 20px spacing steps and 0.6s transitions, and it names the media frame at 1440x1080 before anything is designed around it. Nothing in this landing page depends on a default.
What moves in Cross-Border
Motion here is a set of decisions, not a library: 0.6s transitions, a 5.8s media loop and hover and press states, and nothing animates on scroll. The result is a page that feels authored: short durations, one entrance, and state changes that confirm an action rather than decorate it. Nothing animates for its own sake in this landing page.
Frequently asked questions
How long is the prompt behind Cross-Border?
It is a build brief rather than a mood description: it names the composition at 1440x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Do I need React and Tailwind CSS to rebuild Cross-Border?
Cross-Border 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.
Is the Cross-Border brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 6,698-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
