About this template
Bloom AI is the hero section reference for an AI or SaaS product, and the brief behind it is a full build spec rather than a mood board. The page's own headline reads “Innovating the spirit of bloom AI”, and the composition is built around those exact words. The palette runs deep blue #030E1A underneath, muted green #AAD9C3 for the type and green #2E5648 carrying the accents, and the type is Poppins. The build is React and Lucide icons; every measurement in it is written down, which is what makes it reusable. Treat it as the brief for an AI or SaaS product hero section that has to hold up under a rebuild, not just a first look.
Designed for
- Engineers who need the hero section to survive a slow connection will use 800x564 and the type scale as the weight budget.
- In-house squads extending this hero section who need 50px spacing steps carried into the new blocks unchanged.
- People who brief a model on a hero section will use the 3,900-character prompt as the starting point.
What's included
- Links before the action. The bar is the quietest part of the composition: wordmark, a short row of links and one #2E5648 action, all held at the smallest type step in the brief. The links are set below the wordmark in size, and the #2E5648 action is the only element in the bar with any weight.
- Every measurement is written down. The layout is solved against fixed values (50px spacing steps), which is what keeps the first screen composed at any width. The smallest and largest values in that list set the range the composition works in.
- Content split into panels. The grid does the reading order for you: panels of equal weight, one idea each, set in Poppins at a small size so the structure stays visible. Panel order is the reading order, so nothing depends on position cues.
- Structure in one screen. The whole composition fits one screen and is delivered as React and Lucide icons, with the copy, the media and the controls named in the brief. The page is one composition at 800x564, which is why it holds together when the copy changes.
Motion & interaction
A small interactive surface
Every interactive element does one thing (hover states on the buttons and links rather than on every card), which is what keeps the states predictable. Press states are specified as well as hover, so a tap gives the same confirmation as a click. Keep the pointer effects on the controls.
Static by design
The brief leaves animation out and lets the 800x564 layout carry the page, with hover and press states the only changes. The composition holds still, so the hierarchy has to carry the page and it does. No scroll timelines needed.
What an AI or SaaS product gains here
The trade-off is density: this hero section says less on the first screen than a feature-led layout would. What it keeps is the reading order, and navigation, the announcement badge, the stats row, the card grid and the background clip do the work a longer page would spread out. Bloom AI states the offer once and lets the composition repeat it rather than adding a second claim.
The numbers behind the hero section
The hero section is measured, not eyeballed. 50px spacing steps come from the brief, and the layout is arranged to those steps rather than nudged into place. Nothing in this hero section depends on a default.
Making the hero section yours
Re-skinning the palette first is the usual mistake. It changes the mood without touching the composition, and 50px spacing steps still carry the layout; do the copy and media first and the palette last. Rewrite the copy and the media before you re-colour anything.
Frequently asked questions
What do I get when I copy the Bloom AI brief?
It is a build brief rather than a mood description: it names the composition at 800x564, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Bloom AI hero section in a different stack?
No. The brief is a specification, not a dependency list. It was written for React and Lucide icons, but the same composition rebuilds in whatever you already use. The stack is named so you know how the reference was made.
Can I ship a page rebuilt from Bloom AI 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 800x564.
