Library — surfaces and content

The blocks, strips, heroes, notices, charts, calendars and image surfaces that carry a page's content, each in its states.

Block

The screen's one answer in three rows: the label and its door, one figure (with at most one graphic at its right), one line of facts; on the ink surface, pressed as a whole.

다음 일정내일, 9월 19일 (토)

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

Rest: three rows; the door pill 일정 보기 › ends row 1

다음 일정내일, 9월 19일 (토)

09:00

올림픽공원 테니스장

☀️ 18°

Without a door: no chevron, and not pressed

States

다음 일정내일, 9월 19일 (토)

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

Pressed: scale .98, dim .90

다음 일정내일, 9월 19일 (토)

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

Focus: a 2 ink ring, offset 2, outside the block

Loading: three bars on the fill; not pressable

다음 일정

매치 찾기

예정된 일정이 없어요

클럽 일정이 올라오면 소식에 보여요

Empty: a sentence; the door is 매치 찾기 ›

다음 일정내일, 9월 19일 (토)

—

불러오지 못했어요

Error: a dash, not red; a press retries

다음 일정내일, 9월 19일 (토)

일정 보기

09:00

올림픽공원 테니스장

16:50 기준

Offline: the last figure; the time it was true ends row 3

다음 주 토요일, 9월 26일 (토) 올림픽공원 정기 모임과 신입 환영 경기

일정 보기

09:00

올림픽공원 테니스장 3번 코트 실내 하드코트 구역 (정문 오른쪽)

☀️ 18°

Long text: A wraps beside the door, the place crops; the numeral stays whole

200% text

다음 일정내일, 9월 19일 (토)

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

Reading text to 2.0, numeral capped at 1.5; the graphic drops under it

Door on row 1

다음 주 토요일, 9월 26일 (토) 올림픽공원 정기 모임

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

A long date at 100%: the date wraps, the door holds the top right

다음 주 토요일, 9월 26일 (토) 올림픽공원 정기 모임

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

The same date at 200%: more lines, the door still on row 1

올림픽공원 테니스장 3번 코트 실내 하드코트 구역

점수 입력

김

이

김민준 (나)이서연

박

최

박지훈최유나

경기가 끝났어요

A long place: it crops to one line, the door keeps row 1

2번 코트

점수 입력

김민준 (나)이서연

박지훈최유나

경기가 끝났어요

The door at 200%: 점수 입력 › stays beside line 1

올림픽공원 테니스장 3번 코트 실내 하드코트 구역

검토 중

김

이

김민준 (나)이서연

박

최

박지훈최유나

A long place with a Tag: the Tag holds row 1 the same way

Dark

다음 일정내일, 9월 19일 (토)

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

Block fill and text on the dark canvas

Block grammar

Anatomyr16 · pad = rail (20) on every side, no chevron lane · fill block · min-height 144 · content width · one left text axis at 40 · 24 to the content belowThree rows (review 40)Every Block is three rows and no more: A, B, C. At 1x it is 150 (20 · A 24 · 8 · B 48 · 8 · C 22 · 20), a glance card: inside the 158 of a medium widget on a 390 phone and the 84–160 of a Lock Screen Live Activity, whose guideline is "focus on important information… your Live Activity doesn’t need to display everything" (Apple HIG). Anything more is behind the door. From 1.5x the graphic drops under the figure and the rows may wrap (the reflow rule).ZonesA label row 18 (13/18·600 white α0.8; 24 with the door or a Tag at its end) · B figure row 48 (numeral 40/48·700 ball, unit 15/22·600 white, 4 apart), with at most one graphic at its right, 16 after the figure: the 30-day line (112 × 40, ball), the faces of who comes (32, each over the one before by 10) and their count, or the progress ring of a share (48 across, 6 thick; the dues Block) · C one line of facts (15/22·500 α0.85; the day Block: the place with its 16 pin, cropping, then one fact at the far end) · 8 between zones. No progress bar: a fourth bandDoora Block that opens somewhere names the place in zone A’s end, the sm Door pill on the ink surface (24 tall, 10 of side padding, a white α0.4 border, the label 13/18·600 white α0.8, then a 16 chevron 4 after it; owner review 48: an action cue is a control, never bare text; the chevron is the suffix of that label, the law of the chevron): 홈 day 일정 보기 (a fee due: 입금하기; nothing ahead: 매치 찾기), ELO 티어 안내, the Match state block its action (점수 입력, 점수 확인). It holds the top right of row 1 at every text size, in a line slot as tall as line 1, 8 after the eyebrow; the eyebrow beside it wraps for a date or a sentence and crops to one line with a tail ellipsis for a place; the door never wraps under it. A door that opens a choice instead of a place (the dues Block’s month) takes the Choice’s down chevron; a right chevron always means going somewhere. A Tag in the same place holds row 1 the same way. Never a floating chevron at the Block’s edge, and a Block with no destination (the identity Block, a match with nothing to do) draws no chevron at allRatiosfigure : eyebrow 3.1, once per hub; unit 0.375 × figure; never two 40 figures on a screenPressthe whole block, .98 / .90, when it has a door (the Door pill is part of the target, not a second stop); no buttons inside; the identity block has no whole-Block press (프로필 수정 and 공개 프로필 보기 live in 설정 › 계정)Spokenbutton; the label, the figure, the facts, in one sentence; the graphic is hidden (the sentence says it); loading sets aria-busyReplacesHeroCard, TypeHero identity header and EloFactRow, SummaryCard, StatGrid as a heroUseOne per hub; where the numbers are not the screen's answer, use a Strip or a Cell group.

Block, 홈 day

Your next game on 홈 (owner reviews 34 and 40): when, who comes and where, in three rows.

다음 일정내일, 9월 19일 (토)

일정 보기

09:00

올림픽공원 테니스장

☀️ 18°

Rest: when, then the time and who comes, then the place and the weather

다음 일정내일, 9월 19일 (토)

입금하기

09:00

참가비 10,000원오늘 18:00까지

A fee due: row 3 is the fee and its deadline; the door is 입금하기

NextTomorrow, Sat Sep 19

View

09:00

Olympic Park Tennis Courts

☀️ 18°

English: short date formats

ContentA "다음 일정 | 내일, 9월 19일 (토)" · B 09:00, then at its right the faces of who comes and "6/8" · C the place with its pin (it crops) and, at the far end, the weather "☀️ 18°" (offline: the time it was true). A fee due: C is "참가비 10,000원" and, at the far end, "오늘 18:00까지". One state at a time, in order: cancelled, check-in open, fee due, waitlisted, confirmed (review 28)Doorthe sm Door pill 일정 보기 › (a fee due: 입금하기 ›; nothing ahead: 매치 찾기 ›, with "다가오는 일정 | 일정 없음"); the whole block opens the sessionSpoken"다음 일정, 내일 9월 19일 토요일 오전 9시, 올림픽공원 테니스장, 8명 중 6명 참석, 맑음 18도"Replacesnone (new)

Block, ELO

The viewer's rating on 기록: the figure, its 30-day line and the distance to the next tier, in three rows.

ELONTRP 3.5

티어 안내

1,482

최근 30일 +94마스터까지 518점

Rest: the 30-day line rides the figure's right; no bar (review 40)

ELONTRP 3.5

티어 안내

순위 전

경기를 3번 더 기록하면 순위가 보여요

Empty: 순위 전, no line

ELONTRP 3.5

About tiers

1,482

+94 in 30 days518 points to Master

English

