Phase 1
Design language
Two skins over one set of brand primitives, taken from the marketing site so the portal and the site a customer bought from feel like the same company.
Brand primitives
Raw values. Components use the semantic tokens instead.
- greenPrimary. Actions, active states.
- green-darkDeep contrast, staff surfaces.
- orangeAccent. Progress and genuine calls to action only.
- orange-lightAccent hover.
- orange-darkAccent pressed.
- creamWarm surface.
- cream-lightPage background.
- cream-darkRaised surface, borders.
- off-whiteCard background.
- inkBody text.
Two skins
Same components. Only the semantic tokens change — surface, line, ink, radius, density.
Customer
Warm, roomy, photography-led. Belongs to the van.
Your build
Furniture goes in next week.
Staff
Cooler, denser, tighter radii. Built for eight-hour days.
Sarah Reid
T7 Commerce Pro · WF26 UZA
Type
Raleway in bold for headings, where its character earns its keep. Inter for body and UI, where legibility wins. The marketing site is Raleway throughout — at 300–400 weight in body copy that is hard work, and the staff CRM is dense text read all day.
- displayRaleway 700 · Hero van name. Once per page.
- titleRaleway 700 · Page and section headings.
- headingRaleway 600 · Card titles.
- subheadingInter 600 · Labels, list items, names.
- bodyInter 400 · Paragraphs.
- smallInter 400 · Metadata, captions, table cells.
- eyebrowInter 600 · Section kickers.
Components
Orange means “someone must act”. If it starts appearing on things that are merely in progress it stops meaning anything, and the Action Centre loses its point.
Timeline
Progress, not status
Quote agreed
Deposit received
In the workshop
Electrics and insulation are in.
Handover
Photography placeholder. A warm gradient rather than a grey box — the customer surface is carried by imagery, and grey makes the layout read colder than it will be.