About this template
Email Marketing shows one way to build the hero section for an AI or SaaS product, and publishes the instructions that produced it. It leads with “Design Rocket Certificates” and gives that line the frame rather than shrinking it into a card. The colour scheme is black #0A0A0A underneath, bright yellow #DCFF00 for the type and bright yellow #D8F90A carrying the accents, and the page is set in Instrument Serif. Delivery is React and Tailwind CSS, captured at 800x702 so the frame is fixed before any code is written. Keep it open while you write: the 7,972-character brief is the part that transfers to your own page.
Designed for
- Made for agencies that bill by the round and want type from 12px to 58px and 18px spacing steps agreed before the first one.
- Made for content leads rewriting a hero section whose headline has to stay as long as Email Marketing's.
- Studios handing this hero section to a client who needs #D8F90A checked against #0A0A0A before the brand skin goes on.
What's included
- Values you can check. The brief names the numbers: type from 12px to 58px and 18px spacing steps. That is why the composition holds together, because there is no invented spacing step between the type and the frame. Values are quoted from the captured prompt rather than inferred, so they survive a re-render. Substitute the face or the copy, not the scale.
- Numbers on the baseline. Statistics are handled as typography: figures at the display size, labels at the smallest step in the brief, all of it on #D8F90A or the ink colour rather than a coloured card. The figures carry the #D8F90A accent while everything around them stays on the ink colour. Match the label size to the caption step.
- Cards do the structuring. Where a run of copy would go, this page puts a set of panels, which is what keeps the hero section scannable. Panels share the interface face at one size, which keeps the grid from becoming a second layout. One idea per panel.
- One scale for type and frame. Spacing is quoted the same way (type from 12px to 58px and 18px spacing steps), not as a scale that grows on its own.
Motion & interaction
Hover, but sparingly
Feedback is limited to hover states on the buttons and links rather than on every card, so the rest of the layout is a fixed composition. A control that looks interactive behaves interactively, so there are no false affordances. Check the states on a touch device.
Static by design
The brief leaves animation out and lets the 800x702 layout carry the page, with hover and press states the only changes. There is no animation library in the brief, which keeps the rebuild small. No scroll timelines needed.
Why this composition works for SaaS
There is one promise on this page, and type from 12px to 58px and 18px spacing steps hold it in place. “Design Rocket Certificates” is doing that work from the first frame. Nothing below the fold is asked to carry the offer as well. It gives a SaaS reader the shortest honest route to the offer.
How the hero section reflows
Type is clamped rather than stepped here (a clamp between 12px and 58px), so the display line does not jump between widths. The hierarchy is what survives the reflow.
How Email Marketing sequences the first read
The page has a deliberate order. The headline takes the display size, the supporting line explains the offer, and the bright yellow #D8F90A accent marks the primary action, so the next step is never in question. Nothing else competes: there is no card grid before the first decision, which is what keeps the hero section from feeling heavy in SaaS work. A SaaS reader gets the offer before the options.
Frequently asked questions
What do I get when I copy the Email Marketing brief?
It is a build brief rather than a mood description: it names the composition at 800x702, 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?
Email Marketing 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 Email Marketing 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 800x702.
