About this template
Sentinel AI solves the hero section problem for an AI or SaaS product with a single captured brief. The headline reads “We implement security correctly”, and the rest of the hero section is arranged around it. The palette is black #000000 underneath and muted green #8EB992 carrying the accents, set in Sora. Delivery is React and Tailwind CSS, captured at 800x594 so the frame is fixed before any code is written. The page keeps its motion to 0.7s transitions and cubic-bezier(0.16, 1, 0.3, 1). Keep it open while you write: the 5,940-character brief is the part that transfers to your own page.
Designed for
- Made for content leads rewriting a hero section whose headline has to stay as long as Sentinel AI's.
- Design leads comparing SaaS references and looking for one built on black #000000 and muted green #8EB992.
- Design leads comparing SaaS references will use black #000000 and muted green #8EB992 as the tie-breaker.
What's included
- The nav is deliberately thin. Links sit on one line at a single size, and the #8EB992 action closes the row on the right so the eye finishes where the navigation ends. The links are set below the wordmark in size, and the #8EB992 action is the only element in the bar with any weight.
- Measured, not eyeballed. The layout works on absolute values rather than ratios: 20px spacing steps, 0.7s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing. The smallest and largest values in that list set the range the composition works in. Verify a rebuild against the same numbers.
- Two faces, clear jobs. The display line is set in Sora at a size the brief fixes, which makes the headline a composition element rather than a paragraph. The size steps are fixed values, which is what lets a face swap keep the same hierarchy.
- The composition is the content. The composition is complete at 800x594: the copy, the media and the controls are all named in the brief. The page is one composition at 800x594, which is why it holds together when the copy changes.
Motion & interaction
Short, named durations
One duration covers the interactions (0.7s using cubic-bezier(0.16, 1, 0.3, 1)), which is what keeps hover and press reading as one system. Easing is specified alongside the duration (0.7s), so a rebuild cannot quietly substitute a different feel.
Hover where it means something
States are handled per component (hover states on the buttons and links rather than on every card) rather than by a global animation layer. Because the states are simple, they port into any component system. Keep the interactive layer small.
The numbers behind the hero section
When a rebuild drifts, the spacing goes first. Sentinel AI avoids that by publishing 20px spacing steps, 0.7s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing with the composition. Nothing in this hero section depends on a default.
The order behind the hero section
You could shuffle these blocks and the page would still load. It would stop reading as an argument, though: navigation, the stats row and the feature list are a sequence, and 20px spacing steps and 0.7s transitions only work in that order. A SaaS reader gets the offer before the options.
The argument this hero section makes
Most SaaS pages fail by adding: more sections, more gradients, more claims. Sentinel AI goes the other way. “We implement security correctly” is doing that work from the first frame. The composition stays on black #000000 with muted green #8EB992 for actions, which is enough to look deliberate. It gives a SaaS reader the shortest honest route to the offer.
Frequently asked questions
How long is the prompt behind Sentinel AI?
It is a build brief rather than a mood description: it names the composition at 800x594, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
How much of Sentinel AI depends on React and Tailwind CSS?
Sentinel 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 ship a page rebuilt from Sentinel 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 800x594.
