About this template
Subscription Agency is a working reference for an agency or studio: the hero section laid out, measured and ready to rebuild. The colour scheme is #FFFFFF underneath, #0A0A0A for the type and green #17C964 carrying the accents, and the page is set in Inter. The build is React and Tailwind CSS; every measurement in it is written down, which is what makes it reusable. Motion is 0.4s transitions and a looping video bed, kept quiet enough that the copy still leads. Keep it open while you write: the 6,172-character brief is the part that transfers to your own page.
Designed for
- Product managers who have to estimate the build will read a 1476x1080 frame as the scope of the work.
- This hero section answers the builder who wants to know what a fixed 82px display size and 14px spacing steps actually controls in the layout.
- This hero section serves founders who need one screen of proof that agency copy can carry 6.3s of looping video.
What's included
- Navigation without a background. Navigation is a thin strip rather than a band: wordmark left, links centre-right, one #17C964 action, all of it sitting above the hero section without a background of its own. The links are set below the wordmark in size, and the #17C964 action is the only element in the bar with any weight.
- Every measurement is written down. The list stays short (a fixed 82px display size, 14px spacing steps and 0.4s transitions), which is why the whole system can be checked by hand. The brief states values rather than proportions, so the composition keeps its relationships when the copy changes length. Substitute the face or the copy, not the scale.
- Media without an overlay. The background is a single 6.3s loop at 1476x1080, cropped to cover and left un-tinted. Everything else floats above it on a higher layer. A poster frame at 1476x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
- Links before the action. Keep the link count to four or five; the row is sized for that. The reference was captured at 1476x1080.
Motion & interaction
The loop does the ambient work
Ambient movement comes from the 6.3s 1476x1080 loop rather than from scroll effects, which keeps the page calm and the type readable. The clip is short enough to loop without a visible seam, which matters more than its resolution.
State changes, timed
The timings are short and consistent (0.4s), so hover and press states read as one system instead of a set of separate effects. Easing is specified alongside the duration (0.4s), so a rebuild cannot quietly substitute a different feel.
The numbers behind the hero section
The page has more numbers in it than it appears to. a fixed 82px display size, 14px spacing steps and 0.4s transitions are the ones a rebuild has to keep; the rest can move. Nothing in this hero section depends on a default.
The order behind the hero section
The page has a deliberate order. Navigation establishes the product and gives a returning visitor a familiar way around. The headline takes the display size, the supporting line explains the offer, and the green #17C964 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 agency work. A agency reader gets the offer before the options.
The timing behind the hero section
A preset animation library would give you more movement than this. The brief asks for less: 0.4s transitions, a 6.3s media loop and hover and press states, and nothing decorative on top. Nothing animates for its own sake in this hero section.
Frequently asked questions
Is the Subscription Agency prompt a finished spec or a starting point?
The captured brief runs 6,172 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.
How much of Subscription Agency depends on React and Tailwind CSS?
Subscription Agency 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.
How do the 0.4s transitions in Subscription Agency behave?
The motion is specified at the same level of detail as the layout: state changes settle in the 0.4s range. Port the composition first and the timings second, because they are easier to match once the layout holds.
