Brand and design · Hi-fi screens · Hi-fi screens
Hi-fi: S24 Growth · Growth
Contract, a board per state (empty, baseline, ready, gap, loading, error, offline), tokens and strings.
Generated by
botgumi-design indexfrom../../screens.json. Edit that file, not this page.
Stage: hifi · Key: growth/growth · Data-binding map: bindings.md
Drawn in the gallery: Growth. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.
Contract
- empty: growth.state = empty (0 sessions).
- baseline: growth.state = baseline (1–2 sessions): 'building baseline n/3'; no ability, no skills grid.
- ready: Ability (EMA, ability-v1) with 30-day delta, weekly trend, 4 dimensions, micro-skill mastery, achievements, the 'next point' hook, recent sessions. Language chips appear because growth.languages has >1 entry (zh persona).
- gap: Weeks with no sessions are drawn as gaps with a hollow marker — never interpolated. Single language → no language chips.
Flows: F2 Daily quest.
Reads and calls:
GET /v1/growth?range=8w&language= (Accept-Language)
Local state:
- none
Boards
One row per state. A state without boards of its own says what shows it.
| State | Board | Example data |
|---|---|---|
| empty | zh-Hans · en | growth-empty.json (zh-Hans · en) |
| baseline | zh-Hans · en | growth-baseline.json (zh-Hans · en) |
| ready | zh-Hans · en | growth-ready.json (zh-Hans · en), me.json (zh-Hans · en) |
| gap | zh-Hans · en | growth-gap.json (zh-Hans · en), me.json (zh-Hans · en) |
| loading | no board of its own: From states.md (Growth): chart/card skeletons | |
| error | no board of its own: From states.md (Growth): inline Retry card · fatal: generic error | |
| offline | no board of its own: From states.md (Growth): cached /growth + banner |
The boards
Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.
empty
baseline
ready
gap
Tokens used
By path in ../../system/tokens.source.json.
| Token | Where |
|---|---|
color.accentPrimary |
.btn--primary |
color.accentPrimaryPressed |
.btn--primary |
color.bgCanvas |
.chart, .device, .gap-mark, .large … |
color.bgInverse |
.card--ink, .chip, .level-badge, inline |
color.bgInverseRaised |
.card--ink, inline |
color.bgSunken |
.ach, .ach-icon, .btn, .dim-bar … |
color.bgSurface |
.ach, .card, .chart, .chip … |
color.dimEfficiency |
inline |
color.dimFluency |
inline |
color.dimKeyInfo |
inline |
color.dimStructure |
inline |
color.lineHairline |
.ach, .chart, .chip, .dim-row … |
color.lineInverse |
.topic-ink |
color.lineStrong |
.chart, .gap-mark, .miss, .pips |
color.reward |
.ach, .ach-icon, .card--ink, .chart … |
color.statusSuccess |
.c-success, .delta-up, .on, .pips |
color.textDisabled |
.btn |
color.textOnAccent |
.btn--primary |
color.textOnInverse |
.card--ink, .chip, .level-badge |
color.textOnInverseSecondary |
.c-on-inverse-2, .chip, .count |
color.textOnReward |
.level-badge, .reward |
color.textPrimary |
.chart, .chip, .device, .dim-bar … |
color.textSecondary |
.c-secondary, .segmented, .state-illo |
color.textTertiary |
.ach, .ach-icon, .axis, .c-tertiary … |
color.topicCoral |
.topic-coral |
color.topicViolet |
.topic-violet |
radius.button |
.btn |
radius.card |
.card |
radius.md |
.ach, .list, .skill |
radius.pill |
.chip |
radius.sm |
.topic-tile |
space.gutter |
.ach-row, .chip-row, .large, .navbar … |
space.s3 |
.section-head |
space.s5 |
.card |
space.s6 |
.has-tabbar, .screen |
space.safeBottom |
.has-tabbar, .screen, .tabbar |
space.safeTop |
.device, .screen |
space.section |
.section-head |
space.sizeCtaHeight |
.btn, .screen |
space.sizeNavbarHeight |
.navbar |
space.sizeTabbarHeight |
.has-tabbar, .screen, .tabbar |
typography.callout |
.t-callout |
typography.caption1 |
.t-caption |
typography.display |
.t-display |
typography.footnote |
.t-footnote |
typography.headline |
.t-headline |
typography.largeTitle |
.t-large-title |
typography.subheadline |
.t-subhead |
typography.title2 |
.t-title2 |
typography.title3 |
.t-title3 |
Strings
app.name, common.seconds_longer, common.seconds_shorter, common.see_all, common.xp_plus, complete.stat.ability, complete.xp.level, dimension.efficiency, dimension.fluency, dimension.key_info, dimension.structure, growth.ability.delta, growth.ability.label, growth.ability.meta, growth.achievement.unlocked, growth.achievements.title, growth.baseline.label, growth.baseline.title, growth.chart.a11y, growth.chart.gap, growth.chart.gap.a11y, growth.chart.note, growth.chart.pending, growth.chart.point, growth.chart.title, growth.dims.note, growth.dims.pending, growth.dims.title, growth.empty.body, growth.empty.title, growth.range.12w, growth.range.4w, growth.range.8w, growth.range.a11y, growth.recent.title, growth.skill.counts, growth.skill.focus, growth.skill.never, growth.skills.title, growth.skills.window, growth.title, growth.trend.insufficient, growth.trend.up, home.greeting.format, home.quest.cta.start, micro.conclusion_first, micro.cut_fillers, micro.drop_repeats, micro.keep_constraints, micro.name_the_claim, micro.one_example, micro.three_points, notif.daily.title, paywall.calendar.rest, paywall.expired.stat.ability, paywall.expired.stat.sessions, paywall.k.value, paywall.projection.score, paywall.restored.cta, plan.week, processing.unreliable.reason_label, profile.stat.ability, profile.stat.sessions, settings.retention.30, tab.growth, tab.home, tab.library, tab.nav.a11y
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-heavy, --font-weight-medium, --font-weight-regular, --font-weight-semibold, --motion-duration-fast, --motion-duration-instant, --motion-ease-standard, --type-tracking-tight.