docs: onboarding illustrations, matched light and dark

Seven illustrations in a matched pair, replacing the single light-only concept
set added in 9d2a4b2. Named for the composables they replace, and identical in
dimensions per card so a theme switch swaps the image without moving the layout.

Three corrections happened during review and each is easy to reintroduce by
regenerating carelessly, so dist/README.md records them:

- No text painted into the pixels. The app renders all seven titles through
  Heading(...) already; art carrying its own title prints every heading twice,
  cannot be translated, cannot scale with font size, and is invisible to
  TalkBack.
- No step-number badge. LearningIllustration is also the Insights empty state,
  where a "4" means nothing, and baked numbers freeze a running order that has
  already changed once.
- 07_Forecast names no fields. One draft listed Fertile window and Ovulation,
  which the first-forecast screen deliberately withholds — on a fresh install it
  reports confidence Low and Today reads "Not enough history to estimate". A
  later draft named the right fields but painted "Confidence — Low"
  permanently, wrong for anyone with a settled cycle. Naming nothing is the only
  version that cannot contradict the live forecast.

The dark set is a real dark composition rather than the light one dimmed, on the
midnight-plum ground BRAND_GUIDE.md §22 specifies.

WebP at the delivered resolution: 204 KB for all fourteen against 3.4 MB as PNG.
Delivery .zip archives are gitignored; the superseded concept set is removed and
remains recoverable at 9d2a4b2.

#29 stays open — these are references, and the vectors that ship are drawn from
them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
null 2026-08-18 19:53:23 -05:00
parent 9d2a4b2fb1
commit 081257f69c
23 changed files with 62 additions and 39 deletions

