---
title: "S24 Growth · Growth"
description: "Contract, a board per state (empty, baseline, ready, gap, loading, error, offline), tokens and strings."
source: "design/hifi/S24/screen.md"
---

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

# Hi-fi: S24 Growth · Growth

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

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

Drawn in the gallery: [Growth](/design/gallery/index.html#g-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](/design/gallery/growth/growth--empty.html) · [en](/design/gallery/growth/growth--empty.en.html) | growth-empty.json ([zh-Hans](/design/examples/zh-Hans/growth-empty.json) · [en](/design/examples/en/growth-empty.json)) |
| baseline | [zh-Hans](/design/gallery/growth/growth--baseline.html) · [en](/design/gallery/growth/growth--baseline.en.html) | growth-baseline.json ([zh-Hans](/design/examples/zh-Hans/growth-baseline.json) · [en](/design/examples/en/growth-baseline.json)) |
| ready | [zh-Hans](/design/gallery/growth/growth--ready.html) · [en](/design/gallery/growth/growth--ready.en.html) | growth-ready.json ([zh-Hans](/design/examples/zh-Hans/growth-ready.json) · [en](/design/examples/en/growth-ready.json)), me.json ([zh-Hans](/design/examples/zh-Hans/me.json) · [en](/design/examples/en/me.json)) |
| gap | [zh-Hans](/design/gallery/growth/growth--gap.html) · [en](/design/gallery/growth/growth--gap.en.html) | growth-gap.json ([zh-Hans](/design/examples/zh-Hans/growth-gap.json) · [en](/design/examples/en/growth-gap.json)), me.json ([zh-Hans](/design/examples/zh-Hans/me.json) · [en](/design/examples/en/me.json)) |
| loading | [no board of its own](/design/hifi/s24/bindings/index.md#states): From [states.md](/design/states/index.md) (Growth): chart/card skeletons |  |
| error | [no board of its own](/design/hifi/s24/bindings/index.md#states): From [states.md](/design/states/index.md) (Growth): inline Retry card · fatal: generic error |  |
| offline | [no board of its own](/design/hifi/s24/bindings/index.md#states): From [states.md](/design/states/index.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**

[S24 empty · zh-Hans](/design/gallery/growth/growth--empty.html) [S24 empty · en](/design/gallery/growth/growth--empty.en.html)

**baseline**

[S24 baseline · zh-Hans](/design/gallery/growth/growth--baseline.html) [S24 baseline · en](/design/gallery/growth/growth--baseline.en.html)

**ready**

[S24 ready · zh-Hans](/design/gallery/growth/growth--ready.html) [S24 ready · en](/design/gallery/growth/growth--ready.en.html)

**gap**

[S24 gap · zh-Hans](/design/gallery/growth/growth--gap.html) [S24 gap · en](/design/gallery/growth/growth--gap.en.html)

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