← Cockpit Wireframes Pages by level Navigation map
Canvas Migration — 회비 · 멤버 · 규칙▾
Flat v2 redesign
1 · Foundations
Foundations — grammar, colour, seams
2 · Component library
Library — chrome and navigationLibrary — surfaces and contentLibrary — rows, cells and labelsLibrary — controls and fieldsLibrary — overlays and feedbackLibrary — conversation and scoringMatch grammar — one anatomy, every surfaceLibrary — behaviour: text scaling, motion, accessibility
3 · Brand
Brand — icon, splash, notifications, share cards
4 · Pages
Pages — 홈 · 기록 · 프로필 · 클럽 홈Pages — lists A: tabs, inboxes, club managementPages — personal lists, rankings and venuesPages — detail: sessions, clubs, venues, people, documentsPages — forms and settingsPages — sign-in and onboarding
5 · Flows
Flows — the nine core tasks
Shipped app (old grammar)Components · 공유 키트상세 페이지 — 플랫 언어Session Card · 밴드 없는 카드
홈 · Home
Home · 홈
클럽 · Clubs
Club Detail · 클럽 상세Create Club Wizard · 클럽 만들기
경기 · Play
경기 · Activity└Session Detail · 일정└Live & Scoring · 경기└Host Ops · 호스트└Create / Edit Session · 일정└Courts & Venues · 코트
기록 · Records
Records · 기록└Leaderboards · 리더보드└Head-to-Head · 상대 전적
프로필 · Profile
Profile · 프로필└Settings · 설정└Legal & misc · 약관└Social · 친구·업적└Messaging · 메시지
시작 · Entry
Onboarding · 시작
ArchiveStrip Map · 세션 스트립 전체 시나리오Headers · 헤더 아이콘Card Continuity · 카드 = 상세의 예고편Session Hero · 더 조용한 공유 카드 (제안)Session Share Card · 히어로 = 공유 카드Session List Frame · 날짜 섹션 · 패널 필터 · 2+2 카드Compaction — 일정 · 코트 · 스코어카드Compaction — 클럽 상세 · 홈Compaction — 기록 · 프로필Live anchor — 진행 중 밴드Density · 카드 밀도토스트 — 리디자인 제안Club List · 클럽Clubs · 클럽클럽 상세 — 여섯 탭 플랫운영 섹션 — 플랫 목표위저드 내비게이션 — 결정 보드드래프트 복원 — 무음 복원클럽 조 편성 — 모델 결정 보드게스트 → 회원 — 심사 흐름Page polish — titled postsWeb app — desktop layoutProduct questions — openWeb app — desktop adaptation, round 2Visual tone — pure white, flat rows, one Tag, a colour budgetLibrary — chrome, surfaces, rows, labelsLibrary — controls, overlays, states, formsLibrary — page patterns, scaling, motionLibrary — additions from the pagesEmpty-once — 프로필 빈 섹션Notification groups — 할 일 밴드 그룹화Profile Cockpit · 프로필 압축Session Detail — Redesign · 일정Venue Detail — Redesign · 테니스장Profile Detail — Redesign · 프로필Tournament Detail — Redesign · 대항전Applicant Detail — Redesign · 가입 심사Canvas Migration — 회비 · 멤버 · 규칙Record Detail — Redesign · 기록Venue Finder · 코트 찾기Venue Filters · 코트 필터 재구성Notifications · 알림Panel Placement · 하단 고정
Decided 2026-09-07 — shipped; kept as the decision record
Interactive kit · grounded in code

Canvas Migration — 회비 · 멤버 · 규칙

Decision 1Migration order for the ~44 still-tinted list/settings shells — decided 2026-09-07
ABy risk: shell first, then chrome, starting with screens whose rows are already flat (회비 · 멤버), multi-panel screens last. Every migrated screen must satisfy the group-spread law and the seam ladder.
BBig-bang (all ~44 screens, ~189 Card instances in one pass) or by nav tree (tab by tab).
Recommendation → A — ratified by the owner: flat is the way to go, on the condition that component positions, spacing, alignment and equal distribution on a row are taken care of.
⚖️Ground and components flatten together, never one without the other (the 2026-08-22 pilot flattened only the ground and every card read as a floating object). Rows are bare and spacing-separated; sections are divided by the full-bleed hairline FlatColumn draws; headline numbers are a StatStrip in the lead slot, never a boxed StatGrid.
⚖️Row composition (the owner's condition): peers on one row are equal flex cells with a constant 8px gap and 8px padding inside each cell, content centered — CellRow. The text rail is 16, full-bleed is 0. space-between and centered fixed-width clusters are the drift signatures to reject.
회비 — 플랫 목표
회비 관리
2026년 9월
6명완납
2명미납
0명부분납
입금 계좌
카카오뱅크 3333-01-234567예금주 정현우
회비 목록8명
김
김민준₩30,000현금으로 직접 전달
완납⋮
이
이서연₩30,000메모 추가
확인
박
박도윤₩30,000메모 추가
미납⋮
최
최지우₩30,000메모 추가
완납⋮
멤버 — 플랫 목표
멤버
올림픽 테니스 클럽
총 9명
🧾
가입 심사검토 대기
2
🌱
추천할 만한 게스트방문 한도에 가까운 게스트
✨
파트너 추천실력이 맞는 멤버 찾기
대표
정
정현우
🌳⋮
총무
김
김민준 (나)1조
🌿⋮
멤버7
이
이서연2조
🌱⋮
박
박도윤1조
🌱⋮
최
최지우3조
🌿⋮
규칙 — 무엇이 평평해지나
규칙
플랫이 되는 것
땅
$background → $card
리스트 행
맨 행 · 간격으로 분리
요약 숫자
StatStrip (lead)
월 선택 · 진입 줄
맨 행
세션 카드 (임베드)
embedded 변형
카드로 남는 것
세션 · 클럽 · 코트
브라우징 목록의 객체 카드
모달 · 폼 섹션
Card 유지
한 줄의 구성
동료 셀
같은 폭 flex 1
셀 간격
8 고정
셀 안 여백
8 · 내용 중앙
정렬 레일
텍스트 16 · 풀블리드 0
space-between
금지
Spec (grounding, anatomy)

Decision record. Flat canvas for the remaining tinted list/settings shells, migrated by risk (shell, then chrome), with the group-spread law and the seam ladder as the acceptance condition. The three phones are the target composition of the first batch, drawn with the shared flat primitives the real screens use.

route · packages/features/clubs/src/club-dues-screen.tsx · club-members-screen.tsx (first batch) → every DetailShell still on ground="tinted" grounded in 8 source file(s)
packages/ui/src/place-shell.tsxpackages/ui/src/detail-shell.tsxpackages/app/src/presentation/components/club-feed/club-feed-item-row.tsxpackages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/features/clubs/src/club-detail/members-pane.tsxpackages/features/clubs/src/club-detail/dues-pane.tsxpackages/features/clubs/src/club-dues/page/dues-person-row.tsxdocs/canon/components.md