About this template
Place Saver is a travel landing page built from one written brief, and this page documents that brief. The page's own headline reads “The place for all your places”, and the composition is built around those exact words. The palette runs white #F4F4F4 underneath and deep blue #0C0C0E for the type, and the type is Playfair Display. Delivery is a single component, captured at 1480x1080 so the frame is fixed before any code is written. The motion budget is 0.9s transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. It is the right reference for a travel brand landing page that has to look deliberate on the first screen.
Designed for
- This landing page serves teams who have to justify a single component to someone who was not in the kickoff.
- Teams rebuilding a competitor's travel landing page who want a single component named before anyone commits to a framework.
- The page serves front-end developers rebuilding a travel brand landing page in a single component and looking for the numbers behind the look.
What's included
- The spacing steps are quoted. The brief fixes 48px corners, 28px spacing steps, 0.9s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing and leaves the rest to the arrangement, which is the opposite of a scale that grows on its own. The brief states values rather than proportions, so the composition keeps its relationships when the copy changes length. Measure before you adjust.
- One media element carries the mood. Video sits on the bottom layer of the 1480x1080 composition, with the type arranged above it and nothing in between. A poster frame at 1480x1080 holds the composition when autoplay is unavailable, so the layout never collapses. Export at 1480x1080 or wider to keep the crop honest.
- Weights named per role. Typography is Playfair Display, and the brief assigns the face a job rather than mixing for variety. Weight, tracking and size steps are all specified, so the hierarchy survives a substitution. The face is paired with fixed sizes, which is what keeps the display line and the interface text related.
- Measured, not eyeballed. Spacing is quoted the same way (48px corners, 28px spacing steps, 0.9s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing), not as a scale that grows on its own.
Motion & interaction
Ambient motion without a scroll library
One 5.6s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. The clip is short enough to loop without a visible seam, which matters more than its resolution.
The whole animation budget
Motion in the controls is short and repeatable: 0.9s on each state change. Easing is specified alongside the duration (0.9s), so a rebuild cannot quietly substitute a different feel. Keep the durations when you re-skin the page.
Reading Place Saver as a spec
Almost every decision here is a value you can check: 48px corners, 28px spacing steps, 0.9s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing. The media is a 5.6s 1480x1080 loop. The type stays in Playfair Display, so a substitution has to keep the same proportions. Nothing in this landing page depends on a default.
How the landing page reflows
A fluid scale and a stepped one look similar on a wide screen. Narrow the viewport and the difference shows: a clamp between 66px and 28px against fixed jumps. The reflow keeps the action reachable at every width.
What moves in Place Saver
Every transition here has a number attached. That is why 0.9s transitions and a 5.6s media loop can be ported value by value instead of re-tuned by feel. Nothing animates for its own sake in this landing page.
Frequently asked questions
Why does the entry name a single component at all?
Place Saver was built in a single component, 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.
Why is Place Saver's prompt not printed here?
Everything quoted on the page comes from the captured 8,226-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How long is the prompt behind Place Saver?
It is a build brief rather than a mood description: it names the composition at 1480x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
