Today a new sitter lands on a weather emoji and "No pets in your care today". This Home turns the wait into getting booked: the search card owners will see fills in at the top, a paw trail turns each finished step into a coin, and one button always opens the next missing step. Each step opens the app's real screen, rebuilt here from the code on main: the nine setup questions (with voice), Profile, and Schedule with its Weekly rules. Every size, color and font comes from the app's tokens or an existing component; the audit is under the phones.지금 새 시터는 날씨 이모지와 "오늘 돌보는 펫이 없어요"만 봐요. 이 홈은 기다림을 예약 준비로 바꿔요: 위에는 보호자가 검색에서 볼 카드가 채워지고, 발자국 길은 끝낸 단계마다 코인이 되며, 버튼 하나가 늘 다음 빠진 단계를 열어요. 각 단계는 main 코드에서 다시 만든 앱의 실제 화면을 열어요: 아홉 개의 설정 질문(음성 포함), 프로필, 주간 규칙이 있는 일정. 모든 크기, 색, 글꼴은 앱의 토큰이나 기존 컴포넌트에서 왔어요; 점검표는 폰 아래에 있어요.
From the code on main: one empty state and one button to the schedule.main 코드 기준: 빈 화면 하나와 일정으로 가는 버튼 하나.
Every part of the phones and the screens they open, the app component it is, and where its numbers come from. Only two parts are new (the trail and its mini version); everything else is a component that already ships. Values outside the token scale are listed with the component or Figma frame that sets them, the same way the app marks them tokens-ok.폰과 그 폰이 여는 화면의 모든 부분, 그것이 어떤 앱 컴포넌트인지, 숫자가 어디서 왔는지. 새로 만드는 건 두 가지(발자국 길과 그 미니 버전)뿐이고 나머지는 이미 있는 컴포넌트예요. 토큰 밖의 값은 그 값을 정한 컴포넌트나 피그마 프레임과 함께 적었어요(앱의 tokens-ok와 같은 방식).
| Part | Component | Values | Outside the scale, and why |
|---|---|---|---|
| Header | app RoleTabs header · Avatar | title fontSize.title/30 display · "Sam · Sitter" small/20 semibold muted · bell icon.sm in a 44 target · Avatar 40 (its default) | none |
| "Owners will see" | app Kicker (Home) · Tag | HOME_TEXT.kicker 11/14 caps · Tag success: small/20, xs×sm, pill | 11 is HOME_TEXT.kicker (Figma Home label) |
| The card owners see | app SitterResultCard | Avatar 52 · name body bold · facts small muted · "Free…" caption on successSurface · price option display + "per night" caption · radius xl, md padding and gap | Avatar 52 and the pill's 2 px padding are SitterResultCard's own |
| Paw trail | new StageTrail | mint block, radius xl · stops = layout.touchTarget 44 · glyphs icon.sm · labels caption pills, xs from the stop · paw icon.sm · halo xs in gold · trees and house icon.md · ground = the Welcome hero's (primary at 16%) | height 120 and the path's points are artwork (like the pixel pets, which the token check skips) · coin 36 fills the 44 stop inside its 2 px ring |
| Next step | app ListRow | 54 min, 13×md padding, title 15/21, subtitle 12.5/17.5, tile 44 radius md in the step's block color, glyph icon.sm | 15, 12.5, 54 and 13 are ListRow's (Figma Settings list) = HOME_TEXT.row / .body |
| Pinned button | app Button in Screen footer | Expressive: 52 tall, pill, body bold; secondary = 2 px ink outline | none |
| You're ready | app Card | title section/26 display · text small/20 · number badges lineHeight.lead 24, caption bold | none |
| Request | app Card · Avatar · Tag brand · MessageBubble | Avatar 40 · Tag brand (accent/primary) · bubble 12×14, radius lg with a 4 px tail, body/23 | 12×14 and 23 are MessageBubble's (Figma Message Bubble) |
| Stay ticket | app BookingTicket · SummaryRow | butter block · kicker 11 · pets HOME_TEXT.name 17 display · dates HOME_TEXT.date 34 display · rows small/20 | radius 28, 17 and 34 are BookingTicket's on main (Figma Bookings) |
| Your card is live · pets | app ListRow · Avatar · TextButton | as ListRow above; Edit = TextButton, 44 target | none beyond ListRow |
| Today's care | app CheckRow | 44 min, check icon.sm, label small/20, time 12.5 muted | 12.5 = HOME_TEXT.body |
| Requests · Upcoming | app SectionTitle · ListRow · new mini StageTrail | title section display · rows as ListRow · five dots 16, xs apart | dot 16 = sm × 2, coin 12 inside it |
| Setup questions | app StepFrame · BigOption · BigInput · VoiceStep · Button | logo 28 · Back icon.md in 44 · progress track 8, pill · question 28/36 display bold · hint lead muted · options 64 min, 2 px border, label option 20/26, check icon.md · Skip pinned under Next | 28/36, 64 and the 8 track are StepFrame's and BigOption's own; the mic is VoiceStep's 88 |
| Profile | app Stack header · ProfilePhotoGallery · TextField · Collapsible · CheckRow · SegmentedControl · Sheet | groups in the app's order; closed Collapsible shows its value in small muted, chevron 20 · Save pinned · "Turn on auto-send?" consent sheet | chevron 20 is Collapsible's |
| Schedule | app SlotCalendar · Card · ClosingRulesSheet · ScheduleSheet | day 44 min, three slot dots xs (open success, closed track) · Weekly rules: 7 × 3 cells 44 tall, closed = ink with an x · Open or block: Open / Block, three slot CheckRows | the rules grid's 72 label column is drawn here; the app sizes it from its row labels |
| Tab bar | app RoleTabs | layout.tabBarHeight 60 · icon.sm · label 11.5/16 bold | 11.5/16 is RoleTabs' tabBarLabelStyle |
| Toast | app ToastProvider | primary, radius lg, sm×md, small semibold; sits above the footer | none |
| Status bar, bezel | frame phone frame | 12 × 22, 13 px, 10 px bezel | the desktop phone frame, not the app |
Motion: motion.base 240 ms for the coin pop, the paw and the toast; the coin pops inside its stop so nothing shifts. Scrolling: each phone keeps its place when you tap, never scrolls the page behind it, and only scrolls when a state truly has more to show (All set, Busy week).모션: 코인 팝, 발자국, 토스트 모두 motion.base 240ms; 코인은 정류장 안에서 튀어 아무것도 밀리지 않아요. 스크롤: 눌러도 위치가 그대로, 뒤의 페이지를 끌고 가지 않고, 정말 더 보여줄 게 있는 상태(다 됨, 바쁜 주)에서만 스크롤돼요.