About this template
Read Growth Decisions as a landing page spec: the values were written down before the page was built. Colour is limited to #FFFFFF underneath, #0A0A0A for the type and blue #006CD2 carrying the accents, set in Inter. Delivery is a single component, captured at 1468x1080 so the frame is fixed before any code is written. Motion is limited to 0.16s transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. Keep it open while you write: the 11,164-character brief is the part that transfers to your own page.
Designed for
- This landing page serves designers who have to hand a a single component build to an engineer and want the motion written down.
- If the reference is only a starting point, designers can keep a 821px breakpoint and rebuild the rest of the landing page.
- The page serves front-end developers rebuilding an AI or SaaS product landing page in a single component and looking for the numbers behind the look.
What's included
- The nav is deliberately thin. The bar carries the wordmark, the section links and one #006CD2 button, measured at 100vh sections and 18px spacing steps so it never grows into a second header. Labels are short enough to fit one line at 821px, and the active item is marked with weight rather than with a pill. Keep the link count to four or five; the row is sized for that.
- Full-frame video, no panel. The 1468x1080 video runs 7.1s on a loop behind the copy, muted and inline, with no tint layer between the two. The loop is short enough (7.1s) that the eye reads it as texture rather than as a timeline.
- The type carries the tone. With Inter doing the work, the sizes step down hard from the headline to the supporting copy and letter-spacing tightens as the size grows, so the hierarchy is carried by type rather than colour. The display face is used at one size only, so it never competes with itself. Keep the size steps even if you change the face.
- The bar shares the page grid. If your own page has more sections, group them rather than widening the bar. The reference was captured at 1468x1080.
Motion & interaction
Short, matched timings
Hover, press and focus all resolve in 0.16s, which is what makes the interface feel immediate. Easing is specified alongside the duration (0.16s), so a rebuild cannot quietly substitute a different feel.
The reveal is the memory point
A masked line reveal is the only entrance on the page, so there is one motion idea to maintain. Under reduced motion the element simply appears and the layout is unchanged.
The argument this landing page makes
Compared with a template hero, the difference is what is missing. There is no card grid, no carousel and no second call to action: only navigation, the headline, the announcement badge, the stats row and the background clip, sized against 100vh sections and 18px spacing steps. It gives a SaaS reader the shortest honest route to the offer.
How Growth Decisions sequences the first read
Set your own copy into this landing page and the sequence still holds, because the elements are not interchangeable: navigation, the headline, the announcement badge, the stats row and the background clip each carry one job. A SaaS reader gets the offer before the options.
How the landing page reflows
Type is clamped rather than stepped here (a clamp between 28px and 18px), so the display line does not jump between widths. Both states are described in the same brief.
Frequently asked questions
Why does the entry name a single component at all?
Growth Decisions was built in a single component, 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.
What do I get when I copy the Growth Decisions brief?
The captured brief runs 11,164 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 Growth Decisions is animated?
The motion is specified at the same level of detail as the layout: state changes settle in the 0.16s range on cubic-bezier(0.16, 1, 0.3, 1). Port the composition first and the timings second, because they are easier to match once the layout holds.