ContentA MetaSegments("ELO", "NTRP 3.5"): the person’s one NTRP, the Level tag’s value, never the tier’s band · B 1,482 (no unit) and, at its right, the 30-day line (112 × 40, ball, the last point marked) · C MetaSegments("최근 30일 +94", "마스터까지 518점"). The tier bar of earlier drafts is gone: it was a fourth band, and C says the distance in wordsDoor티어 안내 ›, the sm Door pill; the whole block opens the tier explainer sheet (TrustTierInfoSheet-style, one sheet)Spoken"ELO 1,482, NTRP 3.5, 최근 30일 94점 상승, 마스터까지 518점 남음"ReplacesHeroCard (packages/features/records/src/cards/hero-card.tsx)

Block, dues

The month's dues on the 회비 page (the owner's check of 2026-10-19): the amount collected out of the amount due with its progress ring, and who has paid, in three rows.

9월 회비

월 선택

370,000원

/ 570,000원

19명 중 12명 납부미납 7명

Rest: the month and its door, the amount with the ring at its right, who has paid

9월 회비

월 선택

570,000원

/ 570,000원

19명 모두 납부

Paid in full: the ring closes and the line says so

Sep dues

Month

370,000 KRW

/ 570,000 KRW

12 of 19 paid7 unpaid

English: KRW in tabular figures, the pair under the figure

States

9월 회비

월 선택

회비 없음

회비를 만들면 납부 현황이 보여요

Empty: 회비 없음 in the sentence slot, the door stays; never a 0

Loading: three bars on the fill; the door waits

9월 회비

월 선택

370,000원

/ 570,000원

19명 중 12명 납부미납 7명16:50 기준

Offline: the last figures; the time they were true ends row 3

9월 회비

월 선택

370,000원

/ 570,000원

19명 중 12명 납부미납 7명

200%: the numeral to 1.5, the pair wraps, the ring drops under the figure

9월 회비

월 선택

370,000원

/ 570,000원

19명 중 12명 납부미납 7명

Dark: the ring’s track and arc on the dark block

AnatomyBlock grammar, three rows. A: “9월 회비” (13/18·600 white α0.8) and the period door at its end · B: the amount collected as the figure (370,000 at 40/48·700 ball, 원 15/22·600 white), what it is out of after it (“/ 570,000원”, 15/22·500 white α0.85, 8 after the unit; it wraps whole under the figure when the line does not hold it: the pair is 275 wide and 246 is left beside the ring at 390, so the Block is 172 there and 150 where the pair fits) and, at the right, the progress ring · C: who has paid, one line (“19명 중 12명 납부 | 미납 7명”)Ringthe one graphic of B: 48 across and 6 thick, the track white α0.2, the arc ball from 12 o’clock clockwise with round ends, 16 after the figure column and centred on B; value = collected / due (0.65 here) · no number inside it: the figures beside it are the numbers · hidden from the reader, because the Block’s name says it · from 1.5x it drops under the figure like every graphicDoorthe month: 월 선택 ▾ at the end of zone A, the grammar’s sm Door pill with the down chevron of a Choice, because it opens a Sheet of months · it keeps row 1 at every text size · the Block itself is a statement with one control, so it is not pressed and has no pressed stateStatesloading: the three bars · empty: “회비 없음” in the sentence slot, the door stays so another month can be chosen, and C names the next step · offline: C ends with the time it was true (“16:50 기준”) · an error is the page’s, not the Block’sSpokena group: “9월 회비, 570,000원 중 370,000원 납부, 19명 중 12명 납부, 미납 7명”, then the door as its own stop, “월 선택”Replacesnone (new): the 회비 page’s 납부 현황 head with its month Choice and the what’s-left line (the hub’s 클럽 홈 회비 pane keeps its line)

Block, identity

Who the viewer is on 프로필: face, name, level and club.

김민준

신뢰 72점

강남 라켓클럽구력 3년

Rest: face (the photo), name and Level tag, the 신뢰 door at the row’s end, then the club and 구력; no press

김

김민준

강남 라켓클럽구력 3년

No face for this viewer (a stranger, a photo kept private): the initials, in the same circle

이서연 하늘 라켓 마스터 정예

강남 라켓클럽구력 3년

Long name: wraps whole, the Level tag ends its last line

이름을 입력해 주세요

강남 라켓클럽구력 3년

Empty: the name slot asks for a name

김민준

강남 라켓클럽구력 3년

200%: the row grows, still centred in the block

Minjun Kim

Gangnam Racket Club3 years of play

English

Minjun Kim

Gangnam Racket Club3 years of play

English, no face: the first and last initials

Anatomyone row centred in the block: avatar 56 · 12 · the name 24/32·700 white, wrapping whole and never cut, its Level tag, and the 신뢰 door (the sm Door pill) at the row’s right end on the name’s first line; then 4 and C MetaSegments 15/22·500 α0.85, the club and the 구력, composed by the kit so every person page reads alike (owner review 51); no eyebrowLevel tagthe 24 Level tag flows inline at the end of the name’s last line, 8 after its last word, in a box as tall as the name’s line (32; 54 at 200%), so it is centred on that line at every text size and is never on a line of its own: the last word and the tag wrap as a pairFacethe person’s photo as this viewer may see it: a face reaches a viewer only through public.can_view_face (the person, a shared active club, an accepted friend, or the person’s explicit public opt-in; never an anonymous viewer), and a NULL face is the initials (Faces, data-and-hooks). `photo` picks the portrait; `photo={false}` draws the initials in the same 56 circle, 20/28·700 white on a white α0.2 disc, as the day Block’s faces on ink (a Hangul name its first syllable, a Latin name its first and last initials: “MK”), never a lock, a blur or a stand-in portrait. A stranger on 공개 프로필, a viewer outside the person’s audience and a person who kept the photo private all see the initials; the person sees their own photoPressnone: the Block states who the viewer is and goes nowhere, so it draws no chevron and has no pressed state; 공개 프로필 보기 is a Cell in 설정 › 계정, beside 프로필 수정Spokenone stop: "김민준, NTRP 3.5, 강남 라켓클럽, 구력 3년"; the face, photo or initials, is not read; the 신뢰 door is its own stopReplacesTypeHero identity header and EloFactRow in ProfileScreen

Match state block

The door to one match on the scorecard: the court and the teams, and the one thing this viewer can do next.

2번 코트

점수 입력

김

이

김민준 (나)이서연

박

최

박지훈최유나

경기가 끝났어요

점수 입력: no score yet; the line says what happened

2번 코트

점수 검토 요청

김

이

김민준 (나)이서연

박

최

박지훈최유나

Entered: the score stands, the winner emphasised; the door asks for a review

2번 코트

검토 중

김

이

김민준 (나)이서연

박

최

박지훈최유나

Under review: the Tag 검토 중, the score stands, no door

2번 코트

김

이

김민준 (나)이서연

박

최

박지훈최유나

Nothing to do: the court and the teams, the score as entered

Not counted and held

2번 코트

기록 제외

김

이

김민준 (나)이서연

박

최

박지훈최유나

ELO에 반영되지 않아요

Not counted: the Tag 기록 제외, no numerals; the line says why

이전 경기 점수 입력 후 시작

대기

김

이

김민준 (나)이서연

박

최

박지훈최유나

Held: zone A says why, the Tag 대기, no numerals, no line

내 이전 경기 점수가 필요해요

점수 입력

김

이

김민준 (나)이서연

박

최

박지훈최유나

Held, blocked player: their words and the door they owe, 점수 입력 ›

Stopped

2번 코트

일시 중단

김

이

김민준 (나)이서연

박

최

박지훈최유나

6-4 3-1에서 멈췄어요

Suspended: the Tag 일시 중단, the games so far, no winner

2번 코트

기권

김

이

김민준 (나)이서연

박

최

박지훈최유나

Retired: the Tag 기권, the other side wins

2번 코트

부전승

김

이

김민준 (나)이서연

