TwoMore

Appearance

Lane F — UX research and platform practice behind the control, chip, row and icon proposals (2026-10-09) ​

Status: Reference · Date: 2026-10-09 · Evidence appendix for colour-system-research-2026-10-09.md. Scripts and computed tables referenced by path live in the session scratch directory (not committed); formulas are in the note's computed-evidence section.

Scope: board /wireframes/visual-tone T3, T4, T5, T7 and benchmark §3/§5. Method: every guideline page I could open was read in this pass; where a vendor site is script-rendered (m3.material.io, Fluent 2, Polaris docs) I read the shipped component tokens/source on GitHub instead and say so. Contrast numbers are WCAG 2.x ratios from bench/colour_lab.py. Items I could only reach through a search-engine summary are tagged [relay]. Nothing under the repo was modified; the Pretendard stem measurement used fontTools installed into the scratchpad only.

Corrections to the brief and to the benchmark text (read first)

  1. NN/g's two flat-design pieces are both bylined Kate Moran: the qualitative one is "Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users" (2015-09-27), the eyetracking one is "Flat UI Elements Attract Less Attention and Cause Uncertainty" (2017-09-03, 71 participants). The brief had the years/authors swapped. https://www.nngroup.com/articles/flat-design/ · https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
  2. Benchmark §3.6 and board T3 justify full-pill badges with "Seed radius.full". Seed's radius.full belongs to the chip (and segmented control, manner-temp badge). Seed's badge is a rounded rectangle: r1 (4px) medium, r1_5 (6px) large. https://seed-design.io/rootage/components/chip.json · https://seed-design.io/rootage/components/badge.json · https://github.com/daangn/seed-design/blob/dev/packages/rootage/radius.yaml
  3. The current selected chip is not colour-only. chip-label-visual.ts flips weight 500 → 700 as well as $textSecondary → $primary, and selection-chip.tsx:122-123 flips border $border → $primary and fill $card → $primarySubtle. The brand border is 6.48:1 on white. So the case for ink is palette budget, not a WCAG failure.
  4. WCAG 2.4.13 Focus Appearance is Level AAA in WCAG 2.2, not AA. https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
  5. M3 "secondary container" for the nav-bar indicator is a tonal brand-family colour, not ink; ink is the Seed/Carbon/Toss/당근 convention (see matrix).

1. Verdict table ​

Legend: KEEP · ADJUST (to what) · DROP. "Final value/rule" is what I would write into the token or rule. Ratios are text/foreground on the stated ground.

P1. Controls in ink/neutral; brand reserved for one action and one block ​

