About this template
Innovation is a agency landing page built from one written brief, and this page documents that brief. The palette is deep blue #020D14 underneath, set in Instrument Serif. Delivery is React and Tailwind CSS, captured at 447x800 so the frame is fixed before any code is written. The brief spends its motion budget on 500ms transitions. It is most useful when the Agencies & Studios landing page has to survive a copy change without a redesign.
Designed for
- People who brief a model on a landing page will use the 8,996-character prompt as the starting point.
- Made for content leads rewriting a landing page whose headline has to stay as long as Innovation's.
- The composition serves content teams who will swap the headline and need Instrument Serif's weights to keep the same rhythm.
What's included
- Navigation held to one row. A short run of links and a single action sit over the landing page, held at 20px spacing steps and 500ms transitions so the bar never competes with the composition behind it. The bar sits over the 447x800 composition without a background of its own, so the media runs edge to edge underneath it.
- The scale is the styling. Typography is Instrument Serif, and the brief assigns the face a job rather than mixing for variety. Weight, tracking and size steps are all specified, so the hierarchy survives a substitution. A face swap is safe as long as the sizes and weights stay where the brief put them.
- The footer is a full composition. Links are grouped into columns with the wordmark in its own block, which keeps a long footer readable instead of turning it into a list. The wordmark gets its own block, which keeps a long link list readable. Give the wordmark its own column.
- One field, one action. There is one decision to make here: fill the form or leave. Everything else on the screen supports that decision. Labels sit above their inputs and the supporting copy stays above the first field.
Motion & interaction
State changes, timed
State changes are specified at 500ms, so the feedback on the controls is a designed value rather than a browser default. If the easing changes, the duration has to be revisited with it. Time the feedback exactly.
Interaction is on the controls
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. Interactive targets are large enough to tap and the pointer treatment is consistent across them. Check the states on a touch device.
How Innovation sequences the first read
Compare the top of this page with a typical agency landing screen. Both carry a headline and an action; here navigation, the headline, the announcement badge, the stats row and the card grid sit in a fixed order instead of competing at the same weight. A agency reader gets the offer before the options.
Why this composition works for agency
Count the decisions in this landing page and they trace back to one document: 8,996 characters naming the frame at 447x800, the type and the rhythm. It gives a agency reader the shortest honest route to the offer.
What moves in Innovation
Where a template animates every section on entry, this one animates 500ms transitions and hover and press states and then holds. Nothing animates for its own sake in this landing page.
Frequently asked questions
What do I get when I copy the Innovation brief?
The captured brief runs 8,996 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.
Do I need React and Tailwind CSS to rebuild Innovation?
Innovation 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.
Where did the Innovation design come from?
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 447x800.
