# The dash & dot motif — applications (Chanu's idea)

Chanu: *"I wonder if there's a way to bring the different dashes/dots in more — for example
between debate records?"* and *"there's a lot we can do with the broadcast motif to make the
page kinetic … it could pulse on hover and on page load."*

The Hemicycle/Broadcast identity is built from **rings of fine dashes and dots** (the
"record rings" / broadcast arcs). That same atom can become a working part of the UI, not
just decoration. Concrete uses (see `dash-dot-applications.png` for a visual specimen):

## Static / structural

1. **Record dividers.** Between debate records and between speeches in a sitting, use a
   divider made of the dash/dot rhythm instead of a plain hairline — a subtle "tick-tape"
   that reads as the record being laid down. Density can vary by hierarchy (debate break vs
   speech break).
2. **Dotted leaders → provenance.** Connect a speech/record on the left to its Hansard
   citation (date · page · column) on the right with classic dotted leader lines (as in an
   index or table of contents). This ties the motif directly to the platform's core promise
   — traceability — and is unmistakably "a record".
3. **Activity dots (dot-sparkline).** Encode an MP's participation/attendance across sittings
   as a row of filled/empty dots; a quiet, countable, non-judgemental alternative to a chart.
4. **Sitting timeline.** Dots along a horizontal axis mark sittings; denser clusters show
   busy periods. Dot = one sitting; click to open.
5. **Kicker rules.** A short dashed rule under uppercase section kickers, echoing the rings.
6. **Search/topic density.** A topic's prominence over time as a dotted density strip.

## Kinetic (build-time, Svelte)

7. **Broadcast pulse on load & hover.** The mark's concentric arcs animate outward once on
   page load (a single calm "broadcast"), and ripple on hover/focus of the logo and of
   "live sitting" indicators. Respect `prefers-reduced-motion` (fall back to static).
8. **Streaming dividers.** When new records load (infinite scroll / live sitting), the
   dash-divider draws in left-to-right as a subtle "incoming signal".
9. **Dot fill on scroll.** Activity-dot rows fill in as they scroll into view.

## Guardrails

- Motion is **calm and rare** — a record of government, not a dashboard; one pulse on load,
  gentle hover, nothing looping or attention-grabbing. Always honour reduced-motion.
- The motif stays **monochrome by default**; the single accent (whichever colour we pick) is
  used sparingly within it (e.g. the origin dot, the "now" marker on a timeline).
- Keep it **legible and countable** — dots that mean something (sittings, speeches,
  attendance) beat purely decorative ones.

These become real components in `design/DESIGN.md` / the Svelte build: `RecordDivider`,
`DottedLeader`, `ActivityDots`, `BroadcastPulse`, `SittingTimeline`.