List surfaces, blocks, tags and glyph tiers — spec from the owner's rulings (2026-10-09)
Status: Active · Date: 2026-10-09 · Purpose: the owner's rulings of 2026-10-09 on the visual board (flat lists under a brand block on pure white; top-down hierarchy; one label component; a compact session row; glyphs only at the hero tier; web after mobile) turned into a measured spec. Three lanes with every URL and frame name: H — flat rows under a leading block and block anatomy, I — tag unification, top-down row hierarchy, attention inventory, J — emoji vs glyphs on dense lists, information tiers. Colour values come from colour-system-research-2026-10-09.md §2; this note changes no colour, only where colour and weight are allowed to sit. Supersedes T1's basement, T2's mid-card promotion, T3's label shapes and T4's card on the board.
1. The owner's rulings and what the evidence adds
| Ruling | Evidence | Consequence |
|---|---|---|
| Peers keep buttons, actions and navigation neutral; colour marks the single most important action on a screen | Lane D (12 of 17 peers), lane H: two-line rows end in a neutral grey pill or a number, never a coloured element; the FAB/CTA is the one coloured action (당근 글쓰기, 밴드, 테니스프렌즈) | One coloured action per screen (the FAB or CTA band). The brand block is content, not an action: it is pressable with a chevron (Toss 토스뱅크 header), it holds no button inside. |
| Photos carry identity | Lane H: 88px is the smallest peer photo in a row (Naver); Toss 혜택 56, 카카오톡 48; lane I: 4 of 11 session rows photo-led | One identity picture per row: the venue's own photo (map tile fallback in the same box), the club logo, the person's avatar. Nothing else pictorial on a row. |
| Inline icons minimised; icons are action targets | Lane J: 21 of 32 peer list frames carry zero fact glyphs, 27 carry at most one, none a colour emoji; lane H: 0 inline glyphs in 9 of 11 fintech/social lists | Rows carry no fact glyphs. Icons live top-right (bookmark, kebab), in the tab bar and as section actions. |
| If 홈 leads with a block, the list beneath must be subtle; flat, toned-down, like the club detail pages; T1 pure white | Lane H: two-line rows with a 31–36pt leading visual have a 59–65pt pitch (median 62.6), spacing-only separation; today's session card is ≈147pt + 16 gap, which matches only commerce thumb rows (당근 147, 배민 162); our club-detail canon (12 + 40 + 12 = 64) is already inside the peer band | The basement is withdrawn. Lists are flat rows on #FFFFFF, spacing-separated, in the club-detail grammar (FlatColumn, CellRow, Divider laws). Hubs are white too; the block is the only coloured surface. |
| The brand block is badly designed (alignment, actions, distribution) | Lane H measured 12 peer blocks: margin 16, radius 16, padding 16, left-stacked, numeral + meta, at most one action right-centred; heights 138–149pt (16–18% of the viewport) when they hold numeral + meta + action | Rebuilt anatomy in §3. |
| Ink hierarchy is top-down; the mid-card promotion was wrong | Lane I: in 8 of 9 peer session rows the first body line is the heaviest; Seed steps 16 → 13 and M3 16 → 14 between headline and supporting text; our ListRow is 14/600 over 14/500 (no size step); NN/g: users read ~2 words per item, scanning the left edge | Ladder: L1 16/600 $text → L2 14/500 $text or 13/500 $textSecondary → L3 13/500 $textSecondary; one trailing element; no bold below L1. Day-grouped lists lead with the time (3 of 4 grouped peers; venues repeat down a day, times never do). |
| Chips and badges are one component once chips stop being navigation | Lane I: Seed, Polaris, GOV.UK and Carbon bar clickable tags; six of seven systems have exactly two label tiers; Seed draws badges 4–6px and chips as full pills; we have one Badge plus ≥ 9 hand-drawn pill labels and the same mint recipe on passive labels and selected controls; ≈19 of 39 neutral badges print a fact | One passive Tag (§4). Selection stays a control (Choice) with a control look; the shape cue is "tinted 8px rectangle = label, outlined white pill = control". Filters and scopes on list surfaces become underline tabs, not chips. |
| T4: decide what deserves attention; the session card has too many attention seekers; drop the bottom row | Lane I: 12–14 objects on today's card vs a peer median of ~7; 0 of 11 peers draw a capacity bar in a row; 4 of 11 show a save glyph | Compact row of 5 objects (§2); the only accent is one trailing Tag, and only on exceptions. |
| Colour roles and the semantic palette: yes | colour-system-research-2026-10-09.md §2–§3 | Unchanged; the Tag tone table in §4 uses it. |
| T5 alternative: glyphs only at the hero tier; research emoji vs glyphs on dense lists | Lane J: hero facts in peers carry 2–4 glyph-led facts (Meetup 2, Spond 3, TeamSnap 4) because the hero has no label word; rows have labels, so a glyph is redundant there; system emoji is the weakest hero glyph (C* 79–95 vs brand 46; 🎾 is a racket on most Android sets; GlyphSlot hides nothing from screen readers); Toss built its own flat set rather than use system emoji; no study shows inline glyphs slow scanning | Tiers in §5: hero = three glyph-led facts with lucide strokes; rows = text with MetaSegments; the 21-glyph vocabulary shrinks to four concrete glyphs; weather stays the one emoji exception with an accessible label. |
| Web after mobile | — | The 1440 frame leaves the board; the web adaptation board (/wireframes/web-app-2) waits for the mobile grammar. |
2. Flat rows (pure white, spacing-separated, in the club-detail grammar)
Common: page rail 16; row padding 12 vertical; leading → text gap 12; title → sub gap 4; 0 inline glyphs; ≤ 1 accent (a Tag only on exceptions); the right edge holds one element — a count, an amount, a Tag, or a chevron, never two; rows are Pressable with the inner settle, no band, no card frame, no fill, no divider (spacing only; the Divider law stands). Peers: Toss home and 혜택, 카카오페이, 카카오뱅크, Monzo, Revolut; Seed list-item (paddingY 12, gutter 16, title 16/22, detail 13/18); Toss TDS ListRow (paddingY 12, min 44, 2RowTypeC 17 bold over 13 medium).
| Row | Leading | L1 | L2 | L3 | Right edge | Pitch |
|---|---|---|---|---|---|---|
| Session, compact (홈 under the day block) | venue tile 48 × 48, r8; map tile with 1px inset $border unless the venue's own photo | start time 19:00 16/24·600 $text, tabular | venue 13/18·500 $textSecondary | — | 6/8 13/700 $text, or one SessionStatusBadge Tag when a state outranks it (live → 참석/예비/호스트 → 마감 임박) | 72 (today ≈ 163) |
| Session, discovery (번개 찾기, club 일정) | venue photo 72 × 72, r8 (map fallback) | start time 16/24·600 tabular (day prefix only on ungrouped lists) | venue 14/20·500 $text | 복식 · NTRP 3.0–4.0 13/18·500 $textSecondary via MetaSegments | 6/8 or one Tag; bookmark glyph only as a 22px outline on the photo's top-right corner if kept (D6) | 96 (today ≈ 163) |
| Club | ClubAvatar 56 | club name 16/24·600 | 서초구 · NTRP 3.0–4.0 · 멤버 42 13/18·500 $textSecondary | — | none in 내 클럽; one Tag (모집 중) in discovery | 80 (today's card 16–21 objects) |
| Dues | PersonRow avatar 40 | member name 16/24·600 | only what varies (부분납, note) 13/18·500 | — | amount 15/700 tabular $text, or one Tag (완납 / 입금 필요) | 64 |
| Member | avatar 40 | name 16/24·600 | role or NTRP 13/18·500 | — | one Tag (호스트) or nothing | 64 |
What leaves the row: price (detail cost row; canon already says so — session-card-v2.tsx:53-61 vs :473-485 is drift to fix), capacity bar (detail hero stat), the live ribbon (a danger Tag with the pulse dot in the trailing slot on compact lists; the band stays on the detail anchor — D7), bookmark (detail header — D6), format/tier chips (one text line), court dot, weather, host role (Tag only when it is the trailing element). Element count: 5 (photo, L1, L2, L3, trailing) against 12–14 today and a peer median of ~7; a 600pt list shows ~6 rows instead of ~4.6.
Navigation on list surfaces: top scopes (이번 주 / 다음 주 / 전체; 내 경기 / 번개 찾기 / 저장됨) become underline tabs in ink (Toss, 카카오뱅크, 배민, Playtomic), the segmented pill leaves list surfaces (it remains a form control in settings and wizards); tab bar active = filled glyph + ink label; section actions $textSecondary + chevron; the one coloured action is the FAB (or the CTA band on detail pages).
3. Block anatomy (shared frame; the block is the screen's answer, pressable, no button inside)
Frame: margin 16, radius 16, padding 16 on all sides, solid $primary with white ink (dark: #015228), no gradient, no illustration, no shadow; left-stacked; a trailing chevron 16 at α0.8 on the eyebrow row marks it pressable (Toss 토스뱅크 header); no pill, no qualifier chip in the eyebrow. Seam to the list: 24 to the section header (or to the first row when there is no header), then 8 to the first row. Peers: margin 15.5–16.3 in 5 of 7 contained blocks; radius 16.8–17.1; 카카오뱅크 138, Monzo 139, 테니스프렌즈 141, 당근페이 149pt.
| Block | Rows top → bottom | Height |
|---|---|---|
| 홈 day | eyebrow 14/20·700 α0.8 내일, 9월 19일 (토) + chevron · 4 · numeral row 40: 2 36/40·700 with 개 15/600 on the baseline · 4 · meta 14/20·700 α0.8 첫 시작 09:00 left-aligned, no glyph | 120 (14% of 844) |
| 기록 ELO | eyebrow ELO · NTRP 3.5–4.0 14/700 α0.8 + chevron · 4 · numeral 1,482 40/44·700 · 12 · optic progress fill 6 on α0.2 track · 8 · caption 마스터까지 518점 14/700 α0.8 | 146 (17%) |
| 프로필 identity | avatar 56 + 12 + name 24/700 with the level Tag beside it + 강남 테니스 클럽 · 3년 차 14/500 α0.8 · edit icon button 32 ghost-inverse top-right (the one action target) | 124 (15%) |
Labels inside the block: ≥ 14/700 or 15/600 white; secondary at α ≥ 0.8; lime only as the progress fill or a numeral ≥ 28/700 (ledger rows 6–7). Measured today's draft against this: "첫 시작" was pushed right and bottom-aligned against a left numeral on another baseline, a qualifier pill sat in the eyebrow, 프로필 wrapped two icon-and-text facts — all removed.
4. One label component: Tag; selection is Choice
Tag (packages/ui/src/tag.tsx, passive — no onPress, no aria-pressed/selected): tones neutral · brand · success · warning · danger · info · level; tiers weak (tinted; repeated rows) and solid (over photos; strong attention) plus outline for neutral on tinted surfaces; sizes sm 22px (12/18 + 2×2) and md 26px (12/18 + 2×4); radius 8 ($2) for both; level is a 22px circle with a numeral; font 12/18, 600 weak / 700 solid, tabular when numeric; label 1–2 words, adjectives, ≤ 10 chars; ≤ 2 Tags per object, ≥ 3 in one container is a lint finding; facts are never Tags (MetaSegments text). alignSelf defaults to center.
| tone | weak (fill / text) | solid (fill / text) | for |
|---|---|---|---|
| neutral | #F0F5F1 gray100 / $textSecondary (peer row pills sit at L* 96; the $borderSubtle track is for controls) | #4F5851 / white | role, pending, metadata |
| brand | $primaryMuted #C8EED2 / $primary (5.12:1) | same | 모집 중, invitation (D1) |
| success | #CBEBE5 / $successText #014B40 (7.95:1) | $success #00796A / white | 완납, 참석 확정, win |
| warning | $warningFill #F5B301 / $text (10.3:1) | same | 마감 임박, 미납 |
| danger | $error #B8332E / white | same | live (+ pulse dot), cancelled, overdue |
| info | #E8DCFB / $info (9.9:1) | $info / white | informational |
| level | optic #C6E84B / #0D100E + 1px $border | same | NTRP / tier numeral |
Migration (lane I §3.3): Badge (75 files, 12 variants, 4 used) → Tag; ≈ 19 fact-printing neutral badges → MetaSegments; Badge xs (33) → Tag sm; TierBadgeChrome → neutral Tag with the tier dot on hero/profile, plain text in rows; ReliabilityPill, MarkerPill, ContextChip, five hand-drawn pills → Tag; GlyphFactRow density="chip" → deleted. SelectionChip (58 files) → Choice: resting = 1px $border outline on $background, label 14/500 $text, full pill 32/40 with 44 hit slop; selected = $text ink fill, $textInverse 700 label, leading check glyph (second non-colour cue); menu / range / input modes absorb DropdownChip, RangeChip, RemovableChip; ActionPill → Button size="sm" tone="tonal"; CornerCountBadge → CountBadge (kept); TogglePill → SwitchTrack. Both read one geometry module. Lint: tag-is-passive, no-hand-drawn-label, no-hand-rolled-pressable-pill, choice-needs-handler, tags-per-container, each with a known-positive canary fixture.
Gate note: ledger gate 2 ("fills ≥ 1.2:1 on a card") applies to control tracks; a passive weak Tag fill may sit at 1.08–1.2:1 because the label text carries it (every peer row pill is L* 96).
5. Glyph tiers
- Hero (session detail top, club identity block): three glyph-led facts — when (date and time on one line), where, fee — with lucide strokes 2.0 at the label's colour, 16px in a 20px slot; concrete objects only (calendar, map pin, banknote/card); no glyph for level, ELO, rotation, policy or rules (label + value rows instead). 2–4 is the peer band.
- Rows: no glyphs; facts as
MetaSegmentswithMetaBreak; the status Tag may carry a check or pulse dot (status glyphs are allowed because they are the state, not decoration). - Vocabulary:
SESSION_FACT_GLYPHshrinks from 21 to 4 concrete glyphs (date, place, fee, capacity); 🔒 becomes a single stroke state mark; weather keeps its emoji as the one documented exception, wrapped with an accessible label; everything decorative getsaccessibilityElementsHidden/aria-hidden. - Not supported by research: that inline glyphs slow scanning (no study; the quiet row rests on Apple's "prefer text in lists", peer practice and the colour budget), that emoji hurt comprehension for object glyphs (the Miller 2016 / Tigwell 2016 divergence studies are about faces).
6. Decisions taken here (owner may veto) and decisions that are the owner's
Taken, with the evidence that decided them: pressable block with a chevron rather than a button inside (keeps one coloured action per screen; Toss precedent; 7 of 9 peers do hold a button, so this is a budget choice); time-first on day-grouped lists; no row dividers (spacing only — our Divider law and the two-line peer median); no chevron when the row ends in a count or amount (one trailing element); 48/72 tiles instead of a new 56 avatar rung for session rows; neutral weak Tag fill at gray100 L* 96, control track at $borderSubtle; underline tabs replace the segmented pill on list surfaces.
Owner's: D6 bookmark leaves the row (overturns the 2026-09-08 "bookmark on every card" ruling; fallback: a 22px outline glyph on the photo corner); D7 the live ribbon becomes a trailing danger Tag on compact lists (touches the 2026-09-08 carve-out; the band stays on the detail anchor); D1 모집 중 on the brand-weak tint (from the colour ledger); and the five from the colour ledger (D2–D5).
7. Caveats
Peer pt values are read from curated App Store frames at ±2pt on sizes and ±4% on pitches (±8% for Wise and 테니스프렌즈); 테니스프렌즈 is layout evidence only (its labels are 9–10pt); Spond and Strava frames are cropped; Band publishes no design-system spec; nothing was viewed on a device. The compact row's 72/96 and 48/72 sizes are the smallest peer-supported choices, not optimums.