Hillbrook · live editor
Click any swatch to change a colour. Pick fonts below. Preview updates live. Export Tailwind + CSS for Derek.
1 · Colours
Click a chip to change its colour. The "Soft" variants are the lighter background pair for each colour.
Page chrome, text, borders
Primary brand. Forest = construction, ocean = postcon/maintenance bridge.
Universal traffic light across every dashboard.
Match the actual product brand. Procore orange, Asana red, Microsoft blue.
The seven stages: CRM → ECI → Build → Postcon → DLP → 10yr → Dispute.
SDA, rooming, childcare, fit-out — each gets a recognisable signature.
2 · Typography
Display font for headlines, body font for everything else. Both free from Google Fonts.
Good morning, Simon.
Today's route
$1,284,720
4 invoices waiting your sign-off · $24,860 total · oldest Boral 2d.
9 Acacia Ave Mentone · 2B custom · frame stage · today 8:30 → 12:30.
Auto-renamed 2026-06-20_Acacia_Frame_Cripples.jpg
YOUR DAY AT A GLANCE
3 · Component preview
These update as you change tokens above. If something here looks wrong, fix it before exporting.
Simon — 6 things need eyes today
4 invoices waiting your sign-off · $24,860 · oldest Boral 2d · plus 5 other items.
4
$24,860 · oldest 2d
4 · Export for the dev team
Pick the format the dev team uses. Tailwind config is the fast win for tenant.hillbrook.co and postcon.hillbrook.co.
Four steps. Mostly copy-paste. Total dev time: under an hour for both live apps.
Change colours/fonts in this page. Click "Export for dev". Tailwind format recommended.
Teams DM the copied code with one line: "New design tokens — please apply across tenant + postcon."
hillbrook-tenant/tailwind.config.js and hillbrook-postcon/tailwind.config.js — replaces theme.extend.colors.
Tenant: bun run build && wrangler pages deploy. Postcon: pnpm cf:deploy. Live in 60 seconds.