About this template
Lumina keeps its decision trail: the brief that produced this footer runs 5,113 characters. The page's own headline reads “Lumina provides premium clarity on global events and cosmic wonders - shared with all for free”, and the composition is built around those exact words. The colour scheme is blue #2F4458 underneath and gray #CFC2B7 for the type, and the page is set in Helvetica. It ships as React and Tailwind CSS, so the whole footer can be lifted into a project without a design handoff. This reference is for an education or community brand that wants the first screen settled before the build starts.
Designed for
- If the reference is only a starting point, designers can keep a 800x585 frame and rebuild the rest of the footer.
- Teams building an education or community brand footer who want the measured detail (115vh sections and 10px spacing steps) rather than a screenshot to copy.
- Made for product managers who need the footer scoped to one sprint and no new assets.
What's included
- Every measurement is written down. The layout works on absolute values rather than ratios: 115vh sections and 10px spacing steps. The type and the layout share the same steps, so nothing drifts when one of them is substituted.
- The type carries the tone. The faces are assigned roles rather than mixed: Helvetica carries the display and the interface together. Weights are specified per role, so the hierarchy does not depend on guesswork at build time.
- A footer that carries the brand. Links are grouped into columns with the wordmark in its own block, which keeps a long footer readable instead of turning it into a list. Type sizes step down from the column headings to the links, so the hierarchy survives a dense footer. Give the wordmark its own column.
- The composition is the content. The composition is complete at 800x585: the copy, the media and the controls are all named in the brief. The page is one composition at 800x585, which is why it holds together when the copy changes.
Motion & interaction
Feedback on the controls
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. Interactive targets are large enough to tap and the pointer treatment is consistent across them.
Static by design
The brief leaves animation out and lets the 800x585 layout carry the page, with hover and press states the only changes. The composition holds still, so the hierarchy has to carry the page and it does.
The numbers behind the footer
The footer is measured, not eyeballed. 115vh sections and 10px spacing steps come from the brief, and the layout is arranged to those steps rather than nudged into place. Nothing in this footer depends on a default.
How Lumina sequences the first read
The brief runs 5,113 characters and names the reading order explicitly: the stats row, the background clip and the footer, with 115vh sections and 10px spacing steps between them. A education reader gets the offer before the options.
What holds up for Education & Community
When you brief a education footer, the hard part is deciding what the first screen refuses to say. Lumina answers that in advance: one display line, the stats row, the background clip and the footer behind it. Lumina states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
What do I get when I copy the Lumina brief?
The captured brief runs 5,113 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 Lumina depends on React and Tailwind CSS?
Lumina 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.
Can I use Lumina in a client project?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 800x585.
