TwoMore

Appearance

Visual benchmark — modern Korean and global apps vs TwoMore (2026-10-08) ​

Status: Active · Date: 2026-10-08 · Purpose: answer the owner's pushback on the visual-tone board ("I don't like the toned-down background. Many modern Korean apps are opting for flat and more pronounced backgrounds, no?") with measured comparison, and re-ground the direction before any token or component change. Supersedes T1 of /wireframes/visual-tone; the earlier tone audit stands for the diagnosis.

Three lanes measured 60+ apps from App Store frames with one shared metric script (canvas = modal colour of the side margins; near-white = L* > 92; ink = L* < 35; saturated = C*ab > 30), fetched the published token files where they exist, and looked at every frame. Full per-app tables and URLs: lane A — Korean consumer apps, lane B — the sports/club category, lane C — platform and global, lane D — colour and component usage (added 2026-10-09 for the owner's second question: do we overuse the primary colour and under-use colour on content?). Our own frames came from the web rung against the local stack (scripts/screenshot-web.mjs, phone, 1440 and dark).

2026-10-09 — research pass. Every proposal in §3 and §5 was tested against colour science and UX research in colour-system-research-2026-10-09.md: eleven values changed (success → teal, warning → bright fill with ink text, meta 13/500 not 13/400, control track = $borderSubtle, hairline = $border, badges stay rounded rectangles, stroke 2.0, court trio and tier hues recoloured for colour-vision deficiency, dark ink and dark block), two claims dropped (60-30-10, the muted-ink share). The ledger there supersedes any conflicting value below.

1. Verdict ​

  1. The owner was right to reject #EEF2EF. At L* 95.1 it is greyer than every real page ground measured: Korean mainstream greys cluster at L* 96.5–97.8 (당근페이 #F7F8F9 97.5, 카카오뱅크 #F7F7F7 97.2, 네이버 #F7F9FB 97.8, 무신사 #F5F5F5 96.5), Toss's token is #F2F4F6 (96.1), 당근 Seed's bg.layer-basement is #F3F4F5 (96.1), iOS grouped is #F2F2F7 (95.6), and the category floor is 95.8 (CourtMate, Spond). Withdrawn.

  2. "Flat" is true. "More pronounced backgrounds" is true only in a specific sense. No measured app separates cards with shadows (0 of 16 global, 0 of 7 Korean corner zooms). What reads as pronounced is (a) one bounded colour block per hub screen — 배민 한그릇 header #7476FF at 26% of the frame, 카카오맵 teal 22%, 컬리 purple header 6%, Monzo coral balance card 18%, Wise dark-green promo 14%, 카카오뱅크 pale-blue hero #E1F3FF 20% — and (b) heavier ink and bigger numerals, not a darker canvas. 12 of 17 Korean apps and 11 of 16 global hubs are flat white; the saturated full-colour backdrops are App Store marketing art around the phone, never the in-app ground (스매시 #5D0AF7, Playtomic #335FFF, 소모임 #2881FF all ship white UIs).

  3. Our canvas is inside the market band; our card step is not. #F8FBF9 (L* 98.3) sits level with Toss grey50 and M3 surface (98). But every system that separates a white card by tone alone uses ΔL* 3.0–5.2 (Monzo #F1F8F4 3.0, Toss/Seed 3.9, iOS 4.4, Cash App #F0F0F0 5.2); the only ones below 2.5 add a hairline (Notion, Vercel Geist). Our 1.7 with no border is the shallowest quartile of the category (median 2.85).

  4. The real gap to "modern, polished, engaging" is mass and anchors. Peers carry ~5× our ink (light-app median 7.1% vs our 1.5%; even photo-free typographic screens sit at 2.7–4.6%), lead each card with one bold fact or a photo (10 of 19 category session cards are photo-led, 7 time-led), put one big numeral on money and rating screens (Cash App, Wise, 스매시 NTRP 2.3 + "top 12%", CourtMate 19 / 13W 6L / 68%), and spend saturated colour on exactly one block per hub screen. Our 홈 is the only hub in the comparison that is chrome without content (97% near-white, 1.3% saturated, 0.5% ink).

  5. The racket category has its own accent and we already own it. 8 of 13 racket apps use ball-yellow/lime as the small solid accent — 테니스프렌즈 #CCFD01 identity card, Playtomic level chip #CCFC04, 랠리업 #FFFF01, 랄리 #95FF0A, Rally Racket #B5ED6D, CourtMate #D3DB7D, TennisPAL #A6CE39. Our optic #C6E84B exists and is restricted to motifs by its token comment.

  6. We do not overuse colour; we put one colour on the wrong things (lane D). Our saturated area is below peers (median 1.4% vs 5.1% of the frame; 0–1 large solid objects per frame vs 2.5), but 96% of our saturated pixels are brand green (peers' own brand hue: 50% raw / 61% of solid fills) and 10 of 11 of our frames carry a single hue family (peers: median 2, Korean mainstream 3). Of 307 shipped brand-token sites, 66% are chrome/controls (segmented pill, tab bar, chips, bookmarks, section actions, avatars, empty-state discs); in 12 of 17 inspected peers those states are ink or neutral. We fill with mint where peers fill with grey (tint fills 3.5–4.2% on our hubs vs 0.9% peer median; neutral grey 0.04% vs 5.2%). The content palette is built and unspent: optic has zero consumers, the five tier hues never reach the tier chip (tier-badge-utils.tsx:55 fills it with brand tint), club identity hues fall back to mint. Brand #006D37 and success #14804A are ΔE 7.5 apart, so one green means brand, selection and "paid" at once.

2. The numbers ​

2.1 Page ground (light mode) ​

SourceGroundL*Card step ΔL*Separator
TwoMore today#F8FBF998.31.7none (1px #DFE7E1 hairline on some cards)
Rejected T1#EEF2EF95.14.9—
Toss TDS grey100 (greyBackground)#F2F4F696.13.9tone
당근 Seed bg.layer-basement (gray-200)#F3F4F596.13.9tone
당근페이 (frame)#F7F8F997.52.5tone
카카오뱅크 (frame)#F7F7F7 / #F5F6F897.2 / 96.92.8–3.1tone
네이버 home/my (frame)#F7F9FB97.82.2tone
무신사#F5F5F596.53.5tone
iOS 26 grouped (systemGroupedBackground)#F2F2F795.64.4tone
Material 3 surface / container tierstone 98 / 96 / 94 / 92 / 90—Filled card = 8 (tone 90, no shadow)tone
Monzo#F1F8F497.03.0tone
Cash App Money tab#F0F0F094.85.2tone
Notion#F8F8F797.72.4+ hairline #EBEAE7
Vercel Geist background-200#FAFAFA98.31.7+ 8–10% black border
Category (24 light apps)median second surface97.15median 2.85 (1.3–4.5)tone
테니스프렌즈 (nearest peer)#F9F9FB98.02.0tone

Grounds are neutral or cool (C* 0–3); CourtMate is warm cream; none is green-tinted (ours C* 1.5).

2.2 Where solid colour lives (share of the frame) ​

Lists / feedsHub / dashboard / detail
Korean mainstream (17)≤ 2.5% in 9 apps (토스, 당근, 카카오톡/뱅크/페이, 네이버, 크림, 밀리, 오늘의집)배민 26.2%, 카카오맵 22.0%, 컬리 6.1%, NOL 5.8%; pale tinted hero blocks L* 93–95 / C* 9–14 at 10–20% (카카오뱅크, 배민, 오늘의집)
Category (35)0.1–1.5% (문토, 스매시, 김캐디, 밴드)9–18% on profile/dashboard (USTA 17.8%, 플랩 13.6%, 테니스프렌즈 12.1%); Rally Racket header 40.8%
Global (16)median 2.9% (IQR 0.7–8.2)one bounded block: Monzo 18.4%, Wise 14.4%; buttons-only in 8 of 16; "everywhere" only Duolingo
TwoMore홈 1.3%, 기록 2.5%, 프로필 1.1%club detail 14.1% (photo hero — our best page), session detail 5.8%

2.3 Ink and near-white ​

near-white (L* > 92)ink (L* < 35)
Category light apps (28)median 74% (p25 59, p75 83)median 7.1%; typographic screens 2.7–4.6%
Korean light apps (17)74%5.9% (range 1.6% 카카오페이 → 19.1% 무신사)
TwoMore 홈 / 기록 / 프로필 (web, data)97 / 93 / 94%0.5 / 1.1 / 1.4%
TwoMore club detail / session detail47 / 81%18.8 / 1.2%

2.4 Type, radius, icons ​

  • Type. Toss Product Sans, 배민 워크체 (2.0 rebrand, 2025-07), 카카오 글씨 (2025-06), 당근 캐롯 산스 — the four largest own a Korean face; everyone else and Seed's open stack fall back to Pretendard. Scales: Toss T1–T7 = 30/26/22/20/17/15/13; Seed t1–t14 = 11…48 with weights 400/500/700 only; M3 title M/S 16/14 Medium (Bold emphasized), body 16/14/12 Regular. Ours: cardTitle 16/600, cardBody 14/400, cardMeta 14/500 — the meta-heavier-than-body inversion has no counterpart in any scale measured.
  • Numerals. Money and rating screens lead with one figure at ~3× label size (Cash App, Wise, Robinhood; 스매시 NTRP 2.3; 플랩 8.6; UTR 7.45; CourtMate stat strip ~20/700). Ours already does this on 기록/프로필 (ELO 1,200) — the pattern is right, the surroundings are empty.
  • Radius. Money/hub apps 12–20 (Seed r3 12 / r4 16; M3 Medium 12, Large 16), fashion commerce 0–4, chips and search fields full pills everywhere (Seed chip radius.full). Ours: card 16, button 12, badge 8 — our chips are the odd ones out. M3 Expressive's 28–48 radii and shape morph are not seen in any Korean frame.
  • Icons. Navigation and header icons are stroke everywhere; ≥ 8 of 17 Korean apps use colourful rendered pictograms for feature entry tiles (토스, 카카오페이, 카카오뱅크, 당근페이, 배민); none uses emoji in fact rows. Floating capsule tab bars in 4 of 17 (당근, 네이버, 카카오뱅크, 크림) — iOS 26 influence, not required.
  • Cards and CTAs. 15 of 19 category session cards carry no button (confirms our no-CTA-in-cards rule). 10 of 19 are photo-led with 76–95pt thumbs (스매시, 문토, 테니스프렌즈), 5 show an "n/m" capacity fraction, Playtomic's 4-slot avatar row with level chips and an empty "+ Available" slot is the only doubles-shaped member row.

2.5 Platform evidence worth keeping ​

3. Direction — "white, with one block" ​

Grounded in the counts above; each item names its reference and its number. This replaces T1 on the board; T2–T5 are confirmed by every lane and stay.

  1. Two grounds by screen role, both inside the market band. Hub/dashboard screens (홈, 기록, 프로필, club 홈 pane) get a basement canvas with white cards — the Toss-home / 당근페이 / 카카오뱅크 / 네이버-my pattern — at the tone-only floor, keeping our hue: $basement #F0F7F3 (L* 96.6, C* 3.2, ΔL* 3.4 to white; Monzo #F1F8F4 is 3.0, Seed/Toss 3.9). Lists, feeds and detail pages stay pure white, flat, hairline-separated (당근 feed, 토스 쇼핑, Stripe, Notion; 31 of 45 global frames) — which is already our detail-page flat language. #EEF2EF and the "grey everywhere" reading are withdrawn.
  2. One bounded brand block per hub screen, nothing else saturated. 홈 opens on a solid $primary #006D37 block holding the day (date, session count, next start) with white ink — Toss 토스뱅크 header, Monzo balance card, Wise promo, 카카오뱅크 hero; 기록 keeps the ELO numeral and gains the block as its container; 프로필 gets an identity block (테니스프렌즈 lime card). Target 10–18% saturated area on hubs, ≤ 3% on lists (the measured range).
  3. Ball-yellow is the category accent — small and numeric. Lift optic #C6E84B (L* 87) from motif-only to: NTRP/level chips under avatars (Playtomic #CCFC04 22pt circle with a bold dark numeral), progress fills, the "today" dot. Never as ground, never as a button.
  4. Ink mass to the category centre (4–7% on lists). One promoted fact per card at 16–20/700 (time on sessions, amount on dues — 플랩 "18:00", Band date block), body 500 / meta 400 (Seed's 400/500/700), big numerals ~3× label on money (Cash App). This is T2 and it is the single largest lever in the comparison.
  5. Photo-led rows where a photo exists. Session and pickup cards lead with the venue or club photo at 76–95pt (스매시, 문토, 테니스프렌즈) and fall back to the map thumbnail; club cards already do this and the club detail is our best-measured page (47% white, 19% ink, 14% saturated). "n/m" capacity stays.
  6. Chips, glyphs, radii. Facts inline, badges for status only (T3); lucide strokes at $text instead of emoji (T5); chips and badges go to full pills (Seed radius.full, Toss, every measured app) while cards stay 16 and hero blocks 20–24; no shadows (unchanged).
  7. Keep as is. Pretendard (Seed's own fallback); dark mode as a supported ladder, not dark-first; no Liquid Glass, no bento, no M3E shape morph, no full-bleed saturated backgrounds.

Gate (ships with item 1): check:color-contrast asserts hub basement vs card ΔL* ≥ 3.0 and ≤ 5.5, list canvas = pure white, every fill-on-card ≥ 1.2:1; the current theme fails it (canary).

4. What this changes on the board ​

/wireframes/visual-tone is redrawn (round 2 shipped 2026-10-09; round 3 adds T7, the colour budget, and neutralises the control chrome on every recommended phone): T1 becomes the two-ground rule with #F0F7F3, a new T0 shows the hub block (홈 with the day block, 기록 with the ELO block, 프로필 identity block), T2–T5 stand, a T7 shows the optic level chips and photo-led session rows. Each proposal shows before / recommended / one alternative and asks one question. Nothing is built until the owner marks it.

5. Colour budget — where each colour is allowed (lane D) ​

Narrows §3.2–3.3. Six roles; every row has a peer frame behind it in the lane D appendix.

RoleColourAllowed onReference
Brand solid$primary #006D37 + white inkthe screen's ONE primary action (primary Button / CTA band / web 번개 만들기) and ONE hero block (홈 day block, 기록 ELO block, 프로필 identity); toggle on, checkbox, selected date disc당근 FAB, 밴드 FAB + date disc, 테니스프렌즈 FAB + lime card, Monzo card
Brand as text$primaryinline links onlyToss blue links, Playtomic/Spond/Monzo links
Ink / neutral$text, $textInverse, gray100-class track, $borderSubtle, $iconMutedevery control state: tab bar active (ink icon + label), segmented control (neutral track, white pill with hairline, ink label), selected chip (ink fill, inverse label), section "전체 >" actions, stroke feature icons, person-initial avatars, progress tracks, bookmark saved12 of 17 peers (토스, 당근, 카카오뱅크, 카카오페이, 네이버, 배민, 크림, 무신사, Playtomic, 문토, Monzo, Cash App)
Semantic$success / $warning / $error / $info, badge pairsstatus only: paid/unpaid, live, closed, RSVP, deltas, validation토스 gains red/green, 밴드 LIVE, TeamSnap RSVP squares
Level accentoptic #C6E84B + $textNTRP/ELO-tier chip under avatars and in rows, today dot, the progress fill inside the ELO block (4.6:1 on dark green; 1.15:1 on a neutral track, so not there)Playtomic #CCFC04, 테니스프렌즈 #CCFD01, 8 of 13 racket apps
Content accentscourt surface hues, club identity hue (FlagMedallion presets), tier hues (TIER_DEFINITIONS), medal tones, a five-hue chart setsmall, on content identity, never chrome: 12–16px court dot on session/venue rows, club monogram, calendar dots, tier ring, chart series밴드 calendar dots, 테니스프렌즈 level chips, 카카오뱅크 feature tiles

Component changes this implies (nine primitives carry the multipliers): pill-nav.tsx neutral track + white pill, (tabs)/_layout.tsx ink active tint, selection-chip.tsx / chip-label-visual.ts outline resting + ink selected, avatar-bubble.tsx neutral default tone, empty-state.tsx grey disc, section-header.tsx $textSecondary actions, tier-badge-utils.tsx tier-hue dot, progress-bar.tsx status hue on $borderSubtle, save-button.tsx ink saved; new tokens $controlTrack, $levelChipBg/Text, $series1–5, tier slots. Roughly 150–210 of 307 brand sites retarget. Re-measure targets with the same script: brand share of saturated pixels on hubs ≤ 70%, ≥ 2 hue families on 기록/프로필/club hub, hub saturated area 10–18% where the hub carries its brand block (the block is the area; §3.2) and 3–8% on hubs without one, lists ≤ 3%, green-tint fills ≤ 1% on lists, largest solid object on a detail page = the CTA at ≤ 2.5%. Measured on the round-3 board phones: today's 기록 puts 3.3% of the frame in brand green on controls, numerals and chips; the recommended phone puts 0% outside the block, so the ≤ 70% brand-share target is reachable only where content hues carry area (photos, charts, medals), not on a block-only mock. $controlTrack is #E5EBE7 (the gray100 #F0F5F1 reads 1.10:1 on a card and 1.01:1 on the basement). Side finding to fix regardless: dues-attest-modal.tsx:162-169 paints $primaryText (white) on $primarySubtle mint, ~1.1:1.

6. Caveats ​

Frames are vendor-curated store art (hex ±2–3 levels, L* ±0.5; radii and type sizes are visual estimates ±2pt; iOS only). Toss's token page was fetched; Kakao, Naver, LINE and Samsung design sites were script-rendered or image-only, so their values are measured from frames or third-party galleries and marked so in the lanes. Redesign claims are limited to those with URLs (배민 2.0, 당근, 카카오맵, 카카오톡 25.8); no 2025 Toss home redesign was found. Our frames carry the Next dev-tools pill and tofu for emoji (headless Chromium), both ignored in the metrics.

Markdown remains the source of truth. Run yarn docs:check before handoff.