# Clinical wellness app — light stage, one live-orange accent, floating cards

Learned 2026-08-13 replicating reference R#6 (node 160:4349, a 3-screen
health-app mockup for heart-rate monitoring → replica frames under
"R#6-replica / Screen 1–3", page Clinical Wellness, Quorra v.0). New
page, not the existing Glass Morphism one — this genre (light, clinical,
floating card) shares nothing visually with the dark/glass/poster
entries already in this ledger.

- **`listAvailableFontsAsync()` can list a font that does not actually
  render.** "SF Pro Rounded" appeared in the results and `loadFontAsync`
  did not throw, but every text node built with it measured `width: 0`
  regardless of `textAutoResize` mode — the font is listed but broken in
  this rendering path. Confirmed by swapping one node to Nunito and
  seeing it measure correctly (116×23 for a 17px string that had
  measured 0×15 a moment before). Fix: verify a *new* font by checking
  one real node's `.width` after building it, not just by checking it
  appears in `listAvailableFontsAsync()` or that `loadFontAsync`
  resolved without error — neither guarantees the glyphs actually paint.
  Nunito substituted throughout; visually close (same rounded-geometric
  family) and confirmed to work.
- **The hero-scale silhouette lesson from R#5 applied cleanly here,
  first try.** The reference's centerpiece is a photorealistic 3D
  anatomical heart (visible chambers, vessels, specular highlights) —
  no `createImageAsync`, so it can't be reconstructed. Built instead as
  a flat two-lobe heart silhouette (the universal glyph, not an organ
  diagram) with a two-stop linear gradient for a little dimension.
  Landed right on the first attempt, unlike R#5's three-pass fight with
  the portrait — the difference: a heart glyph already has a canonical
  simple shape everyone recognizes, so "simplify to the recognizable
  abstraction" had an obvious target. A less iconic subject (a face, a
  gesture) may not.
- **Ellipse `arcData` is the progress-ring primitive** — `{
  startingAngle, endingAngle, innerRadius }` in radians on an `ELLIPSE`
  node with a stroke, not a hand-built vector arc (which `vectorPaths`
  cannot express at all — see this ledger's earlier Bézier-circle
  lesson). For a *complete* ring, omit `arcData` entirely or set the
  sweep to a full `2π`; a near-full sweep left open by even `0.01`
  radians with `strokeCap: "ROUND"` produced a visible seam where the
  two rounded end-caps sat side by side.
- **Palette stays to two roles outside black/white/gray**: canvas gray
  `#B3B3B3`, card near-white `#F5F5F5`, and one accent, `#F06B1A`,
  carrying every live signal (waveform, chart bars, alert banner, notify
  dot) — structurally the same one-saturated-colour discipline as this
  ledger's *Edge-lit active row* and *Duotone poster* entries, but here
  the "row" is data itself: nothing else on the page is ever this
  colour.
- **Layered cards read as "live/overlapping," flush cards read as
  "static/administrative."** The reference offsets its two summary
  cards so one's corner tucks under the other, each with its own drop
  shadow at a different depth — a first build placed them flush,
  side-by-side, and a blind diff caught it immediately as the most
  visible layout gap. The offset-and-shadow read as real-time data
  competing for space; flush cards read like a settings form.
- **A stray character in the reference's own copy is a citation, not a
  bug**: the alert banner's closing line ends `"for your age group""` —
  an extra quotation mark, almost certainly the original mockup
  author's typo. Reproduced as-is rather than corrected, on the same
  rule that keeps a garbled AI-reference's melted glyphs legible-but-
  faithful elsewhere in this ledger: the reference's own text is quoted
  material, not prose to edit.
- **Connotes**: the light gray stage plus a floating white card with a
  soft shadow is the same visual grammar as Apple Health, Oura, Whoop —
  calm and clinical without reading as a hospital chart, closer to
  premium packaging than to medical equipment. Orange as the single
  live colour reads as warmth/vitality rather than alarm — nothing here
  borrows red's "danger" connotation even though it is a health metric.
  The oversized thin numeral ("95") staged with a small unit label
  mimics a sports-watch dial, where the reading is the hero and its
  context is deliberately quiet. The full progress ring around the
  timer is now a cross-product convention (Apple Watch rings) for "in
  progress, keep going" — legible before any text is read. And wrapping
  a plain statistic ("+5%") in a solid-orange pill turns a measurement
  into praise — the banner's job is encouragement, not disclosure.