#ClaimEvidence (URL)VerdictFinal value / rule
1aSegmented control: neutral track #E5EBE7, white pill, ink labelSeed spec (the exact pattern): track bg.neutral-weak-alpha, indicator palette.gray-00 + 1px stroke.neutral-muted, selected label fg.neutral, unselected fg.neutral-subtle, bold t5, radius.full, 2–4 segments (https://seed-design.io/rootage/components/segmented-control-item.json · https://seed-design.io/rootage/components/segmented-control-indicator.json · https://seed-design.io/llms/components/segmented-control.txt). Apple: HIG gives no colour rule; UIKit selectedSegmentTintColor is an optional highlight, i.e. tint is opt-in (https://developer.apple.com/design/human-interface-guidelines/segmented-controls · https://developer.apple.com/documentation/uikit/uisegmentedcontrol/selectedsegmenttintcolor). Carbon high-contrast switcher: selected = $layer-selected-inverse + $text-inverse (https://carbondesignsystem.com/components/content-switcher/style/). M3 differs: selected secondaryContainer/onSecondaryContainer + 1dp outline, and segmented buttons are being deprecated for connected button groups in Expressive (https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/OutlinedSegmentedButtonTokens.kt · https://github.com/material-components/material-components-android/blob/master/docs/components/ToggleButtonGroup.md). WCAG 1.4.11: pill vs track is only 1.21:1 (computed). W3C: a boundary is not required "if a control has visible content (such as text…)", but "any visual information necessary to indicate state … must also ensure that the information used to identify the control in that state has a minimum 3:1" (https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html). The state information here is the label: ink on white 19.13:1; unselected #3A433D on track 8.47:1 (today's #4F5851: 6.10:1).KEEP, with a non-colour second cueTrack $controlTrack #E5EBE7; pill #FFFFFF + 1px $border #CAD4CC (Seed-style edge, 1.52:1 on the pill); selected label $text 700, unselected $textSecondary 500 (weight is a G182 cue, https://www.w3.org/WAI/WCAG22/Techniques/general/G182); radius full; ≤4 segments (Seed 2–4; Apple "no more than about five segments on iPhone"); 44pt hit area. The pill edge stays ≈1.2–1.5:1 and is decoration; if the owner wants a strict 1.4.11 reading of the pill, the only compliant edge is the existing 3:1 $borderStrong rung, which will look heavy (not recommended).
1bActive tab = ink icon + ink labelApple: HIG tab bars say "If your app already has bright, colorful content in the content layer, prefer a monochromatic appearance for tab bars, or choose an accent color with sufficient visual differentiation", and "Prefer filled symbols" (https://developer.apple.com/design/human-interface-guidelines/tab-bars); tab items take the tint (https://developer.apple.com/documentation/uikit/uitabbar/tintcolor). Seed: tab label fg.neutral bold, indicator 2px fg.neutral; bottom-nav "Fill icons; active state distinguished by colour tone" (https://seed-design.io/rootage/components/tab.json · https://seed-design.io/rootage/components/tablist.json · https://seed-design.io/llms/components/bottom-navigation.txt). M3 nav bar: indicator secondaryContainer, icon onSecondaryContainer, label secondary (https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/NavigationBarTokens.kt); M3 top tabs use primary (PrimaryNavigationTabTokens.kt, same folder). Fluent: icon brand, label ink (https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts). NN/g "Tabs, Used Right": "Use at least two selection indicators", avoid thin 1px strokes (https://www.nngroup.com/articles/tabs-used-right/). Ink #0D100E vs today's inactive $textTertiary #626C64 = 3.51:1 (computed; the Understanding page treats a 3:1 lightness difference as an "additional distinction", which this clears only barely, https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html).KEEP ink; ADJUST to two cuesActive = $text icon + label; inactive $textTertiary; add one non-hue cue: label weight 600 vs 500 or filled glyph (Apple/Seed/Fluent all use fill for selected). The brand-tab alternative on the board (4 of 17 peers) is equally defensible by Apple's default tint, M3 top tabs and Fluent; no study ranks ink above brand for tab discovery.
1cSelected chip = ink fill + inverse label (today brand tint + border + 700 brand text)Seed chip solid and outlineStrong selected: bg.neutral-solid + fg.on-neutral-solid; outlineWeak selected: stroke.neutral-contrast + bg.neutral-weak; Seed recommends Outline Weak for selection lists because it is lower-prominence (https://seed-design.io/rootage/components/chip.json · https://seed-design.io/llms/components/chip.txt). Carbon selectable tag selected = $layer-selected-inverse + $text-inverse, and the page says selectable tags "should always remain in high contrast" (https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/tag/_tag.scss · https://carbondesignsystem.com/components/tag/usage/). M3 filter chip selected = secondaryContainer, unselected outline outlineVariant, 8dp corner, 32dp (https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/FilterChipTokens.kt). Fluent Tag selected = brand fill (https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts). WCAG 1.4.1: ink fill is lightness + shape + weight, not hue; ink/white 19.13:1; passes with margin. Focus: WCAG 2.4.13 (AAA) wants a ≥2px indicator with 3:1 change; an ink chip with an ink ring has no visible ring (https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html).KEEP; ADJUST for multi-select and focusSelected: fill $text, label $textInverse 700; unselected $card + 1px $border + $textSecondary 500; radius full (chips are tappable). For facet rows where several chips can be on at once use Seed's quieter form (neutral tint #E5EBE7 + 1px ink outline) so five ink pills do not become a black bar. Web focus ring: 2px, 2px offset, in $primary (not ink).
1dSaved bookmark = inkApple SF Symbols: "use the fill variant to indicate selection" (https://developer.apple.com/design/human-interface-guidelines/sf-symbols); Fluent: "Filled theme icons are used for highlighting selected states" (https://fluent2.microsoft.design/iconography); Apple Toggles: "Avoid relying solely on different colors to communicate state" (https://developer.apple.com/design/human-interface-guidelines/toggles).KEEP, as a shape changeUnsaved = outline bookmark in $textSecondary; saved = filled bookmark in $text. Colour alone must not carry the state (ink vs grey is the only difference if the glyph stays outlined).
1eSection "전체 >" in $textSecondary (today $primary 700 + chevron)Peers: grey "전체보기" in 카카오뱅크 and 밴드, grey "더 많은 매물 보기" in 당근 (lane D §3). NN/g study: link-styled-as-static-text slowed target finding: +22% task time, +25% fixations; Brilliant Earth: 86% of strong-signifier users moved from heading to the link vs 50% weak; "as long as in-line text links are presented in a contrasting color, users will recognize their purpose" (https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/). NN/g 2015: position can signal a link; "interactive components should look clickable even without heavier effects such as shadows and gradients" (https://www.nngroup.com/articles/clickable-elements/). Today's code already pairs the label with affordance="chevron" (section-header.tsx:152-166); Apple names the disclosure indicator as the drill-in signifier (https://developer.apple.com/design/human-interface-guidelines/lists-and-tables). #4F5851 on white = 7.38:1.KEEP grey, ADJUST$textSecondary is fine only with the chevron kept, weight ≥600, trailing position fixed across screens, 44pt hit area. Do not drop the chevron to "quiet" the row: the NN/g penalty is for actions that look like meta text.
1fBrand solid for ONE action and ONE blockMechanism: "Salience of a target increases with difference from the distractors and with the homogeneity of the distractors" (Wolfe & Horowitz 2017, https://pmc.ncbi.nlm.nih.gov/articles/PMC9879335); unique-hue pop-out is independent of distractor count (Healey, https://www.csc2.ncsu.edu/faculty/healey/PP/). Guidelines: Apple "Keep the number of prominent buttons to one or two per view… increases cognitive load" and "Refrain from adding color to the background of multiple controls" (https://developer.apple.com/design/human-interface-guidelines/buttons · https://developer.apple.com/design/human-interface-guidelines/color); GOV.UK "Avoid using multiple default buttons … reduces their impact" and "Testing on GOV.UK has shown that using green as the colour of start buttons improved click-through rates" (https://design-system.service.gov.uk/components/button/); M3 Expressive: Send button in the secondary colour "up to four times faster" but size and position changed too, so colour is not isolated (https://design.google/library/expressive-material-design-google-research). Von Restorff is memory, not preference: two MeasuringU studies (n=202, n=213) found "no consistent Von Restorff effect" on preference (https://measuringu.com/von-restorff/).KEEP (attention rationale only)Rule: brand solid = the screen's one primary action + one hero block. New sub-rule: when a brand block and a brand CTA share a screen (board T0 홈), draw the CTA inverse on the block (white pill, brand label) or ink, so the action stays the odd one out; Monzo/Wise put CTAs in contrasting pills on their cards (lane D). This interaction is untested; the research predicts the CTA loses salience when it matches a large same-hue block.
1gLinks stay brand textNN/g 2004: "Reserve underlining for links", "underlining is essential if you use link colors such as reds or greens"; 2026 editor's note: most users now identify links through colour, placement and context (https://www.nngroup.com/articles/guidelines-for-visualizing-links/). NN/g 2015: links need not be blue; "Static items should not have the same color as hyperlinks" (https://www.nngroup.com/articles/clickable-elements/). Apple: do not reuse the interactive colour for non-interactive text (colour page). WCAG G183: colour-only link distinction needs 3:1 against surrounding text (https://www.w3.org/WAI/WCAG22/Techniques/general/G183). Computed: #006D37 vs ink #0D100E = 2.95:1 (fails), vs $textSecondary #4F5851 = 1.14:1, vs #3A433D = 1.58:1.KEEP brand; ADJUSTInline links inside running text (linkified-text.tsx) get an underline (or 600 weight plus underline on press); stand-alone link rows (section actions, "더 보기") need no underline because they are not in a text block. Brand green is not a luminance-distinct link colour against our ink.

P2. Badges for status only; facts inline ​

#ClaimEvidence (URL)VerdictFinal value / rule
2aFacts inline as glyph + text, not chipsSeed Tag Group: "icon and text tags laid out horizontally … card metadata, detail-page extras, profile activity summary", separators between items, sizes t2/t3/t4 = 12/13/14pt with icon 12/13/14px, tones neutral-subtle / neutral / brand, weight regular or bold (https://seed-design.io/llms/components/tag-group.txt · https://seed-design.io/rootage/components/tag-group-item.json). Atlassian: tag is "descriptive metadata", lozenge is higher prominence for labels that "affect prioritization, action, or understanding" (https://atlassian.design/components/lozenge/usage). NN/g common region: a boundary "can overpower other grouping principles"; overuse "can result in busy, cluttered designs" (https://www.nngroup.com/articles/common-region/). Counter: Carbon keeps read-only tags for categories and wants colour per category (https://carbondesignsystem.com/components/tag/usage/), an enterprise-density choice.KEEP (strongest peer match in the whole set)GlyphFactRow inline: glyph size = text size or +2px (Seed: icon = text size; ours 16 beside 14 is fine), glyph colour = that fact's label colour (Seed), · separators only through the existing MetaSegments rule. Fills only for status.
2bBadges for STATUS onlyM3: badges "show notifications, counts, or status information on navigation items and icons"; chips "represent an input, attribute, or action" (https://github.com/material-components/material-components-android/blob/master/docs/components/BadgeDrawable.md · https://github.com/material-components/material-components-android/blob/master/docs/components/Chip.md). GOV.UK: "Tags are only used to indicate a status", "Do not make a tag interactive" (https://design-system.service.gov.uk/components/tag/). Seed: badge = static; "if an action is needed use Chip, Toggle Button or Action Button"; 1–2 per object; label ≤2–3 words, ~10 characters (https://seed-design.io/llms/components/badge.txt). Apple tab-bar badge: "Reserve badges for critical information so you don't dilute their impact" (tab-bars page).KEEPStatus vocabulary only (모집 중, 참석, live, 입금). Max 2 badges per object (Seed). Never a badge for tier or standing (those are values).
2cBadge radius → full pillAgainst: Seed badge r1/r1_5 (4/6px), Seed chip radius.full (links above); our own badge.tsx header: "The $2/$3 radius is deliberate chrome, distinct from the true-pill $7-radius chip family … a badge is a passive label, not a tappable control". NN/g: "Retain the rectangular shape (preferably with rounded corners)"; "nonclickable items [that] look like buttons" is a named failure (https://www.nngroup.com/articles/clickable-elements/). GOV.UK explains why: users "would see no visual difference between interactive and non-interactive tags". Polaris badge uses --p-border-radius-200 (https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Badge/Badge.module.css). For: M3 notification badge, Carbon tag (16px radius) and 당근's manner-temp badge are pills; no scanning study compares pill vs rectangle.ADJUST: keep badge ≠ chip in shapeChips/segments/filters: full radius. Status badges: keep rounded-rect ($2/$3, 6–8px). If the owner still wants pill badges, the static/tappable split must then ride on fill vs outline and on having no press state, and the chip must stay the only bordered pill. Research neither requires nor forbids full-pill badges; the cited Seed support does not exist.
2dOne saturated fill tier for all statusSeed offers solid / outline / weak and says: solid for images and strong attention, outline for body/detail, weak for repeated structures (https://seed-design.io/llms/components/badge.txt). Toss TDS badge: fill (high saturation, key items) vs weak (https://tossmini-docs.toss.im/tds-mobile/components/badge/). Atlassian/GOV.UK: never colour alone; keep colour consistent per tag. Cautionary: Seed's own manner-temp badge text/bg is 2.4–5.2:1 in 9 of 10 levels (computed from color.yaml), i.e. below 4.5:1.ADJUST to two tiersSolid saturated: only on photos/hero (corner badges). Weak tint + coloured text in repeated rows (RSVP, dues, roster). Text ≥4.5:1 on its fill at 12px/600; each status keeps its word, so colour is never the sole carrier.

P3. Photo-led session rows with map fallback ​

#ClaimEvidence (URL)VerdictFinal value / rule
3aPhoto thumbnails speed list scanningNN/g (Nielsen 2010, last reviewed 2026-08): users look at images with information and ignore decorative ones; Amazon flat-TV thumbnails: 0.9 fixations vs 4.4 on the description and 18% of viewing time on photos vs 82% on text; Pottery Barn bookcase thumbnails studied intensely (https://www.nngroup.com/articles/photos-as-web-content/). Apple lists: "Prefer displaying text in a list or table. … row-based format is especially well suited to making text easy to scan" (https://developer.apple.com/design/human-interface-guidelines/lists-and-tables). NN/g cards: cards are less scannable than lists; images pay off for heterogeneous content (https://www.nngroup.com/articles/cards-component/). Baymard [relay]: thumbnails are "heavily relied on when users scan lists" on phones; guideline #455 body is paywalled (https://baymard.com/guidelines/455-thumbnails-for-list-items). M3 list: leading image 56×56dp, three-line item 88dp (https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/ListTokens.kt); GovTech SG: "Use thumbnail cards for dense lists where an image helps scanning" (https://designsystem.tech.gov.sg/components/thumbnail-card).KEEP conditionallyA photo earns its 76–95pt only if it differs between rows: a venue-specific photo (indoor/outdoor, surface, building). Generic courts look like the Amazon TVs. Keep the time as the promoted text fact (T2) so the row still scans by text; use 80pt as the default (스매시 95, 문토 80, 테니스프렌즈 76 are peer sizes, not research). Measure it: a 10-row "find the one on clay" task, photo vs map, 5 users; I found no public number for 76–95pt.
3bMap fallback in the same slotGovTech SG: "Use the same thumbnail dimensions for every card in a list. Mismatched sizes break the visual rhythm." NN/g cards: "consistent visual treatment of items that will be compared". No study of mixed photo/map thumbnails found.KEEP; ADJUST for uniformity (my inference)Photo and map tile share one box (size, radius, aspect). Pale map tiles get a 1px inset $borderSubtle (map vs white ≈1.1:1) and a small pin glyph so a map reads as "location", not "photo failed to load".

P4. Stroke icons at $text instead of 12px emoji ​

#ClaimEvidence (URL)VerdictFinal value / rule
4aEmoji vary by platform and misleadUnicode UTS #51: "The shape of the character can vary significantly"; "presentation style is never guaranteed" (https://unicode.org/reports/tr51/). Miller et al., ICWSM 2016: about one in four sentiment judgments diverge even for the same rendering; more across platforms (https://ojs.aaai.org/index.php/ICWSM/article/view/14757). Toss ships its own emoji set (Toss Face, 2022) (https://emojipedia.org/toss-face).KEEPReplace emoji in fact rows with owned art. Note the Miller result is about affect emoji (smileys), a weaker fit for object glyphs like 🎾; the stronger argument is layout/colour variance and the saturation mismatch with matte chrome.
4bIcons need labelsNN/g Harley 2014: "a text label must be present alongside an icon"; only home, print, search are close to universal (https://www.nngroup.com/articles/icon-usability/).KEEP (non-issue here)Every glyph sits next to its own text; the Harley risk (icon alone) does not apply. Glyph-only is allowed nowhere.
4cMonochrome beats colour for scanningApple: outline symbols "work well in toolbars, lists, and other places where you display a symbol alongside text"; monochrome applies one colour (https://developer.apple.com/design/human-interface-guidelines/sf-symbols). Fluent: "If including color on an icon, only use one color" (https://fluent2.microsoft.design/iconography). Seed: tag-group icon colour = label colour (tone). No scanning-speed study found.KEEP; ADJUST colourGlyph colour = the colour of its fact's text (ink for primary facts, $textSecondary for meta), not unconditionally $text.
4d16px glyph in a 20px slot, stroke 1.8Apple: SF Symbols weights "correspond to a weight of the San Francisco system font, helping you achieve precise weight matching" (sf-symbols page); no stroke px given. Google: Material Symbols weight axis 100–700 (default 400), optical size 20–48, "match grade levels between text and symbols" (https://developers.google.com/fonts/docs/material_symbols). Lucide: default stroke 2 in a 24 box and strokes scale with size unless nonScalingStroke is set (https://github.com/lucide-icons/lucide/blob/main/docs/guide/react/basics/stroke-width.md); the repo sets neither. Measured (mine, assets/fonts/Pretendard-*.otf, stem of "l" in em): Regular 0.084, Medium 0.1045, SemiBold 0.125. At 14px: 1.18 / 1.46 / 1.75px; at 13px: 1.09 / 1.36 / 1.62px. Rendered stroke at 16px = stroke × 16/24: 1.8 → 1.20px, 2.0 → 1.33px, 2.2 → 1.47px.ADJUST stroke to 2.01.8 matches 400-weight text only (1.18px). T2 sets facts at 14/500 (stem 1.46px) and meta at 13/400 (1.09px), so 2.0 (Lucide default, 1.33px) sits between them and equals Medium@13 (1.36px); use 2.0 everywhere, or 2.2 for glyphs beside 14/500. Slot size is design preference: Seed's icon equals text size, so 16 beside 14 is already slightly assertive; do not go higher.

P5. Optic level chips; tier chips white with a tier-hue dot ​

#ClaimEvidence (URL)VerdictFinal value / rule
5aOptic #C6E84B chip with #0D100E numeral, 22px, under avatarsPrecedent: Playtomic, 테니스프렌즈 (lane B). Seed Manner Temp Badge is a colour-coded numeric level pill: radius.full, 11px bold, min height 20px, ten level tints (https://seed-design.io/rootage/components/manner-temp-badge.json · https://github.com/daangn/seed-design/blob/dev/packages/rootage/color.yaml); its text/bg ratios are only 2.4–5.2:1 (computed). Ours: ink on optic 13.71:1 (APCA Lc 84); optic vs white 1.40:1, vs #E5EBE7 1.15:1. WCAG 1.4.1: colour + number is redundant, and the numeral carries the value, the lime only says "this is a level" (https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html). 1.4.11: chip boundary not required when text identifies it. 2.5.8 if the chip is tappable (it opens the tier explainer): 24×24 CSS px minimum or the 24px-circle spacing exception (https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).KEEP22px chip, $text 700 numeral ≥11px, optic fill, full radius. If it is a button, either 24px minimum with 44pt hitSlop (Apple, buttons page) or neighbours ≥24px away. Never optic on white as text or as a line (1.40:1).
5bTier chips white with a tier-hue dotTier hues (board VT_TIER) on white: bronze #CD7F32 3.14:1, silver #8E8E93 3.26:1, gold #D4A017 2.38:1, master #9B59B6 4.67:1, grandmaster #E74C3C 3.82:1 (computed). Colour-vision pairs ΔE2000 (Machado 2009 simulation): bronze vs grandmaster 3.4 deutan, bronze vs gold 7.5 deutan / 8.7 tritan (computed with colour_lab.py table). About 1 in 12 men have colour-vision deficiency (https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness). Apple: "Offer visual indicators, like distinct shapes or icons, in addition to color" (https://developer.apple.com/design/human-interface-guidelines/accessibility). Small marks: perceived colour difference "varies inversely with size" and elongated marks discriminate "significantly" better (Szafir, IEEE TVCG 2018, https://cmci.colorado.edu/visualab/VisColors/). Fovea: S-cone-free zone ≈25′ (Williams, MacLeod & Hayhoe 1981, https://aria.cvs.rochester.edu/papers/williams-etal_VR1981b.pdf) or median 18′ in controls (https://bjo.bmj.com/content/87/6/742) [relay for both numbers]; an 8pt dot on a phone at ~35cm is ≈12′, a 12pt dot ≈18′ (my arithmetic: 1pt = 1/163 in on a 3x iPhone).KEEP, as redundant codingTier name always printed (Korean label); the dot is decoration. Dot ≥10px; for gold add a 1px ring in a darker gold or darken the dot to #B8860B (3.25:1 on white, computed) if the dot ever stands alone. If the tier must be recognisable without reading, prefer a short bar/ring (elongated mark, Szafir) over a dot. Five tiers is inside the hue-only limits I could find (about 7–8 categories, plus the advice to make colour redundant with shape or text: https://en.wikipedia.org/wiki/Color_code and the US DOT/FHWA note at https://www.fhwa.dot.gov/publications/research/safety/98057/ch03a.cfm) [relay: I saw these only as search summaries]; the ISO 9241-125 text is paywalled (scope page only: https://www.iso.org/standard/64839.html).

P6. Section rhythm and dividers ​

#ClaimEvidence (URL)VerdictFinal value / rule
6aWhitespace/tone between sections, hairlines inside dense rowsNN/g common region: borders/backgrounds are interchangeable containers; overuse clutters; "Segmenting a page into distinct sections can create false floors" (https://www.nngroup.com/articles/common-region/). NN/g cards: borders/backgrounds group without the "negative space" mobile cannot spare (https://www.nngroup.com/articles/cards-component/). Vercel Geist: "Prefer spacing, alignment, typography, and a change in density before borders or boxes" (https://vercel.com/design.md). GOV.UK summary list: row borders "join the information on each row and its action together"; "Think carefully before you remove row borders" (zoom/magnification users) (https://design-system.service.gov.uk/components/summary-list/). Carbon data table: rows carry $border-subtle bottom borders; zebra is a state token only (https://carbondesignsystem.com/components/data-table/style/). M3 divider 1dp outlineVariant (DividerTokens.kt in the androidx tokens folder linked in the matrix) and "one way to visually group components and create hierarchy" (https://github.com/material-components/material-components-android/blob/master/docs/components/Divider.md). Seed divider 1px (https://seed-design.io/rootage/components/divider.json). Evidence on scanning: Enders 2008, n=244, six questions, no significant accuracy effect, speed significant on 1 of 6; 46% preferred stripes, 33% no preference (https://alistapart.com/article/zebrastripingdoesithelp/). No study of hairlines on money lists found. Our $borderSubtle #DFE7E1 is 1.26:1 on white (decorative, exempt from 1.4.11).KEEP (convention, not proof)Hairline $borderSubtle on rows that carry a trailing action or amount (총무 dues, roster-with-RSVP); tone gap or section spacing between sections; no hairline between rows that have nothing to associate. Run one task test before arguing further: "find the unpaid member", with/without rules, on the web rung.

P7. The board's "measured targets" ​

#ClaimEvidence (URL)VerdictFinal value / rule
7aBrand share ≤70% of saturated pixels; ≥2 hue families; saturated 10–18% on block hubs, 3–8% otherwise, ≤3% on listsNo study sets any of these. The only mechanism is salience: a feature is salient when it differs from, and the field is homogeneous in, the other items (Wolfe & Horowitz, link above). 60-30-10 has no traceable origin and no test I could find (interior-decorating folklore) [relay]. M3 Expressive lists "color, shape, size, motion, and containment" as tools but gives no proportion (https://design.google/library/expressive-material-design-google-research). Reinecke et al.: visual complexity matters more than colourfulness for first impressions (548 people, 450 sites, 500ms; https://www.eecs.harvard.edu/~kgajos/papers/2013/reinecke13predicting.shtml) and preferred colourfulness varies with gender, education and country (2.4M ratings; https://eecs.harvard.edu/~kgajos/papers/2014/reinecke14visual.shtml). Itten and Albers are art theory; I fetched neither and no controlled UI study derives from them.KEEP as peer benchmarks; relabel as descriptiveWrite them as "peer median ±" in the gate comments, not as thresholds with a basis in perception science. Gate shape: ratchet ("no more brand-hued pixels than today's block + CTA") rather than a band, because the only supported claim is "scarcity raises signal", with no optimum. Peer numbers come from vendor-curated store art (benchmark §6), so they carry selection bias.

2. Platform-convention matrix: selected/active states ​

"—" = not specified in anything I could open. Token names are the shipped ones; "ink" = the system's primary text/neutral foreground, "brand" = its primary/accent hue.

SystemSelected segmentActive tab / nav itemSelected chip / tagLinkSource
Apple HIG / UIKitNeutral thumb on neutral track; tint opt-in via selectedSegmentTintColor; HIG page has no colour ruleApp tint on icon + label (default tint), fill symbols; HIG: monochrome tab bar if content is colourful; red-oval badge only for critical infonone (no system chip)App accent for borderless buttons; HIG: do not reuse that colour for non-interactive texthttps://developer.apple.com/design/human-interface-guidelines/segmented-controls · …/tab-bars · …/color · https://developer.apple.com/documentation/uikit/uisegmentedcontrol/selectedsegmenttintcolor · https://developer.apple.com/documentation/uikit/uitabbar/tintcolor
Material 3secondaryContainer + onSecondaryContainer, 1dp outline, unselected onSurface (deprecated in Expressive)Nav bar: indicator secondaryContainer, icon onSecondaryContainer, label secondary (older docs: onSurface), inactive onSurfaceVariant. Top tabs: primary label/icon, 3dp primary indicatorFilter chip: secondaryContainer; unselected outline outlineVariant; 8dp, 32dpprimary text button (not fetched)androidx OutlinedSegmentedButtonTokens.kt, NavigationBarTokens.kt, PrimaryNavigationTabTokens.kt, FilterChipTokens.kt (https://github.com/androidx/androidx/tree/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens) · role text: https://developer.android.com/develop/ui/compose/designsystems/material3
Fluent 2 (React v9 source)— (not checked)Icon colorCompoundBrandForeground1 (brand), label colorNeutralForeground1 (ink), brand underlineTag selected: colorBrandBackground fill + colorNeutralForegroundOnBrandcolorBrandForegroundLink, underline on hover/inlineTab/Tag/Link use*Styles.styles.ts in https://github.com/microsoft/fluentui/tree/master/packages/react-components
Polaris (Shopify)—Active tab: --p-color-text on --p-color-bg-fill-transparent-selected; resting/hover use --p-color-text-brand (I could not resolve what that token's value is; treat as unverified)—--p-color-text-link, always underlinedhttps://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Tabs/Tabs.module.css · …/Link/Link.module.css
IBM CarbonHigh-contrast: $layer-selected-inverse (ink) + $text-inverse; low-contrast: $content-switcher-selected + $text-primary$text-primary + 2px $border-interactive underline (the interactive colour)Selectable tag selected: $layer-selected-inverse + $text-inverse$link-primary; underline on hover/focushttps://carbondesignsystem.com/components/content-switcher/style/ · https://github.com/carbon-design-system/carbon/tree/main/packages/styles/scss/components (tabs, tag, link)
Atlassian—"The active tab is blue and underlined"; a neutral selected treatment exists behind a flagLozenge/tag are status/metadata, non-interactivebluehttps://atlassian.design/components/tabs/usage · …/lozenge/usage
당근 SeedTrack bg.neutral-weak-alpha; pill gray-00 + 1px stroke.neutral-muted; label fg.neutral (selected) / fg.neutral-subtleTab label fg.neutral bold, 2px fg.neutral indicator; bottom nav: fill icons, active by colour toneSolid/outline-strong selected: bg.neutral-solid + fg.on-neutral-solid; outline-weak selected: stroke.neutral-contrast + bg.neutral-weakTag-group tone fg.brand optional; brand badge "avoid overuse"https://seed-design.io/rootage/components/{segmented-control-item,segmented-control-indicator,tab,tablist,chip,tag-group-item}.json · https://seed-design.io/llms/components/{badge,bottom-navigation}.txt
Toss TDS— (docs expose API only)— (docs: Tab selected prop, ≤4 items non-fluid)—blue500 #3182f6 token exists; usage not documentedhttps://tossmini-docs.toss.im/tds-mobile/components/segmented-control/ · …/tab/ · …/foundation/colors/ . Visual behaviour for Toss comes only from frames (lane A/D: grey track + white pill; ink underline tabs)
GOV.UK——Tag = status only, non-interactive; colour never alone—https://design-system.service.gov.uk/components/tag/

Reading the matrix: only Seed and Carbon use ink for the selected segment/chip in their published specs (Polaris and Seed also put ink on the active tab); Apple, M3, Fluent, Atlassian and Carbon-tabs use a brand-family colour (or a tonal container) for the active tab. Ink-everywhere is a Korean-consumer and Seed/Carbon-selection convention, strongly supported by the lane D frame census (12 of 17 peers) but not by Apple/Google/Microsoft guidance. Apple's own "monochrome when content is colourful" line is the one platform sentence that backs the whole direction.

3. What the research does NOT support ​

  1. That ink controls are faster or more usable than brand-coloured ones. No study compares them. The case is peer practice (lane D), Seed/Carbon specs, Apple's colourful-content line, and the salience mechanism for the CTA.
  2. That one brand block per screen helps. Pop-out research supports one unique salient item, not a block; Von Restorff gains are memory, not liking (MeasuringU found no preference effect). The block is justified by Toss/Monzo/Wise practice only.
  3. That neutral controls lose click affordance. NN/g's penalty is for ghost buttons and links styled like static text. A filled track with a pill, or an outlined/filled pill chip, keeps container shape, which is what NN/g tells designers to retain.
  4. That our current chip fails WCAG 1.4.1 or 1.4.11. It does not (weight, border, 6.48:1 brand border).
  5. That full-pill badges are better, or that Seed does it. No scanning study compares badge shapes; Seed uses 4–6px badges and full-radius chips.
  6. That photo thumbnails speed scanning of near-identical venue lists. NN/g's Amazon result points the other way for look-alike products; Baymard's thumbnail numbers are paywalled; there is no public study of 76–95pt thumbnails or of mixed photo/map rows.
  7. That fill vs outline pills change scanning speed, or that any NN/g or Baymard article defines tag/label readability. I found none.
  8. Any normative colour proportion: 60-30-10, "10–18% saturated on block hubs", "≤3% on lists", "≥2 hue families". They are peer medians. Itten and Albers are art theory.
  9. That optic lime improves level legibility. The numeral is the information (13.71:1); lime is a category convention (8 of 13 racket apps).
  10. A numeric icon-stroke guideline from Apple. The HIG SF Symbols page says nothing about stroke widths; weights map to text weights. Material's "2dp" stroke figure could not be confirmed from the pages I could open (the Material Symbols page documents axes, not a stroke width).
  11. That hairlines help scanning of money lists, or that zebra stripes do (Enders: null on accuracy, speed significant on 1 of 6 questions). Hairline is convention (GOV.UK, Carbon), not proof.
  12. That tier-hue dots of ≤12px are reliably discriminable across five hues for deutan/tritan viewers; redundancy with text is what makes them acceptable.
  13. A Baymard finding on primary-CTA colour. Baymard's guideline pages are paywalled; nothing public I could open.

4. Caveats ​

  • Access. m3.material.io, Fluent 2 component pages, Polaris docs and Toss TDS visuals are script-rendered or visual-free; I used shipped tokens/source (androidx main, Fluent master, Polaris main, Carbon main, Seed dev). Those track the current Expressive-era code (for example the M3 nav-bar active label is secondary there and onSurface in the older Android doc) and are implementation, not a design rationale. No Google page I could open explains why the nav indicator is secondaryContainer; the only role text is "Primary … active states"; "secondary … less prominent components, such as filter chips" (https://developer.android.com/develop/ui/compose/designsystems/material3).
  • Apple pages were read through the developer.apple.com/tutorials/data/design/human-interface-guidelines/<page>.json mirror of the live HIG (current at fetch). The Color page was truncated at 100,000 characters; the Liquid Glass and "same colour, different meaning" passages were inside the part I read.
  • Relays (tagged above): the Baymard thumbnail summary, the Williams 1981 and BJO foveal-zone numbers, the 60-30-10 origin search, the Wroblewski primary/secondary summary (https://static.lukew.com/WebForms_LukeW_101209.pdf; the Penzo attribution in the brief is unconfirmed), and a rendered-room colour-coverage study I saw only as an abstract (no URL captured, not used).
  • Studies are narrow. NN/g flat-UI: 71 users, desktop, nine page pairs, short findability tasks, three pairs showed no difference (low density, high-contrast targets). Von Restorff/MeasuringU: hypothetical choices. M3 Expressive: vendor research with confounded variables and a "strong minority" preferring calmer designs. Enders: one dataset, 15-row table.
  • Contrast arithmetic uses WCAG 2.x relative luminance; APCA is a draft (WCAG 3) lens: #3A433D on #E5EBE7 is Lc 81, which APCA's lookup puts at ~15px for weight 500, slightly above our 13–14px labels; WCAG 2.x passes at 8.47:1. Not binding.
  • Pretendard stem widths are the bounding-box width of "l" in the repo's assets/fonts OTFs (a proxy for stem thickness); the variable web font may differ marginally.
  • Visual-angle arithmetic (dots) assumes a 3x iPhone (163 ppi logical), ~35cm viewing distance; real distance varies.
  • Korean accessibility. I could not confirm a KWCAG 2.2 clause for non-text contrast or colour-independence; the only Korean source reached was a mobile-app guideline summary (3:1 minimum, 4.5:1 desirable) through search. WCAG 2.2 is the working reference; EU EN 301 549 would also apply to the app if it is offered in the EU.
  • Not fetched: ISO 9241-112/-125 text (paywalled), Itten/Albers, WCAG 2.4.7/2.4.11 normative text (named only), M3 text-button token, Atlassian/Carbon link tokens beyond the files listed.

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