Interactive kit · grounded in code

Library — additions from the pages

Flat v2 · Phase B · proposal

Component library additions from the page boards

The page boards drew every page only from the library and listed what it lacked. The library was extended first (sections 18.2, 19.3, 19.5, 20.2, 20.3, 21.2 and 22.2); this board draws those additions the way /wireframes/flat-v2-patterns drew section 14: one specimen block per component at 1:1 with its rulers, every applicable state, the content rules, the spoken label (B8), the motion with its reduced-motion variant (B7), the dark values and the 130% and 200% frames (B6). Scheme S2 Ball & Ink. The sibling boards are flat-v2-components (chrome, surfaces, rows), flat-v2-controls (controls, overlays, forms) and flat-v2-patterns (page components, scaling, motion, accessibility, platform).

How to read a specimen

Library the section text it draws, quoted; Anatomy the geometry at 1:1 with pt rulers (magenta lines and dashed boxes are board chrome, never part of a component) beside the behaviour table (press, hover, focus, disabled, loading, spoken label, motion, reduced motion, text scale, used by, replaces).
States every applicable state, and under it “Not drawn:” with the reason for each state that does not apply; Variants sizes and content rules (long names wrap and are never cut, 99+); Text size 130% and 200% where B6 changes the layout.
The closing panels: the DOM verification (grid, type scale, minHeights, 44 targets, hairlines and seams, contract section 5), the spec conflicts with a proposed fix each, and the coverage map from every library row to its specimen.

Rulings carried in

§15 every fixed height that holds text is a floor (heights here are minHeight), motion tokens and toast timings; §16 ActionSheet cap 88%, one HeaderTextAction per side;
§17 H1 a text action sits left of any icon, the overflow ⋯ is rightmost; §19.2 the Two-line Cell is min 68, Reactions replace the Reaction picker, the map band has the photo geometry;
the owner’s wizard-navigation LAW and required-marker LAW (2026-08-15); the Offline strip is 350 × 48 everywhere; heights that come from text lines (n × 22) are a listed exemption, spacing values are never exempt.

1Rows and cellstext rows, trailing controls, the figure column, the Cell variants, disclosure and answers

Text rowAn object in a list that has no picture: a document, a receipt, a history entry.

the PersonRow text block without leading media · L1 15/22·600 ink · L2 13/18·500 secondary · min 68 = 12 + 22 + 4 + 18 + 12 · one trailing element (Tag, figure or chevron), centred on line 1 · full-bleed, content on the rail · no divider

Library §20.2 “the PersonRow text block without leading media … Used for lists of documents, receipts and history entries (동의 이력, 제안 내역). A Cell is a label/value pair inside a settings group; a Text row is an object in a list.”

Anatomy

20370

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

12trailing

12 pad

22 L1 · 15/22·600

18 L2 · 13/18·500

12 pad

Press

scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Content

L1 and L2 wrap (a long document title takes two lines; it is never cut); the trailing element never shrinks; at most one trailing element

Selected / error / empty

none on the row: a Text row is a plain object; an empty list is the screen’s EmptyState, an error is the list’s Notice

Spoken

one stop: "마케팅 정보 수신 동의, 2026년 9월 1일 동의, 동의함": L1, L2, then the trailing text; the date is spoken in full

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

reading class, cap 2.0: both lines wrap; from 150% the trailing element moves under line 2 (left-aligned); the row grows, never clips; the chevron keeps its place at the end

Used by

동의 이력, 제안 내역, 회비 영수증 and history lists (list-b board)

Replaces

ListRow (packages/ui/src/list-row.tsx) in its avatar-less use, and the per-screen hand-built rows of the consent history and contribution lists

States

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

rest Tag 동의함

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

pressed Tag 동의함 · scale 0.98 · opacity 0.80

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

hover Tag 동의함 · web: opacity .85 + pointer

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

focus Tag 동의함 · web: 2px ink ring, offset 2

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

disabled Tag 동의함 · opacity .5 · inert · aria-disabled

loading skeleton: two lines at 50% / 30%, pulse .6 ↔ .9

Not drawn: selected (a Text row is never a selectable choice), error (the list owns the error) and empty (the list owns the empty state).

Variants

9월 회비

30,000원

9월 17일 입금

figure a figure 15/22·700 tabular

개인정보 처리방침

시행일 2026. 9. 1.

chevron it opens the document

장소 정보 제안 내역

올림픽공원 테니스장

코트 수 수정

no trailing L1 and L2 only

마케팅 및 광고성 정보 수신에 대한 동의 및 철회 이력

동의함

2026. 9. 1. 동의

a long title wraps L1 on two lines: 12 + 44 + 4 + 18 + 12 = 90, the trailing stays on line 1

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

dark the same markup, the dark values

Text size

마케팅 정보 수신 동의

동의함

2026. 9. 1. 동의

130% text trailing still on line 1

마케팅 정보 수신 동의

2026. 9. 1. 동의

동의함

200% text trailing under line 2 (from 150%)

Row trailing controlA row’s one trailing element may be a control: an IconButton or a small tonal Button, with its own focus stop.

IconButton: 20 glyph in a 44 target · sm tonal Button: 36 tall, hit slop 4 · the control centres on the row (text, figures and Tags ≤ 24 centre on line 1, §19.3) · the row’s press area excludes the control’s target and pressing the control never presses the row · two focus stops

Library §20.2 “a row’s one trailing element may be a control … It centres on the row (§19.3) and is its own focus stop … Spoken as two stops: the row’s composed label, then the control (‘정우진, 친구 추가’).” §19.3 PersonRow trailing alignment · §18.2 PersonRow trailing meta.

Anatomy

20370

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

row press area

4012sm 36 · 16 / 16

12 pad

44 text block

L1 22 + 4 + L2 18 · avatar 40 centred

12 pad

Press

the control (row: .98 / .80 on the rest of the row): scale 0.97 · opacity 0.92 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Hit areas

the control’s 44 target is its own; the row’s press area is the row minus that target (pressing the control never presses the row, pressing the row never fires the control)

Alignment

controls taller than 24 centre on the row; text, figures and Tags (≤ 24) centre on line 1 (§19.3); one trailing element still

Control loading

the Button shows its spinner at full opacity, width held; the row stays pressable

After the action

친구 추가 → a disabled tonal "요청됨" (the answer is in the row, no toast needed)

Spoken

two stops: the row’s composed label "정우진, NTRP 3.5, 강남 라켓클럽", then the control "친구 추가" (name = the visible text; for an IconButton the aria-label)

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

the row text wraps; from 150% the control moves under line 2, left-aligned with the text; the Button is a label class (cap 1.5) and grows with its text, an IconButton stays 44

Used by

친구 찾기 results (L1: the row opens 공개 프로필, 친구 추가 keeps its own focus stop), 메시지 요청, member rows with a menu

Replaces

the static PersonRow trailing (a Tag only) and the per-screen rows that wrapped a Button in a Pressable row (nested pressables)

States

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

row · rest

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

row · pressed row .98 / .80, the control untouched

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

control · pressed button .97 / .92; the row stays at rest

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

control · hover web: opacity .85 + pointer

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

row · focus stop 1: the ring around the row

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

control · focus stop 2: the ring around the Button, offset 2

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

control · loading spinner, width held

정우진

NTRP 3.5

강남 라켓클럽

요청됨

control · disabled after the request: 요청됨, .5

row · loading skeleton

Not drawn: selected (a row with a control is not a choice), error (a failed request is the Toast "요청하지 못했어요" and the Button returns to rest), empty (the list’s EmptyState).

Variants

정우진

NTRP 3.5

강남 라켓클럽

IconButton ⋯ 20 in a 44 target, its glyph on the rail

정우진

오후 2:14

복식

강남 라켓클럽

trailing meta 13/18·500 secondary text (a time, a rate) in place of a figure or Tag; centred on line 1 (§18.2)

정우진

참석

NTRP 3.5

강남 라켓클럽

Tag (≤ 24) centres on line 1, not on the row (§19.3)

남궁민수 (강남 라켓클럽 총무, 복식 선수)

NTRP 3.5

강남 라켓클럽

친구 추가

a long name wraps the control stays centred on the row

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

dark

Text size

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

130% text the Button grows with its label

정우진

NTRP 3.5

강남 라켓클럽

친구 추가

200% text under line 2, left-aligned

Figure columnRanked and scored lists right-align their figure in one column, so the digits line up.

figure 15/22·700 tabular, right-aligned, in a column as wide as the widest figure on the page · the level Tag (a run start only, BADGE-EXCEPTION) in a reserved 24 slot, 8 before the column · rank column 24 (1–99) / 32 (100–999) / 40 (1,000+), 13/18·600 tabular, right-aligned, 12 before the avatar

Library §20.2 Figure column · §20.1 L4 “the level Tag shows only where a level run starts, and the Podium always shows it. The Tag sits in a reserved slot so the figures align.”

Anatomy

20370

김민준

강남 라켓클럽

52경기

3.5

1,482

이서연

반포 테니스 모임

48경기

1,450

박지훈

강남 라켓클럽

61경기

998

24124012slot 248widest figure

68 row

12 + 44 + 12; avatar 40 centred

no Tag: the figure keeps its place

the Tag slot stays reserved

Press

scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Column width

the grid is one subgrid of the list: the figure column is as wide as the widest figure of the page (auto), so a longer figure never pushes one row only

Rank width

24 while every rank is 1–99, 32 for 100–999, 40 from 1,000: the column fits the widest rank of the page and every row shares it

Level Tag

drawn only where a level run starts (the first row of 3.5, then 3.0 …); the slot is always reserved

Spoken

one stop per row: "1위, 김민준, ELO 1,482, NTRP 3.5, 강남 라켓클럽, 52경기"; the rank leads, the level Tag is read only when drawn

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

numeral class (figure, cap 1.5) and label class (rank, cap 1.5): up to 130% the grid holds; from 150% the figure and the Tag go under line 2 and the rank column stays; the rank column grows with its digits

Used by

순위표, 순위 pane, 멤버 순위, head-to-head tables

Replaces

LeaderboardRow (packages/app/src/presentation/components/leaderboard-row.tsx): the rank column was fixed at 32 and the Tag sat in the cluster, so figures drifted

Rank width

김민준

강남 라켓클럽

52경기

3.5

1,482

이서연

반포 테니스 모임

48경기

1,450

박지훈

강남 라켓클럽

61경기

998

1–99 24

118

김민준

강남 라켓클럽

52경기

3.5

1,482

119

이서연

반포 테니스 모임

48경기

1,450

120

박지훈

강남 라켓클럽

61경기

998

100–999 32

1,024

김민준

강남 라켓클럽

52경기

3.5

1,482

1,025

이서연

반포 테니스 모임

48경기

1,450

1,026

박지훈

강남 라켓클럽

61경기

998

1,000+ 40

States

김민준

강남 라켓클럽

52경기

3.5

1,482

rest the row opens the profile

김민준

강남 라켓클럽

52경기

3.5

1,482

pressed scale 0.98 · opacity 0.80

김민준

강남 라켓클럽

52경기

3.5

1,482

hover web: opacity .85 + pointer

김민준

강남 라켓클럽

52경기

3.5

1,482

focus web: 2px ink ring, offset 2

김민준

강남 라켓클럽

52경기

3.5

1,482

disabled opacity .5 · inert · aria-disabled

loading skeleton at the same columns

Not drawn: selected, error and empty belong to the list (its own EmptyState).

Variants

남궁민수 황보서연 (강남 라켓클럽 총무)

강남 라켓클럽

4.0

1,309

a long name wraps the figure stays centred on the row

김민준

강남 라켓클럽

52경기

3.5

1,482

이서연

반포 테니스 모임

48경기

1,450

dark

Text size

김민준

강남 라켓클럽

52경기

3.5

1,482

이서연

반포 테니스 모임

48경기

1,450

130% text the grid still holds

김민준

강남 라켓클럽

52경기

1,4823.5

이서연

반포 테니스 모임

48경기

1,450

200% text figure and Tag under line 2

Cell · two-line, reason line, lockedA Cell with a second line: a caption under its label, or the reason a field cannot change.

min 68 = 12 + 22 + 4 + 18 + 12 (§19.2: was 64) · label 15/22·400 ink · second line 13/18·500 secondary · value 15/22·500 at the right · locked: the reason line plus a 16 lock in tertiary in the chevron’s slot, not pressable, no pencil, no chevron

Library §18.2 Two-line Cell (corrected §19.2: min 68) · §19.3 Cell, reason line · §21.2 Cell, locked “the §19.3 reason line plus a trailing 16 lock glyph in tertiary, in the chevron’s slot. Not pressable.”

Anatomy

20370

