# Handoff: Lineup.health marketing site

## Overview
A marketing website for **Lineup** (lineup.health) — a clinical workforce / rostering platform for acute care hospital departments and multi-site general practices. The bundle covers a home page, four specialty "edition" pages (Anaesthesia, Theatre Nursing, Private On-Call, General Practice), Pricing, About, a contact page, and a branded Zoom background — 8 pages total.

**Copy review log (2026-08-11):** a copy pass against `docs/brand.md` and product facts made the following decisions — see `Copy - Allocation Engine Framing (for marketing review).md` for the open item.
- Competitor table on Home: named competitors (Deputy, Humanforce) generalized to "Generic shift-scheduling tools" — legal sign-off no longer needed for that row.
- Peter Mac / any named customer: **stays anonymous** across all pages for now (trust strip, etc.) — revisit once a customer relationship is public.
- Allocation engine framing ("AI-assisted" vs. mechanism-first): **still open**, pending marketing team review. Home and the new General Practice page currently use mechanism-first language; Anaesthesia still has the original "AI-assisted" language untouched as a reference point. The new Pricing page's feature table uses the literal tier-feature names already sold to a prospect ("AI-assisted allocation & desirability scoring" on Intelligence) — treated as separate from the still-open marketing-hero framing question, since it's naming a packaged feature, not making a positioning claim. See the framing doc above before touching this copy again.
- Added `Lineup-Contact.dc.html` — previously every CTA routed to the demo-booking anchor with no page for inbound contact; footer "Contact" link was a dead `href="#"`.
- Added `Lineup-for-General-Practice.dc.html`, grounded in the `dept-roster` repo's GP seed tenant (multi-site, procedural/sub-specialty credentialling, EFT-normalised part-time sessions, registrar teaching-week rotation) — not in any named customer's specifics.
- Added `Lineup-Pricing.dc.html` and `Lineup-About.dc.html` — the `#pricing`/`#about` nav anchors were dead on every page (no such sections existed anywhere). Pricing figures are sourced from `Templates/Lineup Pricing Rate Card.xlsx` (effective 5 Aug 2026); **only the monthly subscription grid is public** — setup fees stay off-page, scoped to the sales call, per the decision to publish tier×band pricing but not the full internal rate card. About is deliberately minimal (mission-first, no founder bio/team) per an explicit call not to fabricate company narrative that isn't documented anywhere.
- Every nav and footer across all 8 pages now cross-links correctly — verified with an automated tag-balance + link-resolution check, not just visual spot-checking.

Positioning line: **"Everyone in place."** — the workforce operating system for acute care departments: roster, on-call, leave, swaps and equity in one live, defensible record.

## About the design files
The `.dc.html` files in this bundle are **design references created in HTML** — prototypes showing intended look, structure and content, not production code to lift verbatim. The task is to **recreate these designs in the target codebase's environment** (Next.js/React, Astro, whatever the repo uses) with its established patterns, component library and routing — or, if no codebase exists yet, pick a suitable framework (a static-leaning React framework such as Next.js or Astro suits a marketing site) and implement there.

Each file opens directly in a browser. They use inline styles and a small runtime wrapper (`support.js`) — ignore the wrapper, read the markup inside `<x-dc>`.

**Copy refinement is expected.** The copy here was written from brand/positioning context, not from the shipped product. Please reconcile every feature claim against the actual app — see "Copy work required" below.

## Fidelity
**High fidelity.** Final colors, typography, spacing and layout. Recreate pixel-close, substituting the codebase's own primitives where they exist.

## Design direction
The chosen direction is **"Dark Command"** — a near-black hero anchored by a live-teal signal, then a light, calm editorial body. The dark tone carries authority (this is a system of record for a department under pressure); the light body keeps the product story readable.

Rules of the system:
- Dark sections: hero, problem, final CTA, footer. Light sections: everything else. Never more than two dark sections back to back.
- The pulsing teal dot = "live". Use it only for genuinely live state, never as decoration.
- Amber = attention/needs-action. Never used for branding or emphasis.
- An 8px teal baseline closes the hero section.

## Design tokens

