About this template
Alumica was captured at 2056x1396 and kept as a specification rather than as a gallery image. The page's own headline reads “Automation & Fintech”, and the composition is built around those exact words. The palette is deep indigo #080210 underneath and bright orange #FF8A00 carrying the accents, set in Inter. Delivery is a single component — one page, no plugin, no build tooling between you and the design. Motion comes down to 0.3s transitions and a looping video bed. It is the right reference for a fintech product hero section that has to look deliberate on the first screen.
Designed for
- The hero section is aimed at teams that already know a single component and only need a single component written down.
- Write your own headline, then rebuild this hero section in a single component with the measurements intact.
- Teams rebuilding a competitor's fintech hero section who want a single component named before anyone commits to a framework.
What's included
- The bar shares the page grid. Links sit on one line at a single size, and the #FF8A00 action closes the row on the right so the eye finishes where the navigation ends. The links are set below the wordmark in size, and the #FF8A00 action is the only element in the bar with any weight.
- The spacing steps are quoted. The brief states its sizes at capture (10px spacing steps and 0.3s transitions), so a rebuild can be verified instead of approximated. The type and the layout share the same steps, so nothing drifts when one of them is substituted.
- A full-bleed clip behind the type. The 2056x1396 video runs 5.8s on a loop behind the copy, muted and inline, with no tint layer between the two. A poster frame at 2056x1396 holds the composition when autoplay is unavailable, so the layout never collapses.
- The scale steps down hard. 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. A face swap is safe as long as the sizes and weights stay where the brief put them.
Motion & interaction
The whole animation budget
Motion in the controls is short and repeatable: 0.3s on each state change. Easing is specified alongside the duration (0.3s), so a rebuild cannot quietly substitute a different feel.
Pointers only where they help
Feedback is limited to hover states on the buttons and links rather than on every card, which is what keeps a dense first screen from feeling busy. The states are drawn from the page's own palette rather than from a component default. Keep the pointer effects on the controls.
Reading Alumica as a spec
Where a mood board leaves the scale open, this brief closes it: 10px spacing steps and 0.3s transitions, with the surrounding values derived from that decision. Nothing in this hero section depends on a default.
Making the hero section yours
Suppose you only have one afternoon. Change the headline and the action label, leave 10px spacing steps and 0.3s transitions alone, and you have a page that looks intentional. A different brand can reuse the whole frame.
How Alumica sequences the first read
A page like this usually buries the action under a feature grid. This one puts navigation, the headline, the announcement badge, the stats row and the background clip in a fixed sequence, with the action inside the first screen rather than after three scroll lengths. A fintech reader gets the offer before the options.
Frequently asked questions
How much of Alumica depends on a single component?
Alumica 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.
Why is Alumica's prompt not printed here?
Everything quoted on the page comes from the captured 2,424-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
What does the brief behind Alumica actually contain?
It is a build brief rather than a mood description: it names the composition at 2056x1396, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
