About this template
Vectrus Energy is a working reference for an industrial company: the landing page laid out, measured and ready to rebuild. The headline reads “Advancing resources for a cleaner future”, and the rest of the landing page is arranged around it. The colour scheme is gray #C7CED7 underneath and deep blue #1D3045 for the type, and the page is set in Helvetica, Arial. The reference is built with React and Tailwind CSS, and the layout decisions are stated independently of it. Motion comes down to 200ms transitions, cubic-bezier(0.16,1,0.3,1) and a looping video bed. Treat it as the brief for an industrial company landing page that has to hold up under a rebuild, not just a first look.
Designed for
- Founders who brief an agency will use the 1468x1080 frame as the acceptance test for the first round.
- If the motion has to be dropped, the landing page still reads, with 500vh sections and 40px spacing steps doing the hierarchy work.
- Product marketers who need the landing page to still read with 5.6s of looping video behind the copy.
What's included
- One row, no drawers. A slim bar sits over the landing page with the wordmark on the left and the links set in Helvetica, Arial, so the composition reads as content first and chrome second. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 1468x1080 composition without a background of its own, so the media runs edge to edge underneath it.
- Measured, not eyeballed. Nothing in the layout is left to feel: the brief quotes 500vh sections, 40px spacing steps, 200ms transitions and cubic-bezier(0.16,1,0.3,1) easing and the build has to hit those values. A rebuild that hits those numbers looks like the reference without further tuning.
- Links before the action. Give the wordmark no more room than its type needs. The reference was captured at 1468x1080.
- One scale for type and frame. Spacing is quoted the same way (500vh sections, 40px spacing steps, 200ms transitions and cubic-bezier(0.16,1,0.3,1) easing), not as a scale that grows on its own.
Motion & interaction
A loop, not a timeline
One 5.6s 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 short enough to loop without a visible seam, which matters more than its resolution. Shoot or export at 1468x1080 or wider.
Durations from the brief
Motion is measured in milliseconds here: 200ms using cubic-bezier(0.16,1,0.3,1). That is the whole animation budget, and it is spent on state changes rather than on a scroll timeline. Focus states are timed with the same value as hover, so keyboard and pointer feedback match. The timings are part of the design, not a finishing pass.
Making the landing page yours
One line, one font, one accent: those three substitutions change the design most. 500vh sections, 40px spacing steps, 200ms transitions and cubic-bezier(0.16,1,0.3,1) easing are the values that should not move. Rewrite the display line before you touch the colour.
The order behind the landing page
The brief runs 8,300 characters and names the reading order explicitly: navigation, the headline, the stats row, the feature list and the background clip, with 500vh sections and 40px spacing steps between them. A industrial reader gets the offer before the options.
How the landing page reflows
Most responsive work stops at hiding elements. Here the layout changes shape: the scale is fluid rather than stepped, the section is held at 500vh and the navigation collapses into a mobile menu, and nothing important is dropped to make the fold fit. Nothing important is dropped at narrow widths.
Frequently asked questions
What does the brief behind Vectrus Energy actually contain?
The captured brief runs 8,300 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.
Is the Vectrus Energy brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 8,300-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Why does the entry name React and Tailwind CSS at all?
Vectrus Energy 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.
