Goldito design · Mook leaves Oct 29 · Today's doc

Design status

One place for what's in progress, what needs a call and how far the design system is. Decisions live on Open decisions; every page is in the site search (press /).

Play and pick: nine calls from Oct 24해 보고 고르기: 10/24의 결정 아홉 개 Feed, Diary, stickers, the paw, playful words. Picks by Sunday night.피드, 다이어리, 스티커, 발바닥, 말투. 일요일 밤까지.Play and pick해 보고 고르기 ↗

Work in progress

In review

PRStatus icons, not emoji · #352Lucide icons for statuses, Heads-up, Life Record and care lines; words instead of emoji (#293). Minsik reviews.PR #352 · Oct 24
PRPast booking cards · #353When and where in one line, who drives in one line (#181). Minsik reviews.PR #353

Decide

Oct 24Step-by-step booking · #330Yes means a helper builds it Oct 25 to 26.Flow · #330
TodayWho records the video · #116Record Oct 26 or 27; Mook edits Oct 27 to 28.Shot list · #116
TodayJudge side panel · #111Ship it next to split view (half a day), or close #111.Panel · #111

NextPush the tickets in FigmaDesign kit, Nav, Booking flow, #120, one at a time; then the links refresh.Oct 24
NextSitter facts (backend)Rating is in (#344); stays and availability still to check in search_sitters_nearby.Request
NextHandoff for MinsikBy Oct 28: Figma-linked handoff so Minsik can approve UI after Oct 29.Oct 24

Done

DoneChat got its own tab · #340Home, Bookings, Chat, Feed, Snap; Diary inside Feed; the paw bubble. Snap stays a tab (the top-left version is saved).#340 · Trial
DoneMerged Oct 23: #336, #337, #331Bookings tab emoji (#182), the sticker set (#114), DESIGN.md.#336 · #337 · #331
DoneSix PRs mergedDesign kit (#279), header C (#294), audit fixes (#269), Lucide (#301), Plus Jakarta Sans (#304), the last Ionicons (#323).#279 · #323
DoneFigma: decisions, fonts, icons, flagsDecisions board with dates, Jakarta and Fredoka text styles, the Lucide set, What's new flags on every run.Oct 24
DoneDesign tickets checkedAll 13 open track:design tickets checked against GitHub and main: 3 in the slot, 5 to close, 4 team calls, 1 after the submission.Project
DoneProposal issuesNav and step-by-step booking each have an issue to decide on.#329 · #330

Removed

Pixel-pet presets branchMinsik built the Tamagotchi in PR #261.
Tamagotchi rooms A/B/C and the Kenney downloadsSame: covered by #261.
Line icons in buttonsReplaced by plain labels and the illustrations.
Chat stage words (check-back)Now ticket #237.
Demo data FYI (check-back)In the audit as F61, for Minsik.
"Claude" lane on Plan, Logo feedback and Untitled artifactsNot needed before Oct 30; parked.

Design system

Components 21

0 missing1 need an update0 ready or in a PR20 in the app

Component	Latest design	In the app	Status	Next
Button	Figma Expressive Button · steps.html big Next	`ui/Button`	Merged · #279	Add size "large" (60 px full width, as on steps.html); 52 px default, 2 px ink outline for secondary (F10).
Chip (one)	Mint + ink ring (decided Oct 21)	`Chip, ChoiceChips, SegmentedControl, + 4 hand-rolled`	Merged · #279	One Chip with on/off; replace the 7 looks (F21). Plugin already draws it mint.
Option card	steps.html: Who is staying, Where, Which days	`none (onboarding rows are local)`	Merged · #279	Big tappable card: picture, title, one line, check circle. Used by booking flow and onboarding.
Step header	steps.html: back, progress bar, "1 of 6", Ask Chloe	`owner-onboarding has its own`	Merged · #279	One StepHeader for every one-question-per-screen flow.
Summary row	steps.html: Check your request (label, value, Change)	`none`	Merged · #279	Label / value / Change row for review screens.
Price breakdown	steps.html, qa-sitter-card	`QuoteCard, ChatQuoteCard`	Merged · #279	One price table style: lines, divider, bold total, "total per night" wording.
Result state	steps.html: Request sent	`PaidConfirmation (local)`	Merged · #279	Check circle, title, one line, next action.
Sitter card	qa-sitter-card.html	`SitterCard (old: initial, chips, chevron)`	Merged · #279	Photo, ★ · stays · km, availability tag, price on the right; no chevron.
Search pill	qa-sitter-card.html	`SitterSearchBar`	Merged · #279	When / Pets / Within pill; sheets with quick picks + calendar + slider (#179).
Range calendar + quick picks	qa-sitter-card.html	`RangeCalendar, DayPickerSheet`	Merged · #279	Add quick-pick chips above the calendar.
Slider + quick picks	qa-sitter-card.html	`ui/Slider`	Merged · #279	Add km quick picks; value label in Fredoka; a11y value (F56).
List row	Figma List Row 1673:31755	`none (Settings uses cards)`	Merged · #279	Two-line / one-line, chevron / switch / badge, danger (F02).
Section title	Figma Fredoka 21	`SectionTitle (held branch)`	Merged · #279	Ships with the patterns PR.
App header	Figma App Header	`RoleTabs headerOptions`	Merged · #269	Shared screens fixed (#269, merged Oct 23).
Empty state	Figma Empty State	`ui/EmptyState`	In the app	Emoji stay for content; statuses use line icons (#336 merged; #352 in review).
Sheet	Figma, DESIGN.md	`ui/Sheet`	Merged · #279	Name the dialog, focus, rise from the bottom, grab handle (F53, F43).
Toast	DESIGN.md	`ToastProvider`	Merged · #279	Motion and Undo (F44).
Message bubble	Figma Message Bubble	`MessageBubble`	Merged · #278	Merged in #278.
Stage bar	Figma Stepper	`BookingStageBar`	In the app	Stage names shipped (#237).
Danger modal	Figma 1673:44181	`AlertModal`	Merged · #279	Red header band, cream body (F26).
Pet mark / chips	decisions.html (breed photo, else illustration)	`PetMark (held), emoji in chips`	Needs update	Needs ~20 breed photos.

Foundations

Part	Source	In the app	Status	Next
Colour tokens	DESIGN.md · Figma Expressive	`theme/themes.ts`	Matches	Blocks (mint, peach, butter, blush) are tokens; placeholder colour in #269.
Type	Fredoka 21 section titles; Plus Jakarta body	`tokens + SectionTitle (held branch)`	Matches	Section titles (#279) and Plus Jakarta Sans (#304) are in.
Focus ring	DESIGN.md 2 px primary	`public/index.html`	Merged · #269	Merged in #269.
Motion	DESIGN.md fast / base / slow, Reduce motion	`tokens exist, unused`	Needs update	F49, F42: wire tokens and Reduce motion.
Icons	decisions.html	`Ionicons today`	Lucide	Lucide, through Icon.tsx by meaning (#301, #323). In Figma: Icons · Lucide.
Illustrations	illustrations.html	`Art.tsx (held branch)`	On hold	On hold until after the submission.
Pixel pets	pixel-pets.html	`PetSprite (16 px, code)`	Needs update	PNG slot ready; v2 in progress.

How to keep it consistent

One source per componentThe design site page is the spec; Figma is built from it by the plugin; the app follows a Figma-to-code table. No screen keeps its own copy.

Build the part, then swap screensOne PR per family (Selection, Layout, Cards). The part comes first, then every screen that hand-rolls it switches to it in the same PR.

A kit screen in the appA /dev/kit route showing every variant, like Minsik's /dev/sprites. Design QA happens there once, not per screen.

Guard railsA grep check in CI: no hex colours, font sizes or emoji in labels outside theme and the kit.

Suggested order before Oct 28

Selection family: one Chip (mint), Option card, Button large. Biggest visible inconsistency; used on almost every screen.
Cards on the demo path: Sitter card + Search pill (#179), price breakdown. What judges see first when booking.
Layout family: Section title, List row, Summary row, Step header.
Feedback: Sheet, Toast, Result state, Danger modal.

One product question: the step-by-step booking flow (steps.html, "Booking request 1 of 6") isn't in the app; booking happens in the chat today. Its parts (Option card, Step header, Summary row) are worth building either way, but bringing the flow itself in is a product call for Minsik and you.