About this template
Neon Logic is a SaaS landing page built from one written brief, and this page documents that brief. Colour is limited to deep blue #010103 underneath and white #FFFFFF for the type, set in Space Mono. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. Motion comes down to 800ms transitions. Keep it open while you write: the 13,601-character brief is the part that transfers to your own page.
Designed for
- Founders who brief an agency will use the 640x474 frame as the acceptance test for the first round.
- Start from type from 12px to 42px and 100vh sections and let the palette follow, because the spacing is what makes this landing page read.
- Made for content leads rewriting a landing page whose headline has to stay as long as Neon Logic's.
What's included
- Links before the action. The bar is one row of text and one action, measured at type from 12px to 42px and 100vh sections so it reads as a strip rather than as a band. The bar sits over the 640x474 composition without a background of its own, so the media runs edge to edge underneath it. Keep the row to one line.
- Proof above the fold. The figures are set as type rather than in a card: Space Mono at the display size with labels one step below. There are no dividers inside the row; spacing alone separates the figures.
- Navigation held to one row. Design the collapsed state before adding a sixth link. The reference was captured at 640x474.
- Numbers carried into the build. The values are the specification: type from 12px to 42px, 100vh sections, 14px spacing steps and 800ms transitions, captured at 640x474 rather than inferred from a screenshot. Values are quoted from the captured prompt rather than inferred, so they survive a re-render. Port the values with the layout.
Motion & interaction
State changes, timed
The brief fixes the transition value at 800ms, so a rebuild cannot substitute a slower default. Nothing waits on a scroll position, so the page responds the moment you touch it. Do not ship the browser default.
Depth from a render
Depth comes from the render rather than from illustration: a 3D transform on the main element. The brief keeps the interface plain around the canvas so the scene is the only spectacle.
How the landing page reflows
If your breakpoints were chosen to make things fit rather than to change the layout, read this entry. the type is clamped between 12px and 42px, the section is held at 100vh and the navigation collapses into a mobile menu rather than a list of hidden elements. The scale changes with the viewport; the sequence does not.
The numbers behind the landing page
A rebuild usually starts with a screenshot and a guess. Here it starts with 13,601 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.
The timing behind the landing page
Ambitious motion usually costs the first screen its legibility. This brief keeps 800ms transitions, hover and press states and a live canvas short enough that the type never has to wait. Nothing animates for its own sake in this landing page.
Frequently asked questions
What do I get when I copy the Neon Logic brief?
The captured brief runs 13,601 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 Neon Logic depends on React and Tailwind CSS?
Neon Logic 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 much of Neon Logic is animated?
The motion is specified at the same level of detail as the layout: state changes settle in the 800ms range. Port the composition first and the timings second, because they are easier to match once the layout holds.
