Brand and design · Hi-fi screens · Hi-fi screens
Hi-fi: S30 Global · Resume session
Contract, a board per state (sheet, loading, empty, error, offline), tokens and strings.
Generated by
botgumi-design indexfrom../../screens.json. Edit that file, not this page.
Stage: hifi · Key: global/resume-session · Data-binding map: bindings.md
Drawn in the gallery: Global. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.
Contract
- sheet: On launch/home when home.resume_session != null (or today_quest in progress after a kill).
Flows: F4 Resume after the app was killed.
Reads and calls:
GET /v1/home → resume_sessionPOST /v1/sessions/{id}/abandon
Local state:
- none
Boards
One row per state. A state without boards of its own says what shows it.
| State | Board | Example data |
|---|---|---|
| sheet | zh-Hans · en | home.json (zh-Hans · en) |
| loading | no board of its own: From states.md (Global sheets): — | |
| empty | no board of its own: From states.md (Global sheets): — | |
| error | no board of its own: From states.md (Global sheets): — · fatal: error--generic, force-update--default | |
| offline | no board of its own: From states.md (Global sheets): offline--toast |
The boards
Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.
sheet
Tokens used
By path in ../../system/tokens.source.json.
| Token | Where |
|---|---|
color.accentPrimary |
.btn--primary |
color.accentPrimaryPressed |
.btn--primary |
color.bgCanvas |
.device, .screen, .tabbar |
color.bgInverse |
.brand-mark, .chip, .level-badge, .path-dot … |
color.bgInverseRaised |
.focus-chip, .path |
color.bgScrim |
.scrim |
color.bgSunken |
.btn, .card--sunken, .streak-pill |
color.bgSurface |
.card, .chip, .focus-chip, .sheet |
color.lineHairline |
.chip, .focus-chip, .list-row, .tabbar |
color.lineStrong |
.grabber, .sheet |
color.reward |
.dot, .focus-chip, .level-badge, .path … |
color.statusWarning |
.streak-pill |
color.textDisabled |
.btn |
color.textOnAccent |
.btn--primary |
color.textOnInverse |
.brand-mark, .chip, .current, .focus-chip … |
color.textOnInverseSecondary |
.c-on-inverse-2, .chip, .path-dot, .path-label |
color.textOnReward |
.level-badge, .xp-badge |
color.textPrimary |
.chip, .device, .focus-chip, .home-indicator … |
color.textSecondary |
.btn--ghost, .c-secondary |
color.textTertiary |
.c-tertiary, .chev, .chip, .list-row … |
color.topicAmberSoft |
.streak-pill |
color.topicCoral |
.topic-coral |
color.topicViolet |
.dot, .focus-chip |
radius.button |
.btn |
radius.card |
.card |
radius.lg |
.quest |
radius.md |
.card--md |
radius.pill |
.chip, .focus-chip, .streak-pill, .xp-badge … |
radius.sm |
.topic-tile |
radius.xl |
.sheet |
space.gutter |
.chip-row, .pad, .section-head, .sheet |
space.s3 |
.section-head |
space.s5 |
.card |
space.s6 |
.has-tabbar, .screen |
space.safeBottom |
.has-tabbar, .screen, .sheet, .tabbar |
space.safeTop |
.device, .screen |
space.section |
.section-head |
space.sizeCtaHeight |
.btn, .screen |
space.sizeHitMin |
.btn--ghost |
space.sizeTabbarHeight |
.has-tabbar, .screen, .tabbar |
typography.caption1 |
.t-caption |
typography.footnote |
.t-footnote |
typography.headline |
.t-headline |
typography.largeTitle |
.t-large-title |
typography.subheadline |
.t-subhead |
typography.title3 |
.t-title3 |
Strings
app.name, band.clear, common.continue, common.difficulty, common.read_minutes, common.see_all, common.today, common.xp_plus, complete.ba.first, complete.ba.second, complete.xp.level, complete.xp.round1, complete.xp.round2, growth.title, home.greeting.format, home.level.a11y, home.level.progress.a11y, home.level.xp, home.picks.title, home.picks.topics.a11y, home.quest.cta.start, home.quest.focus.last, home.quest.label, home.quest.path.a11y, home.streak.a11y.todo, micro.conclusion_first, notif.daily.title, onboarding.welcome.illo.again, onboarding.welcome.illo.first, paywall.calendar.legend.today, paywall.calendar.rest, paywall.projection.score, paywall.restored.cta, processing.unreliable.reason_label, read.nav, read.tag.daily, record.chip.round1, record.chip.round2, record.nav.round1, record.nav.round2, resume.a11y, resume.abandon, resume.abandon.note, resume.cta, resume.eyebrow, resume.round1, resume.stage, tab.growth, tab.home, tab.library, tab.nav.a11y
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, --elevation-3, --font-family-numeric, --font-family-reading, --font-family-text, --font-weight-bold, --font-weight-heavy, --font-weight-medium, --font-weight-regular, --font-weight-semibold, --motion-duration-base, --motion-duration-celebrate, --motion-duration-fast, --motion-duration-instant, --motion-duration-slow, --motion-ease-emphasized, --motion-ease-standard, --type-tracking-caps, --type-tracking-tight.