About this template
Tech-Noir About keeps its decision trail: the brief that produced this about page runs 3,555 characters. The palette is red #C40010 underneath and bright red #FF0000 carrying the accents, set in Manrope. The build is React and Tailwind CSS; every measurement in it is written down, which is what makes it reusable. Borrow the structure and not the subject: the about page and its numbers move to your brand unchanged.
Designed for
- Founders who brief an agency will use the 640x470 frame as the acceptance test for the first round.
- This about page answers the builder who wants to know what type from 16px to 120px and 100px spacing steps actually controls in the layout.
- Made for a solo founder shipping one about page for an AI or SaaS product and no design system behind them.
What's included
- Numbers carried into the build. The brief fixes type from 16px to 120px and 100px spacing steps and leaves the rest to the arrangement, which is the opposite of a scale that grows on its own. The frame proportions are recorded with the sizes, so a rebuild gets the aspect right as well.
- Nothing decorative in colour. The accent carries every action on the page: bright red #FF0000 for buttons and links, red #C40010 for the frame behind them. Everything else sits on red #C40010, which is what keeps a saturated palette legible. Keep the ground quiet.
- One scale for type and frame. Spacing is quoted the same way (type from 16px to 120px and 100px spacing steps), not as a scale that grows on its own.
- Type does the styling. The face is quoted with its sizes (Manrope across 16–120px), which is what makes the type portable between builds. Tracking tightens as the size grows, which is why the display line holds together across 16–120px.
Motion & interaction
Static by design
This one is delivered as a still composition at 640x470, so the hierarchy has to work without motion, and it does. Motion is treated as feedback rather than as decoration. Keep motion to the controls.
Almost no motion
The brief leaves animation out and lets the 640x470 layout carry the page, with hover and press states the only changes.
The order behind the about page
A feature-led layout lists what the product does; this one routes the reader to a single decision. The route is visible in the background clip and in how type from 16px to 120px and 100px spacing steps space them. A SaaS reader gets the offer before the options.
How the about page reflows
A fluid scale and a stepped one look similar on a wide screen. Narrow the viewport and the difference shows: a clamp between 16px and 120px against fixed jumps. Both states are described in the same brief.
Reading Tech-Noir About as a spec
If you are handing this to a developer, the brief is the useful artefact. It states type from 16px to 120px and 100px spacing steps and leaves nothing for the two of you to interpret. Nothing in this about page depends on a default.
Frequently asked questions
What do I get when I copy the Tech-Noir About brief?
The captured brief runs 3,555 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 Tech-Noir About?
Tech-Noir About 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.
What drives the motion in Tech-Noir About?
Transitions are attached to interface states rather than to a scroll timeline, and they resolve in the sub-second range. The brief records the values so a port can match them without guessing. The reference was captured at 640x470.
