Plant Parent: Plant Care Guide

Colors

• #000000Scaffold Backdrop · dimmed modal backdrop overlay
• #FFFFFFDialog Surface · modal card background
• #20C997Primary Mint Teal · action button background · metric card border · icon fills
• #1B1D1FHeader Dark · modal title · plant title · metric primary labels
• #6C727ASecondary Slate · supporting body text · metric secondary labels

Type

• Dialog TitleSF Pro Display · 48px · 800 · #1B1D1F
• Dialog SubheadingSF Pro Text · 28px · 600 · #1B1D1F
• Dialog BodySF Pro Text · 24px · 400 · #6C727A
• Plant Card HeadingSF Pro Display · 32px · 700 · #FFFFFF
• Button LabelSF Pro Text · 28px · 600 · #FFFFFF

Elements

• Modal Dialog Box · modal_container

  Centered overlay card with ~48px inset margins on horizontal edges · Solid white background, pronounced rounded corners, elevated with subtle shadow over dimmed background

• Plant Image Banner · image_container

  Full width inside modal body, height ~240px with bottom aligned title · Dark monochrome gradient overlay fill with white title overlaid at the bottom left

• Care Schedule Summary Box · card

  Two equal columns split with vertical divider, ~140px total height · White fill with thin teal stroke border, paired with teal icons and two-tier text rows

• Got It CTA Button · button

  Bottom of modal card, full-width pill button, ~90px height · Solid mint-green background with centered bold white text

Layout

Modal sheet presentation layered over a blurred/dimmed dashboard background, featuring top celebration emoji, vertical heading group, preview container, care status panel, and confirmation action button.

Notes

Underlying screen is the active dashboard visible in Screen 2. Confetti emoji is rendered as an Apple platform glyph.