박

최

박지훈최유나

Walkover: the Tag 부전승, no numerals

Dark · English · 200% text

2번 코트

점수 검토 요청

김

이

김민준 (나)이서연

박

최

박지훈최유나

Dark: the entered score with its door

2번 코트

검토 중

김

이

김민준 (나)이서연

박

최

박지훈최유나

Dark: the Tag 검토 중 keeps its contrast

Court 2

Ask for a review

Jihun Park (You)Yuna Choi

Minjun KimSeoyeon Lee

English: the door Ask for a review, no Tag

Court 2

Under review

Minjun Kim (You)Seoyeon Lee

Jihun ParkYuna Choi

English: the Tag Under review beside the court

Starts once the earlier score is in

Held

Minjun Kim (You)Seoyeon Lee

Jihun ParkYuna Choi

I need my earlier match’s score

Enter score

Minjun Kim (You)Seoyeon Lee

Jihun ParkYuna Choi

Court 2

Retired

Minjun Kim (You)Seoyeon Lee

Jihun ParkYuna Choi

English: Held, the blocked player, and Retired

2번 코트

검토 중

김민준 (나)이서연

박지훈최유나

200%: the Tag stays beside the court; numerals cap at 1.5

2번 코트

점수 검토 요청

김민준 (나)이서연

박지훈최유나

200%: the door 점수 검토 요청 › stays beside line 1

In context

진행 중

9월 19일 (토)올림픽공원 테니스장

2번 코트

점수 입력

김

이

김민준 (나)이서연

박

최

박지훈최유나

경기가 끝났어요

Under the header: the Live row, then the block and its line

AnatomyBlock grammar, min 144 in every state, so a score arriving or changing state never moves the layout · A 13/18·600 α0.8, 24 tall when it carries a Tag: the court name (a held match says why instead); at its trailing end, 8 after the eyebrow, either the door, the viewer’s next action as the sm Door pill (점수 입력 ›, 점수 검토 요청 ›), or, when there is no door, one state Tag (sm, 24), since a door already is the state for this viewer; the eyebrow yields first (a place crops to one line with a tail ellipsis; a date or a sentence wraps), the door or Tag never shrinks and never leaves row 1 · B the team lines · no zone C · the state line is a Caption row under the block (an object line, 8 above its text), then the block’s 24 tailTeam linescontext block: two lines, min 32, 8 apart; names 15/22·600 white α0.85, a doubles pair as two names joined by the 1px break; the games per set in 32 columns, 24/32·700 ball, each on its own team’s line; the viewer’s team is the top line and the viewer’s name takes “(나)”, everyone else reads slot orderWinner emphasison an entered score, an entry under review included (the score stands until the host changes it): the winner’s names white 600 and numeral ball, the loser’s white α0.7 at 400, numeral white α0.7; a void block shows both teams equal with no numerals; never a hue or a glyphStates (R4)no score: 점수 입력 › · entered (H3): no Tag, the door 점수 검토 요청 › for a player until 7 days after the session; none for a spectator · under review (H4): the Tag 검토 중 (warning weak), no door, the entered score and its winner standing · not counted (H5): 기록 제외 (neutral), no numerals · held and stopped belowState linederived from the door and the state, never passed by a board: 점수 입력 → 경기가 끝났어요 · not counted → ELO에 반영되지 않아요; an entered score, one under review and a held match have none, because the door, the Tag or the zone A sentence says it. English: The match is over · This match won’t affect ratingsDoorsthe whole block is one button and no other control is drawn inside: the Door pill names where it goes: 점수 입력 opens ScoreEntry, 점수 검토 요청 opens ScoreEntry in its appeal mode; with no door the block opens the match (the read-only 대진표) and draws no chevronSpokenone button: the door text, the court, the team lines from the viewer’s side, then the Tag when one is drawn: “점수 검토 요청, 2번 코트, 내 팀 박지훈, 최유나 4, 상대 팀 김민준, 이서연 6, 승.”; a winner is spoken (승) on an entered score; no live regionHeld and stoppedheld (D4, derived from the player’s earlier match): zone A reads 이전 경기 점수 입력 후 시작 (the sentence is shortened from “확정 후” so it stays one line at 390), or for the blocked player 내 이전 경기 점수가 필요해요 with the door they owe, 점수 입력 ›; the Tag 대기 for the others, no numerals · a stopped match (D5) keeps the court, draws the games so far (none for a walkover or a cancelled match), the Tag of its outcome and emphasises the winner only where the outcome has one (기권, 부전승, 실격); suspended adds the line “6-4 3-1에서 멈췄어요”ReplacesLiveRow, MatchScoreboard; the ±1 steppers of LiveMatchRow retire with the live score

Club hero

A club's identity under its media band: the logo, the name and three facts (where, what level, how many).

강남 라켓클럽

강남구NTRP 3.0–4.0멤버 42명

9:41

Rest: under the band, the logo beside the name and three facts (option B)

강남 라켓클럽

강남구NTRP 3.0–4.0멤버 42명

주말 아침, 복식 위주로 즐겁게 치는 클럽

A tagline: one optional line under the facts; it crops

서울 강남 서초 아침 라켓 동호회 시니어

서초구NTRP 3.0–4.0멤버 128명

A long name wraps to two lines (114)

States

Loading: a logo square and two bars

Gangnam Racket Club

GangnamNTRP 3.0–4.042 members

English: Gangnam, NTRP 3.0–4.0, 42 members

Anatomyoption B (owner review 43): no overlap. 24 under the band, the logo 56 r12 at x = rail, and beside it at x = rail + 68, top-aligned, the name 24/32·700 (wraps, never cut) · 4 · one MetaSegments line 15/22 secondary of three facts: the region, the level band, the members ("강남구 | NTRP 3.0–4.0 | 멤버 42명") · 8 · an optional tagline 15/22 ink, one line · 82 high with a one-line name and no taglineFacesnone in the hero: the logo is the one identity mark, and 5 of 7 peer heroes keep faces out; members are a section of their own, shown to members (a non-member never sees identifiable faces)Logothe club's own image, else its monogram tile in the club's identity hueSpokenthe name is the screen h1 ("강남 라켓클럽, 제목 1"), then "강남구, NTRP 3.0부터 4.0, 멤버 42명", then the tagline; the logo is hiddenReplacesthe photo seam and hero in ClubPlaceHeader

Strip

Two to four headline numbers side by side (records, club analytics).

총 경기47

승률68%

출석률92%

Rest: three equal cells, label over figure, centred in each

Variants

이번 달 참석12회

연속 참석5주

Two columns: two cells of 175

총 경기47

승32

패15

연승3

Four columns: four cells of 87.5

멤버42

신규 가입5

출석률92%

With deltas: plain signs; a column without data keeps its line

총 경기47

승률68%

출석률92%

Linked: a cell presses as a whole, its target the cell

길찾기

전화

Action face: the same cells, a 24 glyph over its label

States

Loading: a label bar and a figure bar per cell

Two-up reflow (a figure never shrinks)

ELO1,482

승32

패15

연승3

Four columns at 130%: 1,482 is 90.4 in an 87.5 cell, so 2 by 2

ELO1,482

승32

패15

Three columns at 150%: 1,482 is 104.4 in 116.7, it stays

ELO1,482점

승32승

패15패

Units at 130%: 1,482점 is 117.4 in a 116.7 cell, so 2-up

Tiles face (review 46, M3)

총 경기

승률

68%

출석률

92%

Tiles: n tiles from rail to rail, 8 apart; the label on top, the figure at the bottom

총 경기

승률

68%

출석률

92%

200%: three tiles hold “68%” (78.5 in 87.3); each grows with its text

ELO

1,482

승

