Onboarding artwork as full-bleed landscape masters #39

New Issue

Closed

opened 2026-08-18 22:47:09 -05:00 by null · 1 comment

null commented

2026-08-18 22:47:09 -05:00

Owner

The onboarding illustrations read as stickers rather than as artwork, and the fix is not a code change.

What is true now

Measured on the Pixel 6 profile, 411 × 914 dp:

	height	width
Steps 3 and 6	11.4% of screen	18.9%
Best case (Welcome, 160 dp)	17.5%	29.1%
Modern onboarding convention	25–40%	60–85%

There is no high-resolution master. docs/design/dist/Light/ and Dark/ hold 365–553 × 481–488 px files — the same pixels as the shipped core/designsystem/src/main/res/drawable*/art_*.webp at 480 px tall. Rendering at 280 dp needs 735 px at 2.625×, 840 px at 3× and 1120 px at 4×, so enlarging what exists means a 1.5–2.3× upscale and visible softness. Even today's 160 dp already upscales 1.3× on xxxhdpi.

The background cannot be removed programmatically. It is a gradient landscape, not a flat field: sampled edge pixels on art_welcome.webp run (233,231,243), (227,212,231) and (243,236,241). No flood fill or chroma key applies, and no background-removal tool is installed on this machine.

The generator already produces what is needed: docs/design/brand/icon.webp and docs/design/dist/splash.webp are 1254 × 1254 with real alpha, while the onboarding set arrived at 365 × 488 with none.

The decision

Keep the scene — the sunrise landscape is the brand, not decoration — and present it full-bleed, fading into the app background, at roughly 30% of screen height.

What to produce

Eight illustrations × two themes, replacing the current set, delivered into docs/design/dist/Light/ and Dark/ under the existing stem names so dist/README.md's mapping table stays true.

3:2 landscape, 2048 × 1365 minimum. Full width at 411 dp on a 4× device is 1644 px; 2048 leaves headroom and covers tablets.
This is a recomposition, not a crop. The current set is portrait 0.748:1 — cropping it to 3:2 removes the top and bottom of every scene.
Light and dark identical in dimensions per illustration, per docs/design/dist/README.md, so a theme switch never moves the layout.
Subject centred within the middle 60% horizontally: the band is cropped horizontally on narrow screens.
Keep the bottom ~25% free of subject matter — a fade scrim covers it.
No rounded corners and no card frame. The art is edge-to-edge now.

Traps

Each of these was a correction during an earlier review and each is easy to reintroduce by regenerating carelessly. docs/design/dist/README.md records all four with reasons:

No text painted into the pixels. The app renders every title through Heading(...); baked text prints twice, cannot be translated, cannot scale with the user's font size, and is invisible to TalkBack.
No step-number badges. LearningIllustration is also the Insights empty state, where a number means nothing, and baked numbers freeze a running order this flow has already changed once.
07_Forecast names no fields. No "fertile window", no "ovulation", no confidence value — the live forecast beside it declines to estimate fertility on a first run, and art that contradicts it is the one thing §11 and §18 exist to prevent.
The dark set is a real dark composition, not the light one dimmed — the midnight-plum ground BRAND_GUIDE.md §14 specifies.

Brand constraints: start from BRAND_GUIDE.md §22's master prompt, with §15 (semi-3D depth, soft glow, no harsh shadows), §16 (rounded geometry) and §23 (dusty rose not bubblegum, plum not electric violet, botanicals elegant and secondary). §42's forbidden list applies to every in-app illustration per docs/design/README.md — no blood drops, tampons, pads, uterus imagery, gender symbols or anatomy, because this app is opened in public.

Why filed and not fixed

An agent cannot draw these, and must not fake them — the same reason the three branding marks waited for a person. The app-side work is separate and can land first.

Verify: sixteen files exist in docs/design/dist/Light/ and Dark/ under the existing stem names, each at least 2048 px wide in 3:2, each light/dark pair identical in dimensions, and none carrying text, a step number, or a named forecast field.

