About this template
Planor gives an AI or SaaS product a finished first screen and the numbers that produced it. The palette runs orange #634635 underneath and white #E5E7EB for the type, and the type is Inter. Delivery is one self-contained HTML file, captured at 1964x1402 so the frame is fixed before any code is written. Motion is limited to 0.2s transitions and a looping video bed. Keep it open while you write: the 3,036-character brief is the part that transfers to your own page.
Designed for
- This hero section serves teams who have to justify one self-contained HTML file to someone who was not in the kickoff.
- The page serves front-end developers rebuilding an AI or SaaS product hero section in one self-contained HTML file and looking for the numbers behind the look.
- Designers who need the numbers first: a fixed 58px display size and 30px spacing steps, all of it quoted from the brief.
What's included
- Navigation held to one row. A slim bar sits over the hero section with the wordmark on the left and the links set in Inter, so the composition reads as content first and chrome second. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 1964x1402 composition without a background of its own, so the media runs edge to edge underneath it. Keep the link count to four or five; the row is sized for that.
- Measured, not eyeballed. The layout works on absolute values rather than ratios: a fixed 58px display size, 30px spacing steps and 0.2s transitions. Spacing is quoted in the same units as the type, so the two can be compared directly.
- Top row: wordmark, links, one action. The mobile menu is part of the brief, so the collapsed state is designed rather than improvised. One action per bar.
- Nothing here is inherited. Spacing is quoted the same way (a fixed 58px display size, 30px spacing steps and 0.2s transitions), not as a scale that grows on its own.
Motion & interaction
A loop, not a timeline
The background clip runs 6.4s at 1964x1402 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. Because it is muted, the loop can run under the copy without competing for sound or focus.
State changes, timed
The controls resolve in 0.2s, fast enough that the page answers as it is touched rather than after it. Easing is specified alongside the duration (0.2s), so a rebuild cannot quietly substitute a different feel.
How Planor sequences the first read
Committing to one reading path means other paths are closed. The brief accepts that, fixes navigation, the headline and the background clip in place, and spends a fixed 58px display size and 30px spacing steps on making the route obvious. A SaaS reader gets the offer before the options.
How the hero section reflows
The cost of a fluid scale is less control over exact sizes. What you get is a display line that stays proportionate, which is why a clamp between 58px and 30px is in the brief. The scale changes with the viewport; the sequence does not.
Making the hero section yours
Set the new copy at the display size the brief names (a fixed 58px display size and 30px spacing steps), and the rest of the scale follows without a redesign. Set the new copy at the same display size and re-check the contrast before you add anything.
Frequently asked questions
How much of Planor depends on one self-contained HTML file?
Planor was built in one self-contained HTML file, 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 Planor prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 1964x1402, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Where did the Planor 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 1964x1402.
