About this template
This is the features section from Max Reed Portfolio, published with the brief that produced it rather than as a screenshot. The headline reads “Let's Team Up Today”, and the rest of the features section is arranged around it. The palette runs deep teal #324444 underneath, and the type is Inter. The reference is built with React and Tailwind CSS, and the layout decisions are stated independently of it. It is the right reference for an agency or studio features section that has to look deliberate on the first screen.
Designed for
- Teams building an agency or studio features section who need a 640x470 frame on the record before an estimate goes out.
- Made for agencies that bill by the round and want type from 13px to 88px and 240px spacing steps agreed before the first one.
- Made for a solo founder shipping one features section for an agency or studio and no design system behind them.
What's included
- Measured against the viewport. Nothing in the layout is left to feel: the brief quotes type from 13px to 88px and 240px spacing steps and the build has to hit those values. The frame proportions are recorded with the sizes, so a rebuild gets the aspect right as well. Verify a rebuild against the same numbers.
- The grid sets the order. The grid is the structure: panels of the same size, set in Inter, arranged so the eye moves across rather than down. Panels are separated by spacing rather than by borders, which keeps the grid quiet.
- Structure in one screen. The features section is built so the copy lands before anything else: the type carries the hierarchy, the 640x470 frame holds the composition, and the supporting values stay quiet. The page is one composition at 640x470, which is why it holds together when the copy changes. Nothing decorative belongs above the fold.
- Every measurement is written down. Spacing is quoted the same way (type from 13px to 88px and 240px spacing steps), not as a scale that grows on its own.
Motion & interaction
A marquee carries the rhythm
A marquee runs across the composition on an endless loop, set in Inter, so the page has movement even where nothing animates on scroll. The strip runs at a constant speed and loops without a gap, so the motion never draws attention to the seam. Keep one moving strip at most.
Static by design
The brief leaves animation out and lets the 640x470 layout carry the page, with hover and press states the only changes. The composition holds still, so the hierarchy has to carry the page and it does. No scroll timelines needed.
What moves in Max Reed Portfolio
Motion is limited to a looping marquee. Nothing in the features section animates for longer than the brief allows. Nothing animates for its own sake in this features section.
Reading Max Reed Portfolio as a spec
Take the features section apart and the values still describe it: type from 13px to 88px and 240px spacing steps for the frame and the rhythm below. Nothing in this features section depends on a default.
Making the features section yours
Start with the copy, not the colour. Rewrite “Let's Team Up Today” as one sentence about your product, then set it in Inter at the size the brief uses. Your accent has to survive the same contrast test as the reference accent.
Frequently asked questions
How is this Max Reed Portfolio entry organised?
Everything quoted on the page comes from the captured 5,397-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Is the Max Reed Portfolio prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 640x470, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Max Reed Portfolio features section in a different stack?
Max Reed Portfolio 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.
