Brand and design · Hi-fi screens · Hi-fi screens
Hi-fi: S01 Onboarding · Welcome
Contract, a board per state (default, loading, empty, error, offline), tokens and strings.
Generated by
botgumi-design indexfrom../../screens.json. Edit that file, not this page.
Stage: hifi · Key: onboarding/welcome · 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: Brand promise + the loop in one glance (article → one action → before/after). Legal + AI processing disclosure under the CTA (D6).
Flows: F1 First launch → diagnostic → paywall → first real session.
Reads and calls:
POST /v1/auth/anonymous (on launch, before this screen)GET /v1/config
Local state:
- none
Boards
One row per state. A state without boards of its own says what shows it.
| State | Board | Example data |
|---|---|---|
| default | 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
Tokens used
By path in ../../system/tokens.source.json.
| Token | Where |
|---|---|
color.accentPrimary |
.btn--primary |
color.accentPrimaryPressed |
.btn--primary |
color.bgCanvas |
.device, .dock, .screen |
color.bgInverse |
.ba, .brand-mark, .one-action |
color.bgInverseRaised |
.one-action, .skel |
color.bgSunken |
.btn, .skel |
color.bgSurface |
.card |
color.lineStrong |
.link |
color.reward |
.after, .ba, .oa-head, .one-action … |
color.textDisabled |
.btn |
color.textOnAccent |
.btn--primary |
color.textOnInverse |
.after, .ba, .brand-mark, .one-action … |
color.textOnInverseSecondary |
.ba, .side |
color.textPrimary |
.device, .home-indicator, .statusbar |
color.textSecondary |
.c-secondary, .link |
color.textTertiary |
.c-tertiary |
radius.button |
.btn |
radius.card |
.card |
radius.lg |
.ba, .one-action |
radius.sm |
.one-action |
space.gutter |
.dock, .pad |
space.s5 |
.card |
space.s6 |
.screen |
space.safeBottom |
.dock, .dock-tall, .has-dock, .screen |
space.safeTop |
.device, .screen |
space.sizeCtaHeight |
.btn, .dock-tall, .has-dock, .screen |
space.sizeTabbarHeight |
.screen |
typography.body |
.t-body |
typography.caption1 |
.t-caption |
typography.headline |
.t-headline |
typography.largeTitle |
.t-large-title |
Strings
app.name, common.read_minutes, common.today, complete.ba.first, complete.ba.second, complete.xp.round1, complete.xp.round2, home.greeting.format, notif.daily.title, onboarding.welcome.body, onboarding.welcome.cta, onboarding.welcome.illo.again, onboarding.welcome.illo.first, onboarding.welcome.illo.meta, onboarding.welcome.illo.oa, onboarding.welcome.legal, onboarding.welcome.title, paywall.calendar.legend.today, paywall.privacy, paywall.projection.score, paywall.terms, processing.unreliable.reason_label, read.nav, read.tag.daily, record.chip.round1, record.chip.round2, record.indicator.recording, record.nav.round2, resume.round1
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, --elevation-1, --elevation-2, --font-family-numeric, --font-family-reading, --font-family-text, --font-weight-bold, --font-weight-medium, --font-weight-regular, --font-weight-semibold, --motion-duration-fast, --motion-duration-instant, --motion-ease-standard, --type-tracking-tight.