About this template
Email Landing Page was captured at 640x478 and kept as a specification rather than as a gallery image. Colour is limited to deep blue #091020 underneath, muted teal #A4F4FD for the type and bright teal #00D2FF carrying the accents, set in Inter. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. Motion is limited to 0.3s transitions and cubic-bezier(.22,1.36,1). Keep it open while you write: the 19,431-character brief is the part that transfers to your own page.
Designed for
- Made for studios that have to explain 1024px behaviour to a client without building a prototype first.
- Made for content leads rewriting a landing page whose headline has to stay as long as Email Landing Page's.
- If your team already runs a design system, this landing page is the case for spending its one saturated colour on #00D2FF.
What's included
- Navigation held to one row. Navigation is a thin strip rather than a band: wordmark left, links centre-right, one #00D2FF action, all of it sitting above the landing page without a background of its own. Below 1024px the links collapse instead of wrapping onto a second line.
- Two faces, clear jobs. The type is Inter at the top of the scale, with the supporting copy dropped well below it so the hierarchy needs no colour to read. A face swap is safe as long as the sizes and weights stay where the brief put them.
- The composition is the content. The composition is complete at 640x478: the copy, the media and the controls are all named in the brief. The page is one composition at 640x478, which is why it holds together when the copy changes.
- Links collapse at one width. Labels are short enough to fit one line at 1024px, and the active item is marked with weight rather than with a pill.
Motion & interaction
Short, named durations
One duration covers the interactions (0.3s on cubic-bezier(.22,1.36,1)), which is what keeps hover and press reading as one system. Easing is specified alongside the duration (0.3s), so a rebuild cannot quietly substitute a different feel.
Pointers only where they help
Only the controls respond to the pointer (hover states on the buttons and links rather than on every card and tabs or an accordion that swaps content in place), so the page feels responsive without turning every element into a target. Each state changes one property, which keeps the feedback legible.
How the landing page reflows
The desktop composition is solved against 640x478, and the narrow layout is designed rather than inherited: the layout shifts at 1024px. Motion has a reduced-motion branch, and the media carries a poster frame so the page still communicates when autoplay is unavailable. Width changes the measurements, not the reading path.
What to change first in Email Landing Page
Suppose you only have one afternoon. Change the headline and the action label, leave a 3-column grid and 44px corners alone, and you have a page that looks intentional. Keep the frame and the scale; the subject is the part that should change.
The order behind the landing page
Compare the top of this page with a typical SaaS landing screen. Both carry a headline and an action; here navigation, the headline, the announcement badge, the stats row and the client row sit in a fixed order instead of competing at the same weight. Each element has one job, and the accent is spent only on the element you are meant to press.
Frequently asked questions
What do I get when I copy the Email Landing Page brief?
The captured brief runs 19,431 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.
Can I rebuild the Email Landing Page landing page in a different stack?
Email Landing Page 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.
What drives the motion in Email Landing Page?
Transitions are attached to interface states rather than to a scroll timeline, and they resolve in the 0.3s range on cubic-bezier(.22,1.36,1). The brief records the values so a port can match them without guessing.
