PlantIn: Plant Identifier・Care

Colors

• #FFFFFFscreen-white · canvas background
• #00875Aprimary-headline-green · accent word in headline · active step indicator
• #052F21headline-dark-green · headline body
• #6C8279subtitle-muted-slate · support copy text
• #DCE7E3step-inactive · unfilled segment track
• #F89B48illustration-shirt-orange · character sweater fill
• #FFE835illustration-yellow · watering cans · sun graphic
• #F08D59plant-pot-terracotta · planter pot fill

Type

• page_titlePlus Jakarta Sans · 56px · 800 · #052F21
• page_subtitleSF Pro Text · 25px · 600 · #6C8279

Elements

• stepped_progress_bar · progress_bar

  Placed 16px below status bar, 5 segmented bars spanning full width with 12px horizontal gutters. · Rounded horizontal pill segments; first segment filled in solid green, remaining four filled in soft muted teal-grey.

• header_group · group

  Left-aligned with 48px horizontal padding, starting ~40px below the progress indicator. · Two-tone title with prominent green lead word followed by dark green lines and lighter subtitle.

• onboarding_illustration · graphic_element

  Fills the lower 55% of the screen area, bottom aligned. · Stylized 2D flat illustration of a girl watering houseplants surrounded by contextual icons (sun, mister spray bottle, leaf).

Layout

Top-to-bottom onboarding slide layout with top stepped progress indicator, left-aligned title copy, and bottom hero illustration.

Notes

Interactive button likely scrolled or positioned offscreen in current state.