경기 방식

시작 후에는 바꿀 수 없어요

1216

12 pad

22 label · 15/22·400

18 line 2 · 13/18·500

12 pad

Press

scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Locked

not pressable: no dim, no settle, no hover, no focus stop; the label stays ink and readable (never .5, which would hide the reason); there is no pencil and no chevron

Reason

one line; secondary 13/18·500 (danger only when the field is blocked by an error); past two lines the copy is rewritten

Spoken

two-line / navigating: "정기 일정, 매주 토요일 오전 9시" (a button); locked: "경기 방식, 복식, 시작 후에는 바꿀 수 없어요" (text, not a control; the lock glyph is hidden); state stays out of the name

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

reading class: both lines wrap; from 150% the value goes under the label block; the cell grows (a floor), never clips; the 16 end glyph stays

Used by

the 일정 review (locked after start), 정기 일정 captions, 프라이버시 rows (the level’s meaning is the second line, D1), dates and captions

Replaces

CellRow / FactRow / ListRow (packages/ui/src/cell-row.tsx, fact-row.tsx) with a hand-built two-line layout; the disabled-opacity locked field

States

정기 일정

매주 토요일 오전 9시

rest two-line, navigates

정기 일정

매주 토요일 오전 9시

pressed two-line, navigates · scale 0.98 · opacity 0.80

정기 일정

매주 토요일 오전 9시

hover two-line, navigates · web: opacity .85 + pointer

정기 일정

매주 토요일 오전 9시

focus two-line, navigates · web: 2px ink ring, offset 2

정기 일정

매주 토요일 오전 9시

disabled two-line, navigates · opacity .5 · inert · aria-disabled

loading label 40%, second line 30%, value 20%

경기 방식

시작 후에는 바꿀 수 없어요

복식

locked · rest the reason line + lock

경기 방식

시작 후에는 바꿀 수 없어요

복식

locked · pressed nothing happens: inert, no dim, no settle

Not drawn: selected and error: a Cell shows its value, the form owns validation; empty: a Cell with no value is an unset field (the required marker, family forms).

Variants

정기 일정

매주 토요일 오전 9시

3개월

with a value value at the right, second line under the label

프로필 공개

클럽 멤버에게만 이름이 보여요

멤버만

Choice ▾ slot 프라이버시 row: the Choice opens a Sheet; the cell is not pressable (D1)

정기 일정 (매주 토요일 오전 9시, 올림픽공원 1번 코트)

다음 일정은 9월 19일이에요. 날짜가 바뀌면 멤버에게 알림이 가요.

long text wraps both lines wrap: 12 + 44 + 22 + 12 = 90

경기 방식

시작 후에는 바꿀 수 없어요

복식

locked · dark

정기 일정

매주 토요일 오전 9시

two-line · dark

Text size

정기 일정

매주 토요일 오전 9시

3개월

130% text value still at the right

정기 일정

매주 토요일 오전 9시

3개월

200% text the value under the label block

경기 방식

시작 후에는 바꿀 수 없어요

복식

200% text locked: the reason wraps, the lock stays 16

Cell · edit, trailing slot, label Tag, Task CellOne Cell grammar for every settings and review row: what sits at its end tells the user what a tap does.

min 48 · label 15/22·400 secondary (ink 500 for a Task Cell) · exactly one trailing slot: value text · Tag sm (the Cell stays 48) · Choice ▾ sm 36 · sm tonal Button or IconButton · Switch · a count Tag before the chevron · the end glyph is 16 tertiary: chevron (navigates), pencil (edits in a Sheet), never both · a label Tag sm sits 8 after the label

Library §21.2 Cell, edit (EDIT-PENCIL: the shared EditCue, 16 tertiary, “never beside a chevron, spoken ‘장소, 수정’; opens the field’s bottom edit Sheet”) · Cell trailing slot (“Only one per Cell”) · Cell, label Tag · §19.3 Cell, Tag value · §18.2 Task Cell (“a count Tag before the chevron”).

Anatomy

20370

테니스장

올림픽공원

labelslot (one)816

48 min

22 line centred · pad 12

Press

a navigating or editing Cell presses as a row; a Cell whose slot is a control presses nothing but the control: scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Slot rule

only one trailing slot per Cell; a Tag and a Choice never share a Cell; the slot controls (Choice, Button, IconButton) are their own focus stops and the Cell around them is not pressable (as a row trailing control, §20.2); the Switch Cell toggles from the whole row

Pencil vs chevron

a pencil edits in place (opens the field’s bottom edit Sheet), a chevron navigates to another screen; a Cell never draws both (the pencil takes the chevron’s slot)

Required (LAW)

an unset required Cell carries the one $error asterisk after its label and shows its placeholder in secondary ink; it starts unset

Spoken

navigating / editing: "장소, 올림픽공원 테니스장, 수정" (a button: the pencil is spoken as 수정); Tag value: "참가비, 입금 필요"; Task Cell: "가입 신청, 3개" ; Switch: "경기 알림" with aria-checked; slot controls are their own stops

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

reading class: from 150% the label goes over the value (the slot under the label block) and the end glyph stays; a Choice or Button slot is a label class (cap 1.5) and moves under the label; every height is a floor

Used by

the 일정 / 클럽 review pages (every editable field has its Cell, E1), 프라이버시 and 설정 rows, the officials’ 할 일 section (Task Cell)

Replaces

CellRow / FactRow / EditFieldRow (packages/ui/src/cell-row.tsx, edit-field-row.tsx): hand-placed pencils and trailing widgets per screen

Cell, edit

테니스장

올림픽공원 테니스장

rest pencil 16 tertiary

테니스장

올림픽공원 테니스장

pressed pencil 16 tertiary · scale 0.98 · opacity 0.80

테니스장

올림픽공원 테니스장

hover pencil 16 tertiary · web: opacity .85 + pointer

테니스장

올림픽공원 테니스장

focus pencil 16 tertiary · web: 2px ink ring, offset 2

테니스장

올림픽공원 테니스장

disabled pencil 16 tertiary · opacity .5 · inert · aria-disabled

장소

선택해주세요

unset · required asterisk after the label, placeholder, starts unset

loading skeleton label 40% / value 20%

테니스장

올림픽공원 테니스장

dark

Not drawn: selected and error (the field’s own Sheet validates; the review page shows the Cell’s danger sub line "필수 항목이에요" only after a failed submit, drawn on the forms board).

Trailing slot

종목

복식

참가비

입금 필요

정렬

최신순

카카오 계정

연결

초대 링크

경기 알림

가입 신청

the seven slots value · Tag · Choice ▾ · sm Button · IconButton · Switch · count Tag + chevron (Task Cell); hairlines between, none after the last

종목

복식

참가비

입금 필요

정렬

최신순

카카오 계정

연결

초대 링크

경기 알림

가입 신청

dark the same group

프로필 사진신규

없음

label Tag one Tag sm 8 after the label (신규); the value is text only; counts toward the object’s two Tags

가입 신청

Task Cell · nothing pending no count Tag when the count is 0

신고 관리

99+

Task Cell · 99+ the count Tag caps at 99+; neutral when nothing needs action

참가비

입금 필요

pressed · Tag value row .98 / .80

Not drawn: a slot never has a pressed state of its own beyond its control’s (Choice .96 / .85, Button .97 / .92, IconButton .92 / .78: the controls board); disabled is .5 on the whole Cell.

Text size

테니스장

올림픽공원 테니스장

참가비

입금 필요

정렬

최신순

130% text value still at the right

테니스장

올림픽공원 테니스장

참가비

입금 필요

정렬

최신순

200% text label over the slot; the glyph stays

ExpandToggle · lone row and disclosure CellThe one collapse pattern: a lone row that reveals more of a list, and a Cell that reveals its own text.

lone row: 48 full width, label centred 15/22·600 secondary that states its count (“4개 더 보기” / “접기”), a 16 chevron 8 after it rotating 180° in 200 ms · disclosure Cell: a Cell whose trailing chevron points down (closed) or up (open); an optional value before it; body 15/22·400 ink, 12 below the label, 16 at the bottom; cells open independently

Library §19.3 ExpandToggle, lone row · ExpandToggle, disclosure Cell · §19.5 “the bottom pad stays 16 … a box whose height comes from its text lines (n × 22) is a listed exemption from the 4pt height check, never a reason to bend a pad to 17.” A right chevron always means navigation.

Anatomy

20370

4개 더 보기

참가비는 언제 내나요?

9월 1일

일정에 참석을 신청하면 입금 안내가 와요. 시작 2시간 전까지 입금하면 돼요. 늦으면 예비로 바뀔 수 있어요.

48 lone row

label centred, chevron 16 after it (8)

disclosure, open

12 + 22 + 12 + n × 22 + 16

Press

scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

Independent

opening one disclosure never collapses another (auto-collapse makes the content jump under the finger, NN/g)

Label top

a disclosure Cell sets its label 12 from the top in both states, so the label does not move when it opens

Spoken

lone row: "4개 더 보기" with aria-expanded=false (open: "접기", expanded=true; the label states its count, never a bare chevron); disclosure: "참가비는 언제 내나요?" with aria-expanded; the body is read as the next text

Motion

chevron: toggle 200 ms standard, rotation 0° → 180° (158° at 100 ms); the body: reveal 250 ms enter (0, 0, 0, 1)

Reduced motion

the chevron and the body appear in their end state at once (no rotation, no slide)

Text scale

reading class: the label wraps (never clipped); the lone row stays centred; a disclosure value goes under the label from 150%; the body wraps and the cell grows

Used by

FAQ and 공지사항 (disclosure Cell), 멤버 / 사진 / 댓글 caps (lone row)

Replaces

ExpandToggle (packages/ui/src/expand-toggle.tsx), which draws an icon-only chevron collapse (a bare chevron hides what it does)

Lone row

4개 더 보기

closed states its count

접기

open 접기, chevron up

4개 더 보기

pressed row .98 / .80

4개 더 보기

hover web: opacity .85 + pointer

4개 더 보기

focus web: 2px ink ring, offset 2

4개 더 보기

disabled opacity .5, inert

4개 더 보기

loading the chevron becomes a spinner, aria-busy

4개 더 보기

dark

Not drawn: selected, error and empty: a toggle has no selection; a list with nothing more draws no toggle.

Chevron rotation

4개 더 보기

0 ms closed

4개 더 보기

100 ms 88% of the way (0.2, 0, 0, 1)

4개 더 보기

200 ms open

Disclosure Cell

참가비는 언제 내나요?

closed a Cell, 48, a down chevron

참가비는 언제 내나요?

일정에 참석을 신청하면 입금 안내가 와요. 시작 2시간 전까지 입금하면 돼요.

open body 12 below the label, 16 at the bottom

9월 코트 이용 안내

9월 1일

9월부터 올림픽공원 3번 코트가 보수 공사로 닫아요.

with a value 공지사항: the date before the chevron

참가비는 언제 내나요?

일정에 참석을 신청하면 입금 안내가 와요. 시작 2시간 전까지 입금하면 돼요.

불참하면 환불되나요?

시작 24시간 전까지는 전액 환불돼요.

two cells, independent the first stays open when the second opens

참가비는 언제 내나요?

pressed row .98 / .80

참가비는 언제 내나요?

focus web ring

참가비는 언제 내나요?

일정에 참석을 신청하면 입금 안내가 와요. 시작 2시간 전까지 입금하면 돼요.

dark · open

Not drawn: disabled and loading: a disclosure is static text (nothing to disable, nothing to fetch); selected, error and empty do not apply.

Text size

참가비는 언제 내나요?

9월 1일

일정에 참석을 신청하면 입금 안내가 와요. 시작 2시간 전까지 입금하면 돼요.

130% text the label wraps; the value stays

참가비는 언제 내나요?9월 1일

일정에 참석을 신청하면 입금 안내가 와요. 시작 2시간 전까지 입금하면 돼요.

200% text value under the label

AnswerPairTwo tonal buttons that answer a request right inside its row.

two sm tonal Buttons (36, gap 8) under line 2 of a request row, left-aligned with the text · the row grows by 44 (8 + 36) · each Button has a 44 target · neutral tonal on both: the screen’s one coloured action is unaffected

Library §18.2 AnswerPair · §18.1 D2 (수락 · 거절 on 메시지 요청 and applicants, “request lists only”) and D8 (참석 · 불참 on unresolved 출석 확인 rows: “an explicit choice; a bare row tap never records attendance”).

Anatomy

2037072

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

수락8거절

12 pad

44 text block

L1 22 + 4 + L2 18

36 buttons

sm tonal, gap 8, 44 target each

12 pad

Press

each button (the row around keeps .98 / .80 and opens the profile): scale 0.97 · opacity 0.92 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

