docs: onboarding illustrations, matched light and dark
Seven illustrations in a matched pair, replacing the single light-only concept set added in9d2a4b2. 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 at9d2a4b2. #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>
|
|
@ -0,0 +1,2 @@
|
|||
# Delivery archives — the extracted webp beside them is what is tracked.
|
||||
*.zip
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -1,55 +1,76 @@
|
|||
# Onboarding concept cards
|
||||
# Onboarding illustrations — the decided direction
|
||||
|
||||
```
|
||||
Status: Current
|
||||
Owner: _null
|
||||
Last reviewed: 2026-08-18
|
||||
Governs: docs/design/dist/** — the onboarding concept set and what it is for
|
||||
Review trigger: Any concept set added or replaced here; the onboarding artwork
|
||||
Governs: docs/design/dist/** — the onboarding illustration set and what it is for
|
||||
Review trigger: Any illustration added or replaced here; the onboarding artwork
|
||||
in issue #29 landing in the app
|
||||
```
|
||||
|
||||
> **These are references, not assets.** Nothing in this folder ships in the APK.
|
||||
> They are the decided *direction* for onboarding, drawn from
|
||||
> [`../BRAND_GUIDE.md`](../BRAND_GUIDE.md) §22's master prompt, and the vectors
|
||||
> that eventually ship are drawn *from* them.
|
||||
> **References, not shipping assets.** Nothing in this folder goes in the APK.
|
||||
> These are the decided direction for onboarding, drawn from
|
||||
> [`../BRAND_GUIDE.md`](../BRAND_GUIDE.md) §22's master prompt. The vectors that
|
||||
> eventually ship are drawn *from* these.
|
||||
|
||||
Seven cards, one per onboarding step, numbered to match the steps in
|
||||
`app/src/main/kotlin/dev/privacyllc/period/feature/onboarding/OnboardingScreen.kt`:
|
||||
Seven illustrations in a matched light/dark pair, named for the composables they
|
||||
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` |
|
||||
| `onboarding-02-last-period-start.webp` | 2 | `LastPeriod` |
|
||||
| `onboarding-03-period-end.webp` | 3 | `PeriodEnd` |
|
||||
| `onboarding-04-previous-history.webp` | 4 | `PreviousHistory` |
|
||||
| `onboarding-05-privacy-promise.webp` | 5 | `PrivacyPromise` |
|
||||
| `onboarding-06-reminder-privacy.webp` | 6 | `NotificationPrivacyStep` |
|
||||
| `onboarding-07-first-forecast.webp` | 7 | `FirstForecast` |
|
||||
| `01_WelcomeIllustration` | 1 Welcome | `WelcomeIllustration` |
|
||||
| `02_LastPeriodIllustration` | 2 Last period start | *new* |
|
||||
| `03_PeriodEndIllustration` | 3 Period end | *new* |
|
||||
| `04_LearningIllustration` | 4 Previous history | `LearningIllustration` |
|
||||
| `05_PrivacyIllustration` | 5 Privacy promise | `PrivacyIllustration` |
|
||||
| `06_NotificationPrivacyIllustration` | 6 Reminder privacy | *new* |
|
||||
| `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
|
||||
full argument, with evidence, is in the comment on that issue.
|
||||
## What these got right, and why it is worth not undoing
|
||||
|
||||
- **They are raster.** The set is 340 KB as WebP; it was 12 MB as PNG, against a
|
||||
1.9 MB release APK. §42 asks for Compose vector paths or `VectorDrawable`.
|
||||
- **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.
|
||||
Each of these was a correction during review, and every one of them would be easy
|
||||
to reintroduce by regenerating carelessly:
|
||||
|
||||
## 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
|
||||
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
|
||||
same format [`../../data/img/`](../../data/img/) already uses for the marks
|
||||
privacyllc.dev renders.
|
||||
## Still to do before anything ships
|
||||
|
||||
Tracked as **#29**, which stays open until the app renders these:
|
||||
|
||||
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).
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 56 KiB |