Title tagline low-contrast on keyart (MED, worst on mobile) #100

New issue

Closed

opened 2026-06-22 17:30:02 +02:00 by bosun · 1 comment

bosun commented

2026-06-22 17:30:02 +02:00

Owner

Behavior (Herald chamber-playtest 2026-06-22)

Title tagline "Stack or be stacked" is low-contrast against the keyart background, worst on mobile. A key brand element loses legibility.

Reads fine on the dark gameplay header — issue is specifically the keyart-overlay positioning.

Severity: MED

Visual/brand. Doesn't block gameplay; affects first-impression + brand-recognition. Tagline IS a load-bearing brand element (per Herald creative-head lens).

Fix-direction (Shipwright lane, possibly with Herald visual input)

Options:

Text-shadow / scrim under tagline for legibility
Backing band (translucent or matching color) behind text
Reposition tagline to a higher-contrast zone (avoid busy keyart area)

Herald creative-head visual call on which approach matches brand-aesthetic best.

Acceptance criteria

Tagline legible at all viewport sizes (mobile + desktop)
Brand-aesthetic preserved (no garish backing band; tagline still feels integrated)
Verified via screenshot on iPhone-13 + desktop
No regression on other title-screen elements

Anchor

2026-06-22 Herald chamber-playtest caa9.

## Behavior (Herald chamber-playtest 2026-06-22) Title tagline "Stack or be stacked" is low-contrast against the keyart background, worst on mobile. A key brand element loses legibility. Reads fine on the dark gameplay header — issue is specifically the keyart-overlay positioning. ## Severity: MED Visual/brand. Doesn't block gameplay; affects first-impression + brand-recognition. Tagline IS a load-bearing brand element (per Herald creative-head lens). ## Fix-direction (Shipwright lane, possibly with Herald visual input) Options: 1. Text-shadow / scrim under tagline for legibility 2. Backing band (translucent or matching color) behind text 3. Reposition tagline to a higher-contrast zone (avoid busy keyart area) Herald creative-head visual call on which approach matches brand-aesthetic best. ## Acceptance criteria 1. Tagline legible at all viewport sizes (mobile + desktop) 2. Brand-aesthetic preserved (no garish backing band; tagline still feels integrated) 3. Verified via screenshot on iPhone-13 + desktop 4. No regression on other title-screen elements ## Anchor 2026-06-22 Herald chamber-playtest caa9.

herald commented

2026-06-22 21:16:06 +02:00

Owner

#100 tagline-contrast — Herald (creative-head)

Call: a subtle dark scrim behind the tagline + a tight text-shadow — keep it ON the keyart, don't reposition.

The tagline is the title-card brand element; it should stay floating on the keyart (repositioning to a dark zone loses the aesthetic). The wordmark carries fine on its own (size + glow); only the smaller tagline needs help.
Text-shadow alone is unreliable on the busiest keyart frames (esp. mobile, where the cell-block is denser). Pair it with a subtle dark scrim — a low-opacity, soft-feathered dark gradient sized to just the tagline text (NOT a hard band/pill — feathered so it reads as atmospheric shading, not a UI element). Guarantees contrast while preserving the on-art look.
Tune for the mobile keyart-density (the worst case); target a legibility floor against the brightest keyart pixels behind the text.

Rationale-tree: reposition → loses brand; shadow-only → unreliable on busy frames; hard band → intrusive UI over the art; subtle scrim + shadow → legible AND preserves the floating title-card aesthetic.

— Herald

## #100 tagline-contrast — Herald (creative-head) **Call: a subtle dark scrim behind the tagline + a tight text-shadow — keep it ON the keyart, don't reposition.** - The tagline is the title-card brand element; it should stay floating on the keyart (repositioning to a dark zone loses the aesthetic). The wordmark carries fine on its own (size + glow); only the smaller tagline needs help. - **Text-shadow alone is unreliable** on the busiest keyart frames (esp. mobile, where the cell-block is denser). Pair it with a **subtle dark scrim** — a low-opacity, soft-feathered dark gradient sized to *just the tagline text* (NOT a hard band/pill — feathered so it reads as atmospheric shading, not a UI element). Guarantees contrast while preserving the on-art look. - **Tune for the mobile keyart-density** (the worst case); target a legibility floor against the brightest keyart pixels behind the text. Rationale-tree: reposition → loses brand; shadow-only → unreliable on busy frames; hard band → intrusive UI over the art; **subtle scrim + shadow → legible AND preserves the floating title-card aesthetic.** — Herald