About this template
ClarionAI solves the landing page problem for an AI or SaaS product with a single captured brief. The page's own headline reads “The intelligence layer \n for clear decisions”, and the composition is built around those exact words. The palette is black #000000 underneath. It ships as React and Tailwind CSS, so the whole landing page can be lifted into a project without a design handoff. Motion is 1000ms transitions and a looping video bed, kept quiet enough that the copy still leads. It is the right reference for an AI or SaaS product landing page that has to look deliberate on the first screen.
Designed for
- If you brief a model rather than a designer, start from the landing page and let the prompt hold a 1952x1440 frame.
- Designers who need the numbers first: a fixed 16px display size and 20px spacing steps, all of it quoted from the brief.
- Made for product managers who need the landing page scoped to one sprint and no new assets.
What's included
- The bar shares the page grid. A short run of links and a single action sit over the landing page, held at a fixed 16px display size and 20px spacing steps so the bar never competes with the composition behind it. The bar sits over the 1952x1440 composition without a background of its own, so the media runs edge to edge underneath it. Keep the link count to four or five; the row is sized for that.
- The announcement pill. A single pill carries the announcement above the headline, and nothing else competes for that position. The pill sits at the smallest step in the brief, so it reads as a label rather than as a second title. One badge, one message.
- A footer that carries the brand. 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. Columns align to the same grid as the page above, so the footer feels like the same design. Group links; do not dump them.
- A navigation bar that gets out of the way. The active section is marked with weight rather than with a pill or an underline. Copy this pattern when you need navigation that survives a loud first screen.
Motion & interaction
The strip that never stops
A ticker moves through the layout at a constant speed and loops without a gap, which is the only ambient motion the brief needs. The marquee shares the interface face, so it reads as content rather than as ornament.
State changes, timed
The timings are short and consistent (1000ms), so hover and press states read as one system instead of a set of separate effects. If the easing changes, the duration has to be revisited with it.
The timing behind the landing page
Port the motion last. The brief fixes it as 1000ms transitions, a 18.4s media loop and hover and press states, which is easier to match once the layout is in place. Nothing animates for its own sake in this landing page.
How the landing page reflows
A fixed desktop scale would have been easier. The brief adds a clamp between 16px and 20px, which is what keeps the display line proportionate between widths. The reflow keeps the action reachable at every width.
Making the landing page yours
You do not need to rebuild the landing page to make it yours. Replace the headline and the media, keep the scale (a fixed 16px display size and 20px spacing steps), and the layout still reads as designed. Keep the frame and the scale; the subject is the part that should change.
Frequently asked questions
What do I get when I copy the ClarionAI brief?
The captured brief runs 6,807 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.
Why is ClarionAI's prompt not printed here?
Everything quoted on the page comes from the captured 6,807-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Can I rebuild the ClarionAI landing page in a different stack?
ClarionAI 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.
