About this template
Price Calculator is a fintech pricing section built from one written brief, and this page documents that brief. “Get premium website within your budget” is the line the layout is built to carry. The whole page is built on black #000000 underneath and red #FF5656 carrying the accents. The entry names the stack that produced the page (a single component) rather than hiding it. Start from the captured brief, then edit the pricing section rather than rebuilding it from scratch.
Designed for
- Borrow the pricing section structure whole and replace the copy line by line against a 800x648 frame.
- People who brief a model on a pricing section will use the 3,168-character prompt as the starting point.
- Teams building a fintech product pricing section who want the measured detail (98px spacing steps) rather than a screenshot to copy.
What's included
- Measured against the viewport. The values are the specification: 98px spacing steps, captured at 800x648 rather than inferred from a screenshot. The smallest and largest values in that list set the range the composition works in. Measure before you adjust.
- The base carries the rest. The palette is a ground and a signal (black #000000 and red #FF5656), with the second colour reserved for actions. Contrast between #FF5656 and black #000000 is what makes the accent readable at small sizes.
- Numbers carried into the build. Spacing is quoted the same way (98px spacing steps), not as a scale that grows on its own.
- Colour rationed to actions. Everything else sits on black #000000, which is what keeps a saturated palette legible.
Motion & interaction
Almost no motion
This one is delivered as a still composition at 800x648, so the hierarchy has to work without motion, and it does. There is no animation library in the brief, which keeps the rebuild small.
Motion that stays out of the way
There is no scroll library here: the 800x648 composition holds still and only the elements that respond to you move.
How Price Calculator sequences the first read
Nothing here competes with the first decision. The page says it out loud: “Get premium website within your budget”. The supporting material waits below the fold, and the headline and the card grid carry the top of the page alone. A fintech reader gets the offer before the options.
Reading Price Calculator as a spec
The brief is a specification, not a mood board. It fixes 98px spacing steps, and it names the media at 800x648. That level of detail is why the design survives a rebuild: change the copy and the relationships still hold. Nothing in this pricing section depends on a default.
Making the pricing section yours
Where a theme hands you components, this brief hands you a composition: 98px spacing steps and a media frame, with the subject left to you. Your accent has to survive the same contrast test as the reference accent.
Frequently asked questions
Why does the entry name a single component at all?
Price Calculator 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.
How should I handle the Price Calculator media in a client build?
The prompt was published publicly by motionsites.ai, and the preview here is their render. Treat it as a reference for structure and motion, check the source site's terms, and rebuild the composition with your own copy, media and palette before shipping it.
What do I get when I copy the Price Calculator brief?
It is a build brief rather than a mood description: it names the composition at 800x648, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
