Hi-fi: S04 Onboarding · Scenario + topics

Generated by botgumi-design index from ../../screens.json. Edit that file, not this page.

Stage: hifi · Key: onboarding/scenario · Data-binding map: bindings.md

Drawn in the gallery: Onboarding. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.

#Contract

• default: Single choice → scenario; optional multi-select topics → preferred_topics (names from GET /v1/topics, localized).
• selected: Single choice → scenario; optional multi-select topics → preferred_topics (names from GET /v1/topics, localized).

Flows: F1 First launch → diagnostic → paywall → first real session.

Reads and calls:

• GET /v1/topics

Local state:

• local:onboarding.answers.scenario
• local:onboarding.answers.preferred_topics

#Boards

One row per state. A state without boards of its own says what shows it.

State	Board	Example data
default	zh-Hans · en	onboarding-answers.json (zh-Hans · en)
selected	zh-Hans · en	onboarding-answers.json (zh-Hans · en)
loading	no board of its own: From states.md (Onboarding (6 steps)): n/a (local)
empty	no board of its own: From states.md (Onboarding (6 steps)): n/a
error	no board of its own: From states.md (Onboarding (6 steps)): POST /onboarding failed: inline banner + Retry; answers kept · fatal: generic error, answers kept
offline	no board of its own: From states.md (Onboarding (6 steps)): answers kept; submit queued; diagnostic needs network → "Connect to start your diagnostic"

#The boards

Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.

default

selected

#Tokens used

By path in ../../system/tokens.source.json.

Token	Where
color.accentPrimary	.btn--primary
color.accentPrimaryPressed	.btn--primary
color.bgCanvas	.device, .dock, .option, .radio …
color.bgInverse	.chip, .opt-icon, .option
color.bgInverseRaised	.icon-btn
color.bgSunken	.btn, .icon-btn, .opt-icon, .option
color.bgSurface	.chip, .option
color.lineHairline	.chip, .ob-progress, .option
color.lineStrong	.option, .radio
color.statusSuccess	.on
color.textDisabled	.btn
color.textOnAccent	.btn--primary
color.textOnInverse	.chip, .icon-btn, .opt-icon, .option
color.textOnInverseSecondary	.chip
color.textPrimary	.chip, .device, .home-indicator, .icon-btn …
color.textSecondary	.c-secondary
color.textTertiary	.c-tertiary, .chip, .step-count
radius.button	.btn
radius.md	.option
radius.pill	.chip
space.gutter	.chip-row, .dock, .ob-progress, .pad
space.s6	.screen
space.safeBottom	.dock, .has-dock, .screen
space.safeTop	.device, .screen
space.sizeCtaHeight	.btn, .has-dock, .screen
space.sizeHitMin	.icon-btn
space.sizeTabbarHeight	.screen
typography.footnote	.t-footnote
typography.headline	.t-headline
typography.subheadline	.t-subhead
typography.title1	.t-title1

#Strings

app.name, common.back, common.continue, common.step_of.a11y, home.picks.topics.a11y, notif.daily.title, onboarding.progress.a11y, onboarding.scenario.creator, onboarding.scenario.creator.sub, onboarding.scenario.social, onboarding.scenario.social.sub, onboarding.scenario.study, onboarding.scenario.study.sub, onboarding.scenario.subtitle, onboarding.scenario.title, onboarding.scenario.topics.hint, onboarding.scenario.topics.title, onboarding.scenario.work_meeting, onboarding.scenario.work_meeting.sub, paywall.projection.score, resume.cta

#Notes for the app tracks

Motion, haptics, Dynamic Type and VoiceOver: engagement.md, tokens.md §6–7 and ios-handoff.md. Open a board with ?theme=dark&dt=1.35&binds=1 to see dark mode, the largest tested type size and every bound element.

Tracking-plan events: no tracking plan page exists yet; ADR-001 D12 names the events.

Tokens with no group in system/tokens.source.json yet (they stay in tokens.css): --dt, --font-family-numeric, --font-family-text, --font-weight-bold, --font-weight-regular, --font-weight-semibold, --motion-duration-fast, --motion-duration-instant, --motion-ease-spring, --motion-ease-standard, --type-tracking-tight.