About this template
Intelligence Layer shows one way to build the landing page for an AI or SaaS product, and publishes the instructions that produced it. The colour scheme is near-black #050505 underneath and #FAFAFA for the type, and the page is set in Manrope. Delivery is one self-contained HTML file, captured at 1462x1080 so the frame is fixed before any code is written. Motion is confined to 0.9s transitions, cubic-bezier(.22, 1.36, 1) and a looping video bed. Keep it open while you write: the 11,825-character brief is the part that transfers to your own page.
Designed for
- The landing page is aimed at teams that already know one self-contained HTML file and only need cubic-bezier(.22, 1.36, 1) easing written down.
- Made for agencies that pitch SaaS work and need one self-contained HTML file in the first reply to the client.
- Teams rebuilding a competitor's SaaS landing page who want one self-contained HTML file named before anyone commits to a framework.
What's included
- Top row, one action. Navigation is a single row with no second level under it. The bar sits over the 1462x1080 composition without a background of its own, so the media runs edge to edge underneath it.
- Values you can check. The brief names the numbers: 100vh sections, 25px spacing steps, 0.9s transitions and cubic-bezier(.22, 1.36, 1) easing. That is why the composition holds together, because there is no invented spacing step between the type and the frame. The list is short enough that a reviewer can check it element by element.
- The scale is the styling. Typography is Manrope, 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. Tracking is set per size, so the display line and the caption do not share one letter-spacing value. One face, clear roles.
- The nav is deliberately thin. The bar is a handful of elements, so it rebuilds without a component library. The reference was captured at 1462x1080.
Motion & interaction
The canvas is the visual
The first screen is built by the browser rather than shipped as an image: a WebGL canvas. The render carries its own colour, so the palette around it is kept quiet. Keep the interface flat around it.
Timings in milliseconds
The controls resolve in 0.9s, fast enough that the page answers as it is touched rather than after it. Easing is specified alongside the duration (0.9s), so a rebuild cannot quietly substitute a different feel.
How the landing page reflows
A designed narrow layout takes more decisions than a squeeze. The brief pays for them: the scale is fluid rather than stepped, the section is held at 100vh and the motion has a reduced-motion branch, stated rather than discovered at build time. The hierarchy is what survives the reflow.
Reading Intelligence Layer as a spec
Type is the first number: 100vh sections and 25px spacing steps. The spacing follows from it, and everything else on the page is positioned against those two values. Nothing in this landing page depends on a default.
Making the landing page yours
Re-skinning the palette first is the usual mistake. It changes the mood without touching the composition, and 100vh sections and 25px spacing steps still carry the layout; do the copy and media first and the palette last. Rewrite the copy and the media before you re-colour anything.
Frequently asked questions
Do I need one self-contained HTML file to rebuild Intelligence Layer?
Intelligence Layer was built in one self-contained HTML file, 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 does the brief behind Intelligence Layer actually contain?
It is a build brief rather than a mood description: it names the composition at 1462x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I keep the Intelligence Layer transitions and change the timings?
Entrances and state changes are in the 0.9s range using cubic-bezier(.22, 1.36, 1) with a reduced-motion branch in the brief. They are driven by state changes rather than a scroll library, and they never hold up the copy.