Order

the affirmative answer first (수락, 참석), the negative second; both tonal, so neither competes with the screen’s coloured action

After a tap

the tapped Button shows its spinner (width held) and the other is disabled until the mutation settles; on success the row leaves the list; on failure both return and a danger helper line names it

Error

a 13/18 danger line under the pair ("수락하지 못했어요. 다시 시도해주세요"); never a toast alone

Spoken

the row’s label "이서연, NTRP 3.0, 한 번 같이 치고 싶어요", then two more stops "수락" and "거절"; after the answer the row is announced as removed ("이서연, 수락함")

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; the answered row fades out fadeFast 100 ms standard, the next row snaps up (no layout animation in lists, §15)

Reduced motion

the row disappears at once

Text scale

label class (cap 1.5): the Buttons grow with their words; from 150% each Button goes full width on its own line (stacked, gap 8); the row grows, never clips

Used by

메시지 요청, applicants (가입 신청), 출석 확인 (참석 · 불참)

Replaces

the per-screen Accept / Reject pair of ActionButtons in request rows (packages/features/messaging request-gate-bar and the applicants list)

States

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

rest

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

수락 pressed button .97 / .92

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

수락 hover web: opacity .85

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

수락 focus stop 2: ring around the Button, offset 2

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

saving spinner on 수락, 거절 disabled

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

수락하지 못했어요. 다시 시도해주세요

error both return; a danger line under the pair

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

row · pressed the row presses, the pair untouched

row · loading skeleton, no pair

