Valere CRM · Design foundations
Valere CRM design system
Valere CRM is a concept demo of a CRM for a land and development business. Its idea: a deal is one connected record from Lead to Legals, and every screen is a live view of that record. This site describes what the app's interface is built from: colors, type, spacing and components.
Everything here matches the app's code. Where the design boards draw something differently from the code, the page says so separately, at the bottom.
General
What this site is and how the product is built.
Design foundations
What every screen of the app is built on, taken from the app’s tokens and the classes in its code.
Colors
Neutrals, the action green, three statuses with icons, the function colors. Contrast is computed from the tokens.
Typography
Inter and IBM Plex Mono, and nine text styles with the classes that write them in code.
Spacing, radius, shadows
The 4 px scale steps the code really uses, the radii, the shadows, the shell and control sizes.
Components
Every component on one page, one section each: what it is for, its variations and states, its properties and sizes.
Button
Four variants; hover, focus and disabled states; a disabled button with its reason; full width.
Text field
Default, hint, error, read-only with a lock line, focus; password, date and search types; the text area.
Select
The overview filter and the labeled field; disabled and stale-value states; the list that opens and its keyboard.
Date picker
The calendar and its parts, the field states, the keyboard; proposed in place of the browser’s own date control.
Search form
A field and a Search button; applied on submit.
Switch
Off and on, and the two read-only forms: locked for another role, fixed after a stage.
Chip and tag
Stage and deal type pills with their dot, function chips in five colors, and neutral tags.
Status pill
Three tones with their icons, custom text, the deadline flags, the Stalled badge.
Health score
The three bands, display and button forms, the breakdown panel, a deal with no score.
Tabs
Active, inactive and hover; the five-tab and four-tab sets of the Opportunity page.
Form messages
Error and success bars, the password rules checklist, the success mark.
Card
Title only, with actions, with an edge-to-edge table; the label-over-value fact.
Stat tile
A figure, a figure with a note, money, and the loading dash.
List table
The overview table, its loading and empty states, and the table inside a card.
Pager
First, middle and last page; no rows; loading.
Stage bar
Done, current and upcoming steps at three positions; the stage counts of the Buyers and Contractors tabs.
Deal clock
Three legal dates with countdowns; a date ahead, today, passed and not set.
Action list
Next Actions by function: overdue, due today, due later, done.
App shell
The sidebar open and folded, its menu states and user card; the breadcrumbs; the avatar.
Flows
Walks through the app, screen by screen. The buttons and links on a screen lead to the next one.
Sign in
Signing in, in the Live app layout: the ways it can fail or pause, and where each role lands.
Reset password
A forgotten password, from the link on Sign in to a new one, with a live check of the password’s strength.
Hatch Farm walkthrough
The twelve-step demo, screen by screen: one deal from the first email to Legals, handed between the five roles. Full pages, for show only.
Sign-in layouts
Eight designs for the sign-in page, on one page: the form on the right, an animated panel about Valere’s work on the left. Live app is the primary layout and is in the app; the other seven are alternatives.
Live app
The primary layout. Real pieces of the CRM float on the brand green: a deal moves on, the pipeline counts up, a Health Score turns green.
Site plan
A surveyor’s plan of Hatch Farm draws itself: the boundary, the road, the plots, the homes, the pin.
Deal journey
The stage rail from New Lead to Exchange, each stage lighting in the color of the team that owns it.
Connected record
Six records linked to one Site; a phone number edited on the Contact shows on the Site at once.
Land to homes
A field at dusk, a crane, five homes going up and their windows lighting.
Morning meeting
The Morning Meeting Board as a split-flap departures board that reorders as tasks are done.
Health Score
One deal’s Health Score stalls and recovers, with the rule behind every point.
Handoff line
The stage table as a tube map: each team’s stretch of line, deals riding to the next interchange.
Logo
Twenty-five marks for Valere CRM at one size, each from an idea in the product: the letter, the land, the connected record, the handoff, the score, the funnel, the morning meeting, the signature. The app’s mark today is the first; the other twenty-one are proposals.
Side by side
All twenty-five at one size, on white and on navy, then at the 28 px of the sidebar and the 16 px of a browser tab.
Letter tile
The mark the app had until 2026-10-08: a blue tile with a bold V. The baseline the others are measured against.
Design concept
The design concept’s mark, a roof over two strata of land: in the app since 2026-10-08, as a stand-in.
House, filled
The concept’s house as one filled shape, the strata cut into it.
Roof, outlined
The concept’s roof as a line drawing, open at the bottom over two strata.
Valley
The V as a piece of land: level ground on both sides and the dip between them.
Contours
Three contour lines of a valley, as a map draws the land.
Plot
The V as a boundary on a surveyor’s plan, with a pin where the site is.
Pin
A map pin with the V in its head: a Site is a place.
Home
A house with the V in it: the land becomes homes.
Connected record
Three records and the lines between them: the Site, the Landowner, the Buyer. One record, linked everywhere.
Two phases
One V in two tones, Lead and Opportunity, split by a hairline: the same record, converted in place.
Steps
Seven steps along the V as the stage bar draws them: done, current, to come.
Handoff rail
The V in the five function colors, in the order the deal is handed on.
Health ring
The V inside the Health Score ring at 80.
Tick
The V as a check mark: a deal done, an action completed, on track.
Plots
A site divided into plots, five of them taken: they form the V.
Strata
The V in three layers, cut by two level lines: the land in strata, the deal in phases.
Morning
The sun coming up in the valley: the Morning Meeting Board as a picture.
Field
The V as an outline holding a field in a lighter tone.
Funnel
The deal funnel, every lead at the top and the completions at the bottom; its outline is the V.
Five functions
Five dots in the five function colors, set out as the V.
Signature
The V written with a pen, a heavy downstroke and a light upstroke: a signature on a contract.
Upturn
A line that dips and turns up into an arrow: a deal that stalls and recovers.
Meeting point
Two arms coming down to one point: the landowner and the buyer meeting on a deal.
Disc
The Letter tile made round: a disc with the V cut from it.
Not found page
The page an address no route matches lands on. The app’s page today, then six proposed versions on their own full screen, outside the layout, each with an illustration that moves and a Full size view.
In the app today
The Not found page as the app draws it: in the shell when signed in, on the auth layout when not.
Empty plot
A surveyor’s plan draws a boundary around nothing, and a pin with a question mark drops in: this plot is not on the plan.
Signpost
A fingerpost with an arm for every page of the app, and one loose arm for this one.
Not a stage
The stage bar fills from New Lead to Legals; a thirteenth dot, 404, hangs under it and is not in the table.
Lost record
The Site with its linked records; one more, off at the edge, linked to nothing.
Fog on the field
A field at night under fog, with one peg that reads 404: no site at this address.
Crane
A tower crane lowers the last digit of 404 into place: this page is not on site.
Illustrations
A picture for every state of the app that has no data to show: empty lists and panels, the dashboard with nothing to flag, a page that could not load, a door closed to a role, a session that ended, a thing done. Each one where it sits, with what the app says today.
Side by side
Every picture at one size, with the states it serves.
Empty lists
The six Overviews and registers with no rows yet, and the same with filters or a search that match nothing.
On a record
A Lead, Opportunity, Account or Contact panel with nothing in it yet: buyers, tenders, key contacts, legal tasks, actions, activity, sites, contacts.
All clear
The dashboards and the Morning Meeting Board with nothing to flag: a good kind of empty.
Errors and access
A page that could not load, a form that could not save, a page only an admin may open, an address that does not exist.
Session and done
Signed out when the session ended, a wrong password, a reset link without its token; a password updated, a staff user created.
Where there is no picture
Loading, inline facts, locked fields and other states a sentence serves better.
Dev conversation
What would change in the app itself. For the developers to discuss before anything is implemented.
Next
What comes next on this site: the queue of flows to add, in the order agreed, and the pages about the project, to be added on the same tokens and components.
Queue
Eleven flows of the app to add, in order, with what each shows and what it is built from; how a flow is built; the planned pages.
About the project
What the Valere CRM PoC is, its ranked goals, what is deliberately out of scope.
Roles and functions
The five Valere roles and the admin, who owns which stage, locked fields.
Deal lifecycle
The stages from New Lead to Exchange / Completion, the moves and their conditions.
App screens
The CRM pages: overviews, Lead, Opportunity with its tabs, the board, the dashboards.
Data model
Site, Company, Contact, the buyer and contractor links, the computed values.
Where this comes from
Every sample on this site has an app file behind it. The color values on the pages are not typed by hand: the browser reads them from tokens.css.
| What | Source |
|---|---|
| Tokens: colors, fonts, shadows | web/shared/theme/tokens.css |
| Shared components | web/shared/components/: Button, TextField, Select, SearchForm, Chip, StatusPill, HealthChip, DealHealth, Card, Pager |
| App shell and page parts | web/packages/crm/src/components/, web/packages/crm/src/pages/ |
| The living gallery inside the app | the /components route (ComponentsGallery.tsx) |
| Design | the "Valere CRM Design Foundations" canvas, boards Colors; Type, spacing and shape; Components: actions and inputs; Components: data display |
The rules everything rests on
- One action color. The
primarygreen is for buttons, links and the active tab. There is no other accent. - Status is never color alone. Each of the three tones has its own icon shape (circle, triangle, square) and a label beside it.
- Stage, function and status are separate things. Stage is green, function has its own hue, status carries an icon. Deal type is a neutral pill; a stage and a deal type carry a dot.
- Controls are 36 px high. Buttons, fields and filters share one height; keyboard focus shows as a 3 px ring.
- A disabled button says what is missing. The reason sits under the button.
- A locked field names its owner. "Set by Back Office. Read only for Land." The role sees who can change the value.
- Dense tables, readable text. Body text is 14 px, nothing is smaller than 12 px, numbers are tabular.
How to use this site
- Open it. From the repo root:
npm run demo. It serves the static files ofinitialDemo/athttp://localhost:4310and opens the browser; Ctrl+C stops it. - Navigation. The menu on the left lists every page, in groups that fold; each page ends with previous and next links, and the ← → keys do the same. Moving between pages swaps the content in place, without reloading.
- Three style files.
tokens.cssholds the values;base.cssthe text styles;components.cssthe app's components in plain CSS, each block naming its source file. - Demo data. Labels in the samples are the app's own. Site and people names come from the app's demo data; figures and dates are made up.
- A new page. Add an entry to
pages.mjsand runnpm run demoagain (ornpm run demo:build): the menu, the breadcrumbs, this catalog and the previous / next links are written into every page from that one list.