2
docs/design/dist/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
# Delivery archives — the extracted webp beside them is what is tracked.
*.zip

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -1,55 +1,76 @@
# Onboarding concept cards # Onboarding illustrations — the decided direction
``` ```
Status: Current Status: Current
Owner: _null Owner: _null
Last reviewed: 2026-08-18 Last reviewed: 2026-08-18
Governs: docs/design/dist/** — the onboarding concept set and what it is for Governs: docs/design/dist/** — the onboarding illustration set and what it is for
Review trigger: Any concept set added or replaced here; the onboarding artwork Review trigger: Any illustration added or replaced here; the onboarding artwork
in issue #29 landing in the app in issue #29 landing in the app
``` ```
> **These are references, not assets.** Nothing in this folder ships in the APK. > **References, not shipping assets.** Nothing in this folder goes in the APK.
> They are the decided *direction* for onboarding, drawn from > These are the decided direction for onboarding, drawn from
> [`../BRAND_GUIDE.md`](../BRAND_GUIDE.md) §22's master prompt, and the vectors > [`../BRAND_GUIDE.md`](../BRAND_GUIDE.md) §22's master prompt. The vectors that
> that eventually ship are drawn *from* them. > eventually ship are drawn *from* these.
Seven cards, one per onboarding step, numbered to match the steps in Seven illustrations in a matched light/dark pair, named for the composables they
`app/src/main/kotlin/dev/privacyllc/period/feature/onboarding/OnboardingScreen.kt`: replace in
[`../../../core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/art/Illustrations.kt`](../../../core/designsystem/src/main/kotlin/dev/privacyllc/period/designsystem/art/Illustrations.kt):
| File | Step | Composable | | File stem | Onboarding step | Composable |
| --- | --- | --- | | --- | --- | --- |
| `onboarding-01-welcome.webp` | 1 | `Welcome` | | `01_WelcomeIllustration` | 1 Welcome | `WelcomeIllustration` |
| `onboarding-02-last-period-start.webp` | 2 | `LastPeriod` | | `02_LastPeriodIllustration` | 2 Last period start | *new* |
| `onboarding-03-period-end.webp` | 3 | `PeriodEnd` | | `03_PeriodEndIllustration` | 3 Period end | *new* |
| `onboarding-04-previous-history.webp` | 4 | `PreviousHistory` | | `04_LearningIllustration` | 4 Previous history | `LearningIllustration` |
| `onboarding-05-privacy-promise.webp` | 5 | `PrivacyPromise` | | `05_PrivacyIllustration` | 5 Privacy promise | `PrivacyIllustration` |
| `onboarding-06-reminder-privacy.webp` | 6 | `NotificationPrivacyStep` | | `06_NotificationPrivacyIllustration` | 6 Reminder privacy | *new* |
| `onboarding-07-first-forecast.webp` | 7 | `FirstForecast` | | `07_ForecastIllustration` | 7 First forecast | *new* |
## Why they are not the shipping assets Each stem exists as `Light/<stem>_light.webp` and `Dark/<stem>_dark.webp`, at
**identical dimensions per card**, so a theme switch swaps the image without
moving the layout.
Recorded here so nobody drops them into `res/drawable` and calls #29 done. The ## What these got right, and why it is worth not undoing
full argument, with evidence, is in the comment on that issue.
- **They are raster.** The set is 340 KB as WebP; it was 12 MB as PNG, against a Each of these was a correction during review, and every one of them would be easy
1.9 MB release APK. §42 asks for Compose vector paths or `VectorDrawable`. to reintroduce by regenerating carelessly:
- **The titles and subtitles are painted into the pixels**, and the app already
renders all seven itself through `Heading(...)`. Used as-is, every title
appears twice — and baked text cannot be translated, cannot scale with the
user's font size, and is invisible to TalkBack.
- **They are light mode only.** `BRAND_GUIDE.md` §22 names the dark palette, and
[`../README.md`](../README.md) requires a light/dark preview pair per screen.
A vector set recolours from theme tokens; a raster set has to be drawn twice.
- **Card 7 shows a fertile window and ovulation**, which the first-forecast
screen deliberately does not — on a fresh install it shows confidence Low and
Today reads "Not enough history to estimate". That conflict is a product
decision to settle before anything is drawn, not a detail to fix in the art.
## Provenance and format - **No text of any kind is painted into the pixels.** The app renders all seven
titles and subtitles itself through `Heading(...)` in `OnboardingScreen.kt`.
Art carrying its own title prints every heading twice, cannot be translated,
cannot scale with the user's font size, and is invisible to TalkBack.
- **No step-number badge.** `LearningIllustration` is not only onboarding step 4
— it is also the Insights empty state, where a "4" means nothing. Baked numbers
also freeze the running order, and this flow has already changed shape once. A
step indicator, if wanted, belongs in live UI where TalkBack can read it.
- **`07_Forecast` shows a calendar and a cycle arc, and names no fields.** An
earlier draft drew a forecast panel listing *Fertile window* and *Ovulation*,
which the real first-forecast screen deliberately does not show — on a fresh
install it reports confidence Low and Today reads "Not enough history to
estimate". A later draft named the correct fields but painted *Confidence —
Low* permanently, which is wrong for anyone with a settled cycle. Naming
nothing is the only version that cannot contradict the live forecast.
- **The dark set is a real dark composition**, not the light one dimmed — the
midnight-plum ground `BRAND_GUIDE.md` §22 specifies.
Generated from `BRAND_GUIDE.md` §22's master prompt, which is the workflow that ## Still to do before anything ships
section exists to describe. Converted from the delivered PNGs to WebP at their
original 1086×1448 — same resolution, about a fortieth of the bytes, and the Tracked as **#29**, which stays open until the app renders these:
same format [`../../data/img/`](../../data/img/) already uses for the marks
privacyllc.dev renders. 1. Redraw as Compose vector paths behind the existing replaceable names, taking
colour from theme tokens rather than shipping two raster sets.
2. Add the light/dark preview pair per step, per [`../README.md`](../README.md).
3. Reconcile step copy — `PRODUCT_PLAN.md` owns the screen wording.
`EmptyStateIllustration`, the Today "nothing logged yet" state, has no card here.
Onboarding would otherwise ship real art while Today keeps a placeholder visible
in the same session.
## Format
WebP at the delivered resolution — 204 KB for all fourteen, against 3.4 MB as
PNG, and the same format [`../../data/img/`](../../data/img/) uses for the marks
privacyllc.dev renders. The delivery `.zip` archives are deliberately not
tracked; see [`.gitignore`](.gitignore).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB