About this template
Travel Journal is a working reference for a travel brand: the blog section laid out, measured and ready to rebuild. The colour scheme is deep blue #1A1A1E underneath and muted teal #77A0B0 carrying the accents, and the page is set in Inter. Delivery is React and Tailwind CSS, captured at 1470x1080 so the frame is fixed before any code is written. Motion comes down to 150ms transitions and a looping video bed. Take it on when the blog section needs a decided order before any new sections are added.
Designed for
- Agencies pitching a travel brand blog section who want 52px corners and 10px spacing steps quoted in the deck so the estimate still holds after the kickoff.
- Made for product managers who need the blog section scoped to one sprint and no new assets.
- Product teams writing their own Blog section copy who need every line to keep the length the display type was sized for.
What's included
- One row, no drawers. The bar is the quietest part of the composition: wordmark, a short row of links and one #77A0B0 action, all held at the smallest type step in the brief. The links are set below the wordmark in size, and the #77A0B0 action is the only element in the bar with any weight.
- Sizes fixed in the brief. The brief states its sizes at capture (52px corners, 10px spacing steps and 150ms transitions), so a rebuild can be verified instead of approximated. Every value can be checked against the captured prompt, which is what makes a rebuild verifiable rather than approximate. Verify a rebuild against the same numbers.
- Media behind the type. The 1470x1080 video runs 6.4s on a loop behind the copy, muted and inline, with no tint layer between the two. The loop is short enough (6.4s) that the eye reads it as texture rather than as a timeline.
- The scale is the styling. The faces are assigned roles rather than mixed: Inter carries the display and the interface together. Weights are specified per role, so the hierarchy does not depend on guesswork at build time.
Motion & interaction
Short, matched timings
State changes are specified at 150ms, so the feedback on the controls is a designed value rather than a browser default. Short timings are why the page reads as authored; a slow default would undo the composition.
Ambient motion without a scroll library
The background clip runs 6.4s at 1470x1080 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. The loop is cropped to cover, which means the composition does not depend on a particular frame size. Shoot or export at 1470x1080 or wider.
Making the blog section yours
Change the copy and the media first, the colour second, the layout last. The 1470x1080 frame and the Inter scale are what hold the page together, so substitute around them rather than through them. Keep the frame and the scale; the subject is the part that should change.
What moves in Travel Journal
The trade-off is that nothing here rewards a second look for its animation. What it rewards is the reading order, with 150ms transitions and a 6.4s media loop confirming state rather than decorating it. Nothing animates for its own sake in this blog section.
The numbers behind the blog section
Committing to 52px corners, 10px spacing steps and 150ms transitions trades flexibility for repeatability. That is the point of the reference: the same page in a different brand, without a new set of guesses. Nothing in this blog section depends on a default.
Frequently asked questions
Why is Travel Journal's prompt not printed here?
Everything quoted on the page comes from the captured 5,151-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How long is the prompt behind Travel Journal?
It is a build brief rather than a mood description: it names the composition at 1470x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Why does the entry name React and Tailwind CSS at all?
Travel Journal 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.
