About this template
Aurora Onboard gives a lifestyle brand a finished first screen and the numbers that produced it. The palette runs black #000000 underneath and muted indigo #DBCDE9 for the type, and the type is Inter. Delivery is React and Tailwind CSS, captured at 1850x1352 so the frame is fixed before any code is written. Treat it as the brief for a lifestyle brand sign-in screen that has to hold up under a rebuild, not just a first look.
Designed for
- People who brief a model on a sign-in screen will use the 4,770-character prompt as the starting point.
- Product teams writing their own Sign-in flow copy who need every line to keep the length the display type was sized for.
- Studio leads who run several projects at once will use this sign-in screen as the pattern every other page copies.
What's included
- Type sets the hierarchy. The size steps and tracking in the brief are what give this its tone: Inter at a tight display size, then a clear drop to the supporting copy. The caption step is small enough to sit under a figure without changing the rhythm of the page.
- The form is the whole first screen. There is one decision to make here: fill the form or leave. Everything else on the screen supports that decision. Fields are stacked in one column, so the tab order matches the reading order. Keep labels visible; do not use placeholder-only fields.
- 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. The wordmark gets its own block, which keeps a long link list readable.
- Copy first, decoration second. Everything above the fold earns its place. The brief names the copy, the 1850x1352 frame and the type sizes, and leaves nothing decorative competing with them. The page is one composition at 1850x1352, which is why it holds together when the copy changes.
Motion & interaction
The controls are the interactive layer
Every interactive element does one thing (hover states on the buttons and links rather than on every card), which is what keeps the states predictable. Because the states are simple, they port into any component system.
Almost no motion
The brief leaves animation out and lets the 1850x1352 layout carry the page, with hover and press states the only changes. There is no animation library in the brief, which keeps the rebuild small.
The argument this sign-in screen makes
The trade-off is density: this sign-in screen says less on the first screen than a feature-led layout would. What it keeps is the reading order, and the headline, the stats row, the form, the background clip and the footer do the work a longer page would spread out. Aurora Onboard states the offer once and lets the composition repeat it rather than adding a second claim.
How Aurora Onboard sequences the first read
Set your own copy into this sign-in screen and the sequence still holds, because the elements are not interchangeable: the headline, the stats row, the form, the background clip and the footer each carry one job. A lifestyle reader gets the offer before the options.
How the sign-in screen reflows
Test this sign-in screen at 1850x1352 and then at phone width: the same order holds, with the scale is fluid rather than stepped. The hierarchy is what survives the reflow.
Frequently asked questions
How long is the prompt behind Aurora Onboard?
The captured brief runs 4,770 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.
Can I rebuild the Aurora Onboard sign-in screen in a different stack?
No. The brief is a specification, not a dependency list. It was written for React and Tailwind CSS, but the same composition rebuilds in whatever you already use. The stack is named so you know how the reference was made.
Can I ship a page rebuilt from Aurora Onboard without crediting it?
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 1850x1352.
