About this template
Before rebuilding a blog section for an AI or SaaS product, read Aurelion Blog: the composition and the specification behind it are both here. The palette is white #F3F4F4 underneath, black #1A1A1A for the type and yellow #F3DE58 carrying the accents. It ships as React and Tailwind CSS, so the whole blog section can be lifted into a project without a design handoff. The motion budget is 700ms transitions and a looping video bed. Treat it as the brief for an AI or SaaS product blog section that has to hold up under a rebuild, not just a first look.
Designed for
- Founders who brief an agency will use the 1400x1080 frame as the acceptance test for the first round.
- Product marketers who need the blog section to still read with 6.5s of looping video behind the copy.
- Studio leads who run several projects at once will use this blog section as the pattern every other page copies.
What's included
- Links before the action. The row spends its contrast in one place: the #F3DE58 action, with the wordmark and the links held back on the ink colour. The links are set below the wordmark in size, and the #F3DE58 action is the only element in the bar with any weight.
- Nothing here is inherited. The brief fixes 30px spacing steps and 700ms transitions and leaves the rest to the arrangement, which is the opposite of a scale that grows on its own. The frame proportions are recorded with the sizes, so a rebuild gets the aspect right as well. The numbers are the design; the rest is arrangement.
- Media without an overlay. The 1400x1080 frame is filled by a single loop that plays behind the copy and asks for no controls. A poster frame at 1400x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
- Navigation held to one row. The bar sits over the 1400x1080 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
The loop does the ambient work
Ambient movement is one 6.5s clip at 1400x1080, looping quietly behind the copy rather than reacting to the pointer. The loop is cropped to cover, which means the composition does not depend on a particular frame size.
Interaction is on the controls
The interactive layer is small and predictable: hover states on the buttons and links rather than on every card and a slider that pages through content on demand. Everything else stays still, which keeps the emphasis on the composition. Feedback is limited to the controls, so the composition stays still around them.
What moves in Aurelion Blog
A short motion budget costs you drama on the first frame. It buys legibility, and it means 700ms transitions, a 6.5s media loop and a word-by-word headline can be ported without a library. Nothing animates for its own sake in this blog section.
What to change first in Aurelion Blog
You do not need to rebuild the blog section to make it yours. Replace the headline and the media, keep the scale (30px spacing steps and 700ms transitions), and the layout still reads as designed. If a new element does not help explain the offer or the next action, it belongs below the fold.
How the blog section reflows
When the copy is long, the narrow layout breaks first. Here a clamp between 56px and 30px absorbs the change, and the scale is fluid rather than stepped. Width changes the measurements, not the reading path.
Frequently asked questions
Is the Aurelion Blog brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 5,024-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How long is the prompt behind Aurelion Blog?
It is a build brief rather than a mood description: it names the composition at 1400x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Aurelion Blog blog section in a different stack?
Aurelion Blog 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.
