Brand and design · Hi-fi screens · Hi-fi screens
Hi-fi: S18 Read · Read
Contract, a board per state (normal, long-scroll, dynamic-type-xl, loading, empty, error, offline), tokens and strings.
Generated by
botgumi-design indexfrom../../screens.json. Edit that file, not this page.
Stage: hifi · Key: read/read · Data-binding map: bindings.md
Drawn in the gallery: Read. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.
Contract
- normal: 1/3. Article body, language tag, length.label and est_read_seconds are server-computed per language (no hard-coded 字/words). CTA posts reading-complete, then hides the text.
- long-scroll: Tier-2 article scrolled to the end: the last paragraph and source line sit fully above the CTA dock.
- dynamic-type-xl: Same screen at Dynamic Type ≈ AX1. Meta row wraps; reading style scales from 18pt.
Flows: F1 First launch → diagnostic → paywall → first real session, F2 Daily quest, F4 Resume after the app was killed.
Reads and calls:
POST /v1/sessions {article_id, kind: daily}GET /v1/sessions/{id} (session.article, session.language)POST /v1/sessions/{id}/reading-complete {read_duration_ms}GET /v1/sessions/{id}
Local state:
local:reader.openedAt (for read_duration_ms)
Boards
One row per state. A state without boards of its own says what shows it.
| State | Board | Example data |
|---|---|---|
| normal | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| long-scroll | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| dynamic-type-xl | zh-Hans · en | article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| loading | no board of its own: From states.md (Read): article skeleton | |
| empty | no board of its own: From states.md (Read): n/a | |
| error | no board of its own: From states.md (Read): read.load_error + Retry, never another article · fatal: 404 → generic error, session abandoned |
|
| offline | no board of its own: From states.md (Read): cached article (daily quest is prefetched) |
The boards
Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.
normal
long-scroll
dynamic-type-xl
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 |
.tag--ink |
color.bgInverseRaised |
.icon-btn |
color.bgSunken |
.btn, .card--sunken, .icon-btn, .tag |
color.bgSurface |
.card |
color.lineHairline |
.progress-hair |
color.lineStrong |
.tag--line |
color.textDisabled |
.btn |
color.textOnAccent |
.btn--primary |
color.textOnInverse |
.icon-btn, .tag--ink |
color.textPrimary |
.device, .home-indicator, .icon-btn, .progress-hair … |
color.textSecondary |
.c-secondary, .tag |
color.textTertiary |
.c-tertiary, .step-count |
color.topicViolet |
inline |
radius.button |
.btn |
radius.card |
.card |
radius.md |
.card--md |
radius.xs |
.tag |
space.gutter |
.dock, .navbar, .pad |
space.s5 |
.card |
space.s6 |
.screen |
space.safeBottom |
.dock, .has-dock, .screen |
space.safeTop |
.device, .screen |
space.sizeCtaHeight |
.btn, .has-dock, .screen |
space.sizeHitMin |
.icon-btn |
space.sizeNavbarHeight |
.navbar |
space.sizeTabbarHeight |
.screen |
typography.caption1 |
.t-caption |
typography.footnote |
.t-footnote |
typography.headline |
.t-headline |
typography.reading |
.t-reading |
typography.readingLatin |
.t-reading |
typography.subheadline |
.t-subhead |
typography.title1 |
.t-title1 |
Strings
app.name, common.back, common.read_minutes, common.step_of.a11y, common.today, feedback.confidence.low, home.greeting.format, lang.en, notif.daily.title, onboarding.progress.a11y, paywall.calendar.legend.today, paywall.projection.score, processing.unreliable.reason_label, read.cta, read.cta.caption, read.hint.title, read.nav, read.source, read.tag.daily, read.tag.free
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, --font-family-numeric, --font-family-reading, --font-family-reading-latin, --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, --type-tracking-tight.