About this template
Kresna Footer is a working reference for an AI or SaaS product: the footer laid out, measured and ready to rebuild. The palette runs white #FFFFFF underneath and deep blue #111827 for the type, and the type is DM Sans. It ships as one self-contained HTML file, so the whole footer can be lifted into a project without a design handoff. The brief spends its motion budget on 0.2s transitions. Borrow the structure and not the subject: the footer and its numbers move to your brand unchanged.
Designed for
- Growth teams reskinning an AI or SaaS product footer who want the 800x586 frame kept while the offer copy changes.
- Made for studios that have to explain 560px behaviour to a client without building a prototype first.
- Teams rebuilding a competitor's SaaS footer who want one self-contained HTML file named before anyone commits to a framework.
What's included
- Links collapse at one width. A short run of links and a single action sit over the footer, held at 28px spacing steps and 0.2s transitions so the bar never competes with the composition behind it. Below 560px the links collapse instead of wrapping onto a second line.
- Figures as typography. The row is placed high in the footer as proof rather than as decoration. The row is aligned to the same margin as the headline above it.
- One family, two roles. The type is DM Sans at the top of the scale, with the supporting copy dropped well below it so the hierarchy needs no colour to read. Line height follows the size steps rather than a single global value.
- Panels, not paragraphs. Where a run of copy would go, this page puts a set of panels, which is what keeps the footer scannable. The grid collapses to one column without changing the panel order.
Motion & interaction
The surface has grain
A grain overlay sits on white #FFFFFF, which stops large flat areas from reading as plain colour without adding a gradient. It replaces the gradient a page like this would normally use for depth.
Fast enough to feel deliberate
The timings are short and consistent (0.2s), so hover and press states read as one system instead of a set of separate effects. Easing is specified alongside the duration (0.2s), so a rebuild cannot quietly substitute a different feel.
Why the SaaS brief holds
A stock hero and this footer use the same parts. Here they are ordered by navigation, the headline, the announcement badge, the stats row and the card grid and measured with 28px spacing steps, 0.2s transitions and a 560px breakpoint, so the screen reads as a sequence rather than a container. Kresna Footer states the offer once and lets the composition repeat it rather than adding a second claim.
How the footer reflows
Most responsive work stops at hiding elements. Here the layout changes shape: the layout shifts at 560px, and nothing important is dropped to make the fold fit. A squeeze would have been cheaper and would not hold.
The numbers behind the footer
Almost every decision here is a value you can check: 28px spacing steps, 0.2s transitions and a 560px breakpoint. The media is a still at 800x586. The type stays in DM Sans, so a substitution has to keep the same proportions. Nothing in this footer depends on a default.
Frequently asked questions
What does the brief behind Kresna Footer actually contain?
The captured brief runs 9,163 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 much of Kresna Footer depends on one self-contained HTML file?
Kresna Footer was built in one self-contained HTML file, 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 can I do with the Kresna Footer brief once I have it?
Everything quoted on the page comes from the captured 9,163-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