The onboarding illustrations read as stickers rather than as artwork, and the fix is not a code change. ## What is true now Measured on the Pixel 6 profile, 411 × 914 dp: | | height | width | | --- | --- | --- | | Steps 3 and 6 | **11.4%** of screen | 18.9% | | Best case (Welcome, 160 dp) | **17.5%** | 29.1% | | Modern onboarding convention | 25–40% | 60–85% | **There is no high-resolution master.** `docs/design/dist/Light/` and `Dark/` hold 365–553 × 481–488 px files — the same pixels as the shipped `core/designsystem/src/main/res/drawable*/art_*.webp` at 480 px tall. Rendering at 280 dp needs 735 px at 2.625×, 840 px at 3× and 1120 px at 4×, so enlarging what exists means a 1.5–2.3× upscale and visible softness. Even today's 160 dp already upscales 1.3× on xxxhdpi. **The background cannot be removed programmatically.** It is a gradient landscape, not a flat field: sampled edge pixels on `art_welcome.webp` run `(233,231,243)`, `(227,212,231)` and `(243,236,241)`. No flood fill or chroma key applies, and no background-removal tool is installed on this machine. The generator already produces what is needed: `docs/design/brand/icon.webp` and `docs/design/dist/splash.webp` are 1254 × 1254 with real alpha, while the onboarding set arrived at 365 × 488 with none. ## The decision Keep the scene — the sunrise landscape is the brand, not decoration — and present it **full-bleed**, fading into the app background, at roughly 30% of screen height. ## What to produce Eight illustrations × two themes, replacing the current set, delivered into `docs/design/dist/Light/` and `Dark/` under the existing stem names so `dist/README.md`'s mapping table stays true. - **3:2 landscape, 2048 × 1365 minimum.** Full width at 411 dp on a 4× device is 1644 px; 2048 leaves headroom and covers tablets. - This is a **recomposition, not a crop.** The current set is portrait 0.748:1 — cropping it to 3:2 removes the top and bottom of every scene. - Light and dark **identical in dimensions per illustration**, per `docs/design/dist/README.md`, so a theme switch never moves the layout. - Subject centred within the **middle 60% horizontally**: the band is cropped horizontally on narrow screens. - Keep the **bottom ~25% free of subject matter** — a fade scrim covers it. - **No rounded corners and no card frame.** The art is edge-to-edge now. ## Traps Each of these was a correction during an earlier review and each is easy to reintroduce by regenerating carelessly. `docs/design/dist/README.md` records all four with reasons: - **No text painted into the pixels.** The app renders every title through `Heading(...)`; baked text prints twice, cannot be translated, cannot scale with the user's font size, and is invisible to TalkBack. - **No step-number badges.** `LearningIllustration` is also the Insights empty state, where a number means nothing, and baked numbers freeze a running order this flow has already changed once. - **`07_Forecast` names no fields.** No "fertile window", no "ovulation", no confidence value — the live forecast beside it declines to estimate fertility on a first run, and art that contradicts it is the one thing §11 and §18 exist to prevent. - **The dark set is a real dark composition**, not the light one dimmed — the midnight-plum ground `BRAND_GUIDE.md` §14 specifies. Brand constraints: start from `BRAND_GUIDE.md` §22's master prompt, with §15 (semi-3D depth, soft glow, no harsh shadows), §16 (rounded geometry) and §23 (dusty rose not bubblegum, plum not electric violet, botanicals elegant and secondary). §42's forbidden list applies to every in-app illustration per `docs/design/README.md` — no blood drops, tampons, pads, uterus imagery, gender symbols or anatomy, because this app is opened in public. ## Why filed and not fixed An agent cannot draw these, and must not fake them — the same reason the three branding marks waited for a person. The app-side work is separate and can land first. Verify: sixteen files exist in `docs/design/dist/Light/` and `Dark/` under the existing stem names, each at least 2048 px wide in 3:2, each light/dark pair identical in dimensions, and none carrying text, a step number, or a named forecast field.

null added this to the Batch 08 — Polish milestone 2026-08-18 22:47:09 -05:00

null added the

label 2026-08-18 22:47:09 -05:00

null referenced this issue from a commit

2026-08-19 00:49:26 -05:00

docs: onboarding illustrations recomposed for a full-bleed hero

null closed this issue

2026-08-19 00:49:26 -05:00

null commented

2026-08-19 01:02:55 -05:00

Author

Owner

Shipped in b74bc4b. Sixteen files at 3:2, composed natively wide — verified by measuring edge detail across each image and testing for the step change a pasted rectangle leaves; none has one, against 15 of 16 in the first attempt. Also caught and replaced a byte-identical duplicate. Note the follow-up in #44: dark 01 is a forecast scene, which this issue's uniqueness check could not catch.

Shipped in b74bc4b. Sixteen files at 3:2, composed natively wide — verified by measuring edge detail across each image and testing for the step change a pasted rectangle leaves; none has one, against 15 of 16 in the first attempt. Also caught and replaced a byte-identical duplicate. Note the follow-up in #44: dark 01 is a forecast scene, which this issue's uniqueness check could not catch.

No Label

release-blocker

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: null/Privacy-Period-Tracker#39

No description provided.