About this template
This is the hero section from Power AI, published with the brief that produced it rather than as a screenshot. The headline reads “The most powerful AI ever deployed in talent acquisition”, and the rest of the hero section is arranged around it. The palette is black #000000 underneath, yellow #FCD34D for the type and indigo #A855F7 carrying the accents, set in Geist. Delivery is a single component, captured at 800x604 so the frame is fixed before any code is written. Motion is confined to 100ms transitions. Keep it open while you write: the 3,838-character brief is the part that transfers to your own page.
Designed for
- The page serves front-end developers rebuilding an AI or SaaS product hero section in a single component and looking for the numbers behind the look.
- If the build starts from a single component, lift a fixed 220px display size and 82px spacing steps first and leave the palette alone until the grid settles.
- Teams rebuilding a competitor's SaaS hero section who want a single component named before anyone commits to a framework.
What's included
- The bar shares the page grid. The bar is the quietest part of the composition: wordmark, a short row of links and one #A855F7 action, all held at the smallest type step in the brief. The links are set below the wordmark in size, and the #A855F7 action is the only element in the bar with any weight.
- The spacing steps are quoted. Nothing in the layout is left to feel: the brief quotes a fixed 220px display size, 82px spacing steps and 100ms transitions and the build has to hit those values. Values are quoted from the captured prompt rather than inferred, so they survive a re-render.
- Logo strip on the baseline. Logos sit on the baseline in a single Geist row, unlabelled, which keeps the claim implicit and the composition intact. There is no heading and no border, so the row stays part of the first screen. Keep the row unlabelled.
- Links before the action. The bar sits over the 800x604 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Pointer states, nothing more
The interactive layer is deliberately small: hover states on the buttons and links rather than on every card. The interactive states do not move layout, so nothing jumps under the pointer. A few reliable states beat a long list of effects.
The strip that never stops
The horizontal strip is the loudest element after the headline: continuous motion, #A855F7 on the active item, and it never asks the reader to interact. The active item is marked with #A855F7 rather than with a size change.
What holds up for AI & SaaS
If your first screen currently explains three things, this is the version that explains one. navigation, the headline, the stats row, the client row and the background clip are staged in reading order, with a fixed 220px display size and 82px spacing steps setting the rhythm. Power AI states the offer once and lets the composition repeat it rather than adding a second claim.
What moves in Power AI
A preset animation pack would have been quicker to ship. The brief specifies 100ms transitions, hover and press states and a looping marquee instead, which is why the page reads as authored rather than staged. Nothing animates for its own sake in this hero section.
Making the hero section yours
Start with the copy, not the colour. Rewrite “The most powerful AI ever deployed in talent acquisition” as one sentence about your product, then set it in Geist at the size the brief uses. Your accent has to survive the same contrast test as the reference accent.
Frequently asked questions
Why does the entry name a single component at all?
Power AI was built in a single component, 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 Power AI prompt a finished spec or a starting point?
The captured brief runs 3,838 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.
Can I use Power AI in a client project?
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 800x604.
