---
title: "S23 Complete · Complete"
description: "Contract, a board per state (improved, same, shorter-lost, level-up, achievement, replayed, loading, empty, error, offline), tokens and strings."
source: "design/hifi/S23/screen.md"
---

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

# Hi-fi: S23 Complete · Complete

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

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

Drawn in the gallery: [Complete](/design/gallery/index.html#g-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) → Settlement`
- `GET /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](/design/gallery/complete/complete--improved.html) · [en](/design/gallery/complete/complete--improved.en.html) | article-long.json ([zh-Hans](/design/examples/zh-Hans/article-long.json) · [en](/design/examples/en/article-long.json)), article-product.json ([zh-Hans](/design/examples/zh-Hans/article-product.json) · [en](/design/examples/en/article-product.json)), settlement-improved.json ([zh-Hans](/design/examples/zh-Hans/settlement-improved.json) · [en](/design/examples/en/settlement-improved.json)) |
| same | [zh-Hans](/design/gallery/complete/complete--same.html) · [en](/design/gallery/complete/complete--same.en.html) | article-long.json ([zh-Hans](/design/examples/zh-Hans/article-long.json) · [en](/design/examples/en/article-long.json)), article-product.json ([zh-Hans](/design/examples/zh-Hans/article-product.json) · [en](/design/examples/en/article-product.json)), settlement-same.json ([zh-Hans](/design/examples/zh-Hans/settlement-same.json) · [en](/design/examples/en/settlement-same.json)) |
| shorter-lost | [zh-Hans](/design/gallery/complete/complete--shorter-lost.html) · [en](/design/gallery/complete/complete--shorter-lost.en.html) | article-long.json ([zh-Hans](/design/examples/zh-Hans/article-long.json) · [en](/design/examples/en/article-long.json)), article-product.json ([zh-Hans](/design/examples/zh-Hans/article-product.json) · [en](/design/examples/en/article-product.json)), settlement-shorter-lost.json ([zh-Hans](/design/examples/zh-Hans/settlement-shorter-lost.json) · [en](/design/examples/en/settlement-shorter-lost.json)) |
| level-up | [zh-Hans](/design/gallery/complete/complete--level-up.html) · [en](/design/gallery/complete/complete--level-up.en.html) | article-long.json ([zh-Hans](/design/examples/zh-Hans/article-long.json) · [en](/design/examples/en/article-long.json)), article-product.json ([zh-Hans](/design/examples/zh-Hans/article-product.json) · [en](/design/examples/en/article-product.json)), settlement-first.json ([zh-Hans](/design/examples/zh-Hans/settlement-first.json) · [en](/design/examples/en/settlement-first.json)), settlement-improved.json ([zh-Hans](/design/examples/zh-Hans/settlement-improved.json) · [en](/design/examples/en/settlement-improved.json)), settlement-levelup.json ([zh-Hans](/design/examples/zh-Hans/settlement-levelup.json) · [en](/design/examples/en/settlement-levelup.json)), settlement-replayed.json ([zh-Hans](/design/examples/zh-Hans/settlement-replayed.json) · [en](/design/examples/en/settlement-replayed.json)), settlement-same.json ([zh-Hans](/design/examples/zh-Hans/settlement-same.json) · [en](/design/examples/en/settlement-same.json)), settlement-shorter-lost.json ([zh-Hans](/design/examples/zh-Hans/settlement-shorter-lost.json) · [en](/design/examples/en/settlement-shorter-lost.json)) |
| achievement | [zh-Hans](/design/gallery/complete/complete--achievement.html) · [en](/design/gallery/complete/complete--achievement.en.html) | article-long.json ([zh-Hans](/design/examples/zh-Hans/article-long.json) · [en](/design/examples/en/article-long.json)), article-product.json ([zh-Hans](/design/examples/zh-Hans/article-product.json) · [en](/design/examples/en/article-product.json)), settlement-first.json ([zh-Hans](/design/examples/zh-Hans/settlement-first.json) · [en](/design/examples/en/settlement-first.json)), settlement-improved.json ([zh-Hans](/design/examples/zh-Hans/settlement-improved.json) · [en](/design/examples/en/settlement-improved.json)), settlement-levelup.json ([zh-Hans](/design/examples/zh-Hans/settlement-levelup.json) · [en](/design/examples/en/settlement-levelup.json)), settlement-replayed.json ([zh-Hans](/design/examples/zh-Hans/settlement-replayed.json) · [en](/design/examples/en/settlement-replayed.json)), settlement-same.json ([zh-Hans](/design/examples/zh-Hans/settlement-same.json) · [en](/design/examples/en/settlement-same.json)), settlement-shorter-lost.json ([zh-Hans](/design/examples/zh-Hans/settlement-shorter-lost.json) · [en](/design/examples/en/settlement-shorter-lost.json)) |
| replayed | [zh-Hans](/design/gallery/complete/complete--replayed.html) · [en](/design/gallery/complete/complete--replayed.en.html) | article-long.json ([zh-Hans](/design/examples/zh-Hans/article-long.json) · [en](/design/examples/en/article-long.json)), article-product.json ([zh-Hans](/design/examples/zh-Hans/article-product.json) · [en](/design/examples/en/article-product.json)), settlement-replayed.json ([zh-Hans](/design/examples/zh-Hans/settlement-replayed.json) · [en](/design/examples/en/settlement-replayed.json)) |
| loading | [no board of its own](/design/hifi/s23/bindings/index.md#states): From [states.md](/design/states/index.md) (Complete): skeleton blocks while `/complete` runs (idempotent; safe to retry) |  |
| empty | [no board of its own](/design/hifi/s23/bindings/index.md#states): From [states.md](/design/states/index.md) (Complete): — |  |
| error | [no board of its own](/design/hifi/s23/bindings/index.md#states): From [states.md](/design/states/index.md) (Complete): Retry (same Idempotency-Key) · fatal: 409 precondition → back to the feedback of the missing round |  |
| offline | [no board of its own](/design/hifi/s23/bindings/index.md#states): From [states.md](/design/states/index.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**

[S23 improved · zh-Hans](/design/gallery/complete/complete--improved.html) [S23 improved · en](/design/gallery/complete/complete--improved.en.html)

**same**

[S23 same · zh-Hans](/design/gallery/complete/complete--same.html) [S23 same · en](/design/gallery/complete/complete--same.en.html)

**shorter-lost**

[S23 shorter-lost · zh-Hans](/design/gallery/complete/complete--shorter-lost.html) [S23 shorter-lost · en](/design/gallery/complete/complete--shorter-lost.en.html)

**level-up**

[S23 level-up · zh-Hans](/design/gallery/complete/complete--level-up.html) [S23 level-up · en](/design/gallery/complete/complete--level-up.en.html)

**achievement**

[S23 achievement · zh-Hans](/design/gallery/complete/complete--achievement.html) [S23 achievement · en](/design/gallery/complete/complete--achievement.en.html)

**replayed**

[S23 replayed · zh-Hans](/design/gallery/complete/complete--replayed.html) [S23 replayed · en](/design/gallery/complete/complete--replayed.en.html)

## 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](/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`, `--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`.