About this template
Modern Agency keeps its decision trail: the brief that produced this landing page runs 10,347 characters. “We craft digital experiences for brands ready to dominate their category online” is the line the layout is built to carry. The palette is white #FFFFFF underneath and bright orange #F26522 carrying the accents. Delivery is React and Tailwind CSS, captured at 364x640 so the frame is fixed before any code is written. Motion is limited to cubic-bezier(0.25,0.1,0.25,1). If you are briefing a agency landing page, start from this composition and replace the subject.
Designed for
- Made for a solo founder shipping one landing page for an agency or studio and no design system behind them.
- Made for content leads rewriting a landing page whose headline has to stay as long as Modern Agency's.
- Made for founders who have #F26522 picked and nothing else decided about the landing page.
What's included
- A navigation bar that gets out of the way. The top row holds the wordmark, four to five links and a single action tinted #F26522, sized to stay quiet against the rest of the page. A mobile overlay takes over below the tablet breakpoint. The links are set below the wordmark in size, and the #F26522 action is the only element in the bar with any weight. Keep the row to one line.
- Numbers carried into the build. Sizes are quoted rather than inherited: 13px spacing steps and cubic-bezier(0.25,0.1,0.25,1) easing. Swap the face or the copy and those relationships still hold. A rebuild that hits those numbers looks like the reference without further tuning.
- Copy first, decoration second. The whole composition fits one screen and is delivered as React and Tailwind CSS, with the copy, the media and the controls named in the brief. The page is one composition at 364x640, which is why it holds together when the copy changes.
- The nav is deliberately thin. The bar sits over the 364x640 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Short, named durations
Every state change in the specification has a duration attached: transitions settle around 0 using cubic-bezier(0.25,0.1,0.25,1). Nothing is left at the browser default, which is why the page feels authored rather than animated. The durations are short enough that feedback reads as a response rather than as an animation.
Depth from a render
A WebGL canvas is doing the visual work on the 364x640 frame, with the type set over or beside it. Because the scene is live, the layout can be resized without a second set of assets.
Making the landing page yours
The composition is the reusable part; the subject is yours. Swap the headline, keep the type scale (a fluid type scale), and re-test the #F26522 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.
The order behind the landing page
A feature-led layout lists what the product does; this one routes the reader to a single decision. The route is visible in navigation, the headline, the announcement badge, the stats row and the card grid and in how 13px spacing steps and cubic-bezier(0.25,0.1,0.25,1) easing space them. A agency reader gets the offer before the options.
The numbers behind the landing page
The page has more numbers in it than it appears to. 13px spacing steps and cubic-bezier(0.25,0.1,0.25,1) easing are the ones a rebuild has to keep; the rest can move. Nothing in this landing page depends on a default.
Frequently asked questions
Is the Modern Agency prompt a finished spec or a starting point?
The captured brief runs 10,347 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.
Why does the entry name React and Tailwind CSS at all?
Modern 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.
Can I use Modern Agency 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 364x640.
