About this template
Transform Data keeps its decision trail: the brief that produced this hero section runs 3,605 characters. It leads with “Transform Data Quickly” and gives that line the frame rather than shrinking it into a card. The palette is gray #505050 underneath and white #F8F8F8 for the type, set in Inter. Delivery is a single component, captured at 800x592 so the frame is fixed before any code is written. The motion budget is 250ms transitions. Keep it open while you write: the 3,605-character brief is the part that transfers to your own page.
Designed for
- Borrow the hero section structure whole and replace the copy line by line against a single component.
- Made for content leads rewriting a hero section whose headline has to stay as long as Transform Data's.
- Made for a team that already has Inter loaded, a 800x592 export waiting and a build slot this week.
What's included
- Top row, one action. Navigation is a single row with no second level under it. The bar sits over the 800x592 composition without a background of its own, so the media runs edge to edge underneath it. The bar is a handful of elements, so it rebuilds without a component library.
- The brief names the steps. Sizes are quoted rather than inherited: 16px spacing steps and 250ms transitions. Swap the face or the copy and those relationships still hold. The type and the layout share the same steps, so nothing drifts when one of them is substituted. The numbers are the design; the rest is arrangement.
- One face, used with discipline. Type is the styling system here: Inter at the display size, the same face across the interface, and no second accent colour doing the work. Weights are specified per role, so the hierarchy does not depend on guesswork at build time.
- Top row: wordmark, links, one action. Keep the row to one line. The reference was captured at 800x592.
Motion & interaction
Timing kept in the brief
The animation budget is small and explicit: 250ms, applied to state changes rather than to entrances. Focus states are timed with the same value as hover, so keyboard and pointer feedback match. One duration per behaviour.
Almost no motion
This one is delivered as a still composition at 800x592, so the hierarchy has to work without motion, and it does. Motion is treated as feedback rather than as decoration. Stillness is a valid choice.
How the hero section reflows
You cannot fix a narrow screen by shrinking it. This brief handles the change in the type and the navigation instead: the scale is fluid rather than stepped. The scale changes with the viewport; the sequence does not.
What holds up for AI & SaaS
3,605 characters of brief produce one screen with no filler. The values in it are explicit (16px spacing steps and 250ms transitions), which is why the composition still reads when the words change. Transform Data states the offer once and lets the composition repeat it rather than adding a second claim.
The numbers behind the hero section
Where a mood board leaves the scale open, this brief closes it: 16px spacing steps and 250ms transitions, with the surrounding values derived from that decision. Nothing in this hero section depends on a default.
Frequently asked questions
Why does the entry name a single component at all?
Transform Data 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.
What do I get when I copy the Transform Data brief?
It is a build brief rather than a mood description: it names the composition at 800x592, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
How much of Transform Data is animated?
Entrances and state changes are in the 250ms range. They are driven by state changes rather than a scroll library, and they never hold up the copy.
