About this template
This is the hero section from CoreOS, published with the brief that produced it rather than as a screenshot. The whole page is built on black #2E3233 underneath. Delivery is React and Tailwind CSS, captured at 1468x1080 so the frame is fixed before any code is written. Motion is 0.5s transitions and a looping video bed, kept quiet enough that the copy still leads. Keep it open while you write: the 5,790-character brief is the part that transfers to your own page.
Designed for
- Teams building an industrial company hero section who want the measured detail (a fixed 62px display size and 14px spacing steps) rather than a screenshot to copy.
- Product marketers who need the hero section to still read with 4.9s of looping video behind the copy.
- Made for a solo founder shipping one hero section for an industrial company and no design system behind them.
What's included
- The nav is deliberately thin. The bar is one row of text and one action, measured at a fixed 62px display size and 14px spacing steps so it reads as a strip rather than as a band. The bar sits over the 1468x1080 composition without a background of its own, so the media runs edge to edge underneath it.
- Navigation held to one row. The action carries the accent while the links stay on the ink colour, so the hierarchy in the bar matches the page below it. Copy this pattern when you need navigation that survives a loud first screen.
- The brief names the steps. The brief states its sizes at capture (a fixed 62px display size, 14px spacing steps and 0.5s transitions), so a rebuild can be verified instead of approximated. The frame proportions are recorded with the sizes, so a rebuild gets the aspect right as well. Measure before you adjust.
- A full-bleed clip behind the type. The composition is built on top of the 1468x1080 clip rather than beside it, so the media never gets a panel or a border. A poster frame at 1468x1080 holds the composition when autoplay is unavailable, so the layout never collapses. Export at 1468x1080 or wider to keep the crop honest.
Motion & interaction
The loop does the ambient work
Ambient movement comes from the 4.9s 1468x1080 loop rather than from scroll effects, which keeps the page calm and the type readable. Nothing else on the page animates continuously, so the media is the only thing asking for attention.
The whole animation budget
Transitions are specified at 0.5s, which is the timing the controls are held to. Easing is specified alongside the duration (0.5s), so a rebuild cannot quietly substitute a different feel.
Making the hero section yours
One line, one font, one accent: those three substitutions change the design most. a fixed 62px display size, 14px spacing steps and 0.5s transitions are the values that should not move. Substitution is cheaper than composition, and that is the point.
The order behind the hero section
Committing to one reading path means other paths are closed. The brief accepts that, fixes navigation and the background clip in place, and spends a fixed 62px display size and 14px spacing steps on making the route obvious. A industrial reader gets the offer before the options.
The numbers behind the hero section
Most references show the result and keep the numbers. This one reverses that: a fixed 62px display size, 14px spacing steps and 0.5s transitions are published beside the page, so the result can be reproduced instead of approximated. Nothing in this hero section depends on a default.
Frequently asked questions
Is the CoreOS prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 1468x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the CoreOS hero section in a different stack?
CoreOS 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 CoreOS 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 1468x1080.
