About this template
Before rebuilding a hero section for an AI or SaaS product, read Cybersecurity Hero: the composition and the specification behind it are both here. The palette is #0A0A0F underneath and tint #B04090 carrying the accents, set in Inter. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. The page keeps its motion to 300ms transitions and cubic-bezier(0.4, 0, 0.2, 1). Keep it open while you write: the 11,920-character brief is the part that transfers to your own page.
Designed for
- Take the 640x472 frame and 20px corners and 12px spacing steps from this hero section before you take anything else.
- Made for content leads rewriting a hero section whose headline has to stay as long as Cybersecurity Hero's.
- Retint #B04090 first and re-check it against #0A0A0F, then touch the layout underneath.
What's included
- A bar with nothing spare. Wordmark, links and the #B04090 action share one baseline, which is what keeps a thin row from looking accidental. Labels are short enough to fit one line at 440px, and the active item is marked with weight rather than with a pill.
- One family, two roles. With Inter doing the work, the sizes step down hard from the headline to the supporting copy and letter-spacing tightens as the size grows, so the hierarchy is carried by type rather than colour. Numerals share the interface face, so statistics and labels belong to the same system. The scale is quoted; use it.
- Logo strip on the baseline. The client marks run along the lower edge at low contrast and at the smallest step in the brief, so the proof reads as texture on the hero section and never competes with the headline. The row is aligned to the same baseline as the rest of the composition. One row, one baseline. The reference was captured at 640x472.
- Links collapse at one width. Below 440px the links collapse instead of wrapping onto a second line.
Motion & interaction
Timing kept in the brief
Hover, press and focus all resolve in 300ms, which is what makes the interface feel immediate. If the easing changes, the duration has to be revisited with it.
The controls are the interactive layer
States are handled per component (hover states on the buttons and links rather than on every card) rather than by a global animation layer. Feedback is limited to the controls, so the composition stays still around them. A few reliable states beat a long list of effects.
What holds up for AI & SaaS
Most SaaS pages fail by adding: more sections, more gradients, more claims. Cybersecurity Hero goes the other way. The composition stays on #0A0A0F with tint #B04090 for actions, which is enough to look deliberate. It gives a SaaS reader the shortest honest route to the offer.
The order behind the hero section
Read it in order: navigation, the announcement badge, the stats row, the client row and the card grid. Each element has one job, and the tint #B04090 accent is spent only on the element you are meant to press. A SaaS reader gets the offer before the options.
The timing behind the hero section
Ambitious motion usually costs the first screen its legibility. This brief keeps 300ms transitions and hover and press states short enough that the type never has to wait. Nothing animates for its own sake in this hero section.
Frequently asked questions
What does the brief behind Cybersecurity Hero actually contain?
The captured brief runs 11,920 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.
Do I need React and Tailwind CSS to rebuild Cybersecurity Hero?
Cybersecurity Hero 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 keep the Cybersecurity Hero transitions and change the timings?
Entrances and state changes are in the 300ms range using cubic-bezier(0.4, 0, 0.2, 1). They are driven by state changes rather than a scroll library, and they never hold up the copy.
