About this template
Blog Showcase shows one way to build the blog section for an agency or studio, and publishes the instructions that produced it. Colour is limited to white #FCFCFC underneath and red #7D1A4A for the type, set in Outfit. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. Motion is confined to 0.5s transitions and cubic-bezier(0.33, 1, 0.68, 1). Borrow the structure and not the subject: the blog section and its numbers move to your brand unchanged.
Designed for
- This blog section serves teams who have to justify a 640x478 frame to someone who was not in the kickoff.
- Made for a solo founder shipping one blog section for an agency or studio and no design system behind them.
- People who brief a model on a blog section will use the 4,151-character prompt as the starting point.
What's included
- Nothing here is inherited. The values are the specification: 20px spacing steps, 0.5s transitions and cubic-bezier(0.33, 1, 0.68, 1) easing, captured at 640x478 rather than inferred from a screenshot. Every value can be checked against the captured prompt, which is what makes a rebuild verifiable rather than approximate. Keep the values that look arbitrary.
- Type sets the hierarchy. The type is Outfit 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. Keep the size steps even if you change the face.
- Columns, not a link dump. 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. The accent is reused on one footer action rather than across the whole band. Give the wordmark its own column.
- Measured, not eyeballed. Spacing is quoted the same way (20px spacing steps, 0.5s transitions and cubic-bezier(0.33, 1, 0.68, 1) easing), not as a scale that grows on its own.
Motion & interaction
Fast enough to feel deliberate
Every state change in the specification has a duration attached: transitions settle around 0.5s using cubic-bezier(0.33, 1, 0.68, 1). Nothing is left at the browser default, which is why the page feels authored rather than animated. Easing is specified alongside the duration (0.5s), so a rebuild cannot quietly substitute a different feel. If you change the easing, change it everywhere.
Hover, but sparingly
Feedback is limited to hover states on the buttons and links rather than on every card, so the rest of the layout is a fixed composition. Press states are specified as well as hover, so a tap gives the same confirmation as a click. If a state does not confirm an action, drop it.
Why the agency brief holds
Suppose your media is louder than your copy. That is the case this composition is built for. The media is a still at 640x478. The frame stays quiet and 20px spacing steps and 0.5s transitions keep the reader on the text. It gives a agency reader the shortest honest route to the offer.
The order behind the blog section
Compare the top of this page with a typical agency landing screen. Both carry a headline and an action; here the headline, the announcement badge, the card grid, the background clip and the footer sit in a fixed order instead of competing at the same weight. A agency reader gets the offer before the options.
How the blog section reflows
If your breakpoints were chosen to make things fit rather than to change the layout, read this entry. the scale is fluid rather than stepped rather than a list of hidden elements. Nothing important is dropped at narrow widths. The reference was captured at 640x478.
Frequently asked questions
How long is the prompt behind Blog Showcase?
The captured brief runs 4,151 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.
Do I need React and Tailwind CSS to rebuild Blog Showcase?
Blog Showcase 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 do the 0.5s transitions in Blog Showcase behave?
The motion is specified at the same level of detail as the layout: state changes settle in the 0.5s range using cubic-bezier(0.33, 1, 0.68, 1). Port the composition first and the timings second, because they are easier to match once the layout holds.
