Library — chrome and navigation
The bars and entries around every screen: the header, tabs, tab bar, FAB, CTA band, media band, wizard chrome and search layer, each in its states.
Header
The 56 bar at the top of every screen: where you are, the way back, and at most two universal actions or one mode's controls.
Variants
Registry
States
Dark
200% text
English
Header
AnatomyMin-height 56 (64 with a subtitle) below the status inset, canvas fill, no divider at rest. Tab root: title 20/28 700 at the rail, no back. Pushed: back at the rail, title 17/24 600 at x 56, one line with a tail ellipsis. Hero page: no title at rest. Subtitle 13/18 500 secondary.TargetsBack and close: a 24 glyph on the rail in a 48 target that bleeds 12 into the margin (no ink there). Trailing icons: 24, ink, 48 targets with no gap, the last glyph’s edge on the rail, at most two, most used leftmost, ⋯ rightmost (footprint 96).RegistryClosed at eleven glyphs: back, close, search, share, save (outline to filled), alerts, messages, settings (the gear, named 관리 on club pages), add, more, to do (the clipboard, 할 일, on the operator’s scorecard). One spoken name each, which is also its web tooltip and its coachmark text. A new glyph needs a ruling; a lint on the header slot rejects any other.Mode barText appears only to leave or commit a mode: 취소, 완료, 저장, 건너뛰기, 전체 선택, drawn as sm Buttons (36 tall, 44 target by hit slop). Tonal for 취소, 건너뛰기 and 전체 선택; ball for 완료 and 저장, one per bar, trailing. Edit mode replaces the whole bar. Chrome class (cap 1.3): the bar holds 56 at every text size.관리 entryA gear named 관리 that opens the 관리 MenuSheet, with a Header icon badge when anything is pending. Guard for officials: each club pane ends with its labelled tool Cell; the officials 할 일 section lists pending work; a one-time Coachmark points at the gear when a member becomes an official. Acceptance test: five newly appointed officials are asked to change the club bank account; pass if at least four reach the 관리 sheet within 10 s unaided. If two or more fail, the pre-approved fallback is a sm tonal 관리 Button in the header, never bare text.Entries that left the header초대 코드: the 클럽 tab + opens a three-row MenuSheet (클럽 만들기, 초대 코드로 가입, 클럽 찾기). 선택 on lists: a ⋯ with 선택; reconcile screens open already in select mode. 프로필 수정: not on the profile page (the identity Block has no pencil; it is a statement, not a door) but in 설정 › 프로필 수정, a form page with its own 저장 band. 알림 has no 모두 읽음 anywhere: a row is read when it is opened (owner review 48), and its settings are the gear.⋯Only with three or more rows; a MenuSheet on phones, the anchored Menu from 600 pt. Never the only route to something an official must find.Scroll-linked titleA hero page shows no title at rest. When the hero title passes the header’s bottom edge, the title and a solid layer fade in together (150 ms, hysteresis 24) and the edge hairline appears. The header’s title is aria-hidden until then.StatesRest, pressed (icon .92 / .78), hover (.85, tooltip with the glyph’s name), focus (ink ring on the target). Long title: tail ellipsis, the accessible label carries the full text. 200% text: the bar stays 56; the title is capped at 1.3 (26/36); the subtitle variant stays 64 with the subtitle capped at 1.3.ContentA pushed title names the screen or the object. English header titles are at most 22 characters (one line at 20/28).AccessibilityThe tab-root title is the h1. Back is 뒤로. Each icon button is named by its registry name with its badge appended ("알림 3개, 관리 필요 2건 포함"). Mode buttons are named by their text. Focus order: back or cancel, title, trailing icons left to right. Icon buttons offer the iOS Large Content Viewer.MotionHairline 100 ms fadeFast; title and solid layer 150 ms fade. Reduce Motion: unchanged.Replaces in codeAppHeader and app-header-visual.ts, the MainTabShell title block, HeaderIconButton, HeaderTextAction (retired), HeaderActionsMenu (becomes the MenuSheet trigger), CollapsingTopBar with use-collapsing-top-bar.ts and collapsing-header-layer.tsx.
Tabs
Switches the panes or filters of one screen (예정, 매치 찾기, 테니스장). It is not app-level navigation and not a form choice.
Variants
States
Dark
200% text
English
Tabs
AnatomyRow min-height 48. Labels are content-width, the first label text on the rail, 24 between labels (each tab carries 12 of invisible hit padding per side). Label 15/22: active 600 ink with a 2 ink underline, inactive 500 secondary. A count Tag follows the label through a line slot of the label’s own line (22 at 100%, 29 from 130%, the chrome cap), so it is centred on the label’s first line at every size; label and count are one row (4 apart) and the underline is that row’s width, the label and its count together. Scrolls horizontally when the labels pass the width. Spacing below: 24 to a title or day header, 16 to a row.VariantsPane tabs (tablist and tab, one panel each); filter tabs (group and buttons with aria-pressed, never tab without panels); with a count (a count Tag in the label’s line slot, 4 after the label, neutral, danger when it needs action, 99+ cap; on the active tab the underline spans the label and the count). The count Tag grows with its numeral: 20 tall at 100%, 28 from 130% (chrome cap 1.3).StatesRest, pressed (dim .85, no settle), hover (.85), focus (ink ring), selected (underline and 600), 200% text (chrome cap 1.3: the label is 19.5/29 and the count Tag 28; the row grows to fit and scrolls), long labels (scroll, never wrap).ContentKorean: a short noun phrase. English: one word, at most 8 characters. A count caps at 99+.AccessibilityName is the visible label, then the count in speech. Web: roving tabindex, arrows, Home and End, automatic activation. The pane swap is instant.MotionThe underline slides on navSlide (about 311 ms). Reduce Motion: the underline cross-fades in 150 ms.Replaces in codePillNav in both variants on list surfaces and SegmentedTabs (pill-nav.tsx, pill-nav-underline.tsx, pill-nav-shared.ts, segmented-tabs.tsx).
Tab bar
The five app destinations, always at hand on the tab roots. It is neutral and never carries brand colour.
Variants
States
Dark
200% text
English
Tab bar
Anatomy64 plus the bottom inset (98 at 34), canvas fill continuing under the system bar; five equal items. Item: 12 above a 24 icon (y 12 to 36, stroke 2), 2, the label 12/16 (y 38 to 54), 10 below. Active: filled glyph, ink, 600. Inactive: outline glyph, secondary, 500. Badge on an icon: a 6 danger dot with a 1.5 canvas ring, or a count Tag 16 tall, at the icon’s top-right corner (the ring’s corner 3.5 above and beyond the icon box), so the ring clears the bar’s top edge by 8.5 (at least 8). Edge hairline while content scrolls under the bar; none at rest; no shadow.Badge ruleA badge on at most two tabs at once. A count only where the number is actionable (the 클럽 tab’s "읽지 않은 게시글 2개"); a dot where something is only pending (홈, "진행 중"). Never both on one tab.StatesRest, pressed (.92 / .78 on the item), selected, focus, hidden while the keyboard is open. 200% text: the bar holds 64 plus the inset; the iOS label does not scale (Large Content Viewer), Android caps it at 1.3.ContentLabels are one word: 1 to 3 Korean syllables, at most 8 English characters.AccessibilityiOS button, Android tab, web navigation labelled 주 메뉴. The name is the label plus the badge tail ("홈, 진행 중인 일정 있어요"; "클럽, 읽지 않은 게시글 2개"). aria-selected; no "n of 5".MotionNone between tabs (screens detach). Press feedback only; hairline 100 ms.Replaces in codeThe inline bar in apps/mobile/app/(tabs)/_layout.tsx and CornerCountBadge (corner-count-badge.tsx).
FAB
The screen's single create action on a list root. It is the screen's one coloured action, so a page with a CTA band has no FAB.
Variants
States
Dark
200% text
English
FAB
AnatomyExtended pill, min-height 56, padding 0 20, radius full; icon 20, 8, label 15/22 600; ball fill, ink icon and label. Right edge on the rail; bottom = tab-bar top + 16 on tab screens (114 from the frame’s bottom), inset + 16 elsewhere (50); the list tail padding clears 56 + 16. Collapsed: a 56 circle with the icon only.StatesPressed .96 / .90, hover .85, focus ring, disabled .5 (rare). Collapse after 120 pt of cumulative downward scroll; expand after 24 pt upward or at offset 24 and below; ignore offsets under 0 and programmatic scrolls. Hidden behind the keyboard in 100 ms. 200% text: the label is chrome class (cap 1.3).ContentThe label is the noun created (일정, 매치).AccessibilityButton. The name is the visible text first ("일정 만들기"), also when collapsed. Reached after the list in focus order.MotionLabel out 100 ms, width 200 ms standard, label in 150 ms. Reduce Motion: the width changes at once and the label fades 150 ms.Replaces in codeNone today; only the physics entry variant="fab" exists in pressable-visual.ts.
CTA band
The one pinned primary action at the foot of a detail page, form or sheet. One band, one primary, never a second action.
Variants
Entry: the sign-up route is the owner’s decision; this is the recommendation
States
Dark
200% text
English
CTA band
AnatomyCanvas fill; padding 16 above, the rail on the sides, and max(16, inset) below (the inset is the padding, Toss’s rule: the button’s bottom sits on the safe-area boundary, 21 above the home indicator); lg Button full width of the content. 102 at inset 34; 16 below with no inset or the keyboard up (84). Helper line (only where 1.16 keeps one) above the button, 15/22 400 secondary, 8 above the button, at most 2 lines (132 with one line, 154 with two). Edge hairline while content scrolls under; none at rest; no shadow. Content above ends 40 clear of it.Helper rulesWarranted only by (the owner, 2026-10-20; 1.16): the total the press commits (money, as 전자상거래법 requires: “참가비 10,000원”); a live total or count of what the person picked or marked on the screen (“합계 90,000원”, “미응답 2명”, “3명 중 1명”); the price of joining on a club’s join band; or the action’s failure (the danger helper). Never an instruction, a reason, terms, a consequence, who to ask or a figure the page already shows: a disabled button’s reason is the fields’ errors on the press, so a soft-disabled button has no helper. Otherwise there is no helper and the band is 102. Decision facts only: numbers and dates, one sentence or one MetaSegments line; the total, never a part; no promotion, no echo of the button, no consent folded into a label, no link to long legal text (a Cell “취소 규정” opens it), no second action. One line by default, two at most; more is a Cell.VariantsBase, helper (the total a press commits, a live total or count of a selection, the price of joining), danger helper (a 16 alert glyph in the line slot and 15/22 600 $errorText, one line, enabled for the retry), soft-disabled and enabled-and-validating primary (no helper: a press shows the fields’ errors), pair (tonal flex 1 and primary flex 2, gap 12, in a Sheet footer; a wizard footer and an edit sheet footer are always a single CTA), entry (sign-in only: provider buttons 52 tall, r12, 12 apart, then 12, a tonal md Button (이메일로 로그인; a verify band’s 다른 방법으로 인증 is the same Button), 12 and the legal links row (이용약관 · 개인정보 처리방침, the one place a link stays text) with 44 targets by hit slop: 188 with one provider, 316 with three; the recommendation is Kakao, Naver and Apple on iOS, Kakao, Naver and Google on Android and the web, and the sign-up route is the owner’s decision), danger tone.StatesRest, pressed (button .97 / .92), soft-disabled, disabled (role wall: the page’s own fact says why, no helper), loading (spinner beside "…중"; in the entry only the tapped provider spins, the other buttons and the tonal Button wait inert at .5), keyboard up (the band rides the keyboard; the home inset is 0), 200% text (the button grows to 76, the helper wraps in full and never ellipsizes; the band grows).ContentButton label: the specific action, a verb that names the result, aimed at 2 to 5 syllables and up to 7 when the verb needs its object (일정 만들기 is 5; 입금 완료 알리기 is 7). English: at most two words. A helper that is more than two lines is rewritten, never clamped.AccessibilityThe button is the only action. A soft-disabled button is focusable with aria-disabled and its reason spoken. A danger helper is role="alert" when it appears. Loading sets aria-busy and the name follows the visible label.MotionHairline 100 ms fadeFast. A helper change is instant. Press per the button physics.Replaces in codeBottomCtaBand (bottom-cta-band.tsx, bottom-cta-band-visual.ts), the WizardShell footer and its primaryHint, and the fee and gate helpers in session-detail/actions/primary-action.tsx.
Sticky edges
The one line the flat grammar draws on chrome: a hairline on the edge of a bar while content passes under it.
Variants
Sticky edges
AnatomyOne full-bleed line, 1 px, in the edge tier (#D4D4D4; dark white at 14%). No shadow. Header and scope tabs: the bottom edge. Tab bar and CTA band: the top edge. Wizard header: the bottom of the progress row. A Day header or a Feed head that is the pinned layer (§1.14, the pinned stack): the bottom edge of the head.VisibilityOn above scroll offset 8, off at 0 (an 8 band of hysteresis; measured from the bottom for a bottom bar). A screen whose content fits draws none. The cell hairline is not a sticky edge.AccessibilityDecorative; hidden from assistive tech.Motion100 ms fadeFast. Reduce Motion: unchanged.Replaces in codeThe permanent borders on AppHeader, BottomCtaBand and the tab bar. One useScrollEdge(offsetY) hook, fed by the same scroll source as use-collapsing-top-bar.ts.
MediaBand
The full-bleed photo or map at the top of a place-like page. It carries only back and at most two icons; everything else is in the body.
Variants
Photo counter (owner review 43)
'/><path d='M0 214 H390 V240 H0 Z' fill='%23C9D8C2'/></svg>)
States
Dark
200% text
MediaBand
AnatomyPhoto and map share one geometry: full-bleed, cover fit, 2.4:1 on the 4 grid, the Block’s ratio, for one proportion across the bold surfaces. The rule: image height = round(width ÷ 2.4 ÷ 4) × 4, plus the status bar (164 + 44 = 208 at 390; a wider phone gets a taller band, never a literal). A top scrim of ink at 35% fading to 0 over the first 100. The header is transparent over the band: back at the left, at most two registry icons at the right (share first, then save or ⋯), each a 40 circle in the one on-photo fill, ink 60% (80% under Reduce Transparency), with a white 24 glyph in a 48 target, 12 between neighbouring circles (pitch 52: Apple asks about 12 of padding around bezeled controls), the outer circle edges on the rail. Nothing else on the photo: no text, pill, place action or Tag except the photo counter.MapA 24 ink pin centred in the visible area under the header (y 154 of 208). No Tag or chip. A tap opens the venue page; directions live there.PhotoClub: cover always. The band holds up to five photos (the club’s featured set, `club_media` kind featured, else the five latest approved; NN/g: keep a set to five or fewer, never auto-advance), the first the cover, then the album frame (the last photo at ink 60% and the Door pill 앨범 전체 보기 › with "사진 12장"). No photo: the default cover at the same height. Place actions are labelled and in the body: a venue shows 길찾기, 공유, 전화 under its title; a session 단톡방, 문의하기 and 신고 are 정보 Cells.Photo counter (review 43)Look: "1 / 5", 13/18·600 white tabular numerals on the same on-photo fill as the circles (ink 60%: one family for everything on a photo), 24 tall, r12, 8 each side, its outer edge on the rail, 12 above the band’s bottom. It belongs to the photo, not the theme: the same in dark. 60% is the least ink that keeps white 13 text at 4.5:1 over a white sky (4.8:1, WCAG 1.4.3), and it gives the circles’ glyphs more than their 3:1 (1.4.11). The numerals grow with text (the circles do not). Behaviour: shown only with two photos or more; never on the album frame, the default cover or while loading; it changes the moment a swipe settles, without motion; it is not a control and is hidden from assistive tech, because the band is one adjustable element named "클럽 사진, 5장 중 1번째" (a swipe up or down moves it). A tap on a photo opens the album viewer at that photo.Status bar (owner decision D3)Light over the photo, except over a bright cover: when the mean luminance of the cover’s top 100 is above 0.6 the status bar is dark. Measured once at upload with the ThumbHash and stored on the photo, so the band never measures at runtime. The circles and the counter keep their one fill either way.ScrollAfter the last 100 of the photo has passed under the header (offset 108, the band’s height less 100) the header turns white in 150 ms, the circles lose their fill, the glyphs turn ink, the title fades in and the edge hairline appears. Status bar light over the photo and dark after.VariantsClub hub, member: share, ⋯ (클럽 알림, 클럽 나가기). Club hub, official: share, the 관리 gear with a badge. Club page, non-member: share. Venue: save, ⋯ (지도 앱에서 열기, 정보 제보, 신고). Session with a map band: member share, save; host or official share, the 관리 gear with a badge.StatesRest, map pressed (dim .85, no settle), focus (ring inset 2), loading (gray100), error (the court tile for a map; the default cover for a club), scrolled (white header), 200% text (glyphs and circles do not scale). First content starts 24 below the band; the band carries no copy.AccessibilityEach circle is a registry button named by its registry name. The map band is one button named for the venue and its destination. The counter is spoken as a position ("사진 12장 중 1장"). The photo is decorative.MotionHeader turn and title 150 ms fade; image fade 150 ms. Reduce Motion: unchanged.Replaces in codeMediaHero (media-hero.tsx, with its mediaHint pill), CollapsingTopBar over a photo with PhotoScrim, ClubAlbumBanner (pager dots and the 앨범 N pill), club-place-header.tsx, and the session map band in SessionHeroSection. Build note: packages/ui/src/media-hero-visual.ts HERO_BAND_ASPECT becomes 2.4, with its test.
Live row
The one line under the header that says a session is being played now, on the scorecard and the match board.
States
Dark
200% text
English
Live row
AnatomyDirectly under the header, 40 tall at 100%: the 24 Live tag is attached through the line slot of the meta’s 20 first line, so it overhangs that line by 2 and the row’s 10 of padding leaves it 8 clear above and below. The Live tag, 8, then the date and venue as MetaSegments 13/20 500 secondary at the rail. The meta is one line at 100% (the venue crops, the date never) and wraps from 1.5x text, a break staying with the segment that follows it; the tag stays beside line 1.StatesRest, pulse (the tag 6 white dot pulses 1600 ms for 5 s per mount, then rests solid), 200% text (the tag stays one line; the meta wraps).ContentThe date and venue only. The venue may crop; the date never.AccessibilityOne text group read as "진행 중, 9월 19일 토요일, 올림픽공원 테니스장". The dot is hidden. Not pressable.MotionThe pulse only (1600 ms loop, 5 s per mount). Reduce Motion: solid dot.Replaces in codeSessionLiveAnchor (session-live-anchor.tsx) and the page-level use of SessionLiveBand (session-strip-ui.tsx).
WizardShell header and progress row
The chrome above a wizard step: movement and departure live in the header, orientation in the progress row, and the footer holds one CTA.
Variants
States
Dark
200% text
English
WizardShell header and progress row
HeaderThe row is 56 below the status area, with 8 of top padding: the buttons sit 12 below the status area and 12 above the progress bar. Left, one button: a 40 by 40 r12 gray100 square (y 12 to 52 of the row) with a 20 ink chevron in a 48 target (× on the first step, which asks the exit Dialog). Right: 건너뛰기 as an sm tonal Button on a skippable step. Nothing in the centre.Progress row8 below the header: segments 4 tall, r2, gap 4; ink for done and current, the cell tier for the rest. The count "3/6" sits at the right rail, 13/18 600 secondary, tabular, 12 after the last segment. The bar is 12 clear of the header buttons (the square ends at y 52, the bar starts at y 64). At most 7 segments; beyond 7 one continuous bar of the same height, filled to the current step.Title and footerThe step title (hero 24/32 700) starts 24 below the bar; chrome above the title is 92. The footer is the single CTA band, with a helper only where 1.16 keeps one: 16 above the button and max(16, inset) below it (102 at inset 34, 21 between the button and the home indicator). Hardware back mirrors the header back (useWizardBackHandler). The edge hairline, when content scrolls under, is drawn under the progress row (8 below the bar).VariantsBack, labelled: during an edit-from-review detour the square becomes a content-hugging pill of the same fill and radius with a 20 chevron and the destination noun (15/22 600). Close: × on the first step and on a gate or terminal step.StatesRest, pressed (.97 / .92), focus (ink ring), skip disabled while the primary is in flight, 200% text (header buttons are chrome class, cap 1.3; the bar and the count stay on one line).ContentStep titles are one sentence in 해요체. The skip label is 건너뛰기.AccessibilityBack and skip are real buttons named by their label (뒤로, 건너뛰기; close 닫기). The progress row speaks "6단계 중 3단계" and each step change announces it with the title. Completed segments are buttons named "n단계로 이동" with a 44 hit zone from the header bottom edge (y 56 to 100). Focus moves to the new step title.MotionSegments recolour in 150 ms fade; the continuous bar grows in 150 ms; no motivational animation. Reduce Motion: the bar changes at once.Replaces in codeWizardShell (packages/ui/src/wizard-shell.tsx): the inline 4 px segments between back and skip, its "n / N" count, and the footer primaryHint placement.
Search takeover
The full-screen search layer for an open-ended search inside a flow. It replaces an in-scroll search field.
States
Variants
200% text
Search takeover
AnatomyA full-screen layer rising 300 ms with the keyboard up and the field focused. Header row min-height 56: the Search field (40 tall, r12, gray100, 20 search glyph, 8, input 16/24, a clear × when filled) in a 44 target filling the row from the rail; 8; 취소 as an sm tonal Button at the right rail. Body: recent searches as Text rows with a trailing × control; results as MediaRows. Empty: the filtered-empty EmptyState plus the contribution row. Footer (staged mode): the CTA band with the one confirm, present once a row is staged.VariantsStaged (default): a row stages, the CTA confirms ("이 테니스장으로" for one, "N곳 선택" for several). Immediate: a host that owns per-pick choreography commits on each row tap and shows no CTA. The step keeps a search-field-shaped trigger row that opens this layer.StatesRest (recents), typing (results), empty, loading (skeleton rows), offline (the strip), 200% text.ContentThe keyboard 검색 key commits free text inside the layer.AccessibilityFocus lands on the input; on close it returns to the trigger row. Dragging the list dismisses the keyboard (keyboardShouldPersistTaps="handled"). System back closes the layer.MotionRise 300 ms sheetIn. Reduce Motion: fade 150 ms.Replaces in codeVenueSearchTakeover (venue-search-takeover.tsx) hosting VenueFinder in pick intent.
Header icon badge
A mark on a header icon that says something there needs attention, or how many.
Dark
Header icon badge
AnatomyDot: a 6 $error circle with a 1.5 canvas ring. Count Tag: 16 tall, min width 16, radius full, 12/16 700 white on $error, 1.5 canvas ring, 99+ cap. Placed at the glyph’s top-right corner through the core badged host, overhanging the 24 glyph box by 2 (the ring is drawn outside that, so its corner is 3.5 above and beyond the box); it is a corner mark, never inline. A mark wider than one digit (10 to 99+) keeps the one-digit mark’s left edge and grows to the right, so it never covers the glyph. A dot means something is pending (the 관리 gear, a live tab); a count means a number the person acts on (알림, 메시지). Never both. The tab bar uses the same marks: its icon sits 12 below the bar’s top, so the ring clears the bar’s top edge by 8.5 (the rule: the ring’s top is at least 8 below its host’s top edge), and a badge sits on at most two tabs at once.StatesAbsent, present. A count changes instantly.ContentCounts are digits; 99+ above 99.AccessibilityHidden from assistive tech; the icon’s name carries the state ("알림 3개, 관리 필요 2건 포함", "관리, 처리할 일 있어요").MotionNone; a count changes instantly.Replaces in codeCornerCountBadge (corner-count-badge.tsx: an 18 circle, amber and red tones) and the pill-tab BadgeDot (pill-nav-shared.ts).
Coachmark
A one-time pointer at a control a person would not find alone. It points; it never blocks a flow.
Variants
Dark
Coachmark
AnatomyInverse surface (ink #0D100E; in dark it flips to a light surface, #DFE4DC), radius 12, padding 16, an 8 arrow toward the target, width at most 280. Body 16/24 in the on-inverse colour (white; ink in dark), one or two sentences. Footer row min 44 with the action at the right: a sm primary Button (a command is a Button, owner review 6 D1), ball on the ink surface (14.96:1). The spotlight overlay around the target is the tour library.VariantsSingle step (action 확인) and multi step (다음 until the last).StatesShown, dismissed. A coachmark fires once, ever, per key; two never stack; Settings can reset them (둘러보기 다시 보기).ContentBody only, no title, no icon. The text for a header icon is that icon’s registry name plus one sentence.AccessibilityThe text is announced when it appears (polite). The action is a button. System back or Escape dismisses and marks it seen.MotionFade in 150 ms, out 100 ms; no slide. Reduce Motion: unchanged.Replaces in codeCoachmarkTooltip (coachmark-tooltip.tsx: title, body, 확인 pill), tour-ref-injector.tsx and the CoachmarkKey store (coachmark-seen.store.ts).
Checked with the shared DOM verifier (yarn verify:flat-v2-boards): 125 frames, rail 0, type 0, targets 0, shadows 0, middle dots 0, ball actions 0.
Spec (grounding, anatomy)
The chrome and navigation family of the flat v2 library (header, tabs, tab bar, FAB, CTA band, sticky edges, MediaBand, Live row, WizardShell header, search takeover, header icon badge, coachmark), drawn by the shared kit in flat-v2-kit-chrome.jsx.
route ·
docs/design/flat-v2-component-library-2026-10-09.md §3
grounded in 31 source file(s)
packages/ui/src/header.tsxpackages/ui/src/header-visual.tspackages/ui/src/main-tab-shell.tsxpackages/ui/src/icon-button.tsxpackages/features/clubs/src/club-detail-screen.tsxpackages/features/sessions/src/session-detail/header/use-session-header.tsxpackages/ui/src/header-menu.tsxpackages/ui/src/collapsing-top-bar.tsxpackages/ui/src/use-collapsing-top-bar.tspackages/ui/src/collapsing-header-layer.tsxpackages/ui/src/pill-nav.tsxpackages/ui/src/pill-nav-underline.tsxpackages/ui/src/pill-nav-shared.tspackages/ui/src/segmented-tabs.tsxapps/mobile/app/(tabs)/_layout.tsxpackages/ui/src/corner-count-badge.tsxpackages/ui/src/pressable-visual.tspackages/features/home/src/page/home-body.tsxpackages/ui/src/wizard-shell.tsxpackages/features/sessions/src/session-detail/view/build-band.tspackages/ui/src/media-hero.tsxpackages/ui/src/photo-scrim.tsxpackages/features/clubs/src/club-detail/club-band-media.tsxpackages/features/clubs/src/club-detail/club-place-header.tsxpackages/features/sessions/src/session-detail/page/session-hero.tsxpackages/app/src/presentation/components/sessions/session-live-anchor.tsxpackages/app/src/presentation/components/sessions/session-strip-ui.tsxpackages/app/src/presentation/components/venue-search-takeover.tsxpackages/ui/src/coachmark.tsxpackages/features/home/src/overlays/fab-layer.tsxpackages/app/src/presentation/stores/coachmark-seen.store.ts