About this template
Aesthetic Onboarding is a working reference for an AI or SaaS product: the sign-in screen laid out, measured and ready to rebuild. The headline reads “Welcome back”, and the rest of the sign-in screen is arranged around it. The palette is bright orange #F09819 underneath, deep blue #0C0C0E for the type and bright teal #00C6FF carrying the accents. It ships as React and Tailwind CSS, so the whole sign-in screen can be lifted into a project without a design handoff. Motion comes down to a looping video bed. Take it on when the sign-in screen needs a decided order before any new sections are added.
Designed for
- Anyone using an AI builder who wants a brief that already contains a 1894x1378 frame instead of leaving it to the model.
- Agencies pitching an AI or SaaS product sign-in screen who want 80px spacing steps quoted in the deck so the estimate still holds after the kickoff.
- This sign-in flow serves founders who need one screen of proof that SaaS copy can carry 5.4s of looping video.
What's included
- Sizes fixed in the brief. The brief states its sizes at capture (80px spacing steps), 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. Substitute the face or the copy, not the scale.
- A clip, not an illustration. A 5.4s clip at 1894x1378 does the atmospheric work; the brief fixes its crop and leaves the type untouched on top of it. The loop is short enough (5.4s) that the eye reads it as texture rather than as a timeline.
- Figures as typography. Statistics are handled as typography: figures at the display size, labels at the smallest step in the brief, all of it on #00C6FF or the ink colour rather than a coloured card. The figures carry the #00C6FF accent while everything around them stays on the ink colour. Check the row at the narrowest width.
- The sizes are in the brief, not in a scale. Spacing is quoted the same way (80px spacing steps), not as a scale that grows on its own.
Motion & interaction
Ambient motion without a scroll library
The background clip runs 5.4s at 1894x1378 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. The loop is cropped to cover, which means the composition does not depend on a particular frame size. Shoot or export at 1894x1378 or wider.
A small interactive surface
Feedback is limited to hover states on the buttons and links rather than on every card, so the rest of the layout is a fixed composition. The states are drawn from the page's own palette rather than from a component default. Do not animate layout on hover.
The order behind the sign-in screen
Read it in order: the headline, the stats row, the card grid, the background clip and the footer. Each element has one job, and the bright teal #00C6FF accent is spent only on the element you are meant to press. A SaaS reader gets the offer before the options.
How the sign-in screen reflows
A fluid scale and a stepped one look similar on a wide screen. Narrow the viewport and the difference shows: a clamp between 10px and 80px against fixed jumps. Controls stay large enough to tap and the copy keeps its reading order at every width.
What an AI or SaaS product gains here
Suppose your media is louder than your copy. That is the case this composition is built for. The media is a 5.4s 1894x1378 loop. The frame stays quiet and 80px spacing steps keep the reader on the text. It gives a SaaS reader the shortest honest route to the offer.
Frequently asked questions
How long is the prompt behind Aesthetic Onboarding?
The captured brief runs 3,133 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.
Is the Aesthetic Onboarding brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 3,133-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Why does the entry name React and Tailwind CSS at all?
Aesthetic Onboarding 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.
