---
title: "S01 Onboarding · Welcome"
description: "Contract, a board per state (default, loading, empty, error, offline), tokens and strings."
source: "design/hifi/S01/screen.md"
---

> Part of [Brand and design](/design/llms.txt). Every page: [llms.txt](/llms.txt).

# Hi-fi: S01 Onboarding · Welcome

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

Stage: **hifi** · Key: `onboarding/welcome` · Data-binding map: [bindings.md](/design/hifi/s01/bindings/index.md)

Drawn in the gallery: [Onboarding](/design/gallery/index.html#g-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](/design/gallery/onboarding/welcome--default.html) · [en](/design/gallery/onboarding/welcome--default.en.html) |  |
| loading | [no board of its own](/design/hifi/s01/bindings/index.md#states): From [states.md](/design/states/index.md) (Onboarding (6 steps)): n/a (local) |  |
| empty | [no board of its own](/design/hifi/s01/bindings/index.md#states): From [states.md](/design/states/index.md) (Onboarding (6 steps)): n/a |  |
| error | [no board of its own](/design/hifi/s01/bindings/index.md#states): From [states.md](/design/states/index.md) (Onboarding (6 steps)): `POST /onboarding` failed: inline banner + Retry; answers kept · fatal: generic error, answers kept |  |
| offline | [no board of its own](/design/hifi/s01/bindings/index.md#states): From [states.md](/design/states/index.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**

[S01 default · zh-Hans](/design/gallery/onboarding/welcome--default.html) [S01 default · en](/design/gallery/onboarding/welcome--default.en.html)

## 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](/design/engagement/index.md), [tokens.md](/design/tokens/index.md) §6–7 and
[ios-handoff.md](/design/ios-handoff/index.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](/design/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`.