---
title: "S12 Diagnostic · Diagnostic · processing"
description: "Contract, a board per state (uploading, transcribing, assessing, failed, unreliable, loading, empty, error, offline), tokens and strings."
source: "design/hifi/S12/screen.md"
---

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

# Hi-fi: S12 Diagnostic · Diagnostic · processing

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

Stage: **hifi** · Key: `diagnostic/diag-processing` · Data-binding map: [bindings.md](/design/hifi/s12/bindings/index.md)

Drawn in the gallery: [Diagnostic](/design/gallery/index.html#g-diagnostic). Each board is the committed HTML in `screens/`, drawn on the example data in `docs/api/examples/`.

## Contract

- **uploading**: Real pipeline (not a demo). Same processing states as the daily loop.
- **transcribing**: Real pipeline (not a demo). Same processing states as the daily loop.
- **assessing**: Real pipeline (not a demo). Same processing states as the daily loop.
- **failed**: Real pipeline (not a demo). Same processing states as the daily loop.
- **unreliable**: Real pipeline (not a demo). Same processing states as the daily loop.

Flows: F1 First launch → diagnostic → paywall → first real session.

Reads and calls:

- `GET /v1/attempts/{id}`

Local state:

- none

## Boards

One row per state. A state without boards of its own says what shows it.

| State | Board | Example data |
|---|---|---|
| uploading | [zh-Hans](/design/gallery/diagnostic/diag-processing--uploading.html) · [en](/design/gallery/diagnostic/diag-processing--uploading.en.html) | article-diagnostic.json ([zh-Hans](/design/examples/zh-Hans/article-diagnostic.json) · [en](/design/examples/en/article-diagnostic.json)) |
| transcribing | [zh-Hans](/design/gallery/diagnostic/diag-processing--transcribing.html) · [en](/design/gallery/diagnostic/diag-processing--transcribing.en.html) | article-diagnostic.json ([zh-Hans](/design/examples/zh-Hans/article-diagnostic.json) · [en](/design/examples/en/article-diagnostic.json)) |
| assessing | [zh-Hans](/design/gallery/diagnostic/diag-processing--assessing.html) · [en](/design/gallery/diagnostic/diag-processing--assessing.en.html) | article-diagnostic.json ([zh-Hans](/design/examples/zh-Hans/article-diagnostic.json) · [en](/design/examples/en/article-diagnostic.json)) |
| failed | [zh-Hans](/design/gallery/diagnostic/diag-processing--failed.html) · [en](/design/gallery/diagnostic/diag-processing--failed.en.html) | article-diagnostic.json ([zh-Hans](/design/examples/zh-Hans/article-diagnostic.json) · [en](/design/examples/en/article-diagnostic.json)) |
| unreliable | [zh-Hans](/design/gallery/diagnostic/diag-processing--unreliable.html) · [en](/design/gallery/diagnostic/diag-processing--unreliable.en.html) | article-diagnostic.json ([zh-Hans](/design/examples/zh-Hans/article-diagnostic.json) · [en](/design/examples/en/article-diagnostic.json)) |
| loading | [no board of its own](/design/hifi/s12/bindings/index.md#states): From [states.md](/design/states/index.md) (Diagnostic processing): [diag-processing--uploading](/design/gallery/diagnostic/diag-processing--uploading.html), [diag-processing--transcribing](/design/gallery/diagnostic/diag-processing--transcribing.html), [diag-processing--assessing](/design/gallery/diagnostic/diag-processing--assessing.html) |  |
| empty | [no board of its own](/design/hifi/s12/bindings/index.md#states): From [states.md](/design/states/index.md) (Diagnostic processing): — |  |
| error | [no board of its own](/design/hifi/s12/bindings/index.md#states): From [states.md](/design/states/index.md) (Diagnostic processing): [diag-processing--failed](/design/gallery/diagnostic/diag-processing--failed.html) · fatal: non-retryable → generic error |  |
| offline | [no board of its own](/design/hifi/s12/bindings/index.md#states): From [states.md](/design/states/index.md) (Diagnostic processing): [processing--offline](/design/gallery/processing/processing--offline.html) |  |

### The boards

Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.

**uploading**

[S12 uploading · zh-Hans](/design/gallery/diagnostic/diag-processing--uploading.html) [S12 uploading · en](/design/gallery/diagnostic/diag-processing--uploading.en.html)

**transcribing**

[S12 transcribing · zh-Hans](/design/gallery/diagnostic/diag-processing--transcribing.html) [S12 transcribing · en](/design/gallery/diagnostic/diag-processing--transcribing.en.html)

**assessing**

[S12 assessing · zh-Hans](/design/gallery/diagnostic/diag-processing--assessing.html) [S12 assessing · en](/design/gallery/diagnostic/diag-processing--assessing.en.html)

**failed**

[S12 failed · zh-Hans](/design/gallery/diagnostic/diag-processing--failed.html) [S12 failed · en](/design/gallery/diagnostic/diag-processing--failed.en.html)

**unreliable**

[S12 unreliable · zh-Hans](/design/gallery/diagnostic/diag-processing--unreliable.html) [S12 unreliable · en](/design/gallery/diagnostic/diag-processing--unreliable.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`, `.navbar`, `.screen` |
| `color.bgInverse` | `.pbtn`, `.player`, `inline` |
| `color.bgInverseRaised` | `.bar`, `.icon-btn` |
| `color.bgSunken` | `.bar`, `.btn`, `.card--sunken`, `.icon-btn` … |
| `color.bgSurface` | `.card`, `.list` |
| `color.lineHairline` | `.list-row`, `.progress-hair` |
| `color.lineStrong` | `.player`, `.track` |
| `color.reward` | `inline` |
| `color.statusDanger` | `.c-danger`, `inline` |
| `color.statusInfoSoft` | `.banner--info` |
| `color.statusSuccess` | `.c-success` |
| `color.statusWarning` | `inline` |
| `color.textDisabled` | `.btn` |
| `color.textOnAccent` | `.btn--primary` |
| `color.textOnInverse` | `.icon-btn`, `.pbtn`, `.player` |
| `color.textPrimary` | `.banner--info`, `.bar`, `.device`, `.home-indicator` … |
| `color.textSecondary` | `.btn--ghost`, `.c-secondary`, `.state-illo` |
| `color.textTertiary` | `.c-tertiary`, `.list-row`, `.step-count` |
| `radius.button` | `.btn` |
| `radius.card` | `.card` |
| `radius.md` | `.card--md`, `.list` |
| `radius.pill` | `.bar` |
| `radius.sm` | `.banner` |
| `space.gutter` | `.dock`, `.navbar`, `.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.sizeHitMin` | `.btn--ghost`, `.icon-btn` |
| `space.sizeNavbarHeight` | `.navbar` |
| `space.sizeTabbarHeight` | `.screen` |
| `typography.callout` | `.t-callout` |
| `typography.caption1` | `.t-caption` |
| `typography.footnote` | `.t-footnote` |
| `typography.headline` | `.t-headline` |
| `typography.subheadline` | `.t-subhead` |
| `typography.title2` | `.t-title2` |

## Strings

`app.name`, `common.back`, `common.retry`, `common.step_of.a11y`, `diag.processing.nav`, `error.generic.title`, `home.greeting.format`, `notif.daily.title`, `onboarding.progress.a11y`, `paywall.projection.score`, `processing.done.transcribe`, `processing.done.upload`, `processing.eta`, `processing.failed.body`, `processing.failed.code`, `processing.failed.rerecord`, `processing.failed.stage`, `processing.failed.title`, `processing.leave_ok`, `processing.stage.assess`, `processing.stage.transcribe`, `processing.stage.upload`, `processing.sub.assess`, `processing.sub.transcribe`, `processing.sub.upload`, `processing.tip.body`, `processing.tip.title`, `processing.title.assess`, `processing.title.transcribe`, `processing.title.upload`, `processing.unreliable.play.a11y`, `processing.unreliable.reason_label`, `processing.unreliable.sub`, `processing.unreliable.tip`, `processing.unreliable.title`, `read.tag.diagnostic`, `record.denied.back`, `tab.home`, `unreliable.too_short.body`, `unreliable.too_short.title`

## 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`, `--font-family-numeric`, `--font-family-text`, `--font-weight-bold`, `--font-weight-medium`, `--font-weight-regular`, `--font-weight-semibold`, `--motion-duration-fast`, `--motion-duration-instant`, `--motion-duration-slow`, `--motion-ease-emphasized`, `--motion-ease-standard`.