About this template
DeepThink is a SaaS landing page built from one written brief, and this page documents that brief. The colour scheme is #0C0C0C underneath and tint #FAFAFA for the type, and the page is set in Inter. Delivery is one self-contained HTML file, captured at 1280x1928 so the frame is fixed before any code is written. The brief spends its motion budget on 90ms transitions and cubic-bezier(.22,1.36,1). Keep it open while you write: the 13,695-character brief is the part that transfers to your own page.
Designed for
- Made for agencies that pitch SaaS work and need cubic-bezier(.22,1.36,1) easing in the first reply to the client.
- If you brief a model rather than a designer, start from the landing page and let the prompt hold one self-contained HTML file.
- If the build starts from one self-contained HTML file, lift 100vh sections and 10px spacing steps first and leave the palette alone until the grid settles.
What's included
- A bar with nothing spare. The bar is one row of text and one action, measured at 100vh sections and 10px spacing steps so it reads as a strip rather than as a band. The bar sits over the 1280x1928 composition without a background of its own, so the media runs edge to edge underneath it.
- A card grid carries the middle. The grid does the reading order for you: panels of equal weight, one idea each, set in Inter at a small size so the structure stays visible. The grid collapses to a single column without changing the panel order.
- A navigation bar that gets out of the way. The mobile menu is part of the brief, so the collapsed state is designed rather than improvised. Keep the link count to four or five; the row is sized for that.
- The spacing steps are quoted. Nothing here is eyeballed. The spec fixes 100vh sections, 10px spacing steps, 90ms transitions and cubic-bezier(.22,1.36,1) easing, and the rest of the layout derives from those values. Because the values are fixed, a substitution changes the look without changing the rhythm.
Motion & interaction
Reveals tied to movement
Scroll is treated as a trigger rather than a timeline: sections reveal as they enter the viewport, and the reader sets the pace. The scroll behaviour is measured against the same layout the static page uses, so nothing shifts when it is removed. Test it with reduced motion on.
Timings in milliseconds
The brief fixes the transition value at 90ms, so a rebuild cannot substitute a slower default. The same duration is reused across controls, which keeps the interactions feeling like one system.
The argument this landing page makes
A tint layer over the media would have been the easy fix. The brief leaves it off. The media is a still at 1280x1928. The copy still holds because 100vh sections and 10px spacing steps keep the frame calm. It gives a SaaS reader the shortest honest route to the offer.
What moves in DeepThink
The brief ties every transition to a value (90ms transitions, a masked line reveal and a scroll reveal). That is what keeps the page from feeling like a template with an animation preset dropped on top of it. Nothing animates for its own sake in this landing page.
The numbers behind the landing page
Committing to 100vh sections, 10px spacing steps, 90ms transitions and cubic-bezier(.22,1.36,1) easing trades flexibility for repeatability. That is the point of the reference: the same page in a different brand, without a new set of guesses. Nothing in this landing page depends on a default.
Frequently asked questions
Do I need one self-contained HTML file to rebuild DeepThink?
DeepThink 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.
How long is the prompt behind DeepThink?
It is a build brief rather than a mood description: it names the composition at 1280x1928, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I ship a page rebuilt from DeepThink without crediting it?
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 1280x1928.
