About this template
Portal was captured at 800x609 and kept as a specification rather than as a gallery image. The headline reads “A voyage through forgotten realms, where past and future intertwine”, and the rest of the hero section is arranged around it. The palette is black #292926 underneath, muted orange #F3BC9E for the type and red #E1836B carrying the accents, set in Inter. Delivery is React and Tailwind CSS, captured at 800x609 so the frame is fixed before any code is written. The page keeps its motion to 300ms transitions. Treat it as the brief for a lifestyle brand hero section that has to hold up under a rebuild, not just a first look.
Designed for
- Made for a solo founder shipping one hero section for a lifestyle brand and no design system behind them.
- People who brief a model on a hero section will use the 6,663-character prompt as the starting point.
- Made for content leads rewriting a hero section whose headline has to stay as long as Portal's.
What's included
- Top row: wordmark, links, one action. The bar carries the wordmark, the section links and one #E1836B button, measured at 20px spacing steps and 300ms transitions so it never grows into a second header. The links are set below the wordmark in size, and the #E1836B action is the only element in the bar with any weight. Test the bar over your own media before giving it a background.
- Weights named per role. The faces are assigned roles rather than mixed: Inter carries the display and the interface together. Line height follows the size steps rather than a single global value.
- Links collapse at one width. The bar sits over the 800x609 composition without a background of its own, so the media runs edge to edge underneath it.
- The brief names the steps. Nothing here is eyeballed. The spec fixes 20px spacing steps and 300ms transitions, and the rest of the layout derives from those values. The type and the layout share the same steps, so nothing drifts when one of them is substituted.
Motion & interaction
One duration for the controls
Motion in the controls is short and repeatable: 300ms on each state change. Because the values are short, a rebuild that slows them down is immediately visible.
Pointers only where they help
States are handled per component (hover states on the buttons and links rather than on every card) rather than by a global animation layer. Hover and focus are specified together, so the pointer and the keyboard get the same information.
The order behind the hero section
Attention is routed rather than scattered. The page says it out loud: “A voyage through forgotten realms, where past and future intertwine”. The eye lands on the display line first, then the supporting copy, then the action. Proof, where it appears, stays a strip or a row rather than a wall of testimonials. That sequence is the design. A lifestyle reader gets the offer before the options.
Making the hero section yours
Start with the promise, not the decoration. Rewrite “A voyage through forgotten realms, where past and future intertwine” as one sentence that names what you do, then set it in Inter at the display size the brief uses. Replace red #E1836B with your own accent and check it against black #292926 before you touch anything else. Rewrite the copy and the media before you re-colour anything.
Reading Portal as a spec
The brief is a specification, not a mood board. It fixes 20px spacing steps and 300ms transitions, and it names the media at 800x609. That level of detail is why the design survives a rebuild: change the copy and the relationships still hold. Nothing in this hero section depends on a default.
Frequently asked questions
Is the Portal prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 800x609, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Portal hero section in a different stack?
Portal 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.
Where did the Portal 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 800x609.
