About this template
Stellar AI solves the hero section problem for an AI or SaaS product with a single captured brief. The page's own headline reads “Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time”, and the composition is built around those exact words. The colour scheme is white #FFFFFF underneath and deep blue #101117 for the type, and the page is set in Inter. Delivery is React and Tailwind CSS, captured at 800x708 so the frame is fixed before any code is written. The motion budget is 0.1s transitions. Keep it open while you write: the 3,973-character brief is the part that transfers to your own page.
Designed for
- If three people have to edit this hero section, give content leads a fixed 80px display size and 30px spacing steps rather than a screenshot.
- Made for content leads rewriting a hero section whose headline has to stay as long as Stellar AI's.
- The composition serves content teams who will swap the headline and need Inter's weights to keep the same rhythm.
What's included
- Navigation held to one row. Navigation is a single row with no second level under it. The bar sits over the 800x708 composition without a background of its own, so the media runs edge to edge underneath it.
- A client row instead of a claim. Logos sit on the baseline in a single Inter 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.
- Proof above the fold. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the hero section from turning into a feature list. There are no dividers inside the row; spacing alone separates the figures.
- Navigation without a background. The wordmark holds the left edge and the links run to the right of it, all of it set in Inter so the bar belongs to the page below rather than to a separate system. The bar is a handful of elements, so it rebuilds without a component library.
Motion & interaction
One duration for the controls
The controls resolve in 0.1s, fast enough that the page answers as it is touched rather than after it. Easing is specified alongside the duration (0.1s), so a rebuild cannot quietly substitute a different feel.
Interaction kept local
Only the controls respond to the pointer (hover states on the buttons and links rather than on every card and tabs or an accordion that swaps content in place), so the page feels responsive without turning every element into a target. Hover and focus are specified together, so the pointer and the keyboard get the same information. Keep the interactive layer small.
The order behind the hero section
The hero section has a stated reading path. Navigation establishes the product and gives a returning visitor a familiar way around. From there the eye takes navigation, the announcement badge, the stats row, the client row and the card grid in sequence, which is what keeps a single screen from reading as a list. A SaaS reader gets the offer before the options.
Why the SaaS brief holds
Stellar AI works because its hierarchy is decided rather than decorated. The brief sets a fixed 80px display size, 30px spacing steps and 0.1s transitions, so new copy lands inside the frame instead of reopening it. It gives a SaaS reader the shortest honest route to the offer.
The numbers behind the hero section
A screenshot tells you what the page looks like; the brief tells you why. a fixed 80px display size, 30px spacing steps and 0.1s transitions close the gap between the two. Nothing in this hero section depends on a default.
Frequently asked questions
What does the brief behind Stellar AI actually contain?
It is a build brief rather than a mood description: it names the composition at 800x708, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Why does the entry name React and Tailwind CSS at all?
Stellar AI 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 use Stellar 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 800x708.