패

200%: 1,482 is 104.4 in 87.3, so 2 by 2, 8 apart; the odd last tile spans

Loading: a label bar and a figure bar on each tile

멤버

신규 가입

출석률

92%

Dark with deltas: the dark gray100; the delta sits 4 under the figure

What’s left (review 46, M3, M17)

납부 현황

9월

370,000원 / 570,000원12/19명

확인 대기3명

이서연

9월 17일 입금 완료 신청

박지훈

9월 18일 입금 완료 신청

No Strip restates the sections under it: one line says what is left, 12 under the head

납부 현황

370,000원 / 570,000원12/19명

200%: the line wraps by fact; a fact is never cut and the break never starts a line

Payment status

370,000 KRW / 570,000 KRW12/19 paid

English: money as KRW in tabular figures, the count as 12/19

8명입금 확인 중 3입금 필요 2

8명모두 입금 완료

With nothing left it says so; the people first, then what is open

Dark and English

멤버42

신규 가입5

출석률92%

Dark

Played47

Win rate68%

Attendance92%

English: Attendance is 68.6 in a 116.7 cell, it fits

Anatomycontent width × min 80 (100 with deltas) · n equal cells of content width / n (350 / n at 390: 175, 116.7 and 87.5 for n = 2, 3, 4), one grid for both faces · each cell a vertical stack centred in its cell: label 13/18·500 secondary (8 of padding each side, wraps at its spaces) · 4 · figure 24/32·700 ink tabular (never shrinks, never ellipsizes) · pad 12 above and below · no dividers; the equal cells and the 16 minimum gap are what group the columnsDeltasa 12/16·600 secondary line 4 under the figure (“+3”, “−2”), centred under it; plain signs, never red or green, never arrows; zero shows 0; the comparison (“지난달 대비”) is named in the Section head’s title, never in a line under the Strip (1.16)Fit testlet w be a cell’s widest line, its figure or its label’s longest word: every cell needs w ≤ its cell (a label word w ≤ cell − 16, the padding the label keeps, so a word is never cut) and every neighbour pair needs (cell − w₁) / 2 + (cell − w₂) / 2 ≥ 16; a label wraps at its spaces first; if a test fails the strip reflows to rows of two equal cells, 12 apart, an odd last cell spanning both columns, centred; two cells never reflowWhythe layout is a function of n and the text scale alone: it never depends on the data, so no cell moves when a figure changes width, and the first and last contents always sit inside the railTiles facereview 46, M3: the face of a stat summary. n tiles (n = 2 to 4) from the left rail to the right rail, 8 apart ((350 − 8 (n − 1)) / n: 171, 111.3 and 81.5 at 390; 160, 104 and 76 at 360), gray100 (dark #363E38), r12, pad 12, min 80 (100 with deltas) · inside, start-aligned: the label 13/18·500 secondary on top and the figure 24/32·700 ink tabular at the bottom (a delta line 4 under it), at least 4 between them, so a label that wraps never moves a neighbour’s figure · no divider and no shadow: the fill is the container · under a header the tiles keep 8 above them (lead), and 16 below before a Cell or a Podium that has no seam of its own (tail) · a linked tile presses whole (.98 / .80, ring r12) · loading: the same bars on the tile, one step darker · the board check tileRails fails a row whose first tile is not on the left rail or whose last is not on the right rail (0.5) · why: the empty space around the figures has been moved four times (start, hug-last, centred, now front and end); with n equal cells it only changes place, and a fill gives it an edge (Toss 증권 홈 원화 and 달러: two gray tiles, 8 apart)Tiles fitthe figure and the label’s longest word must fit the tile less its 24 of padding (87.3 at n = 3 on 390); the neighbour-gap test goes, the padding and the 8 between tiles keep content 32 apart; if one fails, rows of two equal tiles, 8 apart both ways, an odd last tile spanning both; two tiles never reflow · 200%: figure 36/48, label 26/36, a tile grows to 112 (three tiles hold “68%”, 78.5 in 87.3; “1,482” is 104.4, so 2 by 2)What’s leftreview 46, M17, M19, M25, M26: a Strip is a summary, never a second copy. When its numbers are the counts that the section heads or rows under it already state, the page draws no Strip and opens with one line of what is left: one MetaSegments line at the rail, 15/22·600 ink tabular, the facts apart with the break, never a middle dot (“370,000원 / 570,000원 | 12/19명” on 회비, “8명 | 입금 확인 중 3 | 입금 필요 2” on 참가비, “8명 | 불참 2 | 미확인 2” on 출석 확인, “8개 중 4개 달성 | 남은 업적 4개” on 업적, whose group heads say 4/8; with nothing left it says so, “8명 | 모두 입금 완료”) · it sits where the Strip sat: directly under a Section head (the head’s 12 is the gap) or 16 under a header or a Caption row, then the next element’s own seam (12 before a Cell or a row, 32 before a Section head) · it wraps by fact at large text · loading: a 15 bar at 60% in its 22 line · a Strip that mixes a true summary with restated counts keeps the summary numbers and takes the tiles face (출석 현황: 가입 후 출석률 and 추적; 주의 is the head under it)Action facethe same cell with a button role: a 24 glyph, 8, then the 13/18·500 secondary label, centred; used for 길찾기 · 공유 · 전화Pressa linked cell presses as a whole (.98 / .80); its target is the whole cell (116.7 × 80 for n = 3), larger than its textSpokenone text group per cell (a button when linked), label then value: “총 경기 47”, “승률 68퍼센트”; a delta is read after the valueReplacesStatStrip, CellRow / CellRowGrid, StatTile / StatGrid, ActionIconRowUseWhen the numbers are the screen's answer use the Block; with five or more use a Cell group. The tiles face is the stat summary on every page (기록, 프로필, 출석 현황, 클럽 대항전, the 순위 record Sheet and, since 2026-10-19, the list and detail pages); no page draws the cells face for a stat summary any more, and its geometry stays as the action face’s.

Hero (detail)

The identity of a detail page that has no media band: eyebrow, title and up to three facts.

매치

올림픽공원 테니스장

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

송파구 올림픽로 424하드 4면

참가비 15,000원

입금 완료

Rest: eyebrow, title, three facts; the Tag qualifies its fact

Variants

테니스장

올림픽공원 테니스장

No facts: the block and the 16 above it go

States

Loading: an eyebrow bar, a title bar, three fact bars

매치

올림픽공원 테니스장 실내 코트 (송파구 체육시설)

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

서울 송파구 올림픽로 424, 정문 오른쪽 주차장 뒤하드 4면

참가비 15,000원

입금 완료

Long text: the title and the facts wrap, never truncate

매치

올림픽공원 테니스장

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

송파구 올림픽로 424하드 4면

참가비 15,000원

입금 완료

200%: glyphs grow to 1.5×, facts wrap, the Tag stays on line 1

Dark and English

매치

올림픽공원 테니스장

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

송파구 올림픽로 424하드 4면

참가비 15,000원

입금 완료

Dark: the glyphs and the Tag keep their contrast

Pickup

Olympic Park Tennis Courts

Sat, Sep 1909:00–11:00

424 Olympic-ro, SongpaHard, 4 courts

Fee 15,000 KRW

Paid

English: date and time are one fact

Anatomytop 24 · eyebrow 13/18·500 secondary in a 20 row · 4 · title 24/32·700 (wraps) · 16 · facts · 32 below (carried by the next section head)Factsup to three, 24 tall, 8 apart, each one FvkCFact: a 20 glyph (30 from 1.5×) and the text 17/24·500 ink, 8 apart, the glyph centred on the text’s first line through the line slot; a date and its time are one fact with the 1px break; the text wraps whole and never truncatesHeight160 with three facts (20 + 4 + 32 + 16 + 88); no placeholder fact is drawnTagone viewer-state Tag (sm) may trail the fact it qualifies through the line slot, 8 after the text, centred on its first line; it never wraps onto a line of its own; at most one per heroSpokenthe title is the one visible h1; order: eyebrow, title, facts; "참가비 15,000원, 입금 완료". The eyebrow is a label (매치, 테니스장), never a name: a session’s title is its venue, its club a Cell under the hero (library, Hero, Content)ReplacesTypeHero, the lead of SessionFactsSection, GlyphFactRow chip density, VenueHero

Notice

A state or consequence worth a box, inline on a screen.

마감이 가까워요오늘 23:59까지 신청할 수 있어요. 마감 뒤에는 예비로만 신청돼요.

지금 신청하기

Rest (T3 warning): title, body, the action under the body

Tiers

시작 24시간 전까지는 무료로 취소할 수 있어요

취소 규정

T1 neutral: a tip or a consequence; no title needed

입금을 확인했어요참석이 확정됐어요

새 기능이 생겼어요기록에서 세트별 점수를 볼 수 있어요

T2 success and info: the state word is the title

마감이 가까워요

지금 신청하기

입금이 확인되지 않았어요오늘까지 입금하지 않으면 참석이 취소돼요

입금하기

T3 warning and danger: the severity glyph, never dismissible

T4 Dialog: irreversible, financial or safety choices

One layout: the action trails, or drops under

참가 인원은 4명부터예요

One line (48): the title alone

마감이 가까워요

신청하기

A short title: the action trails it on the same line

시작 24시간 전까지는 무료로 취소할 수 있어요

취소 규정

A long title: the action does not fit, so it drops under it

오프라인이에요

다시 시도

시작 후에는 바꿀 수 없어요

미납남은 시간 09:42

참가비는 현장에서 받지 않아요

올림픽공원 정문에서 만나요

A specific glyph only where it adds meaning

결제에 실패했어요카드 한도를 확인한 뒤 다시 시도해 주세요. 계속 실패하면 다른 카드로 결제해 주세요.

다시 시도

Longest body: two lines; more goes to a Cell or a sheet

200% text, dark, English

마감이 가까워요

신청하기

200%: the action does not fit, so it drops under the title

입금을 확인했어요참석이 확정됐어요

새 기능이 생겼어요기록에서 세트별 점수를 볼 수 있어요

마감이 가까워요

신청하기

입금이 확인되지 않았어요

입금하기

Dark: the tone at 24% over the canvas

Registration closes soonYou can sign up until 23:59 today. After that you can only join the waitlist.

English: sentence case; the body wraps, the action drops under it

Tiers (escalation is by how much the message demands)

T0 Caption rowno fill · optional 600 ink prefix · no action · no close · only the lines 1.16 keeps (see Caption row below): a provider’s attribution, legal text counsel holds, a shortfall that asks for action; never context that explainsT1 neutralgray100 · title optional · one action at most · close only if it can recur · 2 in total with T2T2 success, infoweak tone fill · title required (the state word) · close on info, once-onlyT3 warning, dangeramber or solid red · title required · alert glyph 20 · one action or the exact instruction · never dismissible · 1 per screen · blocks or time-boxes the primary action, or a failure the user causedT4 Dialog or Sheetirreversible, financial, safety · two buttonsAnatomycontent width · r12 · pad 12 16 · min 48, the content centred in it · title 15/22·600 in the tone colour · body 16/24·400 ink (white on danger), two lines at most · action 15/22·600, 44 target · close IconButton 24 in 48One layoutthe content is one flex-wrap line: the action trails the title while it fits and drops under the title or the body (8 below) when it does not, at the title’s edge; the glyph, the trailing node (a countdown) and the action ride line 1 through the line slot; there is no separate one-line layoutHeightsone line 48 (title alone, or title with its action trailing) · title + body 70 · a title with its action dropped under it 76 · title + body + action 100 (124 with a two-line body): the dropped action adds 30 (8 + 22)Tonesneutral gray100 / ink · success #CBEBE5 / #014B40 · info #E8DCFB / #4B0082 · warning #F5B301 / ink · danger #A3261F / white (7.36:1); dark: the tone at 24% over the canvasGlyphnone by default; the severity glyph only on warning and danger; a specific glyph (wifi-off, lock, clock, card, pin) from the allow-list; never the generic ⓘ or a check-circleSpokentitle, then body; status (polite) when inserted after load, alert only for a T3 failure the user caused; the action is its own stopReplacesBanner, Callout, Well, NetworkBanner, AttachedPanel when it holds only a sentenceUseFor one field's value use the field's support line; for a result or an undo use a Toast; for an irreversible or financial choice use a Dialog.

Caption row

One quiet line at the rail, only for what 1.16 keeps: a provider’s attribution, legal text counsel holds, and a shortfall that asks for action. The state line under an object, the footnote, the note under a Choice, the section note and the page legend are retired (the owner, 2026-10-20).

올림픽 스포츠 센터

서울 송파구 올림픽로 424

네이버 제공

Attribution: the provider’s line its terms require, 8 under the data it supplies

모집 계획

정원

50명

필요 정원

53명

주간 연인원

79명

정원보다 3명 부족해요

정원

60명

필요 정원

26명

주간 연인원

52명

Shortfall (warn): the gap the numbers above imply reads in warnText; when they add up, no line is drawn

English

Recruit planning

Capacity

Members needed

Weekly attendance

3 short of your cap

English: sentence case, one sentence, no period

Anatomytext at the rail, 13/20·500 secondary (31 Hangul syllables a line at 350), at most two lines: past two the copy is rewritten, never clamped; no fill, no action, no padding of its own: the role sets the gap above its text box and the caller’s seam follows; the labelled form puts a 13/20·600 ink prefix first; an optional specific 16 glyph leads, 8 before the textRoleswhat 1.16 keeps, every one of them the object line, 8 above its text, then the caller’s seam (24 before a new section, 12 before more rows of the same section): a provider’s attribution its terms require (네이버 제공, under the data it supplies) · legal text counsel holds, verbatim (consents, terms) · a shortfall the numbers above imply that asks for action (tone="warn")Alignmentat the rail, the object’s outer edge, never an inner text edge: under a Block the text is at x 20, not at the block’s text edge of 40Wording해요체, contracted past · one sentence has no final period; two or more have a period after each, including the last · a fact or a consequence, never an imperative (a request is “~해 주세요”, and only where the person must act) · one wording per concept · adds what the nearby Tag, title or eyebrow does not · plain words · counts as the house style writes them (“47경기 중 4경기”) · no “안내” filler; a caption is never a title · legal text keeps counsel’s own words, verbatim, in their own registerTonesecondary always, with one exception: a shortfall that the numbers above it imply and that asks for action reads in warnText at the same 13/20·500 (tone="warn": 정원보다 3명 부족해요 under the plan’s Strip of tiles); when the numbers add up no line is drawn (the all-clear line leaves, 1.16). Never red or green, and never a warning the numbers above do not showSpokenplain text, no role; the prefix is read firstReplacesnone (new); SectionEyebrow retires

Band

Marks the one change of kind on a page (hero zone to content, content to comments).

매치

올림픽공원 테니스장

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

송파구 올림픽로 424하드 4면

댓글4개

Full-bleed 12 gray100, 24 of air above and below; one per screen

매치

올림픽공원 테니스장

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

송파구 올림픽로 424하드 4면

댓글4개

Dark: the band is darker than the canvas

Anatomyfull-bleed, 12 tall, gray100 #F2F2F2 (dark #000000), 24 of air above and below; at most one per screen; no hairlineSpokendecorative, hiddenReplacesDivider seam="section", the section dividers FlatColumn draws, tinted bandsUseEverything else is separated by air and the section head; at most one per screen.

Chart

One trend over time (the ELO path, a metric) with an exact readout on demand.

9/39/109/17

Rest: one ink line, no fill, ticks 12/18

9/39/109/17

1,462

Scrub: a hairline guide, an 8 marker and an ink readout

States

Loading: a gray100 block, 160

아직 기록이 없어요

Empty: a 48 glyph and one secondary line

오프라인이에요

다시 시도

9/39/109/17

Offline: the last known line under the offline strip

9/39/109/17

1,462

Dark

Anatomycontent width × 160; plot inset 16; one ink line 2, no fill; ticks 12/18 secondary (non-essential); scrub: a 1px edge-tier guide, an 8 ink marker and a readout Count tag (ink tone) above it; a tap on a point sets the readoutSpokenimg with a summary: "ELO 추이, 최근 30일, 1,420에서 1,482로 62점 상승, 최고 1,490, 최저 1,415"; adjustable actions step the readout point by pointReplacesSparkLine (120 × 48) and the trend card around it

Activity heatmap

One month of your results at a glance: the days you played, and whether you won more, lost more or broke even.

2026년 9월

일월화수목금토

패승

9월에 6일 활동, 9승 6패

Rest: September on the Calendar’s grid; a day you played in its result’s colour, deeper by the margin; legend 패 to 승; one sentence

2026년 9월

일월화수목금토

1승 2패

패승

9월에 6일 활동, 9승 6패

Scrub: the readout above the day is its count alone, 1승 2패 (the day is the number under it)

States

Loading: a gray100 block the height of the header and the grid

2026년 9월

일월화수목금토

패승

9월에는 활동한 날이 없어요

Empty: no day is filled; the sentence states the zero

2026년 8월

일월화수목금토

패승

8월에 8일 활동, 6승 9패

A past month: › is enabled and every day is drawn

2026년 9월

일월화수목금토

패승

9월에 6일 활동, 9승 6패

Dark: the same steps, from the dark neutral fill to the dark solids

2026년 9월

일월화수목금토

패승

9월에 6일 활동, 9승 6패

200%: the numbers cap at 1.3 inside their discs; the legend and the sentence scale

September 2026

SMTWTFS

1W 2L

6 active days in September, 9W 6L

English

AnatomyONE month on the Calendar’s month grid, and no other: the header (the month label 17/24·600 at the rail, ‹ › in 48 targets at the right; › is disabled on the current month), the weekday row 32, and seven equal columns of 44-tall day cells (50 × 44 at 390), each day a 36 disc with its number 15/22·500 in the chrome class (cap 1.3). A day you played is its disc in the result scale, the kit’s one colour for a result (as the app’s 기간 기록 calendar colours a day): more wins than losses in the success hue, more losses in the danger hue, a third, two thirds or the whole way from the neutral fill to the solid as the margin is 1, 2, or 3 or more; an even day (or draws alone) in the neutral fill. A day without a match is its number alone, as on the Calendar. The number is ink or the canvas, whichever reads better (4.93:1 at the least). A day outside the month is an empty cell; a future day of the current month is blank, so the grid ends in the row of today; a past month is drawn whole (5 or 6 rows). Legend 패 · seven 12 swatches · 승; the scrub readout like the Chart’s, the day’s count alone (“1승 2패”), above the day’s disc. It never scrolls and never shows two months: an older month is a tap on ‹Result scalelight: 패 #A3261F · #BD6A65 · #D8AEAC, even #F2F2F2, 승 #A1C4C0 · #51978E · #00695C; dark: 패 #FA9B94 · #B2756F · #6B4E49, even #363E38, 승 #3E605A · #5A9990 · #75D1C6; adjacent steps 17 to 22 L* apart; the deepest steps are the success and danger solids, which the Form strip’s cells useText equivalentone sentence under the legend, “9월 중 N일 활동, 9승 6패” (N the days of the month shown with a match, then the month’s record), which is also the grid’s accessible label; empty: “9월에는 활동한 날이 없어요”. It and the readout carry what the colours show (the numbers are printed)Board check`heatmapMonth`: the seven columns run rail to rail, each day cell is 44 tall, its number stays inside its disc and the disc inside the cell, at every text scaleSpokenimg described by the sentence; ‹ › are buttons named 이전 달 and 다음 달 (› disabled on the current month); adjustable actions move the readout day by day, spoken with the day (“9월 13일, 1승 2패”)ReplacesActivityHeatmapCard

Calendar

Pick a day or a range, or read activity by day.

2026년 9월

일월화수목금토

Month: today ringed, the selection in ink, up to three dots

9월 셋째 주

일13

월14

화15

수16

목17

금18

토19

Week strip: a 48 header with prev and next, no dots

Variants

2026년 9월

일월화수목금토

Range: ink ends joined by a gray100 band

2026년 9월

일월화수목금토

Disabled dates at .5, not pressable

2026년 9월

일월화수목금토

200%: numerals cap at 1.3 inside their cells

2026년 9월

일월화수목금토

Dark

Monthheader min 48 (month label 17/24·600, prev and next in 48 targets) · weekday row 32 (13/18·500; 일 in errorText, 토 in series 1) · seven equal columns (50 × 44), numeral 15/22·500 in a 36 circle · today a 1.5 ink ring · selected ink fill, white 600 · range ink ends + gray100 band · up to three 4 dots · the activity heatmap draws on this same month grid (its discs take a day’s result colour instead of the selection)Week stripseven equal columns, 64 high: weekday label 12/18·500 over a 36 circle 15/22·600; no dots; a 48 header with prev and next so a tap reaches every weekSpokengrid; each cell by its full date ("9월 19일 토요일"), a count when it has activity, aria-selected; the week swipe has actions 이전 주 and 다음 주ReplacesActivityMetricCalendar, DayDotsRow, the 홈 date pickers, PeriodScrubberShell; the native time wheel staysUseThe month grid is for choosing and history; the week strip is the quick day pick.

Podium

The top three of a ranking as faces; the list below starts at rank 4.

2위

이서연

1,455

1위

김민준

1,482

3위

박지훈

1,431

Rest: ranks 2, 1, 3 in that order, medal rings, Level tag

States

Loading: skeleton columns

2위

이서연

1,455

1위

김민준

1,482

Fewer than three: the missing columns are not drawn

2위

이서연 시니어 모임 회장

1,455

1위

김민준 하늘 라켓 마스터 정예

1,482

3위

박지훈

1,431

Names wrap to two lines, never cut; the column grows

2위

이서연

1,455

1위

김민준

1,482

3위

박지훈

1,431

200%: names wrap to three lines, figures cap at 1.5

2위

이서연

1,455

1위

김민준

1,482

3위

박지훈

1,431

Dark

Anatomythree equal columns, ordered 2위 · 1위 · 3위; avatars 56 (raised 16) and 48 with a 2 medal ring (gold #D9A00F, silver #8E8E93, bronze #B2580B); rank 13/18·600 · name 15/22·600 · ELO 17/24·700 tabular · the Level tag; 168 is a floorSpokeneach column a button, rank first: "1위, 김민준, ELO 1,482, NTRP 3.5"; the ring is additive, the rank is printed textReplacesLeaderboardPodium

Bracket

A knockout's draw: the rounds as columns, the viewer's path marked (owner review 48).

8강

김민준 (나)이서연

오세훈윤하은

박지훈최유나

정우진한소희

강다은임채원

송민아배지원

신유진홍지우

권도윤문서아

4강

김민준 (나)이서연

정우진한소희

미정

신유진홍지우

결승

미정

Rest: 8강 to 결승, one match in play (the dot), the viewer's path in ink

States

8강

김민준 (나)이서연

오세훈윤하은

박지훈최유나

정우진한소희

강다은임채원

송민아배지원

신유진홍지우

권도윤문서아

4강

김민준 (나)이서연

정우진한소희

강다은임채원

신유진홍지우

결승

김민준 (나)이서연

강다은임채원

우승

김민준 (나)이서연

Finished, scrolled two rounds: 결승 and the champion column 우승 in view

8강

김민준이서연

부전승

박지훈최유나

정우진한소희

강다은임채원

부전승

신유진홍지우

권도윤문서아

4강

김민준이서연

박지훈최유나

강다은임채원

미정

결승

미정

A bye: the empty slot reads 부전승 and the team is through

8강

김민준 (나)이서연

오세훈윤하은

박지훈최유나

정우진한소희

강다은임채원

송민아배지원

신유진홍지우

권도윤문서아

4강

김민준 (나)이서연

정우진한소희

미정

신유진홍지우

결승

미정

200%: the names take two lines and every box grows with them

8강

김민준 (나)이서연

오세훈윤하은

박지훈최유나

정우진한소희

강다은임채원

송민아배지원

신유진홍지우

권도윤문서아

4강

김민준 (나)이서연

정우진한소희

미정

신유진홍지우

결승

미정

Dark

Anatomycolumns 156 wide and 20 apart (two rounds and an 18 peek at 390; from 1.5× text a column widens, to 234 at 200%, and one round shows), the round’s name 13/18·600 ink2 above each, 8 over the boxes; a box is gray100 r12 with 10 of side padding, two slot lines of 36 parted by a canvas hairline: the names 13/18 (the winner 600 ink and its games 700, the other 500 ink2), the games at the right, tabular; boxes 16 apart in the first round, each later box centred on the two that feed it; connectors 1 edge, the viewer’s path 2 ink with a 2 ink ring on the viewer’s boxesStatesdecided · to be decided (미정, ink3) · a bye (부전승 in the empty slot, ink3) · in play (the 6 danger dot where the games go; no live numerals) · the champion (a last column 우승, the winner’s box in ink, white names)Spokena group named 본선 대진; each round a list named by its round (8강); each box one stop that opens the match: “김민준, 이서연 6, 승. 박지훈, 최유나 3.” and “진행 중” for a match in playRulingsThe round is the unit of paging: the row scrolls sideways with the next round peeking, and the page never zooms (research § 1) · no 3·4위전: Korean club tournaments share third place · a name never crops: it wraps and the box growsReplacesNothing in code draws a bracket today: TournamentBoardScreen lists the current round only, and SingleEliminationBracket’s feedsWinnerToMatchId and position are unused

Group table

One group's standings in a 예선 리그, with the teams going through marked (owner review 48).

순위

팀

승

패

득실

김민준 (나)이서연

박지훈최유나

정우진한소희

-3

오세훈윤하은

-10

1·2위가 본선에 올라요. 같은 승수면 승자승, 게임 득실 순이에요

Rest: the top two through (the ink discs); the caption says so and how ties go

States

순위

팀

승

패

득실

김민준 (나)이서연

박지훈최유나

정우진한소희

-3

오세훈윤하은

-10

1·2위가 본선에 올라요. 같은 승수면 승자승, 게임 득실 순이에요

200%: names wrap whole and the row grows; the figures keep their columns

순위

팀

승

패

득실

김민준 (나)이서연

박지훈최유나

정우진한소희

-3

오세훈윤하은

-10

1·2위가 본선에 올라요. 같은 승수면 승자승, 게임 득실 순이에요

Dark

Team

+/−

Minjun Kim (You)Seoyeon Lee

Jihun ParkYuna Choi

Woojin JungSohee Han

-3

Sehun OhHaeun Yoon

-10

The top 2 go through. Ties go to head-to-head, then games won and lost

English

Anatomya head line of labels 13/18·500 ink3 (순위, 팀, 승, 패, 득실), then rows of at least 48: the rank 15/22·600 in a 24 slot, 12, the team as names (partners with the 1px break, “(나)”), then 승 600 ink, 패 and 득실 500 ink2 in 32, 32 and 44 tabular columns ending on the right rail; the rows going through take a 24 ink disc with canvas digits; the caption 13/20·500 ink3 8 under the last rowRankingthe order Korean club tournaments use for a 예선 리그: 승수, then 승자승 between two teams, then 게임 득실 (a club rulebook: m.cafe.daum.net/charm./1uZR/17). The code’s pools rank by point difference alone and its round-robin groups by head-to-head then point difference (group-knockout.ts, tournament.rules.ts): the code follows this table when builtSpokena table; each row “1위, 김민준, 이서연, 3승 0패, 득실 +9, 본선 진출”; each name its own stop to that playerReplacesNothing in code: TournamentBoardScreen flattens its pools into one list

Form strip

Recent form in a head-to-head or a player record: the last five results in order.

승승패승패3승 2패

Rest: five cells from the rail, the summary at the right rail

승패승2승 1패

Fewer than five: only those cells; the summary stays at the end

승승패승패3승 2패

200%: the summary still fits; the row grows to 44

승승패승패3승 2패

Dark

WWLWL3W 2L

English: W and L, the summary 3W 2L at the end

Anatomyone row, items centred: up to five result cells from the rail, 24 × 24 (28 at 1.15×, 36 from 1.5×), r6, gap 4, chronological left to right (승 the success solid and 패 the danger solid, the result scale’s deepest steps, as the activity heatmap colours a day; the letter 12/16·700 in white, in dark the canvas), then the summary at the end of the row, right-aligned on the right rail (321.3 to 370 in Korean, 324.5 to 370 in English), at least 16 after the last cell · 15/22·600 ink tabular, one line, the count itself never red or green (“3승 2패”, English “3W 2L”; draws appear only when not 0)200%the summary never wraps: at 200% the cells are 36 (20 to 216), the summary spans 272.5 to 370 (97.5 wide) and the row grows to 44, the summary’s own line, with the cells centred in itFewer than fivethe cells that exist from the rail, the summary still at the end; none: the strip is omittedSpokenone text group, the count first: “최근 5경기 3승 2패: 승, 승, 패, 승, 패”Replacesnone (new); used by the head-to-head screenUseNever in rows (colour-only cells fail WCAG 1.4.1): in a row, recent form is line-2 text (“최근 5경기 3승 2패”).

PhotoGrid

A page of photos: the album, or a post's preview.

Rest: three columns, edge to edge, gap 2, square tiles

Preview: the last tile carries +N

States

Loading: gray100 squares

Select mode: a checkbox on each tile, picked ones dim

Anatomythree columns, full-bleed, gap 2, square tiles = (width − 4) / 3 (128.7 at 390; a computed media size); a preview ends with a +N tile, 20/28·700 white on ink α0.5Select modethe checkbox sits over the tile top-left (off: a white ring on ink α0.3, on: white fill and an ink check); long-press enters as an accelerator, the ⋯ row 선택 is the pathSpokena list; each tile a button named by its caption, else "사진 3 / 12"ReplacesFeedPhotoStrip in PostFeedRow and the album grid maths

Shelf

A bounded sideways row of optional browse content (photos, next sessions, recommendations) on a place surface.

다음 일정3개

전체 보기

올림픽공원 테니스장

내일 19:00~21:00

양재 시민의숲 코트

토요일 07:00~09:00

대치유수지체육공원

일요일 20:00~22:00

Card: one card and half of the next peek in

사진12장

전체 보기

Tile: two tiles and the peek of a third

친구24명

전체 보기

김민준

이서연

박지훈

최유나

정우진

Cell (people, only where a shelf is allowed)

업적6/20

전체 보기

10경기 달성3일 전

3연승1주 전

첫 승리2주 전

5승 달성3주 전

첫 클럽한 달 전

Badge (earned trophies, 업적): four badges and the peek of the fifth

States

다음 일정

전체 보기

올림픽공원 테니스장

내일 19:00~21:00

One item: full width

사진2장

전체 보기

Two tiles that fit: no peek

다음 일정

전체 보기

Loading: skeleton items of the preset

사진12장

전체 보기

Scrolled to the end: the sixth item is the 전체 보기 door

다음 일정3개

전체 보기

올림픽공원 테니스장

내일 19:00~21:00

양재 시민의숲 코트

토요일 07:00~09:00

대치유수지체육공원

일요일 20:00~22:00

From 600 pt wide the ‹ › buttons join the head row

Next sessions3

See all

Olympic Park

Tomorrow 19:00–21:00

Yangjae Forest

Sat 07:00–09:00

Daechi Park

Sun 20:00–22:00

English

업적3/20

전체 보기

10경기 달성3일 전

3연승1주 전

첫 승리2주 전

Badge, three earned: nothing scrolls, still start-aligned on the rail

업적6/20

전체 보기

10경기 달성3일 전

3연승1주 전

첫 승리2주 전

5승 달성3주 전

첫 클럽한 달 전

Badge, scrolled to the end: the sixth item is the 전체 보기 tile

업적6/20

전체 보기

10경기 달성

3일 전

3연승

1주 전

첫 승리

2주 전

Badge from 1.5× text: rows, at most three

PresetsCard 240 wide, media 4:3 (240 × 180, r12) above two lines, gap 12 · Tile 140 square r8, gap 8 · Cell 76 wide, avatar 48 and a 13/20·500 name, gap 8 · Badge 76 wide, a 64 r12 achievement tile over the name 15/22·600 (up to two lines) and when 13/18·500 tertiary, all start-aligned, gap 8; the door is a 64 r12 gray100 tileRulesat most five items then a door "전체 보기"; one item full width; two that fit, no peek; zero, no head; snap on cards, free scroll on tiles, cells and badges; no auto-advance, dots or parallax; from 600 pt ‹ › join the head; the badge shelf is rows (at most three) from 1.5× textShelf testoptional and visual · every item on a vertical page one tap from the head · at most five · not the viewer’s own obligation or data and not what the CTA acts on; the one exception is the viewer’s earned trophies (업적): optional, visual, and the gallery is one tap awaySpokena list labelled with its total ("사진, 12장"); one stop per item; 전체 보기 first in focus orderReplacesPhotoStrip and the club home preview railsUseNever the sole path: a complete vertical page is one tap away; the roster, the matches and the viewer's own data are never shelves (earned trophies, 업적, are the one exception).

Brand lockup

The brand mark slot on sign-in, the version gate and the web pages.

DABUSI

Stacked, 180 wide: sign-in and the version gate

DABUSI

Horizontal, 28 tall: the web pages

DABUSI

On ink and on ball

Anatomystacked: mark 2.5u over the wordmark, 0.7u apart, 180 wide; horizontal: mark 1.5u, 0.6u gap, 28 tall (u = the wordmark cap height); 1u clear space; the slot is a dashed disc until the new mark existsSpokenan image named once ("다붓이"); hidden where the title already says itReplacesLogo

Thumb

The identity image at the start of a row: the venue's own photo, a map tile, a court tile, a club logo, a glyph tile or a person's face.

photo

map

hard

clay

grass

Venue cascade: photo, else map tile, else court tile

image

hue 1

hue 2

hue 3

hue 4

Club logo: the club's image, else a monogram in its hue (r12)

photo

photo 2

initials

Latin

Face (a Feed item’s thumbnail): the person’s photo, else their initials on gray100; r8, shown at 56 (a Feed item draws it 96)

glyph

bronze

silver

gold

platinum

locked

hidden

Glyph tile and the achievement states

photo

map

Compact 48 (the 홈 row) and loading

map

hard

logo

gold

locked

face

initials

Dark

Anatomy56 × 56, r8 (club logo and glyph tile r12); 48 r8 in the compact 홈 row; map and court tiles carry a 1px inset cell-tier edge; a face is r8 with no edge and a Feed item draws it 96Facea person’s face as the plain square, the Feed item’s thumbnail where a map would repeat on every row (the author inside a club, a result’s top winner, a 매치’s host): their photo filling the square, else the initials on gray100 (the avatar ground; ink 20/28·700), both drawn with the Avatar’s own sources; r8, no edge, 56 (96 in a Feed item, 56 from 1.5× text). A photo the viewer may not see is the same square as no photo, the initials, never a lock or a blurVenue cascadethe venue's own photo, else the static map tile, else the court tile (hard #089AC3, clay #8D3D00, grass #83971F, white lines on a pale surround); a photo only when it is venue-specificAchievementearned = the solid medal fill with its glyph in the on-colour; locked = gray100 with a secondary glyph and the row’s figure shows progress; hidden = "?" and the line "숨겨진 업적"; no weak tint fillsSpokenhidden from assistive technology; the row name carries the venue, the surface and any achievement progressReplacesVenueTile, ClubAvatar and ClubLogoBubble, VenueMonogram, DateTile, CourtLinesTile; RemoteImage stays as the loader

Checked in Chromium with scripts/verify-flat-v2-boards.mjs: 163 frames, rail 0, type scale 0, targets 0, shadows 0, middle dots 0, ball actions 0. Measured heights: Block 144 (ELO 160; the Match state block 144 in every state, the chevron centred in every kind), Strip 80 (100 with deltas), Hero 160 plus its 24 top, Notice 48 (70 with a body line, 100 with its action under it), Caption row 28 as an object line, Form strip 24 (44 at 200%), Chart 160, Podium 168, Calendar month 300 (five weeks).

Spec (grounding, anatomy)

Library board for the surfaces and content family of the shared flat v2 kit. Frames only; specs behind the toggle.

grounded in 30 source file(s)

packages/features/records/src/tab/records-elo-block.tsxpackages/features/profile/src/profile-screen.tsxpackages/features/sessions/src/scorecard-page/tabs/live-tab.tsxpackages/app/src/presentation/components/sessions/match-scoreboard.tsxpackages/features/clubs/src/club-detail/club-place-header.tsxpackages/ui/src/cell-row.tsxpackages/features/sessions/src/session-detail/page/session-info-group.tsxpackages/ui/src/glyph-fact-row.tsxpackages/app/src/presentation/components/sessions/venue-hero.tsxpackages/ui/src/banner.tsxpackages/ui/src/callout.tsxpackages/app/src/presentation/components/network-banner.tsxpackages/ui/src/attached-panel.tsxpackages/ui/src/divider.tsxpackages/ui/src/flat-column.tsxpackages/features/records/src/tab/records-record-zone.tsxpackages/features/records/src/record-detail/period-calendar.tsxpackages/app/src/presentation/components/leaderboard-podium.tsxpackages/app/src/presentation/components/leaderboard-podium-layout.tspackages/features/records/src/head-to-head-screen.tsxpackages/features/clubs/src/shared/post-row.tsxpackages/features/clubs/src/club-album-grid.tspackages/features/sessions/src/venue-page/venue-shelves.tsxpackages/ui/src/logo.tsxpackages/app/src/presentation/components/sessions/venue-tile.tsxpackages/app/src/presentation/components/club-avatar.tsxpackages/app/src/presentation/components/club-logo-bubble.tsxpackages/app/src/presentation/components/venue-monogram.tsxpackages/ui/src/charts/CourtLinesTile.tsxpackages/ui/src/remote-image.tsx