Hi-fi: S13 Diagnostic · Diagnostic result · animated reveal

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

Stage: hifi · Key: diagnostic/diag-result · Data-binding map: bindings.md

Drawn in the gallery: Diagnostic. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.

#Contract

• reveal: Count-up reveal of overall (ring) then each dimension; weakest dimension feeds the plan and paywall; one action with evidence.

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

Reads and calls:

• GET /v1/attempts/{id} → assessment

Local state:

• none

#Boards

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

State	Board	Example data
reveal	zh-Hans · en	assessment-diagnostic.json (zh-Hans · en)
loading	no board of its own: From states.md (Diagnostic result): ring at 0 until data (never shown before assessed)
empty	no board of its own: From states.md (Diagnostic result): —
error	no board of its own: From states.md (Diagnostic result): — · fatal: —
offline	no board of its own: From states.md (Diagnostic result): cached assessment

#The boards

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

reveal

#Tokens used

By path in ../../system/tokens.source.json.

Token	Where
color.accentPrimary	.btn--primary
color.accentPrimaryPressed	.btn--primary
color.bandBasic	inline
color.bgCanvas	.device, .dock, .navbar, .screen
color.bgInverse	.one-action
color.bgInverseRaised	.oa-example, .one-action, .ts-chip
color.bgSunken	.btn, .dim-bar, .dim-row, .ts-chip …
color.bgSurface	.list
color.dimEfficiency	inline
color.dimFluency	inline
color.dimKeyInfo	inline
color.dimStructure	inline
color.lineHairline	.dim-row, .evidence, .list-row
color.reward	.oa-head, .one-action
color.statusSuccess	.c-success
color.statusWarning	.c-warning
color.textDisabled	.btn
color.textOnAccent	.btn--primary
color.textOnInverse	.oa-example, .one-action, .ts-chip
color.textOnInverseSecondary	.c-on-inverse-2
color.textPrimary	.device, .dim-bar, .dim-name, .dim-row …
color.textSecondary	.c-secondary
color.textTertiary	.c-tertiary, .list-row, .score-ring, .val
color.topicViolet	.evidence, .ts-chip
color.topicVioletSoft	.evidence
radius.button	.btn
radius.lg	.one-action
radius.md	.list
radius.sm	.oa-example, .one-action
space.gutter	.dock, .navbar, .pad, .section-head
space.s3	.section-head
space.s6	.screen
space.safeBottom	.dock, .has-dock, .screen
space.safeTop	.device, .screen
space.section	.section-head
space.sizeCtaHeight	.btn, .has-dock, .screen
space.sizeNavbarHeight	.navbar
space.sizeTabbarHeight	.screen
typography.footnote	.t-footnote
typography.headline	.t-headline
typography.subheadline	.t-subhead
typography.title3	.t-title3

#Strings

app.name, band.basic, diag.result.cta, diag.result.nav, diag.result.ring_label, dimension.efficiency, dimension.fluency, dimension.key_info, dimension.structure, dimension.weights, feedback.dims.title, feedback.evidence.hint, feedback.evidence.title, feedback.keypoints.count, feedback.keypoints.title, feedback.one_action.basis, feedback.ring_label, growth.title, home.greeting.format, notif.daily.title, paywall.eyebrow, paywall.per.month, paywall.per.year, paywall.projection.score, read.tag.diagnostic, tab.growth

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