About this template
Retro-Futurist is a agency hero section built from one written brief, and this page documents that brief. It leads with “Glad you stopped in. Good taste tends to find us. Now, what are we building?” and gives that line the frame rather than shrinking it into a card. Colour is limited to gray #B3B1B3 underneath, set in HelveticaNowDisplay-Medium. The build is React and Tailwind CSS; every measurement in it is written down, which is what makes it reusable. The motion budget is 38ms transitions. Keep it open while you write: the 5,713-character brief is the part that transfers to your own page.
Designed for
- Engineers who need the hero section to survive a slow connection will use 640x474 and the type scale as the weight budget.
- Start from type from 13px to 32px and 26px spacing steps and let the palette follow, because the spacing is what makes this hero section read.
- Made for content leads rewriting a hero section whose headline has to stay as long as Retro-Futurist's.
What's included
- Top row, one action. The bar is one row of text and one action, measured at type from 13px to 32px and 26px spacing steps so it reads as a strip rather than as a band. The bar sits over the 640x474 composition without a background of its own, so the media runs edge to edge underneath it. Keep the link count to four or five; the row is sized for that.
- A pill for the one thing that is new. One badge, one message: the pill sits above the headline in HelveticaNowDisplay-Medium at the smallest step, and nothing else competes for that slot. There is one announcement only, which is what makes the badge feel like news.
- The nav is deliberately thin. Give the wordmark no more room than its type needs. The reference was captured at 640x474.
- Sizes fixed in the brief. Every measurement in the brief is a number you can measure back: type from 13px to 32px, 26px spacing steps and 38ms transitions. Each value maps to one job: a type step, a gap, a radius or a transition.
Motion & interaction
The headline assembles itself
Entrance motion is concentrated on one element: a typewriter pass types the intro line. Everything else is already in place when the page loads. The entrance finishes before the reader's eye reaches the supporting copy.
Timings in milliseconds
The controls resolve in 38ms, fast enough that the page answers as it is touched rather than after it. Focus states are timed with the same value as hover, so keyboard and pointer feedback match.
Making the hero section yours
You do not need to rebuild the hero section to make it yours. Replace the headline and the media, keep the scale (type from 13px to 32px and 26px spacing steps), and the layout still reads as designed. The subject is the part that should change.
The numbers behind the hero section
You cannot fix a composition by eye when two people are rebuilding it. The brief removes the argument: type from 13px to 32px, 26px spacing steps and 38ms transitions, stated once. Nothing in this hero section depends on a default.
Why the agency brief holds
The design argues its case on one screen. The media is a still at 640x474. The media carries the atmosphere, the copy carries the offer, and type from 13px to 32px and 26px spacing steps keep the two apart. Retro-Futurist states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
How long is the prompt behind Retro-Futurist?
The captured brief runs 5,713 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 Retro-Futurist depends on React and Tailwind CSS?
Retro-Futurist 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 38ms transitions in Retro-Futurist behave?
Entrances and state changes are in the 38ms range. They are driven by state changes rather than a scroll library, and they never hold up the copy.
