Design mockups for the Laravel rebuild
Five screens that settle every pattern the remaining thirty inherit. Built with real Chamber data — real members, real events, real dues, real gaps.
Five screens that settle every pattern the remaining thirty inherit. Built with real Chamber data — real members, real events, real dues, real gaps.
Each one is a working page — resize it, use the filters, record a payment.
Sets the type scale, section rhythm, navy bands and how gold gets spent. Two-column hero with the next event live.
Full-bleed 30/70 split — single-column results left, map right. Filters are live; hover a card to light up its pin.
Trades By The Bay with its real data. Shows the monogram fallback and brand cover that work without any upload.
The app shell — navy sidebar, state chips, density. Leads with membership status and term end, the thing members actually ask.
The screen with no precedent in the current system. Click Record payment on any row to see the check flow.
Events and single event, checkout, join and plan picker, committees, newsroom, resources, portal billing and analytics, admin members, invoicing, broadcast, audit log.
All recombinations of the patterns these five establish.
Five calls worth a yes or no before the remaining screens get built.
Single-column results on the left 30%, map on the right 70%, no page chrome around it. Cards and pins are linked both ways. The map states how many members it can show — 78 have no address, and they stay in the list rather than vanishing.
213 of 345 members have no logo. Rather than a broken image or a grey box, every listing gets a navy monogram and a brand cover that look deliberate. A complete profile still looks better — the portal nudges toward it.
The ledger treats card and check as equals: same invoice, same term extension, same receipt, same audit trail. Check number, received date and deposit date are real fields, not a note in a spreadsheet.
The directory filter shows the proposed consolidation. Every old term maps to one of these, so no listing loses its category. Worth a read before it gets locked in.
Both are two-column with a navy sidebar, but the staff side is built for scanning volume — tables, filters, summary tiles — and the member side for a single business. Same system, different density.
53 overdue members and 13 comped are not placeholders — they're the counts sitting in production right now, where 53 listings still carry an expiry of 1 April 2025 and remain published.
Everything on these screens comes from these tokens. They map straight onto a Tailwind theme extension.
#272c6d#c4c8e2#bd8732#8f6320#c9b288EB Garamond, 400–600. Every heading — one colour, one face, one weight range. No two-tone words, no mixed faces mid-line.
Montserrat carries body copy, navigation, labels, tables and every button. Running text stays near 65 characters. Figures in tables use tabular numerals so columns align: $1,080 · $250 · $165.
Uppercase labels get generous letter-spacing.
Headings stand alone. No kicker line above a title.
Nothing scrolls on its own. Sponsors sit in a static grid.
One colour, one typeface, throughout.
Filters and results. Content and rail. Table and action panel.
One stroke weight, used for wayfinding — never decoration.
If two things are gold, neither reads as primary.
Chips and dots, legible without relying on colour.
One palette for every viewer. Native controls locked to match.
navy, periwinkle, gold and sand scales rather than overriding the defaults; set font-display to EB Garamond and font-sans to Montserrat; define the neutral ramp explicitly so nothing falls back to Tailwind's stock grey. assets/app.css is the source of truth and is organised to be lifted section by section.