Not drawn: selected (an answer is not a state of the row) and empty (the list's EmptyState when no requests remain).

Variants

이서연

9월 19일 (토)

복식

참석

불참

attendance 참석 · 불참 on an unresolved 출석 확인 row (D8)

남궁민수 황보서연 (강남 라켓클럽 총무)

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

a long name wraps the pair stays under line 2

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

dark

Text size

이서연

오후 2:14

NTRP 3.0

한 번 같이 치고 싶어요

수락

거절

130% text Buttons grow with their label

이서연

NTRP 3.0

한 번 같이 치고 싶어요

오후 2:14

수락

거절

200% text each Button full width, stacked

2Labels and markersthe unread dot, the header badge, counted tabs, section heads and captions

Unread markerThe one sign that a notification has not been read.

6 px danger dot hung in the gutter at x 8 to 14, centred on line 1 · the text stays on the rail · spoken prefix “읽지 않음” · read rows draw nothing (no empty slot)

Library §18.2 Unread marker “6px danger dot hung at x 8–14, centred on line 1; spoken prefix 읽지 않음” · §18.1 D1 “unread = a 6px danger dot hung in the gutter (x 8–14) + ‘읽지 않음’ prefixed to the spoken label”. A colour-only cue fails WCAG 1.4.1, so the prefix is the non-visual cue.

Anatomy

814370

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

12 pad

22 line 1 · dot centred

18 line 2

12 pad

Press

scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

Select mode

dismissing is Select mode (D1): the checkbox leads on the rail and the dot stays in the gutter; the swipe action is only an accelerator

Colour

danger #B8332E on white (4.99:1), #FA9B94 on the dark canvas; a graphical object, 3:1 needed

Spoken

unread: "읽지 않음, 참가비 입금 확인 요청, 이서연님이 9월 회비 입금을 알렸어요, 방금"; read: the same without the prefix; the dot is hidden from the tree (the prefix replaces it)

Motion

it leaves on read in 100 ms (fadeFast exit); it never pulses

Reduced motion

it disappears at once

Text scale

the dot stays 6 px and stays centred on line 1 as the line grows; it is not text, so it does not scale

Used by

알림 센터, 메시지 목록, 클럽 공지 rows

Replaces

the per-screen unread cues: bold text, a tinted row and a CornerCountBadge on rows (packages/ui/src/corner-count-badge.tsx)

States

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

unread

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

read no dot, no gap reserved

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

unread · pressed row .98 / .80, the dot dims with the row

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

unread · focus

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

unread · hover

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

unread · disabled .5 on the row

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

select mode checkbox on the rail, dot in the gutter

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

dark

Not drawn: loading (a skeleton row has no state yet), selected (Select mode shows the checkbox, drawn), error and empty (not row states).

Text size

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

130% text dot centred on the taller line 1

참가비 입금 확인 요청

이서연님이 9월 회비 입금을 알렸어요

방금

200% text trailing under line 2, dot unchanged

Header icon badgeA dot or a count on a header icon: something is waiting behind it.

the tab-bar badge on a header glyph: a 8 dot or a count Tag 16 tall (min 16, r full, 12/16·700, 99+ cap) at the top-right of the 24 glyph · ring 1.5 in the canvas colour · the target stays 44 · count hidden at 0

Library §18.2 Header icon badge “the tab-bar dot or count Tag on a header icon (top-right of the 24 glyph, ring 1.5 canvas)” · §3 Tab bar badge: “7px danger dot (ring 1.5 canvas) or count tag 16 tall” · §21.1 E1 “the header 관리 action carries a Header icon badge when anything is pending”.

Anatomy

370

홈

glyph 24

44 target

glyph 24 · badge 16 top-right

Press

the whole IconButton, badge included: scale 0.92 · opacity 0.78 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

Dot vs count

a dot when something is pending and its number is not the point (관리); a count when the number is (알림); never both on one icon

Spoken

the icon’s label then the state: "알림, 읽지 않은 3개" (dot: "알림, 새 알림 있음"; 99+: "알림, 읽지 않은 99개 이상"); the badge itself is hidden from the tree

Motion

appears and leaves fade 150 ms standard (0.2, 0, 0, 1); a changing count is instant (counts never animate, B7.6)

Reduced motion

the cross-fade becomes instant

Text scale

the glyph and the 44 target do not scale (chrome class, cap 1.3 for any text): a count Tag grows only with its 11/14 label (chrome cap 1.3), the badge stays on the glyph corner

Used by

홈 알림 bell, 메시지 icon, 클럽 관리 (the official’s header action)

Replaces

CornerCountBadge (packages/ui/src/corner-count-badge.tsx) placed ad hoc on header icons

States

홈

none nothing waiting: the plain icon

홈

dot something is pending

홈

count 3 a number

홈

99+

count 99+ capped, the badge grows to the right

홈

pressed icon .92 / .78 on the whole button

홈

hover

홈

focus

홈

disabled .5 incl. the badge

홈

dark the ring is the dark canvas

Not drawn: loading (the badge appears with the data, never as a placeholder), selected, error and empty (a count of 0 draws no badge).

Tabs item with a countA scope tab that says how many items wait behind it.

the Tabs item (row 44, label 15/22, active 600 ink + 2 underline, inactive 500 secondary, gap 24 from the rail) with a count Tag (20 tall, neutral; danger when the count needs action) 4 after the label · the underline spans the whole item

Library §18.2 Tabs item with count “a count Tag (20, neutral, or danger when it needs action) 4 after the label” · §3 Tabs (scope): “labels 15/22, active 600 ink + 2pt underline the label width … horizontally scrollable past 4”.

Anatomy

20370

예정3

매치 찾기

테니스장12

count 20

42 + 2 underline = 44

label 22 centred in the item

Press

the item (dim .85, no settle): dim 0.85, no settle · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Tones

neutral = a plain count; danger = the count needs action (pending requests); 99+ cap; a zero count draws no Tag

Overflow

past four items the row scrolls horizontally; the active item scrolls into view

Spoken

"예정, 3, 탭, 3개 중 1번째" with aria-selected on the active tab; the count is read after the label, the danger tone is not read (the number carries it)

Motion

the underline slides on the navSlide spring {22, 280, .8} (311 ms); the count changes instantly

Reduced motion

the underline jumps to the new tab at once

Text scale

chrome class, cap 1.3: label and count grow to at most 130% and the row grows (a floor); it stays one scrollable row, never wraps; the count Tag is 20 at 100%

Used by

경기 (예정 · 매치 찾기 · 테니스장), 클럽 panes, 기록 tabs

Replaces

PillNav / SegmentedTabs with a count (packages/ui/src/pill-nav.tsx, segmented-tabs.tsx): the count sat in the label string

States

예정3

매치 찾기

테니스장12

rest first tab active

예정3

매치 찾기

테니스장12

second active underline under label + count

예정3

매치 찾기

테니스장12

pressed dim .85 on the inactive item

예정3

매치 찾기

테니스장12

hover web: opacity .85 + pointer

예정3

매치 찾기

테니스장12

focus web: 2px ink ring, offset 2

알림99+

메시지7

요청

count 99+

예정

매치 찾기

테니스장

loading counts are placeholders

예정3

매치 찾기

테니스장12

dark

Not drawn: disabled (a tab is never disabled: an empty scope shows its EmptyState), selected is the active item, error and empty belong to the pane under the tabs.

Text size

예정3

매치 찾기

테니스장12

130% text the cap: 130%

예정3

매치 찾기

테니스장12

200% text stays at the 130% cap (chrome class)

SectionHead variantsThe 24-tall head of a section, in the four shapes the pages needed.

24 tall (floor) · title 17/24·600 · 32 above, 8 below · count suffix: 15/22·500 secondary 4 after the title · command action: 13/18·600 ink, no chevron (모두 읽음) · nav action: 13/18·500 secondary + chevron 16 (전체 보기) · ExpandToggle slot: the one chevron collapse, a 44 target at the right

Library §18.2 SectionHead variants “count suffix (17/24·600 title + 15/22·500 secondary count, gap 4) · command action (13/18·600 ink, no chevron, e.g. 모두 읽음) · ExpandToggle slot (the one chevron collapse)” · §3 Section head “action target 44; pressed .85”.

Anatomy

20370

참석6

전체 보기

titlecountaction 13/18

32 above

the section seam, ink to ink

24 head · 17/24·600

Press

the action (dim .85, no settle); its target is 44: dim 0.85, no settle · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

Which

count suffix says how many; a nav action goes to the full list (chevron, navigates); a command action does something now (no chevron); the toggle collapses the section; one action per head

Disabled / busy

a command with nothing to do is .5 (모두 읽음 with no unread); while it runs a 16 spinner leads it

Spoken

the title is a level-2 heading: "참석, 6, 제목 2"; the action is its own stop: "전체 보기" (link) or "모두 읽음" (button); the toggle: "접기" / "펼치기" with aria-expanded

Motion

the action dims press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; the toggle chevron toggle 200 ms standard

Reduced motion

the settle is dropped, the dim stays

Text scale

reading class for the title and count, label class for the action: from 150% the action moves under the title, left-aligned (proposed, B6.5 for a trailing element); the head grows (a floor)

Used by

참석 · 멤버 · 사진 sections, 알림 (모두 읽음), 클럽 sections, collapsible lists

Replaces

SectionHeader (packages/ui/src/section-header.tsx, navTitle 17/22·700 + divider) and its per-screen count and action variants

Variants

참석

title only

참석6

count suffix 참석 6

참석6

전체 보기

nav action 전체 보기 ›

이번 주

모두 읽음

command action 13/18·600 ink, no chevron

지난 일정12

ExpandToggle slot · closed

지난 일정12

ExpandToggle slot · open

States

참석

전체 보기

action · pressed dim .85

참석

전체 보기

action · hover

참석

전체 보기

action · focus

이번 주

모두 읽음

command · disabled .5: nothing unread

이번 주

모두 읽음

command · busy a 16 spinner leads the label

참석6

전체 보기

dark

Not drawn: loading (the head is static copy: the section’s rows skeleton), selected, error and empty do not apply.

Text size

참석6

전체 보기

130% text one row

참석6

전체 보기

200% text the action under the title

Caption rowA quiet line of context under a section head: a legend, a subtitle, the comparison a number is read against.

13/18·500 secondary at the rail · min 32 · no action · it may wrap to two lines (forms, §21.2): min 32, grows; past two lines the copy is rewritten, never clamped

Library §18.2 Caption row “13/18·500 secondary text at the rail, 32 tall, for a legend or a subtitle under a section head; no action” · §21.2 Caption row, two lines “min 32, grows; past two lines the copy is too long and is rewritten, never clamped”.

Anatomy

20370

이번 달 기록

지난달 대비

승률은 최근 20경기 기준이에요. 경기가 적으면 크게 달라질 수 있어요.

24 section head

32 caption

one line 18, centred

36 two lines

2 × 18 (a floor of 32)

Static

no press, hover, focus or disabled: a caption is text, not a control

Content

one sentence; a legend or the comparison a Strip delta reads against ("지난달 대비"); omitted when it has nothing to say (no empty caption)

Spoken

read as the next text after its section head, never as a stop of its own (plain text); a legend that names a colour is not allowed: the legend is a sentence

Motion

none: the change is instant

Reduced motion

unchanged

Text scale

reading class, cap 2.0: the line wraps and the row grows (a floor of 32); at 200% a two-line caption is four lines, which is the cue to shorten the copy

Used by

Strip with deltas (지난달 대비), 기록 sections, forms (two-line helper under a section head)

Replaces

ad hoc 13/18 secondary Text lines placed under SectionHeader on each screen

Variants

지난달 대비

one line

승률은 최근 20경기 기준이에요. 경기가 적으면 크게 달라질 수 있어요.

two lines grows to 36

복식

최근 6개월

with segments a legend of facts uses MetaSegments

지난달 대비

dark

Not drawn: press, hover, focus, disabled, loading, selected, error and empty: a caption is static text; with nothing to say the row is not drawn.

Text size

승률은 최근 20경기 기준이에요. 경기가 적으면 크게 달라질 수 있어요.

130% text two lines

승률은 최근 20경기 기준이에요. 경기가 적으면 크게 달라질 수 있어요.

200% text four lines: shorten the copy

3Surfaces and heroesthe club hero, the hero facts and the system post

Club hero · place variantThe identity of a club under its photo: a logo hung on the band, the name, where and how many.

logo 56 r12 overlapping the band’s bottom by 16 · name 24/32·700 starts 24 below the band beside the logo (x 88), wraps and is never cut · one MetaSegments line, region | members, 15/22 secondary · no glyph facts · 82 tall with a one-line name, 114 with two

Library §18.2 Club hero, place variant “the club hub’s identity under the MediaBand: logo 56 r12 overlapping the band bottom by 16, name 24/32·700, region and members as a MetaSegments line 15/22 secondary — no glyph facts”.

Anatomy

2088370

9:41

강

강남 라켓클럽

서초구

멤버 42명

logo 5612

240 MediaBand

status bar inside · scrim 100

16 logo overlap

32 name · 24/32·700

22 meta · 15/22

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Logo

the club logo, or its monogram tile when it has none; r12; it overlaps the band by 16 and is never cut by the band’s scrim

Without a band

when a Notice sits under the header instead of a band the logo cannot overlap: it sits inline at the hero’s own 24 top (§19.5), same name x

Spoken

the name is the one h1: "강남 라켓클럽, 제목 1"; then the meta line "서초구, 멤버 42명"; the logo is decorative (hidden): the name beside it says it

Motion

none of its own; with the page: the header turns white past 140 of scroll (150 ms) and the hero name fades into the header title

Reduced motion

the cross-fade becomes instant

Text scale

name hero class (cap 1.7) and meta reading class (cap 2.0): both wrap in the 282 column and the hero grows (82 → 114 → …); the logo stays 56 and keeps the band overlap

Used by

클럽 홈 (hub board), 클럽 미리보기

Replaces

the club photo seam and ClubHero / ClubAvatar hero in club-detail-screen (packages/features/clubs/src/club-detail/club-place-header.tsx)

States

9:41

강

강남 라켓클럽

서초구

멤버 42명

rest · one-line name 82

9:41

강

강남 올림픽공원 주말 복식 테니스 동호회

서초구

멤버 42명

two-line name a 20-character name wraps in the 282 column: 114

9:41

loading logo, name and meta skeleton

강

강남 라켓클럽

서초구

멤버 42명

no band the logo inline at the hero’s own 24 top (a Notice sits above)

9:41

강

강남 라켓클럽

서초구

멤버 42명

dark

Not drawn: pressed, hover, focus and disabled (the hero is text and a logo: the page’s actions are the header and the tabs below), selected, error and empty.

Text size

강

강남 라켓클럽

서초구

멤버 42명

130% text the name still one line

강

강남 라켓클럽

서초구

멤버 42명

200% text the name and the meta wrap; the logo stays 56

Hero facts · count and stateThe facts under a detail title: one to three of them, exactly as many as exist, and one Tag for what is true of you.

the facts block holds one to three facts, each 24 tall with 8 between · the hero is as tall as its facts (160 / 136 / 112, 56 with none) · no placeholder fact · with no facts the block and the 16 above it go · one viewer-state Tag (sm) may trail the fact it qualifies, 8 after it · at most one per hero, counted toward the object’s two Tags

Library §19.3 Hero facts: count and state “the facts block holds one to three facts … no placeholder fact is drawn; with no facts the block and the 16 above it go. One viewer-state Tag (sm) may trail the fact it qualifies, with 8 between (참가비 15,000원 → 입금 완료).” Words per the terminology guide: 입금 필요 · 입금 확인 중 · 입금 완료 (§18.1 D6).

Anatomy

20370

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 완료

208

20 eyebrow · 13/18

32 title · 24/32·700

24 fact · 17/24·500

24 fact

24 fact + state Tag

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Count

draw exactly the facts the object has: a free session has no 참가비 fact (no "무료" placeholder); no facts at all removes the block and its 16

State Tag

viewer-state only (입금 필요 warning · 입금 확인 중 info · 입금 완료 success); one per hero; it trails the fact it qualifies; never in place of the fact

Link fact

a fact that links (the venue) dims .85 on press, no settle; its target is the text line, 44 by slop

Spoken

title is the h1; each fact is one text stop with its glyph hidden: "9월 19일 토요일 오전 9시부터 11시까지", "올림픽공원 테니스장", "참가비 15,000원, 입금 완료" (the Tag text joins its fact)

Motion

the Tag changes with the state: fade 150 ms standard (0.2, 0, 0, 1); the count of facts never animates

Reduced motion

the cross-fade becomes instant

Text scale

reading class: facts wrap; from 150% the Tag goes under its fact; the glyph stays 20 aligned to the first line; the hero grows (every height is the sum of its parts)

Used by

일정 상세, 클럽 미리보기, 경기 / 테니스장 detail heroes

Replaces

SessionFactsSection lead and TypeHero / VenueHero facts (packages/ui/src/type-hero.tsx, fact-row.tsx)

Counts and states

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 완료

three facts + state 160

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

two facts 136: a free session has no fee fact

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

one fact 112

강남 라켓클럽

토요일 올림픽공원 복식

no facts 56: the block and its 16 are gone

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 필요

입금 필요 warning

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 확인 중

입금 확인 중 info

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 완료

link fact · pressed the venue: dim .85

loading eyebrow, title and three fact lines

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 완료

dark

Not drawn: focus and hover on a text fact (not a control); disabled, selected, error and empty (a missing fact is not drawn, the rule above).

Text size

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 완료

130% text facts wrap, the Tag follows

강남 라켓클럽

토요일 올림픽공원 복식

9월 19일 (토) 09:00–11:00

올림픽공원 테니스장

참가비 15,000원입금 완료

200% text the Tag under its fact

PostRow · system variantThe post the club makes by itself: a result was recorded, photos were uploaded.

the PostRow with: the author line is the club (logo 40 r12) and a 13/18 secondary line naming the event instead of a time · the body is the result (ResultRow) or the PhotoGrid preview (three tiles, +N on the last) · no ⋯ · the action row 44 is unchanged (feed: the heart carries the total reaction count)

Library §18.2 PostRow system variant “for 경기 결과 and 사진 업로드: the author line is the club (logo 40) with a 13/18 secondary line naming the event; body is the result (ResultRow) or the PhotoGrid preview; no ⋯” · §19.5 “feed: the action row’s heart carries the total reaction count, with no chips”.

Anatomy

20370

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

6–4 7–6승

9월 19일 (토)

44 author line

logo 40 · club over event

68 ResultRow

opponents · date · score + Tag

44 action row

heart + count · comment + count

Press

scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Opens

the post body opens the post page (the result opens the match, the photos open the 앨범 viewer); the author line opens the club

Counts

feed: the heart carries the total reaction count and there are no chips; the post page shows the per-emoji chips under the body and the heart has no number (each count is shown once)

Spoken

one stop for the post: "강남 라켓클럽, 9월 19일 복식 경기 결과, 김민준 이서연 대 박지훈 최유나, 6대4 7대6 승, 좋아요 12개, 댓글 3개"; the actions are their own stops

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

reading class: club and event wrap; from 150% the ResultRow trailing goes under line 2; the action row grows with its counts; the PhotoGrid tiles are computed from the width, not scaled

Used by

클럽 피드 (경기 결과, 사진 업로드 posts), the 홈 club pane

Replaces

PostRow's user variant in post-row.tsx for system posts (packages/features/clubs/src/shared/post-row.tsx), which showed the poster as a member and carried a ⋯

States

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

6–4 7–6승

9월 19일 (토)

result

강

강남 라켓클럽사진 12장을 올렸어요

photos three tiles of the album, +N on the last

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

6–4 7–6승

9월 19일 (토)

body · pressed row .98 / .80 on the body

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

6–4 7–6승

9월 19일 (토)

body · focus

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

6–4 7–6승

9월 19일 (토)

body · hover

loading one skeleton per post

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

6–4 7–6승

9월 19일 (토)

dark

Not drawn: disabled (a post is never disabled), selected, error (a failed photo is its tile’s placeholder, see PhotoGrid), empty (the feed’s EmptyState).

Text size

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

6–4 7–6승

9월 19일 (토)

130% text text wraps

강

강남 라켓클럽9월 19일 복식 경기 결과

vs 박지훈, 최유나

9월 19일 (토)

6–4 7–6승

200% text the score under line 2

4Avatarsgroup sizes per §19.5, the anonymous face and the roster door

Avatar · groupTwo members’ faces in one avatar box: a conversation or a pair, in the space of one person.

two member avatars at 0.6× inside the avatar box, offset diagonally: the back one top-left, the front one bottom-right in a 2px canvas ring · 20 in a 32 box, 24 in a 40 box (§19.5; 28 in 48 and 32 in 56 by the same rule, proposed) · photos when present, initials otherwise · never a generic glyph

Library §19.3 Avatar, group “two member avatars at 0.6× inside the avatar box, offset diagonally: the back one top-left, the front one bottom-right with a 2px canvas ring … Spoken as the member names. Identities stay photos, never a generic glyph.” §19.5 “the inner avatars are 0.6× rounded to the grid: 20 in a 32 box, 24 in a 40 box”.

Anatomy

40 box inner 24, offset 16

32 box inner 20, offset 12

48 box inner 28

56 box inner 32

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Rule

inner size = 0.6 × the box rounded to the 4pt grid: 20, 24, 28, 32; the front avatar’s ring is the canvas colour (the dark canvas in dark mode) so the notch reads on any theme

Photos

photos when present, the initial on gray100 otherwise (the same cascade as a single avatar); never a generic user glyph (that is the anonymous avatar, a privacy cue)

More than two

only two faces are drawn, the first two members; the count of the rest is in the row’s L2 ("김민준 외 4명")

Spoken

the member names, comma-joined: "김민준, 이서연" (the group row adds "외 3명" from its own model); a decorative image otherwise

Motion

none of its own; the photos fade in fade 150 ms standard (0.2, 0, 0, 1) (image load)

Reduced motion

the cross-fade becomes instant

Text scale

avatars do not scale (identity images, like every glyph): the box stays 32 / 40 / 48 / 56 and the row text wraps beside it

Used by

메시지 목록 (group chats), 그룹 thread header, pair rows (복식 짝)

Replaces

AvatarStack (packages/ui/src/avatar-stack.tsx, overlap −6) in rows; the stack’s overlap hid the second face

States

토요일 복식 모임

오후 2:14

김민준 외 4명

in a row 40 box lead of a PersonRow-grammar row

토요일 복식 모임

오후 2:14

김민준 외 4명

row · pressed row .98 / .80, the faces dim with it

토요일 복식 모임

오후 2:14

김민준 외 4명

row · focus

김

이

토요일 복식 모임

오후 2:14

김민준 외 4명

initials no photos

이

토요일 복식 모임

오후 2:14

김민준 외 4명

one photo, one initial

loading two gray100 circles, pulse .6 ↔ .9

토요일 복식 모임

오후 2:14

김민준 외 4명

dark the ring is the dark canvas

Not drawn: hover (follows the row), disabled (.5 follows the row), selected, error (a failed photo falls back to the initial) and empty (a group of none is not drawn).

Avatar · anonymousThe face of someone the viewer is not allowed to see by name: counts, never names.

a gray100 circle with a user glyph in secondary: 20 in a 40 box, 16 in a 32 box (24 in 48 and 28 in 56 by the same half-size rule, proposed) · spoken “참석자” · used where privacy hides names (club avatar-privacy canon)

Library §19.3 Avatar, anonymous “a gray100 circle with a user glyph (20 in 40, 16 in 32) in secondary, spoken ‘참석자’. It is used where privacy hides names: a non-member’s preview shows counts, never names (club avatar-privacy canon).”

Anatomy

32 box glyph 16

40 box glyph 20

48 box glyph 24

56 box glyph 28

When

the viewer is a non-member (or blocked) and the object’s names are private: the preview shows the count and anonymous faces; a member sees real avatars

Not a placeholder

it is never a loading or error state: those are the skeleton and the initial; it marks a privacy decision

Spoken

"참석자" for each (the same word for every anonymous face: the count line says how many: "참석자 8명"); never a name

Motion

none: the change is instant

Reduced motion

unchanged

Text scale

identity images do not scale; the count text beside them wraps

Used by

클럽 미리보기 (non-member 참석자 preview), 일정 상세 for non-members

Replaces

the generic person icon tiles and blurred avatars used on private previews (club avatar-privacy canon, packages/features/clubs)

States

+5참석자 8명

avatar row 3 anonymous + the +N circle, then the count

참석자

이름은 클럽 멤버에게만 보여요

in a row

참석자

이름은 클럽 멤버에게만 보여요

dark

Not drawn: pressed, hover, focus, disabled (an anonymous face opens nothing), loading, selected, error and empty (not states of a privacy cue).

Roster doorThe last cell of a full roster: a door to everyone who did not fit.

when people outnumber the visible cells (eight, two rows of four) the last cell is a door: a 48 gray100 circle with “+N” 15/22·600 ink, the name line “외 N명” 13/18·500 · the same 100 pitch as a roster cell, no level Tag · it opens 참석자, as does the section head’s 전체 보기

Library §19.3 Roster door “when people outnumber the visible cells (eight, two rows of four), the last cell is a door: a 48 gray100 circle with ‘+N’ 15/22·600 ink and the name line ‘외 N명’. The door opens 참석자, as does the section head’s 전체 보기.”

Anatomy

20370

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

4852 to the next

100 pitch

avatar 48 · name 20 · level slot 24

100 pitch

the door is the last of eight

Press

the door presses as a roster cell: scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

When

only when people outnumber the cells: 8 people draw eight cells and no door; 9 draw seven and the door "+2"

Count

"+N" is the number not shown; above 99 it reads "+99+" and the name line "외 99+명"

Spoken

the door: "외 4명, 참석자 전체 보기" (button); the seven cells before it are "김민준, NTRP 3.5" each; the +N glyph text is hidden (the name line says it)

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; the list it opens is a push (platform transition)

Reduced motion

the settle is dropped, the dim stays

Text scale

roster stacks 2-up from 150% (B6.5): the door stays the last cell; the name line wraps under the circle; every cell is a floor of 100

Used by

일정 상세 참석 roster (D3), 클럽 미리보기, 대진 rosters

Replaces

the ParticipationSection overflow text link (“모두 보기”) under a truncated roster

States

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

rest

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

door · pressed row .98 / .80

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

door · hover

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

door · focus web ring around the cell

loading gray100 circles, no door yet

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

+99+

외 99+명

99+ a very full band

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

dark

Not drawn: disabled, selected, error and empty (an empty roster is the empty slots, drawn on the detail board).

Text size

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

130% text still 4-up

김민준

3.5

이서연

4.0

박지훈

3.5

최유나

3.0

정우진

3.5

한소희

4.0

강태오

3.0

외 4명

200% text roster 2-up, the door last

5Conversationcomments and replies, the reply target, reactions with the feed / post count rule

CommentA reply under a post, with one level of replies beneath it.

avatar 32 at the rail, text column at x 64 · line 1: name 15/22·600 + MetaBreak + time 13/18·500 secondary, ⋯ IconButton (20 in 44) at the right · body 15/22·400 ink (full on the post page; 4 lines + 더보기 in previews) · 답글 달기 13/18·600 secondary (44 target by slop) · replies: avatar 24 at x 64, text column at x 96, one level · 24 between comments, 12 between a comment and its replies

Library §19.3 Comment “… deeper replies flatten with an @name; more than two replies collapse behind a lone ExpandToggle aligned to the text column (‘답글 3개 더 보기’) … A deleted comment reads ‘삭제된 댓글입니다’ (secondary) and keeps its replies. The body indents to the name because short, threaded text belongs to its author. PostRow keeps its full-width body for long content and photos.”

Anatomy

206496370

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

박지훈1시간 전

저는 괜찮았는데 3번 코트는 조금 미끄러웠어요

답글 달기

321232 indent

22 line 1 · 15/22·600

44 body · 2 × 22

18 답글 달기

12 to replies

96 reply

avatar 24 · text x 96

Press

the 답글 달기 action (dim .85, no settle); the ⋯ is an IconButton (.92 / .78): dim 0.85, no settle · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Replies

one level only: a reply to a reply is a reply to the top comment with "@이름" first (600 weight); more than two replies collapse behind "답글 N개 더 보기" aligned to the text column

Deleted

"삭제된 댓글입니다" in secondary, a plain gray100 avatar circle, no name, no ⋯ and no 답글 달기; its replies stay

Sending / failed

sending: .6 with a 12 clock before the time; failed: "전송 실패" in danger instead of the time and a 다시 보내기 text action (MessageBubble §16)

Preview

in a feed preview the body clamps at 4 lines with 더보기 inline on the fourth

Spoken

one stop for the comment: "이서연, 2시간 전, 오늘 코트 상태 어땠어요? …, 답글 2개"; then its actions: "답글 달기" and "댓글 더보기"; a reply: "박지훈, 이서연에게 답글, 1시간 전, …"

Motion

a new comment enters fade 150 ms standard (0.2, 0, 0, 1) and rises 8; the reply toggle: reveal 250 ms enter (0, 0, 0, 1); a deleted comment swaps its text instantly

Reduced motion

the entrance and the reveal are instant

Text scale

reading class: name and time wrap together (time under the name from 150%); the body wraps; the text column keeps its x (avatars do not scale); the actions keep their 44 targets

Used by

post page (full body), feed previews (clamped), 공지사항 comments

Replaces

CommentRow (packages/features/clubs/src/post-detail/comment-row.tsx): a card-grammar row with a boxed reply field

Thread

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

박지훈1시간 전

저는 괜찮았는데 3번 코트는 조금 미끄러웠어요

답글 달기

김민준30분 전

정기 모임에서는 4번 코트를 쓰면 좋겠어요

답글 달기

two replies 24 between comments, 12 to the replies, 12 between replies

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

박지훈1시간 전

저는 괜찮았는데 3번 코트는 조금 미끄러웠어요

답글 달기

김민준30분 전

정기 모임에서는 4번 코트를 쓰면 좋겠어요

답글 달기

답글 3개 더 보기

more than two the third and the rest collapse: 답글 3개 더 보기

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

박지훈1시간 전

저는 괜찮았는데 3번 코트는 조금 미끄러웠어요

답글 달기

김민준30분 전

@박지훈 저도 3번 코트가 제일 미끄러웠어요

답글 달기

flattened reply a reply to a reply: @name first

삭제된 댓글입니다

박지훈1시간 전

저는 괜찮았는데 3번 코트는 조금 미끄러웠어요

답글 달기

deleted keeps its replies

States

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

rest

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

답글 달기 · pressed dim .85

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

답글 달기 · hover

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

답글 달기 · focus

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을바꿔야 하나 고민이에요. 다음 주 정기 모임 전에 미리알려주시면 좋겠어요. 다른 분들은 어떠셨는지도 궁금해요.저는 지난주에 갔는데 3번 코트가 더보기

답글 달기

preview 4 lines + 더보기 inline

이서연방금

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

sending .6, a clock before the time

이서연전송 실패

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

다시 보내기

failed 전송 실패 · 다시 보내기

loading avatar + three lines, pulse .6 ↔ .9

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

박지훈1시간 전

저는 괜찮았는데 3번 코트는 조금 미끄러웠어요

답글 달기

dark

Not drawn: disabled (a comment is not a control; a blocked author’s comment is hidden, not dimmed), selected, error (failed, drawn), empty (the post page’s "첫 댓글을 남겨보세요" state).

Text size

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

130% text name and time wrap together

이서연2시간 전

오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요.

답글 달기

200% text time under the name; the body wraps

Composer reply targetWho a comment is answering, shown above the field while it is typed.

a 44 row inside the composer above the field: “OOO님에게 답글” 13/18·600 secondary, then a one-line excerpt 13/18·400 secondary that ellipsizes (quoted text, not a name, so it may crop) · a × IconButton (20 in 44) clears the target · the row appears with the field’s focus

Library §19.3 Composer reply target “a 44 row inside the composer, above the field … The row appears with the field’s focus, and Escape or × removes it.”

Anatomy

20370

이서연님에게 답글오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요

저도 3번 코트가 미끄러웠어요

44 reply row

label 600 + excerpt 400 · × 20 in 44

56 composer

8 + field 40 + 8

34 home inset

Press

the × (an IconButton, .92 / .78): scale 0.92 · opacity 0.78 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

Clears

the × and Escape (web) remove the target; sending clears it; leaving the field with text keeps it; with no text on blur it leaves

Excerpt

one line of the quoted comment; it may crop because it is quoted text, not a name (names are never cut)

Spoken

the row is read when it appears: "이서연님에게 답글, 오늘 코트 상태 어땠어요?"; the × is "답글 취소"; focus stays in the field

Motion

appears with the field’s focus: reveal 250 ms enter (0, 0, 0, 1) (the composer grows by 44 upward, the thread scrolls with it); × removes it fadeFast 100 ms standard

Reduced motion

it appears and leaves at once

Text scale

the label is a reading class: the excerpt ellipsizes first (never the name); from 150% the excerpt moves under the label and the row grows (a floor of 44)

Used by

post comment composer (답글 달기), DM reply-to (long-press reply)

Replaces

the reply banner built into comment-composer.tsx (packages/features/clubs/src/post-detail/comment-composer.tsx) and the DM compose bar’s quote strip (compose-bar.tsx)

States

이서연님에게 답글오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요

메시지 보내기

row · rest

이서연님에게 답글오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요

저도 3번 코트가 미끄러웠어요

typing the field filled, send enabled

이서연님에게 답글오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요

메시지 보내기

× pressed icon .92 / .78

이서연님에게 답글오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요

메시지 보내기

× focus web ring

이서연님에게 답글좋아요!

메시지 보내기

short excerpt no ellipsis

이서연님에게 답글오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요

저도 3번 코트가 미끄러웠어요

sending send disabled, the target stays until sent

이서연님에게 답글오늘 코트 상태 어땠어요? 바닥이 미끄러웠다고 해서 신발을 바꿔야 하나 고민이에요

메시지 보내기

dark

Not drawn: disabled, loading, selected, error (a failed send is the Comment’s own failed state) and empty (no target: the row is not drawn).

ReactionsOne component in two parts: a quick row to react, a chip summary to see and toggle.

quick row (at the top of the object’s ActionSheet): the content set in 44 gray100 circles, emoji 24, gap 16 · the viewer’s reaction has a 2px ink ring, a tap toggles it and closes the sheet · summary (under a bubble or post): chips 28 tall, r full, gray100, pad 0 8, emoji 16 + count 13/18·600 tabular, gap 4 inside and 8 between · the viewer’s own has a 1.5px ink ring · long-press lists who reacted

Library §19.3 Reactions (replaces the §18.2 Reaction picker, §19.2) · §19.4 one registry, six emoji (thumbs-up, heart, clap, fire, laugh, tennis ball) for every surface · §19.5 PostRow counts vs Reactions “feed: the heart carries the total reaction count, with no chips in the feed. Post page: the per-emoji chips sit under the body, and the heart has no number. Each count is shown once.”

Anatomy

20370

4416

44 circle

emoji 24 · ring 2 for the viewer’s

20370

816

28 chip

hit area 44 by slop (8)

Press

a chip or a quick circle (pill physics .96 / .85): scale 0.96 · opacity 0.85 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Registry

one set of six for every surface: thumbs-up, heart, clap, fire, laugh, tennis ball (build note §19.4: today three vocabularies exist and one enum migration unifies them)

Long-press

a chip long-press opens a Sheet of PersonRows of who reacted (title "좋아요 3명"); no centred panel variant

Counts

feed: only the heart carries the total; post page: chips, and the heart has no number; each count is shown once

Spoken

a chip: "좋아요 3개, 내 반응" (a toggle with aria-pressed); a quick circle: "좋아요" (aria-pressed); the list sheet: "좋아요 3명" then PersonRows; emoji are read as their names, not as symbols

Motion

a tap toggles at once (the count changes instantly, B7.6) and the sheet leaves exit 200 ms exit (0.3, 0, 1, 1); a chip appears fade 150 ms standard (0.2, 0, 0, 1)

Reduced motion

the chip appears at once; the sheet leaves with the platform fade

Text scale

label class: chips wrap to new rows (gap 8 each way) and grow with their count; the emoji stay 16 / 24; the quick row wraps to two rows of three from 150%

Used by

메시지 long-press ActionSheet and the bubble summary, post page, 경기 / 포스트 reactions

Replaces

the post reaction map (like, clap, fire, heart, laugh) in packages/features/clubs/src/shared/post-row.tsx, the DM quick reactions (packages/features/messaging/src/dm-thread/helpers.ts) and the match reaction picker

Quick row

rest the thumbs-up is the viewer’s: 2px ink ring

none yet

pressed pill .96 / .85 on the circle

메시지

in its sheet top of a message’s ActionSheet

dark

Summary chips

rest the thumbs-up chip is the viewer’s: 1.5px ring

pressed pill .96 / .85

hover

focus web ring, offset 2

disabled a blocked thread: .5

loading counts skeleton

99+

99+

six reactions

dark

Not drawn: selected is the viewer’s ring (drawn); error (a failed toggle reverts and shows the Toast "반응하지 못했어요"); empty (no reactions: no chips, no row).

Feed vs post page

토요일 정기 모임 후기예요. 날씨가 좋아서 코트 세 면이 꽉 찼어요.

feed the heart carries the total (12); no chips

토요일 정기 모임 후기예요. 날씨가 좋아서 코트 세 면이 꽉 찼어요.

post page chips under the body; the heart has no number

좋아요 3명

김민준

NTRP 3.5

이서연

NTRP 4.0

박지훈

NTRP 3.5

who reacted long-press on a chip: a Sheet of PersonRows

Text size

130% text chips grow with their count

200% text chips wrap, one or two per row

6Sheets and bandsthe filter sheet, the edit footer, the danger band, the score sheet and the action scope

FilterSheetNarrow a list by facets in one bottom Sheet, with the result count live on the button.

bottom Sheet: groups of Choices (group title 13/18·600 secondary, 8 below, 24 between groups) · footer pair 초기화 (tonal) + “결과 n개 보기” (primary, the count live) · trigger: a Choice with a chevron and the active count, then a removable Choice (×) for each active filter · sort is its own Choice and its own Sheet (L5)

Library §18.2 FilterSheet · §20.1 L3 “테니스장 kind chips into the FilterSheet’s first group (single choice with counts) … the active kind shows as a removable Choice after the 필터 trigger” · L5 “split 정렬 from the filters … every Choice ▾ opens a bottom Sheet”.

Anatomy

20370

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

초기화

결과 24개 보기

20 pad

24 title row · 17/24·600

106 group 1

18 + 8 + 36 + 8 + 36 (wraps)

62 group 2

18 + 8 + 36

62 group 3

118 band

16 + 52 + 16 + 34 (pair)

Press

a Choice (the sheet’s buttons keep .97 / .92): scale 0.96 · opacity 0.85 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Reset

초기화 is disabled (.5) while nothing is set; it clears every group but keeps the sheet open

Count

“결과 n개 보기”: n is live; while it recounts the button shows its spinner (width held); 0 results disables the button ("결과 없음"); a failed count shows "결과 보기" and the helper "결과 수를 불러오지 못했어요"

Trigger

the 필터 Choice shows the count of active facets and a chevron; each active facet is a removable Choice (× 16 in a 44 target); sort stays a separate Choice ("최신순 ▾")

Spoken

the sheet is a dialog "필터"; each group is a labelled group ("종류, 단일 선택"); a Choice: "테니스장 86, 선택됨" (radio / aria-checked) or a toggle (aria-pressed); the button announces the count when it changes: "결과 24개 보기"

Motion

sheet rise 300 ms enter · exit 200 ms exit (0.3, 0, 1, 1); the count on the button changes instantly (counts never animate)

Reduced motion

the sheet appears with the platform fade; the count still changes at once

Text scale

Choices wrap and grow (label class, cap 1.5); from 150% the footer pair stacks (the primary first, 초기화 under it); the body scrolls inside the 88% cap and the footer stays pinned

Used by

테니스장 (venue-filters), 경기 기록 (seven facets), 매치 찾기, 클럽 찾기

Replaces

ExpandableFilterBar and the records facet row (packages/app/src/presentation/components/expandable-filter-bar.tsx, packages/features/records/src/records-screen.tsx)

Trigger strip

필터

no filter

필터 2

테니스장

하드

two active trigger + a removable Choice per filter

필터 2

테니스장

하드

trigger pressed pill .96 / .85

필터 2

테니스장

하드

chip pressed

필터 2

테니스장

하드

trigger focus

필터 2

테니스장

하드

dark

Sheet states

9:41

올림픽공원 복식

관리

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

초기화

결과 124개 보기

nothing set 초기화 disabled, all results

9:41

올림픽공원 복식

관리

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

초기화

결과 24개 보기

two set the count is live: 24

9:41

올림픽공원 복식

관리

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

초기화

결과 124개 보기

counting spinner on the button, width held

9:41

올림픽공원 복식

관리

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

초기화

결과 없음

no results the button disables: 결과 없음

9:41

올림픽공원 복식

관리

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

초기화

결과 24개 보기

dark

Not drawn: hover (web, on the Choices: controls board), disabled sheet (a sheet is never disabled), empty (no facets: the filter trigger is not drawn).

Text size

9:41

올림픽공원 복식

관리

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

초기화

결과 24개 보기

130% text Choices grow, groups wrap

9:41

올림픽공원 복식

관리

필터

종류

전체 124테니스장 86연습장 24샵 14

코트 바닥

하드클레이잔디

시설

야간 조명주차샤워실레슨

결과 24개 보기

초기화

200% text the footer pair stacks, primary first

Edit Sheet footerThe bottom Sheet a pencil opens to edit one field: no ×, a Cancel and a Save, and a guard when there is unsaved input.

an edit Sheet has no ×: its title row is the field name; the footer is the pair 취소 (tonal, flex 1) + 저장 (primary, flex 2) in the CTA band geometry (16 + 52 + 16 + inset) · 저장 is disabled until the value changes · dismissing with unsaved changes asks a Dialog (§21.1 C1: 수정을 그만둘까요?)

Library §18.2 Edit Sheet footer “an edit Sheet has no ×; its footer is the pair 취소 (tonal) + 저장 (primary); unsaved changes on dismiss ask a Dialog” · §21.2 Cell, edit (“opens the field’s bottom edit Sheet (EDIT-SHEET)”) · §21.1 C1 “edit forms ask 수정을 그만둘까요? (바꾼 내용은 저장되지 않아요)”.

Anatomy

20370

클럽 이름

강남 라켓 클럽

2–20자

취소

저장

20 pad

24 title row · no ×

92 Field

label 18 + 4 + 48 + 4 + 18

118 band

16 + 52 + 16 + 34 (pair)

Press

the Buttons (.97 / .92): scale 0.97 · opacity 0.92 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

No ×

the cancel is a labelled button, never a bare glyph (the owner’s button-not-glyph LAW); the backdrop tap and hardware back behave as 취소

Guard

with an unsaved change, 취소, the backdrop and back ask the Dialog 수정을 그만둘까요? (그만두기 destructive); with none they just close

Saving

저장 shows its spinner (width held), 취소 is disabled, the field is inert; on success the sheet closes and a Toast confirms ("저장했어요", no dialog)

Error

a server error is the field’s danger helper and the Sheet stays open with 저장 enabled; never a Toast alone

Spoken

a dialog named by its title: "클럽 이름 수정"; focus lands on the field; 취소 and 저장 are the last two stops; "저장" announces "저장 중" while busy

Motion

sheet rise 300 ms enter · exit 200 ms exit (0.3, 0, 1, 1); the keyboard lifts the whole sheet (KeyboardStickyView), the footer docks above it

Reduced motion

platform fade, no rise

Text scale

the field and the title wrap; from 150% the pair stacks (저장 first, 취소 under it); the body scrolls inside the 88% cap and the footer stays pinned

Used by

every pencil Cell of the 일정 / 클럽 review pages and settings (EDIT-SHEET), ScoreEntry’s siblings

Replaces

the per-screen edit modals in packages/features/clubs/src/settings and the scorecard edit sheets (live-match-row, match-action-suite), each with its own close glyph

States

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓클럽

2–20자

취소

저장

pristine 저장 disabled until the value changes

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

2–20자

취소

저장

changed 저장 enabled

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

2–20자

취소

저장

saving spinner on 저장, 취소 disabled

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

이미 있는 클럽 이름이에요

취소

저장

error the field’s danger helper, 저장 stays enabled

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

2–20자

취소

저장

keyboard up the footer docks above the keyboard, no home inset

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

2–20자

취소

저장

leave guard dismiss with unsaved changes asks

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

2–20자

취소

저장

dark

Not drawn: hover, focus and pressed of the Buttons (the controls board), selected, empty and loading (the field value is already known when the sheet opens).

Text size

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

2–20자

취소

저장

130% text the pair still side by side

9:41

올림픽공원 복식

관리

클럽 이름

강남 라켓 클럽

2–20자

저장

취소

200% text the pair stacked, 저장 first

CTA band · danger toneThe band’s one button in danger, for a destructive action on many items at once.

the standard CTA band (16 + 52 + 16 + the inset, hairline only while content scrolls under) with its one button in the danger tone: #B8332E with white label (the dark theme: #FA9B94 with the canvas label) · always preceded by a Dialog that names the count · a danger helper line is allowed above the button (§22.2) · never in a wizard

Library §18.2 CTA band, danger tone “the band’s one button in danger for a destructive bulk action (알림 n개 지우기), always preceded by a Dialog” · §19.1 D2 “the danger tone belongs to the confirming Dialog, not to the band” (for a single action; the bulk band is the exception).

Anatomy

20370

알림 12개 지우기

52 danger button

lg, full width on the rail

34 home inset

Press

the button (.97 / .92): scale 0.97 · opacity 0.92 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Order

tap the band → Dialog (취소 tonal, 지우기 danger) → on 지우기 the band shows its spinner, then the Toast "알림 12개를 지웠어요"; the band is never the only guard

Disabled

with nothing to delete the band is disabled (.5) or not drawn: here .5 with the helper "지울 알림이 없어요"

Colour

white on #B8332E is 5.7:1; in dark the canvas ink on #FA9B94 is 9.6:1; this is the one place a screen’s coloured action is not the ball

Spoken

"알림 12개 지우기" (button); activating it opens the Dialog "알림 12개를 지울까요?" which the screen reader reads as an alert dialog; "지우는 중" while busy

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

label class: the label wraps and the button grows (a floor of 52); the helper line wraps; the Dialog stacks its buttons from 150%

Used by

알림 센터 (알림 n개 지우기), 메시지 목록 (n개 나가기), bulk delete in Select mode

Replaces

the red ActionButton placed above the footer of the notification centre (packages/ui/src/bottom-cta-band.tsx has no tone prop)

States

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개 지우기

rest

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개 지우기

pressed button .97 / .92

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개 지우기

confirming Dialog always precedes: names the count

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개 지우기

deleting spinner replaces the label, width held

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개를 지웠어요

지울 알림이 없어요

알림 지우기

done a Toast, no dialog (a success needs none)

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

지우지 못했어요. 다시 시도해주세요

알림 12개 지우기

error a danger helper line above the button

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개 지우기

focus

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개 지우기

dark

Not drawn: hover (controls board), selected and empty (nothing to delete is the disabled "done" frame).

Text size

9:41

알림

선택

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

참가비 입금 확인 요청

방금

이서연님이 9월 회비 입금을 알렸어요

알림 12개 지우기

130% text the label grows

9:41

알림

선택

참가비 입금 확인 요청

이서연님이 9월 회비 입금을 알렸어요

방금

참가비 입금 확인 요청

이서연님이 9월 회비 입금을 알렸어요

방금

참가비 입금 확인 요청

이서연님이 9월 회비 입금을 알렸어요

방금

알림 12개 지우기

200% text the Dialog stacks its buttons

ScoreEntry · Sheet formRecord a match’s score in a Sheet over the board: it opens without the keyboard on the quick picks, and a tap on a set field raises the keypad and one 저장.

open: the Sheet rises (300 ms) without the keyboard · top to bottom: title row (the match name, §19.5), set table, the quick-pick row (all seven, one tap), 저장 over the 34 home inset · typing: a tap on a set field raises the keypad, the quick row folds away (200 ms) and the sheet docks to the keyboard top (KeyboardStickyView) with 저장 right above the keypad and no home inset · the tiebreak row appears only at 6-6 / 7-6 and inline validation sits above 저장 · typing worst case under the 88% cap

Library §19.3 ScoreEntry, Sheet form · §19.5 ScoreEntry title row “the match name (‘2라운드 1번 코트’), not the teams” · §19.1 D4 “ScoreEntry opens in a Sheet over the board, one 저장 and an action Toast with 되돌리기 (6 s, §15) that restores the previous score. Errors stay inline.” (the keypad clause is amended by §23 ruling 1: the sheet opens without the keyboard) · §23 “The sheet opens without the keyboard, showing the quick picks; tapping a field raises the keypad and folds the quick row.” · §16 P1 quick pick credits the top team first; the tiebreak is a 44 row.

Anatomy

20370

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

20 pad

24 title row · match name

130 set table

head 18 + 8 + 48 + 8 + 48

106 quick pick

18 + 8 + 36 + 8 + 36

16 seam

118 저장 band

16 + 52 + 16 + 34 home inset

Press

the 저장 Button (.97 / .92); a set field and a quick Choice keep their own states (controls board): scale 0.97 · opacity 0.92 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Open

no keyboard: the title row, the set table and all seven quick picks (6-0 … 6-4, 7-5, 7-6), so a common result is one tap; 저장 sits over the 34 home inset

Typing

a tap on a set field raises the keypad and folds the quick row (200 ms); the sheet docks to the keyboard top with 저장 right above the keypad, no home inset

Quick pick

a tap credits the top team first (6-3 fills 6 for the top team, 3 for the other); tapping the same chip again swaps the teams (§16 P1)

Tiebreak

a 44 row appears under the table only at 6-6 / 7-6 with the 36 field at the right: "2세트 타이브레이크, 진 팀의 점수"

Guard

dismissing with unsaved digits asks the Edit-Sheet Dialog (수정을 그만둘까요?); with none the sheet just closes

After save

the sheet closes and an action Toast (되돌리기, 6 s) restores the previous score; the board refreshes underneath

Spoken

a dialog "2라운드 1번 코트, 점수 입력"; the fields: "1세트, 김민준 이서연 팀, 점수" …; the quick Choices: "6 대 3" (read while the row is shown); on error the helper is announced with the field; after save the Toast "저장됐어요" (no action)

Motion

sheet rise 300 ms enter · exit 200 ms exit (0.3, 0, 1, 1); the sheet rises without the keyboard; a tap on a set field raises the keypad and the quick row folds away over 200 ms, the sheet docking to the keyboard top; the numerals and counts never animate

Reduced motion

the sheet appears with the platform fade; the quick row disappears at once when the keypad rises

Text scale

reading class: team names wrap in the row label column; the 48 score fields keep their 48 (numeral class, cap 1.5 for the digits); quick Choices wrap to more rows; the sheet scrolls inside the 88% cap with 저장 pinned above the keypad

Used by

경기 보드 (점수 입력), 스코어카드 (the match row’s edit), 대진 results

Replaces

the full-screen score page and score-edit-sheet.tsx’s own layout (packages/features/sessions/src/scorecard/score-edit-sheet.tsx)

Anatomy · typing

20370

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

저장

123

456

789

0⌫

20 pad

24 title row · match name

130 set table

head 18 + 8 + 48 + 8 + 48

16 seam

84 저장 band

16 + 52 + 16, inset 0

291 keypad

numeric

Typing the quick row has folded away (200 ms; instant under reduced motion), the sheet is docked to the keyboard top, and 저장 sits right above the keypad with no home inset. Measured worst case (tiebreak plus validation) is in the state frames below, with the keypad, against the 88% cap of 742.

States

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

open after the rise: no keyboard, the quick row, 저장 disabled

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

open · quick pick 6-3 fills the second set, top team first: one tap

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

저장

123

456

789

0⌫

typing a tap on a set field: keypad up, quick row folded

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

저장

123

456

789

0⌫

typing · complete 저장 enabled once a set is complete

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

2세트 타이브레이크, 진 팀의 점수

저장

123

456

789

0⌫

typing · tiebreak 7-6: the 44 row appears

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

7-2는 가능한 점수가 아니에요

저장

123

456

789

0⌫

typing · validation inline danger helper + the two fields in error

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

2세트 타이브레이크, 진 팀의 점수

타이브레이크 점수를 확인해 주세요

저장

123

456

789

0⌫

typing · worst case tiebreak + validation: 372 + 291 keypad = 663, under the 742 cap

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

2세트 타이브레이크, 진 팀의 점수

저장

123

456

789

0⌫

saving spinner on 저장, fields inert

9:41

올림픽공원 복식

관리

저장됐어요

after save result Toast, no action

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

open · dark

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

저장

123

456

789

0⌫

typing · dark

Not drawn: hover (controls board), disabled sheet (it is a form), selected, empty (the empty frame is the first state), and a loading skeleton (the match is known when the sheet opens).

Rise

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

0 ms y +100%, scrim 0

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

150 ms 89% risen (0, 0, 0, 1)

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

300 ms at rest, then the first empty field takes focus

Text size

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

130% text open: names wrap, chips grow

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

빠른 입력

6-06-16-26-36-47-57-6

저장

200% text open: the sheet scrolls inside the cap, 저장 pinned

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

저장

123

456

789

0⌫

130% text typing: names wrap, 저장 above the keypad

9:41

올림픽공원 복식

관리

2라운드 1번 코트

1세트

2세트

3세트

김민준, 이서연

박지훈, 최유나

저장

123

456

789

0⌫

200% text typing: the sheet scrolls inside the cap, 저장 pinned

ActionSheet · scope and the group-title ruleOne sheet for any object’s actions: a row’s ⋯, a message’s long-press, a comment’s ⋯, the 관리 sheet.

the ActionSheet of §14 as the generic sheet: title 17/24·600 = the object’s name · groups of Cells 48 · a leading 20 icon is optional per instance and consistent within one sheet · a group title (13/18·600 secondary, 8 below) shows only when the sheet has two or more non-destructive groups; a single group and the destructive group are untitled (the danger colour marks the latter) · 24 still separates groups · cap 88%, the body scrolls

Library §19.3 ActionSheet (scope) “the generic sheet for any object’s actions, not a 관리-only sheet: row ⋯ (§18.1 D4), a message’s long-press, a comment’s ⋯. A leading 20 icon is optional per instance, consistent within one sheet.” §19.5 “a group title shows only when the sheet has two or more non-destructive groups … 24 still separates groups.” §16 P2: cap 88%.

Anatomy

20370

김민준

멤버

프로필 보기

메시지 보내기

관리

운영진으로 지정

회비 면제

멤버 내보내기

20 pad

24 title row · 17/24·600

26 group title

18 + 8

96 two Cells

48 each, hairline between

26 group title

96 two Cells

48 destructive

untitled, danger ink

20 + 34 inset

Press

a Cell presses as a row (.98 / .80): scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Title rule

titles only when two or more non-destructive groups exist: a single group reads as one list, and the destructive group needs no title because its colour is the label

Icons

a leading 20 icon is optional per instance but consistent within one sheet: all Cells have one or none; the destructive Cell keeps its danger colour with or without

Destructive

last, in danger; it opens its confirming Dialog (never acts on tap); a sheet with only destructive Cells is not an ActionSheet

Quick row

a message’s sheet starts with the Reactions quick row, then 24, then the groups

Spoken

a dialog named by its title ("김민준"); each Cell is a button "프로필 보기"; the destructive Cell is announced last; the quick-reaction circles of a message sheet are a group of toggle buttons

Motion

sheet rise 300 ms enter · exit 200 ms exit (0.3, 0, 1, 1); a Cell’s result closes the sheet with the exit curve

Reduced motion

platform fade

Text scale

reading class: labels wrap; the 20 icon stays; every Cell is a floor of 48; the body scrolls inside the 88% cap and the destructive group stays last, even below the first screen

Used by

row ⋯ (D4: always an ActionSheet), message long-press, comment ⋯, the 관리 sheet, post ⋯

Replaces

HeaderActionsMenu used on rows and the per-screen ConfirmSheet lists (packages/ui/src/header-actions-menu.tsx, confirm-sheet.tsx)

Rule · titles

9:41

올림픽공원 복식

관리

수정

링크 복사

삭제

one group + destructive no titles at all

9:41

올림픽공원 복식

관리

김민준

멤버

프로필 보기

메시지 보내기

관리

운영진으로 지정

회비 면제

멤버 내보내기

two groups + destructive the two groups titled, the destructive untitled

9:41

올림픽공원 복식

관리

올림픽공원 복식

단톡방

링크 복사

no destructive a single group: untitled

Scope

9:41

올림픽공원 복식

관리

메시지

답장

복사

삭제

message long-press the quick row first, then the group

9:41

올림픽공원 복식

관리

링크 복사

someone else’s comment 신고 is the destructive-class Cell

9:41

올림픽공원 복식

관리

수정

링크 복사

삭제

no icons consistent: none at all

9:41

올림픽공원 복식

관리

올림픽공원 복식

운영

참석자 관리

출석 확인3

참가비 관리

경기

경기 규칙

호스트 관리

대진 짜기

단톡방

링크 복사

경기 종료

일정 취소

일정 삭제

88% cap the body scrolls, the destructive group below the first screen

States

프로필 보기

Cell · pressed row .98 / .80

프로필 보기

Cell · hover

프로필 보기

Cell · focus

회비 면제

Cell · disabled .5: not available to this viewer

출석 확인3

Cell · with a count a neutral count Tag (출석 확인 3)

9:41

올림픽공원 복식

관리

수정

링크 복사

삭제

dark

Not drawn: loading (the sheet is built from a known object), selected (a Cell is a command, not a choice), error (a failed action is the Toast) and empty (a sheet with no actions is not opened).

7Dataheatmap, strip deltas, form strip, live row, photo grid, album overlay and the glyph tile

Activity heatmapA year’s rhythm at a glance: one cell per day, darker for more matches.

7 rows × n weeks of 12 cells · gap 4 · r3 · 22 weeks fit the 350 rail (22 × 12 + 21 × 4 = 348) · five steps from gray100 to ink · month labels 12/16 secondary above (4 under them) · a scrub readout like the Chart’s: a 1px #D4D4D4 guide, the cell ringed, an ink count Tag above

Library §18.2 Activity heatmap “7 rows × n weeks of 12 cells, gap 4, r3; five steps from gray100 to ink; month labels 12/16 secondary above; a scrub readout like the Chart’s” · §4 Chart “scrub: 1px #D4D4D4 guide + 8px ink marker + readout count tag (ink) above; empty = glyph + 15/22 secondary centred”.

Anatomy

20370

5월6월7월8월9월

1222 weeks

16 month labels · 12/16

108 grid

7 × 12 + 6 × 4

Press

a scrub: pressing a cell shows its day; there is no per-cell press physics: dim 0.85, no settle · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Steps

gray100 · #C4C7C4 · #8D928E · secondary #4F5851 · ink #0D100E for 0, 1, 2, 3, 4+ matches (dark: surface → ink inverted); the colour is never the only carrier: the scrub readout and the spoken total give the numbers (WCAG 1.4.1)

Range

the last 22 weeks, the current week last; no horizontal scroll (a longer history is the 기록 chart)

Empty

every cell at step 0 plus the caption “아직 경기 기록이 없어요” (the grid is kept so the layout does not jump)

Spoken

the grid is one image stop: "경기 활동, 최근 22주 중 14주에 경기, 모두 31경기"; scrubbing (web: arrow keys) announces "9월 14일, 3경기" in a live region; the cells are not stops

Motion

the grid fades in fade 150 ms standard (0.2, 0, 0, 1); the scrub marker follows the finger with no animation and the readout changes instantly

Reduced motion

unchanged (gesture tracking is not motion the app times)

Text scale

month labels are chrome class (cap 1.3) and may collide: labels that do not fit are dropped, never overlapped; the 12 cells and the grid never scale (a graphic); the readout Tag grows with its text

Used by

기록 tab (활동), 프로필 활동, 클럽 활동

Replaces

ActivityHeatmapCard’s own grid and legend (packages/features/records/src/cards/activity-heatmap-card.tsx)

States

5월6월7월8월9월

rest

5월6월7월8월9월

9월 14일 3경기

scrub a ringed cell, a 1px guide, the ink readout

5월6월7월8월9월

focus web: the ring around the grid; arrow keys move the scrub

5월6월7월8월9월

loading gray100 cells, pulse .6 ↔ .9

5월6월7월8월9월

아직 경기 기록이 없어요

empty all step 0, kept in place

5월6월7월8월9월

dark

Not drawn: pressed, hover and disabled (not a control), selected (the scrub is its selection), error (a failed load is the section’s retry Notice).

Strip with deltasThe Strip’s numbers with how they moved since the last period.

an optional delta line 12/16·600 secondary under each label: a plain sign (“+3”, “−2”), never red or green or an arrow · the Strip grows 80 → 100 for every column · the comparison (“지난달 대비”) is named once, in the caption row under the section head · zero shows “0” · no comparison data leaves the line empty (height kept), never a dash · no column with data returns the Strip to 80 and drops the caption

Library §19.3 Strip with deltas “deltas are numbers, not status” · §19.5 “zero shows ‘0’; with no comparison data the delta line stays empty in that column (its height is kept so the columns align) and never shows a dash. If no column has data, the Strip returns to 80 and the caption is omitted.”

Anatomy

20370

이번 달 기록

지난달 대비

12경기+3

58%승률−4

9출석0

column16

24 section head

32 caption · 지난달 대비

100 Strip

numeral 32 · 4 · label 18 · 4 · delta 16

Press

a linked column presses as a row (.98 / .80): scale 0.98 · opacity 0.80 · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Delta

a plain sign and a number: "+3", "−2", "0"; never colour (the Strip carries no status), never an arrow glyph; it is quiet: 12/16·600 secondary

No data

a column without a comparison keeps its empty delta line so the baselines align; if no column has data the Strip is 80 and the caption row is omitted

Spoken

one stop per column when it links: "경기 12, 지난달보다 3 늘어요" — the sign is spoken as a direction ("늘어요" / "줄어요" / "같아요"), never as red or green; an unlinked Strip is text in reading order

Motion

press: spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in / 150 ms out; fade 150 ms standard (0.2, 0, 0, 1) for skeleton → content

Reduced motion

the settle is dropped, the dim stays

Text scale

numeral class (cap 1.5) and label class: columns stay three side by side at every scale (they only grow in height, a floor of 80 / 100); the delta line wraps under its label

Used by

기록 tab Strip (경기 · 승률 · 출석), 프로필 Strip, 클럽 기록

Replaces

StatStrip / CellRow without deltas (packages/ui/src/stat-strip.tsx): the delta text was set inside the label

States

이번 달 기록

지난달 대비

12경기+3

58%승률−4

9출석0

with deltas 100; zero shows 0

이번 달 기록

지난달 대비

12경기+3

58%승률

9출석0

one column without data the line stays empty, height kept, no dash

이번 달 기록

12경기

58%승률

9출석

no column has data back to 80, no caption

이번 달 기록

지난달 대비

12경기+3

58%승률−4

9출석0

pressed a linked column: row .98 / .80

이번 달 기록

지난달 대비

12경기+3

58%승률−4

9출석0

focus web ring around the column

이번 달 기록

지난달 대비

loading skeleton at the final 100

이번 달 기록

지난달 대비

12경기+3

58%승률−4

9출석0

dark

Not drawn: hover (web: .85), disabled, selected, error (the section’s retry Notice) and empty (no data at all is the 80 Strip with 0 values).

Text size

이번 달 기록

지난달 대비

12경기+3

58%승률−4

9출석0

130% text three columns hold

이번 달 기록

지난달 대비

12경기+3

58%승률−4

9출석0

200% text numerals at the 1.5 cap, the Strip grows

Form stripThe last five results of a pairing or a player, in order.

five 24 × 24 r6 cells, gap 4, chronological left to right · 승 = ink fill with white 12/16·700 · 패 = gray100 with secondary 12/16·700 · head-to-head and player records only, never in rows (colour-only dots fail WCAG 1.4.1) · fewer than five matches draw only those cells; none omits the strip

Library §19.3 Form strip “head-to-head and player records only, never in rows: rows keep one trailing figure … Spoken ‘최근 5경기: 승, 승, 패, 승, 패’. In a row, recent form is line-2 text (‘최근 5경기 3승 2패’).” §19.5 “the last five completed head-to-head matches, in chronological order, from the existing head-to-head query”.

Anatomy

20370

최근 5경기

승승패승패

24424

24 section head

24 cells · r6

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Not in rows

a row keeps one trailing figure; recent form in a row is line-2 text: “최근 5경기 3승 2패”

Data

the last five completed head-to-head matches in chronological order (left = oldest); fewer than five draw only those cells; none: the strip is omitted (no empty slots)

Spoken

one image stop: "최근 5경기: 승, 승, 패, 승, 패" (oldest first, the same order as the cells); the cells are hidden individually

Motion

none: the change is instant

Reduced motion

unchanged

Text scale

the 24 cell is a floor and its 승 / 패 is a label (chrome cap 1.3): up to 130% the character still fits; the strip never wraps (five cells = 140 wide)

Used by

head-to-head (상대 전적), 플레이어 기록 header

Replaces

the colour-only result dots in rows (win green, loss red) of the profile and head-to-head screens

States

승승패승패

five results

승패승

three results only those cells

승승승승승

all wins

none the strip and its head are omitted

loading five gray100 cells

박지훈

2승 1패

최근 5경기 3승 2패

in a row (the rule) line-2 text, never dots

승승패승패

dark ink fill becomes the dark ink, label the canvas

Not drawn: pressed, hover, focus, disabled (static), selected, error and empty (omitted).

Live rowThe one line under a scoring header that says the match is live, when and where.

min 24, directly under the header: the Live tag (§6), 8, then the date and venue as MetaSegments 13/18·500 secondary at the rail · 8 above and below · replaces the LIVE band on 스코어카드 and 경기 보드

Library §19.3 Live row “min 24, directly under the header: the Live tag (§6), 8, then the date and venue as MetaSegments 13/18·500 secondary at the rail; 8 above and below. Replaces the LIVE band on 스코어카드 and 경기 보드.” §6 Live tag “danger solid Tag with a 6px white pulse dot (1600 ms); reduced motion: static dot”; §15 loops 5 s per mount.

Anatomy

20370

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

Live tag8

56 header

24 live row

Ended

when the match ends the Live tag is replaced by a neutral Tag “종료” and the line stays (proposal: §19.3 only specifies the live state)

Spoken

one text stop: "라이브, 9월 19일 토요일, 올림픽공원 3번 코트"; the pulse is hidden; the Live tag reads as the word "라이브"

Motion

the dot pulses 1600 ms, for 5 s per mount, then rests on the static frame (WCAG 2.2.2); the row appears with the page; scores and counts below never animate

Reduced motion

the dot stays, the ring is not drawn (a static frame from the start)

Text scale

the tag and the line are label / reading classes: from 150% the date and venue wrap under the tag; the row is a floor of 24 + 16

Used by

스코어카드, 경기 보드, 관전 화면

Replaces

the LIVE band of the scorecard and match board (SessionLiveBand, packages/features/sessions/src/scorecard)

States

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

live · pulse start 0 ms: ring at the dot, α.45

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

live · pulse mid 800 ms: ring ×1.7, α.22

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

live · pulse end 1600 ms: ring ×2.4, α0

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

after 5 s / reduced motion the static dot, no ring

스코어카드

종료

9월 19일 (토)

올림픽공원 3번 코트

ended neutral Tag 종료 (proposal)

스코어카드

LIVE

9월 19일 (토) 09:00

올림픽공원 테니스장 3번 코트 (강남구 올림픽로 424)

long venue the line wraps next to the Tag; the row grows

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

dark

Not drawn: pressed, hover, focus, disabled (the row is static text), loading (the scorecard skeleton), selected, error and empty.

Text size

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

130% text the tag grows with its label

스코어카드

LIVE

9월 19일 (토)

올림픽공원 3번 코트

200% text the line wraps beside the tag

PhotoGridA club or a venue’s photos as one full-bleed grid, with select mode for managing them.

3-up, full-bleed 390, 2pt gaps, square tiles · the tile is (390 − 4) / 3 = 128.67, derived from the width and exempt from the 4pt grid like any computed media size (D5) · the +N overflow tile is the PostRow pattern (ink α0.5 with 20/28·700 white) · long-press enters select · a partial last row is left-aligned, never stretched

Library §18.2 PhotoGrid “3-up full-bleed, 2pt gaps, square tiles; long-press enters select; the +N overflow tile pattern from PostRow” · §18.1 D5 “앨범 grid: 3-up full-bleed with 2pt gaps (the photo-grid standard); tile size is derived from the width and exempt from the 4pt grid”.

Anatomy

0390

128.672128.67

128.67 tile

square, computed

128.67 tile

Press

a tile (dim .85, no settle: a full-bleed image does not scale): dim 0.85, no settle · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Select

a long-press on a tile enters select mode (a 24 round check at the tile’s top-right, inset 8: off = a 2px white ring on ink α0.3, on = ink fill + a white check, the photo dims to .6); the header becomes “N장 선택됨” with 취소 at the right; the actions (삭제) are one CTA band (proposal: §18.2 gives only the long-press)

Overflow

in a preview the last visible tile carries “+N” (ink α0.5, 20/28·700 white); in the full grid there is no overflow tile

Tile error

a tile that fails to load is gray100 with a 24 image glyph in secondary and stays pressable (retry on open)

Spoken

the grid is a list "사진 12장"; each tile a button "사진 3 / 12" that opens the viewer; in select mode a tile is a checkbox "사진 3, 선택됨" and the header says "2장 선택됨"

Motion

the tiles fade in fade 150 ms standard (0.2, 0, 0, 1) as they load; select mode: the checks fade fade 150 ms standard (0.2, 0, 0, 1); the viewer is a platform transition

Reduced motion

the cross-fade becomes instant

Text scale

photos do not scale and the grid keeps 3 columns at every size; only the header text and the band grow

Used by

클럽 앨범, 테니스장 사진, the +N preview inside a system PostRow

Replaces

the horizontal PhotoStrip of the venue screen (packages/features/sessions/src/directory-venue-detail/parts/photo-strip.tsx) and the club album’s ad hoc 2-up grid

States

rest · 9 photos

a partial last row 4 photos: left-aligned

tile pressed dim .85, no settle

tile hover

tile focus web: the ring inside the tile

2장 선택됨

취소

select mode long-press: checks, 2 picked

a tile that failed gray100 + the image glyph

loading gray100 tiles, pulse .6 ↔ .9

preview with +N in a post: 350 wide, tile 115.33

아직 사진이 없어요경기 후에 찍은 사진을 올려보세요

사진 올리기

empty first-run EmptyState (members: 사진 올리기)

dark

Not drawn: disabled (a blocked album is the permission EmptyState), error of the whole grid (the section’s retry Notice).

MediaBand · album overlayA photo band that holds several photos says which one you are on.

the photo MediaBand (240, scrim, glyph circles) with a count Tag (neutral solid, “1 / 12”, sm 24) at the bottom-right, 12 in, and pager dots (6 px white α0.6, the current one white, gap 8) at the bottom-centre on the Tag’s centre line · one photo draws neither

Library §18.2 MediaBand album overlay “photo band count Tag (neutral solid ‘1 / 12’) bottom-right and pager dots (6px white α0.6, current white) bottom-centre”.

Anatomy

20370

9:41

1 / 12

Tag12

240 band · photo variant

status bar included

24 Tag · centre y 216

12 in

Press

the band (dim .85, no settle); the glyph circles keep their own press: dim 0.85, no settle · spring in {20, 400, .7}, out {15, 300, .7} · dim 80 ms in, 150 ms out · UI thread

Hover

web, pointer: opacity .85 + cursor: pointer

Focus

web: 2px ink ring, offset 2

Disabled

opacity .5, not-allowed, inert · aria-disabled

aria-busy · skeleton opacity .6 ↔ .9, 800 ms half-cycle (shimmer pins .75 under reduced motion)

Dots

one dot per photo up to 12; with more than 12 the dots are not drawn and the Tag alone carries the position (proposal: §18.2 does not cap the dots)

One photo

no Tag and no dots; the band is just the cover (COVER-ALWAYS: a club without photos shows its default cover, with no overlay)

Scrim

the white dots sit on the photo’s bottom, which the top scrim does not cover: on a bright photo the Tag (solid) stays legible, the dots rely on α0.6 white over a darkened photo (a bottom scrim ink α0.2 → 0 over 48 is proposed)

Spoken

the band is one stop: "사진 1 / 12, 앨범 열기" (a swipe moves to the next photo and announces "사진 2 / 12"); the dots are hidden

Motion

a swipe tracks the finger; the settle to the next photo is the platform page animation; the Tag text changes instantly

Reduced motion

the page change is instant; the dots and the Tag are unchanged

Text scale

the Tag is a label class (cap 1.5): it grows with its text and stays 12 from the corner; the dots do not scale (graphics)

Used by

클럽 홈 / 클럽 미리보기 with an album, 테니스장 detail with photos

Replaces

the single cover image of the club hub band (a hub with an album had no way to browse from the band)

States