# Duotone poster app — black stage / lime volume, one saturated gesture colour

Learned 2026-08-13 replicating reference R#5 (node 158:4345, a 3-screen
mobile mockup for a music-festival app "Femme Fest" → replica frames
under "R#5-replica / Screen 1–3", page Glass Morphism, Quorra v.0).
Flattened raster reference, three screens in one PNG; no vector data to
copy, palette measured by histogram, not eyeballed.

- **Palette, measured by dominant-color count across all three
  screenshots** (sampling every 4th pixel, `Counter.most_common`), not
  sampled at guessed coordinates: stage `#101010`, gesture violet
  `#5419EC`, acid lime `#B9E422`, white, and one lighter violet tint
  `#BC7BFE` reserved for the active nav icon's pill only. Four colours
  total outside the photography — the discipline is close to this
  ledger's *Edge-lit active row* entry (one saturated colour in an
  otherwise neutral frame), except here the "row" is the whole page:
  screens 2 and 3 go full-bleed lime rather than accenting a corner.
- **Duotone photography carries the screen's own background colour as
  its highlight, not white.** On the black-stage screen the tiles are
  black+white-ish duotone on a lime backing square; on the lime-stage
  screens the portraits ARE black+lime duotone directly — the subject
  and the page share one light source. Building tiles as "photo on a
  separate coloured backing" versus "photo duotoned INTO the page
  colour" look different at a glance; this reference does the second.
- **Grain is file-wide, not corner-only.** Every surface — black stage,
  lime page, even the tile squares — carries visible monochrome
  speckle. A `NOISE` effect at low density read as no grain at all in
  a first pass; matching the reference's visible speckle needed
  `density: 1, color α ≈ 0.14`, roughly triple the strength a
  first-glance read suggests.
- **The bottom nav's active state is a filled rounded-square pill in
  the lighter violet tint, sized to the icon's tap target** (not the
  scribble violet — a separate, lighter value exists solely for this).
- **The violet "sticker backing"**: an irregular, angular polygon
  (not a smooth blob) sits behind the subject's cutout, offset so it
  peeks out unevenly — more on one edge than the opposite one. Built as
  a plain solid-fill vector polygon; the effect reads as a mixtape
  sticker peeled on crooked, not a shadow or a stroke.
- **Rotated ticker rail**: a single text node containing the repeated
  string, rotated -90°, positioned by its OWN measured `width` (the
  long, unrotated dimension) — not `height`, which is the short one.
  Figma's `rotation` pivots around the node's un-rotated top-left
  corner and does not move `x`/`y` for you: read `node.width` *after*
  setting rotation, then place the pivot at
  `x = trackWidth - stripThickness/2 + textHeight/2`,
  `y = margin + textWidth`, so it sweeps to fill the strip rather than
  clip to a 16px sliver. Reaching for `height` here (an easy mistake —
  the rotated text visually reads as tall) was the exact failure mode
  this ledger's earlier vector-arc lesson warns about: measure the
  API's own numbers, not what the shape looks like it should be.
- **`vectorPaths` rejects SVG arc commands (`A`)** — confirmed again
  here on icon glyphs; circles/rings must be separate ellipse nodes,
  never an arc segment in a path string, echoing the earlier
  *Dark glass element sheet* entry's Bézier-circle lesson but for a
  different primitive (UI icons, not a decorative ring).
- **Medium decision, not a shortcut**: this build tool has no
  `createImageAsync` — bitmap fills cannot be created by script at all.
  Every photographic portrait became a flat black silhouette in the
  subject's place. The duotone/grid/grain technique transplants
  faithfully; no likeness of any named person was reconstructed or
  invented.
- **A large hero-scale silhouette needs to read as a deliberate mark,
  not an attempted likeness — and anatomical approximation fights that.**
  A small avatar-sized head-circle + shoulder-shape reads fine as a
  generic UI icon (screens 1–2's grid tiles). Scaled up to fill most of
  a screen (screen 3's hero portrait), the same two-primitive
  "snowman" silhouette read as broken rather than stylized — confirmed
  by the operator's direct reaction. Two follow-up attempts at a
  closer anatomical outline made it worse: a hand-authored bezier path
  produced lumpy, uncontrolled bulges, and `figma.union()` of a head
  ellipse + torso ellipse + a rectangle meant to crop the bottom just
  added the rectangle's shape instead of subtracting it (`union` only
  adds; cropping needs `figma.subtract()`), which also surfaced a fill
  bug — the unioned node did not reliably keep the source shapes'
  fill. What actually worked: one single ellipse, no anatomy attempted.
  At hero scale, a clean abstract silhouette beats a rough anatomical
  one — the same "does it read as intentional" test the grain and the
  sticker-backing choices already had to pass.
- **Connotes**: duotone photography over a single saturated background
  is concert-poster and mixtape-cover vocabulary — the portrait becomes
  a printed object, not a captured document, and sharing one light
  source with the page background is what sells that. The single
  gesture colour (violet) carries every hand-drawn mark — scribble,
  sparkle, sticker backing — the same "one saturated colour is a
  signature, not a system token" reading as the *Edge-lit active row*
  entry's magenta, but spent here on gesture rather than on state.
  Black nameplate boxes read as cassette-label stickers pasted over the
  image rather than laid out with it; a rotated ticker of stage/date
  info borrows backstage-pass typography as page furniture; and
  "Headliner" sitting bare with no chip is the one word in the whole
  UI confident enough to need no frame.