### Color
| Token | Hex | Use |
|---|---|---|
| Ink | `#13202B` | Primary text, footer bg, table header |
| Deep | `#0E2230` | Dark section base, cards on dark |
| Deep raised | `#13293A` | Raised card on dark (hero roster card) |
| Teal Anchor | `#0F9B8E` | Primary buttons, eyebrow labels on light, baseline bar |
| Live Teal | `#15C2A8` | Live signal, accents on dark, the "." in the wordmark |
| Amber | `#F5A623` | Needs-cover / attention only |
| Body slate | `#5E7180` | Body text on light |
| Muted on dark | `#9FB0B0`, `#8FA0A9` | Secondary text on dark |
| Light on dark | `#EAF0F0` | High-contrast secondary text on dark |
| Page bg | `#F7F9F9` | Light section background |
| Surface | `#FFFFFF` | Cards, alternating sections |
| Border | `#E2E8E8` | Card borders |
| Hairline | `#ECF0F0` | Section dividers, table rows |
| Divider on dark | `rgba(255,255,255,.07)` | |

### Typography
- Display/UI: **DM Sans** (400/500/600/700) — headings, nav, buttons, labels, numerals in cards.
- Body: **Source Sans 3** (400/500/600) — paragraphs, descriptions.

| Role | Size / weight / tracking |
|---|---|
| Hero h1 | 92px / 700 / -0.04em / line-height .96 |
| Section h2 (dark) | 44px / 700 / -0.025em / 1.12 |
| Section h2 (light) | 40px / 700 / -0.025em / 1.12 |
| CTA h2 | 52px / 700 / -0.03em / 1.08 |
| Eyebrow | 13px / 600 / 0.14em / uppercase |
| Lede | 19–21px / 400 / 1.5–1.55 |
| Card title | 21–22px / 600–700 |
| Body / card copy | 16px / 1.55 |
| Button | 15–16px / 600 |
| Pill / badge | 12–13px / 600 |

### Layout & shape
- Content max-width **1240px**, horizontal padding **48px**.
- Section vertical padding **96–110px** (hero 72px top / 96px bottom).
- Radii: buttons/inputs **10–11px**, cards **16px**, feature/hero cards **18px**, pills **100px**, icon tiles **11px**.
- Card grid gap **22–24px**; feature grid 3 columns.
- Shadows: hero card `0 34px 80px -26px rgba(0,0,0,.55)`; light-section dark card `0 30px 70px -28px rgba(14,34,48,.5)`.
- Animation: `lu-pulse` — 1.8s ease-in-out infinite, `opacity 1→.4`, `scale 1→.8` at 50%. The only motion in the design.

## Screens

### 1. Home (`Lineup-Home.dc.html`)
Sections in order:
1. **Hero (dark)** — sticky-feel top nav (wordmark `lineup.`, links Product / Specialties / Pricing / About, "Sign in", teal CTA "See your department in Lineup"). Two-column body at `1.05fr .95fr`, 56px gap: left = live-pill eyebrow + h1 "Everyone in place." + lede + two CTAs; right = **live roster card** (`This week · Anaesthesia`, Live badge, four rows — Theatre 1 · Dr Ahn "Full", Theatre 4 · List 4 "Needs cover" (amber inset ring), On call · Dr Nguyen "Covering", Dr Lowe "Leave" — plus a footer ticker "4 lists · 1 gap · resolving" / "Dr Nguyen can move →"). Background: dark gradient over a flowing-grid image, plus a radial teal glow top-right. Closes with the 8px teal bar.
2. **Trust strip (white)** — "BUILT INSIDE A WORKING DEPARTMENT" left; right: Fatigue-rule aware · EBA compliant · On-call chains · Credentialling.
3. **Problem (dark)** — h2 "The department runs on memory, and the leader carries it." + three cards: The spreadsheet / The group chat / Memory.
4. **Feature grid (light)** — h2 "One system, the whole department." + six cards: Roster, Coverage, On-call, Leave, Swaps, Equity. Icons are simple CSS shapes in a teal-tinted 44px tile.
5. **Clinical complexity (white)** — two columns: left checklist (fatigue legislation, EBA constraints, on-call chains, credentialling/skill mix); right a dark **call-equity card** with four horizontal bars (Dr Patel 12, Nguyen 11, Ahn 11, Lowe 10) and the line "Exportable. Defensible. Every allocation on the record."
6. **Competitive frame (light)** — 3-column table, dark header row: Replacing / Why it fails the department / Lineup's position. Rows: Excel-Sheets, Group chats, Deputy & Humanforce, Hospital IT suites.
7. **Specialties (white)** — three image-topped cards linking to the three edition pages.
8. **Final CTA (dark)** — "See your department in Lineup." + "Book a walkthrough" / "Watch the 2-min tour →".
9. **Footer (ink)** — wordmark `lineup.health`, blurb, three link columns (Product / Specialties / Company), legal bar.

