Brand and design · Hi-fi screens · Hi-fi screens
Hi-fi: S23 Complete · Complete
Contract, a board per state (improved, same, shorter-lost, level-up, achievement, replayed, loading, empty, error, offline), tokens and strings.
Generated by
botgumi-design indexfrom../../screens.json. Edit that file, not this page.
Stage: hifi · Key: complete/complete · Data-binding map: bindings.md
Drawn in the gallery: Complete. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.
Contract
- improved: verdict improved: celebration, round1→round2 block, XP bar fills 240→295, ability change (+2) shown separately from the +11 session delta.
- same: verdict same: neutral icon, no rays, no improvement bonus (struck through); ability may drop by 1 — shown honestly.
- shorter-lost: verdict shorter_but_lost_points: no praise. Lists the lost key point; next suggestion = keep_constraints.
- level-up: level_after.level > level_before.level: full-screen ink overlay with lime badge and new title.
- achievement: First-ever session: achievements_unlocked[0] sheet; ability tile shows 'building baseline 1/3'.
- replayed: settlement.replayed = true (reopened): no animations, no +1 flourish; banner explains rewards were already granted.
Flows: F2 Daily quest, F4 Resume after the app was killed.
Reads and calls:
POST /v1/sessions/{id}/complete (Idempotency-Key) → SettlementGET /v1/sessions/{id} (attempt durations)
Local state:
- none
Boards
One row per state. A state without boards of its own says what shows it.
| State | Board | Example data |
|---|---|---|
| improved | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en), settlement-improved.json (zh-Hans · en) |
| same | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en), settlement-same.json (zh-Hans · en) |
| shorter-lost | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en), settlement-shorter-lost.json (zh-Hans · en) |
| level-up | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en), settlement-first.json (zh-Hans · en), settlement-improved.json (zh-Hans · en), settlement-levelup.json (zh-Hans · en), settlement-replayed.json (zh-Hans · en), settlement-same.json (zh-Hans · en), settlement-shorter-lost.json (zh-Hans · en) |
| achievement | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en), settlement-first.json (zh-Hans · en), settlement-improved.json (zh-Hans · en), settlement-levelup.json (zh-Hans · en), settlement-replayed.json (zh-Hans · en), settlement-same.json (zh-Hans · en), settlement-shorter-lost.json (zh-Hans · en) |
| replayed | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en), settlement-replayed.json (zh-Hans · en) |
| loading | no board of its own: From states.md (Complete): skeleton blocks while /complete runs (idempotent; safe to retry) |
|
| empty | no board of its own: From states.md (Complete): — | |
| error | no board of its own: From states.md (Complete): Retry (same Idempotency-Key) · fatal: 409 precondition → back to the feedback of the missing round | |
| offline | no board of its own: From states.md (Complete): queued; shows "will settle when online" |
The boards
Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.
improved
same
shorter-lost
level-up
achievement
replayed
Tokens used
By path in ../../system/tokens.source.json.
| Token | Where |
|---|---|
color.accentPrimary |
.btn--primary |
color.accentPrimaryPressed |
.btn--primary |
color.bgCanvas |
.btn--light, .device, .dock, .navbar … |
color.bgInverse |
.ba, .btn--ink, .level-badge, .neutral … |
color.bgInverseRaised |
.bar, .icon-btn |
color.bgScrim |
.scrim |
color.bgSunken |
.bar, .btn, .card--sunken, .icon-btn … |
color.bgSurface |
.card, .sheet, inline |
color.lineInverse |
.ba-foot |
color.lineStrong |
.grabber, .sheet |
color.reward |
.after, .ba, .delta-up, .level-badge … |
color.rewardDeep |
.rays |
color.statusInfoSoft |
.banner--info |
color.statusSuccess |
.delta-up |
color.statusWarning |
.banner--warning, .delta-down |
color.statusWarningSoft |
.banner--warning |
color.textDisabled |
.btn |
color.textOnAccent |
.btn--primary |
color.textOnInverse |
.after, .ba, .ba-foot, .btn--ink … |
color.textOnInverseSecondary |
.ba, .ba-foot, .side, .sub … |
color.textOnReward |
.level-badge, .reward |
color.textPrimary |
.banner--info, .banner--warning, .bar, .btn--light … |
color.textSecondary |
.btn--ghost, .c-secondary, .stat, .state-illo |
color.textTertiary |
.c-tertiary, .muted, .xp-lines, inline |
color.topicAmber |
inline |
radius.button |
.btn |
radius.card |
.card |
radius.lg |
.ba |
radius.md |
.card--md, .stat |
radius.pill |
.bar, .xpbar |
radius.sm |
.banner |
radius.xl |
.sheet |
space.gutter |
.dock, .navbar, .pad, .sheet |
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.sizeHitMin |
.btn--ghost, .icon-btn |
space.sizeNavbarHeight |
.navbar |
space.sizeTabbarHeight |
.screen |
typography.footnote |
.t-footnote |
typography.headline |
.t-headline |
typography.subheadline |
.t-subhead |
typography.title1 |
.t-title1 |
Strings
achievement.eyebrow, achievement.plan_day, app.name, band.clear, common.back, common.close, common.continue, common.difficulty, common.seconds_longer, common.seconds_shorter, common.today, common.xp_plus, complete.ba.a11y, complete.ba.delta, complete.ba.first, complete.ba.second, complete.close.a11y, complete.cta.growth, complete.cta.home, complete.eyebrow.daily, complete.eyebrow.replayed, complete.headline.improved, complete.headline.same, complete.headline.shorter_but_lost_points, complete.lost_points, complete.next.label, complete.replayed.banner, complete.stat.ability, complete.stat.baseline, complete.stat.streak, complete.stat.xp.replayed, complete.weekly.title, complete.xp.complete, complete.xp.improve, complete.xp.improve.missed, complete.xp.level, complete.xp.round1, complete.xp.round2, feedback.confidence.high, feedback.confidence.low, home.greeting.format, home.level.a11y, home.level.xp, home.quest.done.xp, home.quest.label, home.quest.plan_day, levelup.a11y, levelup.eyebrow, levelup.sub, levelup.title, micro.keep_constraints, micro.three_points, notif.daily.title, onboarding.welcome.illo.again, onboarding.welcome.illo.first, paywall.calendar.legend.today, paywall.expired.stat.ability, paywall.projection.score, profile.stat.ability, profile.stat.streak, profile.weekly.title, read.tag.daily, record.chip.round1, record.chip.round2, record.nav.round2, resume.cta, resume.round1, tab.home, weekly.nav
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-text, --font-weight-bold, --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-spring, --motion-ease-standard, --r, --type-tracking-caps, --type-tracking-tight.