About this template
Read Digital Epoch as a hero section spec: the values were written down before the page was built. The palette is white #F9FAFB underneath, deep blue #0A152D for the type and deep blue #0A1B33 carrying the accents, set in Inter. Delivery is React and Tailwind CSS, captured at 800x589 so the frame is fixed before any code is written. Keep it open while you write: the 4,594-character brief is the part that transfers to your own page.
Designed for
- Agencies pitching an agency or studio hero section who want type from 12px to 56px and 12px spacing steps quoted in the deck so the estimate still holds after the kickoff.
- Made for content leads rewriting a hero section whose headline has to stay as long as Digital Epoch's.
- Fix #F9FAFB and #0A1B33 as the two brand colours, then rebuild the hero section inside that limit.
What's included
- Navigation held to one row. Wordmark, links and the #0A1B33 action share one baseline, which is what keeps a thin row from looking accidental. The links are set below the wordmark in size, and the #0A1B33 action is the only element in the bar with any weight. Design the collapsed state before adding a sixth link.
- Measured, not eyeballed. Sizes are quoted rather than inherited: type from 12px to 56px and 12px spacing steps. Swap the face or the copy and those relationships still hold. Every value can be checked against the captured prompt, which is what makes a rebuild verifiable rather than approximate. The numbers are the design; the rest is arrangement.
- Panels carry the middle. 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. The order of the panels is the reading order.
- Copy first, decoration second. The composition is complete at 800x589: the copy, the media and the controls are all named in the brief. The page is one composition at 800x589, which is why it holds together when the copy changes.
Motion & interaction
Continuous horizontal motion
A marquee runs through the composition on an endless loop, set in Inter. The active item is marked with #0A1B33 rather than with a size change.
The controls are the interactive layer
Only the controls respond to the pointer (hover states on the buttons and links rather than on every card), so the page feels responsive without turning every element into a target. Nothing on the page opens a modal or hijacks the scroll; the interactions stay local to the element. Check the states on a touch device.
Why this composition works for agency
Digital Epoch is the hero section reference for an agency or studio, and it answers the problem that audience actually has. The palette stays disciplined (white #F9FAFB and deep blue #0A1B33) and the type is set in Inter, so nothing in the composition depends on a borrowed trend. When you brief a build, this is the part worth copying: one promise at display size, with the supporting detail held below it. It gives a agency reader the shortest honest route to the offer.
What to change first in Digital Epoch
The composition is the reusable part; the subject is yours. Swap the headline, keep the type scale (type from 12px to 56px), and re-test the #0A1B33 accent over your own media. If a new element does not help explain the offer or the next action, it belongs below the fold. A different brand can reuse the whole frame.
Reading Digital Epoch as a spec
This is what makes the reference reusable: type from 12px to 56px and 12px spacing steps. Nothing is left to a default, so a substitution that keeps those numbers keeps the composition. Nothing in this hero section depends on a default.
Frequently asked questions
How long is the prompt behind Digital Epoch?
It is a build brief rather than a mood description: it names the composition at 800x589, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Do I need React and Tailwind CSS to rebuild Digital Epoch?
Digital Epoch 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 use Digital Epoch in a client project?
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 800x589.
