About this template
Signal ID is a working reference for an AI or SaaS product: the landing page laid out, measured and ready to rebuild. The page's own headline reads “YOUR VOICE ID TO THE E NETWORK”, and the composition is built around those exact words. The colour scheme is deep blue #000003 underneath and #FFFFFF for the type, and the page is set in Sora. Delivery is React and Tailwind CSS, captured at 1686x1080 so the frame is fixed before any code is written. The motion budget is 70ms transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. Keep it open while you write: the 11,588-character brief is the part that transfers to your own page.
Designed for
- Agencies pitching an AI or SaaS product landing page who want 100vh sections and 20px spacing steps quoted in the deck so the estimate still holds after the kickoff.
- Product marketers who need the landing page to still read with 7s of looping video behind the copy.
- Made for content leads rewriting a landing page whose headline has to stay as long as Signal ID's.
What's included
- The bar shares the page grid. The bar overlays the landing page instead of pushing it down, so the composition keeps the full height of the first screen. The bar sits over the 1686x1080 composition without a background of its own, so the media runs edge to edge underneath it.
- The sizes are in the brief, not in a scale. The brief states its sizes at capture (100vh sections, 20px spacing steps, 70ms transitions and cubic-bezier(0.16, 1, 0.3, 1) easing), so a rebuild can be verified instead of approximated. Each value maps to one job: a type step, a gap, a radius or a transition.
- Two faces, clear jobs. The size steps and tracking in the brief are what give this its tone: Sora at a tight display size, then a clear drop to the supporting copy. The caption step is small enough to sit under a figure without changing the rhythm of the page.
- Navigation without a background. The mobile menu is part of the brief, so the collapsed state is designed rather than improvised. The bar is a handful of elements, so it rebuilds without a component library.
Motion & interaction
The entrance is the signature
The headline is not faded in as a block: each line rises out of an overflow-hidden window. That is what separates the page from a still, because the order in which the words appear does the storytelling. Under reduced motion the element simply appears and the layout is unchanged.
Interaction kept local
The page answers only where it can be acted on: hover states on the buttons and links rather than on every card. The states are named in the brief, so the page does not depend on a hover-effect library. Keep the pointer effects on the controls.
What to change first in Signal ID
Change the content first and check the frame afterwards. 100vh sections, 20px spacing steps, 70ms transitions and cubic-bezier(0.16, 1, 0.3, 1) easing are the values to protect while you swap the copy. The subject is the part that should change.
The numbers behind the landing page
A rebuild usually starts with a screenshot and a guess. Here it starts with 11,588 characters of specification: the frame, the spacing and the motion are written down before the first line of code. Nothing in this landing page depends on a default.
What moves in Signal ID
The timing is explicit: 70ms transitions, a 7s media loop and a masked line reveal, all of it written into the brief rather than tuned by feel. Nothing animates for its own sake in this landing page.
Frequently asked questions
What do I get when I copy the Signal ID brief?
It is a build brief rather than a mood description: it names the composition at 1686x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Signal ID landing page in a different stack?
Signal ID 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.
How should I handle the Signal ID media in a client build?
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 1686x1080.
