Harbour Mutual88
Financial services · A$180k–240k
Marquee design system
Broadcast Desk
A broadcast graphics package meeting a rate card. Built for a commercial manager at a mid-sized Australian rights holder — daylight office, board report due Friday, outputs that get printed and presented.
Light mode by decision
OKLCH throughout
WCAG 2.1 AA floor
No build step
Colour
Restrained canvas, one committed near-black chrome layer. Warmth lives in the brand, never in the surface — a warm-tinted background is the saturated AI default and this product does not use one. Every ratio below is computed live from the rendered swatch, not asserted.
Canvas & text — measured against --bg
Brand
Signal is a highlighter, not a theme
Acid lime appears on key figures, the plan meter and the logo bulb. If it exceeds roughly
5% of a screen, it has been misused.
Chrome — the second neutral layer
Near-black with a warm trace at hue 45. Deliberately not navy: navy-plus-amber is the analytics-SaaS reflex this product avoids.
Semantic
Danger sits 23° off the ember primary and always ships with an icon and a word, so red is never the only signal.
Categorical data
Ordered for maximum adjacent separation. Charts additionally carry direct labels or patterns — colour alone never encodes a series.
Typography
Two families on a real contrast axis: an expanded grotesque for display, a humanist newspaper grotesque for everything else. Two scales, because the marketing surface and the app want different things.
Display — Archivo, width axis at 112–118%
Price it. Pitch it. Prove it.
Reads as stadium signage and broadcast title cards. Used for marketing headlines and hero numerals only — never for UI labels, buttons or data.
App scale — fixed rem, ratio ≈ 1.2
Numerals — tabular everywhere they are compared
Tabular (correct)
A$ 1,248,000
A$ 96,500
A$ 412,750
Proportional (wrong for columns)
A$ 1,248,000
A$ 96,500
A$ 412,750
Prose measure — capped at 68ch
A rights holder with two people in the commercial team has to do everything an agency would do. Marquee gives them the agency's method as software: audit the assets, price them so the number survives a CMO's scrutiny, find the brands whose audience actually overlaps, and prove delivery when the renewal conversation comes around.
Buttons
Every pressable element scales to 0.97 on press at 120 ms. Hover is gated behind a fine pointer so touch devices never get a stuck hover state.
Variants
Sizes
With icons, icon-only, and states
The loading state keeps the button's width, so the layout never jumps when an action starts. Focus each button with Tab to check the ring.
Segmented control & filter chips
Forms
Placeholder text meets the same 4.5:1 floor as body copy. The washed-out grey placeholder is the single most common readability failure in generated UI.
The name a sponsor will see on the rate card.
A$
+ GST
impressions
Enter a value in Australian dollars, e.g. 185000
Status & feedback
Colour is never the only carrier. Every status badge pairs its tint with a word; every alert pairs its tint with an icon.
Badges
Draft
In negotiation
Delivered
At risk
Missed
Awaiting review
New
Principal partner
Consultant
Callouts — full borders and tints, never a side stripe
Three assets look under-priced
Your LED perimeter sits 34% below comparable properties of similar reach. Open the valuation to see the workings.
Category clash
Harbour Mutual and Southland Super both sit in Financial services. Selling both breaks the exclusivity in clause 4.2.
Two deliverables overdue
The Sunline Energy matchday activation was due 14 July and has no evidence attached.
Season report approved
Your consultant signed off the Volt Telecom performance report. It is ready to send.
Valuations use comparable Australian properties from the last 24 months, indexed to CPI.
Toasts
Progress, meters and rings
Fulfilment82%
AI credits used1,240 / 2,000
Inventory utilisation61% sold
Sold
On hold
Unsold
67
Commercial readiness
Developing · up 12 this quarter
Empty state — teaches the interface
No assets in your inventory yet
An inventory is the foundation of every valuation, package and proposal. Most rights holders start with 20–40 assets. Marquee can suggest a starting set from your organisation profile.
Skeletons — never a spinner in the middle of content
Surfaces
Panels are the default container. Cards are used only where they are genuinely the right affordance, and never nested inside one another.
Panel
12Head, body and an optional foot. The default container for everything in the app.
Updated 2 hours ago
Metric blocks — label first, number as the answer, delta as evidence
Contracted revenue
A$1.42m
18.4%vs last season
Weighted pipeline
A$684k
A$96kthis month
Inventory sold
61%
No change28 of 46 assets
Renewals at risk
3
A$212kexposed
Steppers, tabs and breadcrumbs
Organisation
Audience
3Commercial position
4Goals
Data display
Density is a product permission. Tables run dense on desktop and become stacked records below 640px rather than trapping the user in a horizontal scroll.
| Asset | Category | Status | Reach | Rate (A$) | Actions |
|---|---|---|---|---|---|
| Northern Stand LED perimeter | Signage & physical | Sold | 2,140,000 | 185,000 | |
| Season naming rights | Naming & title rights | On hold | 6,800,000 | 720,000 | |
| Match highlights pre-roll | Digital & content | Unsold | 1,260,000 | 64,500 |
Kanban
Contacted2
Corella Airlines71
Travel · A$90k–130k
Proposal sent1
Sunline Energy92
Energy · A$240k–310k
Won0
Avatars & list rows
JT
Jordan Tavita
Commercial Manager · Owner
RM
KP
+3
AW
A. Whitfield
Marquee consultant · Valuation & rate card
Charts
Hand-built SVG, no charting library and no CDN. Every chart carries direct labels and ships with a table alternative, so colour is never the only encoding.
Overlays
Popovers scale in from their trigger. Modals stay centred, because they are not anchored to one — and they are used sparingly: inline and progressive alternatives come first.
AI surfaces
Generated content has a consistent visual signature so it is always distinguishable from data the user entered. The user can see what the model produced, edit it, and send it for consultant review.
VALUATION COPILOT
Highlighted figures use the signal lime: A$185,000 — the one colour reserved for the number that matters most on a screen.
Motion
Custom curves, because the CSS built-ins are too weak to read as intent. Exit is always faster than enter. Keyboard-initiated actions do not animate at all.
| Token | Value | Used for |
|---|---|---|
| --ease-out | cubic-bezier(0.23, 1, 0.32, 1) | Anything entering or exiting. Starts fast, so it feels responsive. |
| --ease-in-out | cubic-bezier(0.77, 0, 0.175, 1) | Elements moving or morphing on screen. |
| --ease-drawer | cubic-bezier(0.32, 0.72, 0, 1) | Drawers and sheets. The iOS-like curve. |
| --dur-press | 120ms | Button press feedback, scale to 0.97. |
| --dur-fast | 160ms | Hover, tooltip, menu item. |
| --dur | 200ms | Dropdowns, tabs, toasts. |
| --dur-panel | 260ms | Drawers and modals entering. |
Reduced motion is not optional
Every animation has a
prefers-reduced-motion: reduce alternative:
movement is dropped, opacity and colour transitions are kept because they carry meaning.
No content is ever gated behind a reveal that could fail to fire.Icons
One hand-built 24×24 sprite, single 1.5px stroke, round caps and joins. No emoji are used as icons anywhere in this build.