### 2–5. Specialty editions
- `Lineup-for-Anaesthesia.dc.html` — the launch edition: specialists & trainees, sub-specialty credentialling, allocations that stay auditable.
- `Lineup-for-Theatre-Nursing.dc.html` — skill mix, seniority, specialty competencies, recall and on-call as theatres actually run them.
- `Lineup-for-Private-On-Call.dc.html` — high-reliability on-call across sites; hospital and providers always know who's on.
- `Lineup-for-General-Practice.dc.html` — multi-site practices: site-eligibility gating, procedural/sub-specialty credentialling (skin cancer medicine, antenatal shared care, travel medicine, minor procedures), duty doctor and after-hours on-call, EFT-normalised session equity, registrar teaching-week rotation. Reuses `network-sites.png` as a placeholder hero image (see in-file asset note) — commission dedicated art before ship.

They follow the home page's system exactly (same nav, same section rhythm, same tokens). Route them as `/for/anaesthesia`, `/for/theatre-nursing`, `/for/private-on-call`, `/for/general-practice` or similar; the home Specialties grid (now 2×2) and every footer link to them.

### 6. Contact (`Lineup-Contact.dc.html`)
Standalone contact page for inbound leads not ready to book a walkthrough — compact dark header (not a full hero), a form (name, work email, organisation, specialty of interest, message — static, no submit handler wired yet), and a direct-contact card with a "book a walkthrough" alternate CTA and a placeholder email address (`hello@lineup.health` — confirm the real inbox before ship). Route as `/contact`; every page's footer now links here instead of the previous dead `href="#"`.

