About this template
Build With Us is a working reference for an AI or SaaS product: the about page laid out, measured and ready to rebuild. Colour is limited to white #FFFFFF underneath, deep yellow #434437 for the type and blue #337EC8 carrying the accents, set in Inter. It ships as React and Tailwind CSS, so the whole about page can be lifted into a project without a design handoff. It is the right reference for an AI or SaaS product about page that has to look deliberate on the first screen.
Designed for
- Product managers who have to estimate the build will read a 640x472 frame as the scope of the work.
- Start from 100vh sections and 48px spacing steps and let the palette follow, because the spacing is what makes this about page read.
- Studio leads who run several projects at once will use this about page as the pattern every other page copies.
What's included
- A bar with nothing spare. The bar is the quietest part of the composition: wordmark, a short row of links and one #337EC8 action, all held at the smallest type step in the brief. The links are set below the wordmark in size, and the #337EC8 action is the only element in the bar with any weight. Give the wordmark no more room than its type needs.
- Numbers carried into the build. The layout works on absolute values rather than ratios: 100vh sections and 48px spacing steps. A rebuild that hits those numbers looks like the reference without further tuning. Keep the named values when you port the page.
- One face, used with discipline. The type is Inter at the top of the scale, with the supporting copy dropped well below it so the hierarchy needs no colour to read. The display face is used at one size only, so it never competes with itself.
- Copy first, decoration second. The whole composition fits one screen and is delivered as React and Tailwind CSS, with the copy, the media and the controls named in the brief. The page is one composition at 640x472, which is why it holds together when the copy changes.
Motion & interaction
Hover, but sparingly
The page answers only where it can be acted on: hover states on the buttons and links rather than on every card. Each state changes one property, which keeps the feedback legible.
Almost no motion
The brief leaves animation out and lets the 640x472 layout carry the page, with hover and press states the only changes. There is no animation library in the brief, which keeps the rebuild small.
What this about page gets right
There is one promise on this page, and 100vh sections and 48px spacing steps hold it in place. Nothing below the fold is asked to carry the offer as well. It gives a SaaS reader the shortest honest route to the offer.
What to change first in Build With Us
The brief names Inter and the scale beside it. Substitute a face with the same proportions and the composition survives. The frame and the scale are what to leave alone.
How the about page reflows
There is no separate mobile design to maintain. the section is held at 100vh, and the same hierarchy carries across. The order is the last thing to change.
Frequently asked questions
How long is the prompt behind Build With Us?
The captured brief runs 6,252 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.
How is this Build With Us entry organised?
Everything quoted on the page comes from the captured 6,252-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Can I rebuild the Build With Us about page in a different stack?
Build With Us 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.
