Eight designs for the sign-in page. In each, the form sits on the right as it is in the app today, and the left half shows an animated panel about Valere’s work. Live app is the primary layout: the design follows it from here on, and the screens for a forgotten password and a new password will take the same two halves. The other seven are alternatives, kept for comparison.
Each panel starts on its last frame, so a screenshot shows it finished. Pause holds a frame, Restart plays the panel from the beginning, Full size shows it at the size of the window. A panel waits while it is off screen.
Live app is in the app since 2026-10-07 (branch feat/POC-UI-1-ui-improvements, ADR-0041): AuthLayout and LiveAppPanel in web/shared/components, on the three pages of the Sign in and Reset password flows. The seven alternatives are not built.
Live app
Primary layoutIn the app
The sign-in page in two halves: the form on the right, and on the left real pieces of the CRM floating on the brand green. They play out a moment of a working day. A contractor is appointed on Ashcombe and the deal moves on to Heads of Terms, the pipeline figure counts up, a call is logged and the deal’s Health Score turns green.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
The action green deepened to navy, with white app cards in a slight 3D tilt. The cards drift a little the whole time.
What moves
Dan Hughes ticks off Appoint contractor and moves Ashcombe to Heads of Terms; the pipeline figure counts up. Liam Carter logs a call and the Health Score turns green. A notice names who did what. The money figures are made up for the picture, not taken from the demo data.
Loop
14 seconds; the cards fade and start again.
At rest
Ashcombe at Heads of Terms, the action done, Health green.
The same in every layout
The form. The app’s sign-in form as it is today: Email, Password with Show, Forgot password?, Sign in and the note about the admin. It loses only the card around it, because the page itself now frames it.
The messages. Nothing entered, a wrong email or password, signing in, the password updated: each still shows inside the same form.
The other two screens. Restore your password and Set a new password take the same two halves and the same panel.
Narrow screens. Below 860 px the panel folds into a band at the top with the logo and the headline, and the form takes the screen. Full size on a phone shows it.
Colors and type. Every color is one of the app’s tokens or a tint of one, and the type is Inter at the app’s sizes.
As built
The panel is a picture, not live data. Before anyone signs in, the page shows nothing from the CRM. The deals, names and stages are fixed demo content written into LiveAppPanel, and the money figures are made up.
Less motion when asked. For anyone whose system asks for reduced motion, the panel holds its last frame and the cards do not drift.
The form comes first. The panel draws no attention away from signing in: it sits behind its own half, loops quietly every 14 seconds and has nothing to click. The page opens on the last frame, so it reads as finished at once.
One clock, no library.useLiveAppPanel computes each frame of the loop from the time (frameAt), and tells React only when something changes. Only transform and opacity move continuously, so the browser's compositor runs the motion; the fade at the end of the loop sits outside the 3D plane, so the cards keep their place while they fade.
The cards' shadow is the app's popover token, lighter than the shadow drawn above. A deeper token for cards on a dark ground can follow if the app's reads as flat.
Site plan
AlternativeProposed
A surveyor’s plan of Hatch Farm draws itself on the left: the boundary, the access road, the plots, the homes, and a pin that names the site. A deal starts with a piece of land, and so does the CRM.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
Deep navy, the dark end of the action green, with a faint grid and contour lines. The parcel is drawn in the Land function's teal, lightened for the dark ground. A north arrow and a scale bar, as on a real plan.
What moves
The boundary draws itself, the access road and plot lines follow, nine homes drop in, the pin lands and names the site. The contours drift the whole time, slowly.
Loop
16 seconds, then the plan fades and is drawn again.
At rest
The finished plan with the pin and its label. That is also what someone with reduced motion sees.
Deal journey
AlternativeProposed
The stage rail of the Lead and Opportunity pages, walked from New Lead to Exchange. A marker moves down, and each stage lights in the color of the team that owns it. The deal card above it says Lead until Instructed, then Opportunity: the same record all the way.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
Light. The page's own gray with a wash of the pale action green, so the whole screen reads as one sheet with a hairline between the halves.
What moves
The marker walks eight stages. Each lights in its owning function's color and a chip names who took over, as the stage table says. The card above says Lead until Instructed, then Opportunity; nothing else about it changes.
Loop
18 seconds.
At rest
Every stage lit, the card reading Opportunity.
Connected record
AlternativeProposed
Six records around one Site, each read live: the Landowner, the next action, the Buyer, a Contact, Legals and the Contractor. Then a phone number is edited on the Contact, and the Site shows the new one a moment later.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
Midnight blue, cooler and deeper than A, with a dot grid and the cards drawn as glass. The pulses use the same teal; the edit is marked in amber, the app's warning mark.
What moves
Lines link the Landowner, the next action, the Buyer, a Contact, Legals and the Contractor to Hatch Farm. A pulse runs down each line in turn and the Site card answers with a ring. Then the Contact's phone number changes and the Site card picks it up. The cards breathe a little the whole time.
Loop
18 seconds.
At rest
All six linked, the new number on both cards.
Land to homes
AlternativeProposed
What Valere does, for someone who has never seen the product: a field at dusk, a plot marked out, five homes going up and their windows lighting.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
A dusk sky over fields in the Construction olive, a crane, a low sun. The only warm color is the window light, the app's amber.
What moves
The plot line is drawn, the homes rise one after another, the windows light up. The crane turns and the clouds pass regardless.
Loop
16 seconds for the building; the crane, the clouds and the sun never stop.
At rest
Five finished homes, lit.
Morning meeting
AlternativeProposed
The Morning Meeting Board as a split-flap departures board. The live deals stand in order of their next deadline, and the letters flip whenever something changes.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
The app's darkest slate, with the board in near-black. White letters, lamps in the three status colors, the title in the warning amber.
What moves
The five live Opportunities of the demo data, in Primary view order. Church Farm's overdue Legal task is done and it drops down. Station Road Yard agrees a buyer and, being Turnkey, goes straight to Heads of Terms. Elm Park gets its first next action and moves up. Each change flips letter by letter, and the clock moves on.
Loop
16 seconds; in the last second the board flips back to the start.
At rest
The board after all three changes.
Health Score
AlternativeProposed
One deal’s Deal Health Score, opened the way the app opens it: the score, the band, and every rule that took points. The deal stalls, then recovers.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
Light gray with one white card: Station Road Yard's score with its breakdown, in the status colors.
What moves
15 days without contact takes 25 points and raises the Stalled badge. Two overdue actions take 10 each, and the ring turns amber, then red. Sophie Turner logs a call and completes the actions, and the score climbs back to green. The rule that changed lights up each time.
Loop
16 seconds.
At rest
80, On track: only Stage duration still takes points.
Handoff line
AlternativeProposed
The stage table drawn as a tube map. Each stretch of line is the team that owns it, every handoff is an interchange, and four deals from the demo data ride along.
/auth/sign-in
Sign in
Use your Valere email and password.
New to Valere CRM? Ask an admin to create your account.
How it moves
Panel
White, like a tube map. Lines in the five function colors, interchanges as white rings, ordinary stops as ticks, a key at the bottom.
What moves
Four demo deals ride the line. Hatch Farm runs the Lead stages to Instructed. Station Road Yard takes the branch past Contractor, because it is Turnkey. Ashcombe moves from Contractor to Heads of Terms, Church Farm from Legals to Exchange.