Components · 공유 키트

Color tokens

Classic Grass (light)

Spacing · 4px grid

Typography · Pretendard

WFBadge

every canonical variant (badge.tsx)

WFBadge · md radius

md = $3 (12px), xs/sm = $2 (8px)

WFChip

WFInfoHintButton

info-hint-button.tsx — the one '?' trigger beside a term that has an explainer sheet (구성, 실력 등급); replaced four hand-rolled triggers (2026-09-17, U-07b)

WFSectionHead

WFDateTile

date-tile.tsx — monthDay + weekday + optional footer

WFFaces · AvatarStack

WFCapacityRing

WFStatTile

WFDot · WFPulseDot

static · live-signal

WFAvatarBubble

size ladder · tones

WFTierRangeBadge

tier.config.ts — real dot colors + 브론즈/실버/골드/마스터/그랜드마스터

WFEloTierBadge

tier-badge-utils.tsx — medal glyph + Roman sub-tier

WFTrustTierBadge

compact · emoji-only

WFProgressBar

recruitment meter

WFRecruitmentMeter

session-compact-row.tsx RecruitmentMeter

SelectionCheck

packages/ui/src/selection-check.tsx — real primitive (not a _kit.jsx WF* atom), 24px, square=agreement · circle=pick

WFMainTabShell

main-tab-shell.tsx — tab-root, left-aligned 24/700, no hairline

WFShell

app-header.tsx — 56px, centered 17/600 title

WFHeaderTextAction

header-text-action.tsx — slot 1 of a header right may hold ONE labelled text action for a secondary navigation task (초대 코드 on the 클럽 tab, 관리 on club detail); 44pt, $primary ink is the only cue (2026-09-17, U-05/U-09)

WFDetailShell

back = 24px $iconMuted HeaderIconButton, 1.8 stroke

WFDetailShell · subtitle

64px with a subtitle line

WFFilterBar

ExpandableFilterBar · expanded

WFSkeletonCard

list loading state

WFPill

active = solid $primary fill, white bold text, no shadow

WFPill · underline

pill-nav.tsx underline variant — bold + 2px $text underline

WFScrubber

PeriodNavPanel

WFEmptyState

WFEmptyState · secondary action

empty-state.tsx secondaryActionLabel — an outline Button under the primary for the second route in (내 클럽 empty: 클럽 탐색 / 초대 코드로 가입; 2026-09-17, U-10)

WFBottomCta

WFCard

Tab bar (WF_TABS)

apps/mobile/(tabs)/_layout.tsx — 클럽 = Shield, live-session dot on 홈

WFWizardHead / WFWizardFoot

wizard-shell.tsx NAV LAW — header owns 뒤로/닫기/건너뛰기, footer owns ONE CTA

Venue-finder chip row

venue-finder.jsx NAV_ITEMS — 5 chips

WFSessionCard

session-card-v2.tsx v6 — strip band · closing

WFSessionCard

live strip, no bookmark yet

WFSessionCard

no strip (calm) · saved

WFVenueCard

directory-venue-card.tsx — 96px map thumb, one glyph row

WFVenueCard

owner-verified · saved

WFClubCard

corners law · 미가입 (potential/GLIMPSE)

WFClubCard

corners law · 가입·운영 (member/TRACKING)

WFMemberRow

flat hairline row · 조 편성 meta · kebab as a sibling

WFVenueHero

+ SessionCompactRow in a Well

WFRecapDonut

win/loss/draw ring — superseded by RecapSummaryCard

WFRecapSummaryCard

recap-summary-card.tsx — the shipped Home recap row

WFRecapSummaryCard · month

recap-summary-card.tsx:258-296 — month dot-grid variant

WFPodium

LeaderboardPodium — real tier badges

WFRankRow

LeaderboardRow — self left-rail