### 7. Pricing (`Lineup-Pricing.dc.html`)
Compact dark header, three tier cards (Essentials/Operations/Intelligence) with "from" pricing and a short feature list each, a full tier×band monthly-price grid, a full feature-comparison table, and fine print (12-month term, 60 days' notice, GST-exclusive, custom-quote threshold). Route as `/pricing`. **Setup fees are intentionally not shown** — see the copy-review log above. Figures need re-checking against the rate card if it changes; nothing here recalculates automatically since this is static HTML.

### 8. About (`Lineup-About.dc.html`)
Deliberately minimal — compact dark header, one short mission-first body section, no founder bio or team section, standard final CTA and footer. Route as `/about`. Expand later if/when there's a documented company story to draw from.

### 9. Zoom background (`Lineup-Zoom-Background.dc.html`)
1920×1080 static brand background — not part of the site. Export as PNG for team use.

## Interactions & behavior
The prototypes are static. Intended behavior:
- Nav links: `#product` and `#specialties` jump to in-page anchors on Home; Pricing and About are now separate page routes (see above); `#demo` is an in-page anchor on every page that has a final-CTA section. Consider a sticky nav that gains a solid `#0E2230` background on scroll past the hero/header.
- Both primary CTAs ("See your department in Lineup", "Book a walkthrough") open the demo-booking flow. "Watch the 2-min tour →" opens a video modal — asset not yet supplied.
- Buttons: darken `#0F9B8E → #0D8578` on hover; cards lift subtly (translateY -2px + shadow) on hover; links on dark go `#9FB0B0 → #FFFFFF`.
- The live pulse dot should respect `prefers-reduced-motion`.

## Responsive (built 2026-08-11)
All 8 pages are now fully responsive, not just a desktop mockup with a note saying "collapse this later." Breakpoints: 1024px (grids go single-column, section padding tightens) and 640px (type scales down further, CTA rows stack, horizontal padding tightens).

**Mobile nav — pure CSS, deliberately no JS.** Below 900px the nav collapses to a hamburger that opens a full-width dropdown panel (links, Sign in, primary CTA, stacked). It's built with a hidden checkbox + `<label for>` + CSS `:checked ~` sibling selectors, not an `onclick` handler. **This matters and isn't a stylistic choice**: these pages render through `support.js`'s React-based template runtime, which parses `onclick="..."` as a literal string prop — React silently drops it, so a plain inline handler would look correct in the markup and simply not fire on a real tap. The checkbox hack is native browser behavior the runtime can't intercept. **Verified**: the toggle mechanism was confirmed correct via direct DOM/CSS inspection (checkbox `:checked` state correctly drives `display` and the hamburger→X morph). A real tap-through-the-tool end-to-end check could not be completed this session — the browser tool's click action was timing out for unrelated reasons — so double-check on an actual phone before treating this as fully signed off. In the real Next.js/React build, replace with normal `useState` + `onClick`; there's no reason to keep the CSS-only trick once you're not fighting a template runtime.

**Deliberate mobile-specific decisions, not just reflow** (per explicit direction to rethink content for mobile, not only shrink desktop):
- Every 2-column "proof" section (Home's equity card, each specialty page's allocation-check/skill-mix card, Private On-Call's stat cards) reorders so the **visual/data card leads on mobile**, checklist text follows — these are skimmable at a glance in a way paragraph text isn't, and the visual is the more natural first thing to hit after a scroll. The hero itself is the deliberate exception — text and CTA stay first there so the primary action isn't pushed below a large card.
- Home's 6-card feature grid compacts to a horizontal icon+text row layout below 640px (not just narrower cards) — a scannable list instead of 6 tall stacked cards.
- Home's competitive-comparison table becomes labeled stacked cards below 1024px (header row hidden, `::before`-generated "Why it fails" / "Lineup's position" labels appear inline) — this was already specced in the original handoff, now actually built.
- Pricing's 5-column tier×band grid becomes three per-tier stacked cards below 900px (duplicate markup, toggled by `display`, same underlying numbers) rather than a horizontally-scrolled table. The 17-row feature-comparison table, by contrast, stays a real table with `overflow-x:auto` and a "Swipe to compare →" hint — restructuring that one into per-tier accordions was judged not worth the markup duplication for a design reference; reconsider if this page gets real traffic.

## State management
None beyond the mobile-nav toggle (see above — pure CSS) and the optional video modal. Two content flags exist in the prototype (`showTourCta`, `showLiveTicker`) — treat as CMS/config booleans if useful, otherwise hardcode true.

## Copy work required
Reconcile against the real product before shipping:
- ~~The six feature names (Roster, Coverage, On-call, Leave, Swaps, Equity)~~ — **resolved 2026-08-11**, reconciled against `dept-roster`'s actual nav (`components/top-nav.tsx`). "Coverage" wasn't a real module (the actual feature is a "Sick-call coverage gaps" dashboard widget); "Leave" and "Swaps" are real but live as sub-tabs of "Requests," not top-level peers of Roster; "Equity" is two separate reports, not one. Home's feature grid is now **Roster, On-call, Requests, Meetings & CPD, Equity, Planning** — matches the app's actual top-level information architecture, and picks up two real shipped modules (Meetings/CPD, Planning) that weren't represented at all before. Footer "Product" column updated to match (Coverage → Requests). If the app's nav structure changes again, re-check `components/top-nav.tsx` before trusting this list.
- ~~The clinical-complexity checklist (fatigue legislation, EBA constraints, on-call chains, credentialling/skill mix)~~ — **resolved 2026-08-11, and this one mattered**. Verified against `dept-roster`'s engine code, not just the nav. Two claims were **fully fabricated, not just imprecise** — no fatigue-legislation or safe-hours logic exists anywhere in the codebase, and no EBA (enterprise bargaining agreement) rule modeling exists; the one config field that could be mistaken for either has a migration comment explicitly calling it future work. Both were live as **trust-strip badges directly under the hero** ("Fatigue-rule aware," "EBA compliant") — the single most exposed spot on the site for a hospital's procurement/legal reviewer to check and find nothing behind. Also found and fixed:
  - Theatre Nursing's entire "recall" narrative (hero lede, a value-prop card, two checklist items, a CTA line, an illustrative UI row) — **recall doesn't exist in the app in any form**, not even as tracked data. Rewritten around what's real: credentialled on-call pool allocation with automatic gap alerts before publish.
  - Anaesthesia's "every trainee mapped to a supervising consultant" — no persistent supervisor mapping exists; reality is junior (L1/L2) trainees are hard-blocked from unsupervised sessions, senior trainees aren't. Reworded to the narrower, true claim.
  - Anaesthesia's "safe-hours and post-call rules enforced automatically" — post-call is a UI display glyph only; rest-period is a soft scoring penalty plus an *overridable* publish-flag, not a hard block. Softened to "flagged before publish."
  - The Anaesthesia allocation-check card's "Hours this week 38 / 48" — invented; no hours cap or weekly tally exists anywhere in the app. Swapped for fields with real backing (consultant-in-room, on-call pool eligibility).
  - GP page's "offset across registrars" (teaching weeks) — the rotation-wheel mechanism is real and general; the collision-avoiding auto-offset is currently seed-script-only (`scripts/seed-gp-roster.mts`), not a live app feature. Softened accordingly.
  - "Compliant" badge on both Anaesthesia's and GP's allocation-check cards renamed to "Cleared" — given the above, "compliant" is exactly the word this whole pass was checking for, and shouldn't survive as a UI badge label either.
  - Home's trust strip rebuilt entirely: `Fatigue-rule aware · EBA compliant · On-call chains · Credentialling` → `Credential-gated allocation · On-call gap alerts · EFT-normalised equity` — three claims, all confirmed real and hard-enforced at allocation time.

  If any of this needs re-checking later, the load-bearing files are `components/top-nav.tsx` (nav structure), `lib/engine/layer3TraineeAlloc.ts` (credential/site gating, trainee supervision), `lib/engine/onCallEngine.ts` (on-call pool allocation, rest-period scoring), and `supabase/migrations/00000000000070_full_time_hours_config.sql` (the migration comment confirming fatigue/EBA logic is unbuilt).
- The clinical-complexity checklist (fatigue legislation, EBA constraints, on-call chains, credentialling/skill mix) — confirm each is actually enforced, and how.
- ~~"AI-assisted allocations that are auditable and defensible" on the Anaesthesia page~~ — **open**, see `Copy - Allocation Engine Framing (for marketing review).md`. Note "AI-assisted allocation & desirability scoring" is an Intelligence-tier (top-tier) feature per the current rate card — don't let the public site imply it's included at every tier.
- ~~The competitive table names Deputy and Humanforce~~ — **resolved**, generalized to "Generic shift-scheduling tools."
- All roster/equity card data is illustrative and should be replaced with a realistic anonymised sample or a real screenshot. This now also applies to the General Practice page's card (illustrative names drawn loosely from the `dept-roster` GP seed tenant, not a literal 1:1 credential match).
- ~~Pricing (`#pricing`) and About (`#about`) are linked from every nav... but neither exists yet~~ — **resolved**, see `Lineup-Pricing.dc.html` and `Lineup-About.dc.html`. Pricing numbers should be re-verified against the rate card before every ship, not just once — nothing on this static page updates itself if the rate card changes.
- Contact form has no submit handler — wire it to whatever the target codebase uses before ship, and confirm the placeholder `hello@lineup.health` address.

## Assets
`assets/img/` contains the abstract background images used in section backgrounds — `flowing-grid.png` (hero, Anaesthesia card), `data-viz.png` (problem section), `interlocking-grids.png` (Theatre Nursing card), `network-sites.png` (Private On-Call card), `title-bg.png` (final CTA). `assets/lineup-logo-light.png` and `assets/lineup-mark-sizes.png` are the logo files. Fonts load from Google Fonts.

## Files
- `Lineup-Home.dc.html`
- `Lineup-for-Anaesthesia.dc.html`
- `Lineup-for-Theatre-Nursing.dc.html`
- `Lineup-for-Private-On-Call.dc.html`
- `Lineup-for-General-Practice.dc.html`
- `Lineup-Contact.dc.html`
- `Lineup-Pricing.dc.html`
- `Lineup-About.dc.html`
- `Lineup-Zoom-Background.dc.html`
- `Lineup Home Directions.dc.html` — the three explored directions; **1C "Dark Command" is the chosen one** and is what the pages above are built on. Reference only.
- `Copy - Allocation Engine Framing (for marketing review).md` — open decision, read before touching allocation-engine copy anywhere.
- `support.js` — runtime needed to open the HTML files locally. Not for production.
- `assets/`