tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add onboarding/soft-paywall/free-tier design spec + Stitch design reference

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
2026-07-06 12:09:48 +02:00
parent 538344ca0c
commit c99a08d6a3
41 changed files with 4768 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
design/stitch-onboarding/botanical_vitality/DESIGN.md Normal file
View File

@@ -0,0 +1,160 @@
---
name: Botanical Vitality
colors:
surface: '#f8fbef'
surface-dim: '#d8dbd0'
surface-bright: '#f8fbef'
surface-container-lowest: '#ffffff'
surface-container-low: '#f2f5e9'
surface-container: '#ecefe4'
surface-container-high: '#e7e9de'
surface-container-highest: '#e1e4d9'
on-surface: '#191d16'
on-surface-variant: '#42493c'
inverse-surface: '#2e322a'
inverse-on-surface: '#eff2e7'
outline: '#72796a'
outline-variant: '#c2c9b7'
surface-tint: '#366a17'
primary: '#2b5f0b'
on-primary: '#ffffff'
primary-container: '#437824'
on-primary-container: '#c1ff99'
inverse-primary: '#9bd776'
secondary: '#446741'
on-secondary: '#ffffff'
secondary-container: '#c2eaba'
on-secondary-container: '#486b45'
tertiary: '#375d00'
on-tertiary: '#ffffff'
tertiary-container: '#4d771b'
on-tertiary-container: '#cbfd91'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#b6f390'
primary-fixed-dim: '#9bd776'
on-primary-fixed: '#092100'
on-primary-fixed-variant: '#205100'
secondary-fixed: '#c5edbd'
secondary-fixed-dim: '#aad1a2'
on-secondary-fixed: '#012104'
on-secondary-fixed-variant: '#2d4e2b'
tertiary-fixed: '#c0f287'
tertiary-fixed-dim: '#a5d56e'
on-tertiary-fixed: '#0f2000'
on-tertiary-fixed-variant: '#2e4f00'
background: '#f8fbef'
on-background: '#191d16'
surface-variant: '#e1e4d9'
typography:
display:
fontFamily: Plus Jakarta Sans
fontSize: 34px
fontWeight: '800'
lineHeight: 42px
letterSpacing: -0.02em
headline-lg:
fontFamily: Plus Jakarta Sans
fontSize: 28px
fontWeight: '800'
lineHeight: 36px
letterSpacing: -0.01em
headline-md:
fontFamily: Plus Jakarta Sans
fontSize: 22px
fontWeight: '700'
lineHeight: 28px
body-lg:
fontFamily: Plus Jakarta Sans
fontSize: 17px
fontWeight: '500'
lineHeight: 26px
body-md:
fontFamily: Plus Jakarta Sans
fontSize: 15px
fontWeight: '400'
lineHeight: 22px
label-lg:
fontFamily: Plus Jakarta Sans
fontSize: 13px
fontWeight: '700'
lineHeight: 18px
letterSpacing: 0.05em
label-md:
fontFamily: Plus Jakarta Sans
fontSize: 12px
fontWeight: '600'
lineHeight: 16px
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
base: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 32px
container-margin: 20px
gutter: 16px
---
## Brand & Style
The design system is centered on the concept of "Gentle Precision." It balances the organic, living nature of botany with a high-end, structured educational interface. The target audience is urban plant enthusiasts who seek a calm, focused environment to manage their indoor jungles.
The style is **Premium Minimalist with a Tactile Twist**. It draws inspiration from modern learning apps by using high whitespace, generous hit areas, and soft, approachable geometry. While the typography is bold and authoritative, the color palette and rounded corners keep the experience friendly and accessible. The interface should feel like a premium lifestyle magazine: clean, airy, and centered entirely on high-quality botanical photography.
## Colors
This design system utilizes a "Nature-In" palette. The foundation is a warm cream background that reduces eye strain and feels more organic than pure white.
- **Primary Green (#437824):** Used for primary actions, success states, and key navigational highlights.
- **Deep Forest (#173817):** Reserved for secondary buttons, information chips, and high-contrast accents that require a sense of grounded authority.
- **Spring Accent (#A6D66F):** Used for progress bars, illustrative accents, and soft background fills for selected states.
- **Typography:** Headlines use a high-contrast near-black to ensure readability against the cream background, while body text uses a muted gray-green to maintain the "calm" brand pillar.
## Typography
We use **Plus Jakarta Sans** for its exceptional readability and friendly, rounded terminals that mirror the organic curves of plant life.
Headlines are unapologetically bold (Extra-Bold 800), creating a strong visual hierarchy and a confident editorial feel. For mobile, we prioritize vertical rhythm with generous line heights to ensure the "high whitespace" aesthetic is maintained even within text-heavy sections. Display styles utilize negative letter-spacing to keep the bold weights feeling tight and professional on iOS displays.
## Layout & Spacing
This design system follows a fluid-width logic tailored for iOS devices, specifically optimized for the iPhone 15 aspect ratio.
- **Grid:** A standard 4-column mobile grid with 20px side margins.
- **Vertical Rhythm:** Content blocks are separated by 24px or 32px to ensure the UI feels "airy."
- **Safe Areas:** Strict adherence to iOS safe areas for the status bar and home indicator.
- **Content Spacing:** Elements within cards use a 12px or 16px internal padding to maintain a compact but breathable internal structure.
## Elevation & Depth
Depth is achieved through **Tonal Layering** and soft, natural shadows. We avoid harsh dropshadows.
- **Level 0 (Background):** The warm cream (#FBFAF3) base.
- **Level 1 (Cards/Surface):** Pure white (#FFFFFF) surfaces with a very soft, diffused shadow (0px 4px 20px rgba(16, 28, 18, 0.06)). This makes cards appear as if they are resting lightly on the cream surface.
- **Level 2 (Interactive):** When pressed, buttons or cards may subtly scale down (0.98) or the shadow may tighten to simulate physical contact.
- **Glassmorphism:** Used sparingly for top navigation bars or floating action buttons, employing a 20px backdrop blur to allow the botanical photography to peek through.
## Shapes
The shape language is defined by "Friendly Geometry."
- **Standard Radius:** 16px for cards and containers to create a soft, approachable frame for photography.
- **Button Radius:** 14px specifically for the 56px height buttons, creating a balanced, slightly "squircle" feel.
- **Chip Radius:** Fully rounded (pill-shaped) for tags and small indicators.
- **Images:** All plant photography must feature rounded corners (minimum 12px) to prevent the "sharpness" of the images from clashing with the soft UI.
## Components
- **Buttons:**
- *Primary:* 56px height, #437824 background, white text (Bold), 14px radius.
- *Secondary:* 56px height, #173817 background, white text (Bold), 14px radius.
- *Outline:* 56px height, 2px border (#437824), #437824 text.
- **Cards:** White background, 16px radius, soft 6% opacity shadow. Used for plant profiles, "Care Tasks," and "Reminders."
- **Chips:** Small, pill-shaped tags used for plant difficulty (e.g., "Easy Care") or water requirements. Use #173817 with white text for high contrast.
- **Progress Bars:** Thick 8px tracks using the #A6D66F accent color on a #E6EADF (muted version of cream) track.
- **Input Fields:** 56px height, white background, 14px radius, subtle 1px border in #D1D4CC.
- **Care Icons:** Use thick-stroke (2pt) icons with rounded caps to match the typography's softness.
- **Imagery:** Use high-resolution photography with natural lighting. Ensure the subject (the plant) is centered with a clean or naturally blurred background.

189
design/stitch-onboarding/greenlens_pro_paywall/code.html Normal file
View File

@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>GreenLens Pro - Paywall</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "fontWeight": "600"}],
"body-lg": ["17px", {"lineHeight": "26px", "fontWeight": "500"}],
"label-lg": ["13px", {"lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700"}],
"body-md": ["15px", {"lineHeight": "22px", "fontWeight": "400"}],
"headline-lg": ["28px", {"lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800"}],
"display": ["34px", {"lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800"}],
"headline-md": ["22px", {"lineHeight": "28px", "fontWeight": "700"}]
}
}
}
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface text-on-surface antialiased min-h-screen flex flex-col relative font-body-md overflow-x-hidden selection:bg-primary-container selection:text-on-primary-container">
<!-- Hero Header Background -->
<div class="absolute top-0 left-0 w-full h-80 z-0 pointer-events-none">
<div class="w-full h-full bg-cover bg-center" data-alt="A soft, premium botanical photograph of a lush Monstera deliciosa leaf bathed in warm morning sunlight. The lighting is natural and high-key, creating a bright, airy, light-mode aesthetic. The background softly blurs out, allowing the vibrant, organic greens of the plant to contrast beautifully against a warm, minimalist cream backdrop. The mood is calm, upscale, and inviting." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDvuJKth4pDT75-D0SOCZSHfyxOmTSYlp2wVfMF_cvw7EojCdrM7InYI9z_zZhxaCkB68Hc8oG_lw0h1lJfm3_8So6u5vT8WQmYsQbx0Vgt0ObahJ5JVfSYz89qYFLbo24xIoTZgLEMAhUTfnCqFSArnc727JG0cvbuWGISnP-BgzC5LS7E2kIIRkq9a2T2wbcXdZlTXWYJ9CoV7_nYSum-sfOI4-yAif6n-VpKO_motQM_ZBL5TOeI6PlhTBjS1zrS-NfT19ziw70')"></div>
<div class="absolute inset-0 bg-gradient-to-b from-surface/10 via-surface/60 to-surface"></div>
</div>
<!-- Top Action Bar -->
<div class="absolute top-0 left-0 w-full px-container-margin pt-14 pb-4 flex justify-between items-center z-20">
<button class="w-10 h-10 rounded-full bg-surface-container-lowest/60 backdrop-blur-md flex items-center justify-center text-on-surface shadow-sm hover:bg-surface-container-lowest/80 transition-colors active:scale-95">
<span class="material-symbols-outlined">close</span>
</button>
<button class="font-label-lg text-label-lg text-on-surface hover:opacity-80 transition-opacity drop-shadow-sm">
Restore
</button>
</div>
<!-- Scrollable Content Canvas -->
<main class="relative z-10 flex-1 flex flex-col px-container-margin pt-56 pb-12 w-full max-w-md mx-auto">
<!-- Typography Header -->
<div class="flex flex-col items-center text-center mb-xl">
<span class="font-label-lg text-label-lg text-primary mb-sm tracking-[0.1em] uppercase">GreenLens Pro</span>
<h1 class="font-display text-display text-on-surface font-extrabold mb-sm leading-tight">Get Unlimited Access</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-[280px]">Unlimited scans, health checks and your personal care plan.</p>
</div>
<!-- Main Plan Card -->
<div class="bg-surface-container rounded-xl p-lg mb-lg shadow-[0px_4px_20px_rgba(16,28,18,0.06)] flex flex-col gap-sm border border-outline-variant/20">
<h2 class="font-headline-md text-headline-md text-on-surface">GreenLens Pro</h2>
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">Unlimited AI scans, health diagnosis, 7-day rescue plans, 100 credits/month</p>
<div class="font-label-lg text-label-lg text-on-surface mt-base pt-sm border-t border-outline-variant/30">
Free for 7 days, then €39.99/year
</div>
</div>
<!-- Toggle Row -->
<div class="bg-surface-container-lowest rounded-xl px-md py-sm mb-xl flex justify-between items-center shadow-[0px_4px_20px_rgba(16,28,18,0.04)]">
<span class="font-label-lg text-label-lg text-on-surface">Free Trial Enabled</span>
<!-- iOS Style Toggle ON -->
<button class="w-14 h-8 bg-primary-container rounded-full relative transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface">
<div class="absolute right-1 top-1 w-6 h-6 bg-surface-container-lowest rounded-full shadow-sm transition-all"></div>
</button>
</div>
<!-- Timeline / Schedule -->
<div class="flex flex-col gap-lg pl-sm mb-xl relative">
<!-- Connecting Line -->
<div class="absolute left-[19px] top-4 bottom-8 w-0.5 bg-surface-variant z-0"></div>
<!-- Step 1: Active -->
<div class="flex items-start gap-md relative z-10">
<div class="w-4 h-4 rounded-full bg-primary mt-1 border-[3px] border-surface shadow-sm shrink-0"></div>
<div class="flex flex-col">
<span class="font-label-lg text-label-lg text-primary">Due today — 7 days free</span>
<span class="font-body-md text-body-md text-primary mt-base">€0.00</span>
</div>
</div>
<!-- Step 2: Future -->
<div class="flex items-start gap-md relative z-10">
<div class="w-4 h-4 rounded-full bg-surface-variant mt-1 border-[3px] border-surface shadow-sm shrink-0"></div>
<div class="flex flex-col">
<span class="font-body-md text-body-md text-on-surface-variant">Due July 13</span>
<span class="font-label-lg text-label-lg text-on-surface mt-base">€39.99</span>
</div>
</div>
</div>
<!-- Sticky Bottom Actions -->
<div class="mt-auto flex flex-col items-center gap-md pt-md w-full">
<button class="w-full h-14 bg-primary-container text-on-primary rounded-xl font-label-lg text-label-lg flex items-center justify-center shadow-lg hover:bg-tertiary-container hover:shadow-xl active:scale-[0.98] transition-all duration-200">
Try Free
</button>
<div class="flex flex-col items-center gap-sm">
<span class="font-label-md text-label-md text-on-surface-variant">Cancel Anytime</span>
<div class="flex items-center gap-sm text-outline-variant">
<a class="font-label-md text-label-md text-outline hover:text-on-surface transition-colors" href="#">Privacy</a>
<span class="font-label-md text-label-md">|</span>
<a class="font-label-md text-label-md text-outline hover:text-on-surface transition-colors" href="#">Terms</a>
</div>
</div>
</div>
</main>
</body></html>

BIN
design/stitch-onboarding/greenlens_pro_paywall/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 KiB

199
design/stitch-onboarding/health_check_care_plan/code.html Normal file
View File

@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/>
<title>GreenLens Onboarding - Health Check</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px",
"2xl": "1rem",
"3xl": "1.5rem"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", { "lineHeight": "16px", "fontWeight": "600" }],
"body-lg": ["17px", { "lineHeight": "26px", "fontWeight": "500" }],
"label-lg": ["13px", { "lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700" }],
"body-md": ["15px", { "lineHeight": "22px", "fontWeight": "400" }],
"headline-lg": ["28px", { "lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800" }],
"display": ["34px", { "lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800" }],
"headline-md": ["22px", { "lineHeight": "28px", "fontWeight": "700" }]
}
}
}
}
</script>
<style>
body {
-webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
font-variation-settings: 'FILL' 1;
}
/* Soft, natural shadow for cards */
.shadow-soft {
box-shadow: 0px 4px 20px rgba(16, 28, 18, 0.06);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background h-screen w-full flex justify-center items-center overflow-hidden antialiased">
<!-- Mobile Device Container (iPhone 15 Aspect Ratio roughly 19.5:9) -->
<main class="w-full h-full max-w-md mx-auto relative flex flex-col bg-surface-container-lowest md:rounded-[40px] md:h-[852px] md:w-[393px] md:shadow-2xl overflow-hidden">
<!-- Top 60% Image Area -->
<div class="relative h-[60%] w-full">
<div class="absolute inset-0 bg-cover bg-center w-full h-full" data-alt="A close-up, high-resolution lifestyle photograph of an indoor houseplant with a few visibly yellowing, slightly droopy leaves, set against a bright, airy cream-colored background. Soft, natural daylight streams in from an unseen window, creating a calm, minimalist aesthetic. The focus is sharp on the plant, embodying a premium, organic visual style typical of high-end botanical magazines." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDpIiAXrV02PGrV2kch25aBf36rzqZdzaUc3ve1x0O45wHQPSl-ZOiRyEK995UDMBRzUpAbTluxb-uEwFy83lmwfoXWhd7vjABtHpIatmirSuuR_22Nn5ixXze3DthIbP-ZKdfS-x7HBrSgcZ3oASanUHs4CUJc56uZvW_QIZX1IQnz2v32cl-Ro1jRK58xBuyWAfbgxmk3UnM1ibKRpufE6HKt0pXZjoqYKmnlYv2303rmMJENdBE-PaUu1BCAuPg3YKXCBpX6y4w')"></div>
<!-- Safe Area Overlay / Gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/10"></div>
<!-- Diagnosis Card Overlay -->
<div class="absolute inset-x-container-margin bottom-6">
<div class="bg-surface-container-lowest/95 backdrop-blur-xl rounded-2xl p-sm shadow-soft animate-[slideUp_0.5s_ease-out_forwards]">
<!-- Card Header -->
<div class="flex items-center gap-xs mb-sm">
<div class="bg-error-container text-error rounded-full p-2 flex items-center justify-center">
<span class="material-symbols-outlined text-[18px]">medical_services</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface">Health Check</h3>
</div>
<!-- Diagnosis Rows -->
<div class="flex flex-col gap-xs">
<!-- Problem Row -->
<div class="flex items-center justify-between bg-error-container/30 px-sm py-xs rounded-lg">
<div class="flex items-center gap-xs">
<span class="material-symbols-outlined text-error text-[20px] fill">warning</span>
<span class="font-body-md text-body-md text-error font-medium">Overwatering detected</span>
</div>
</div>
<!-- Solution Row -->
<div class="flex items-center justify-between bg-surface-container-low px-sm py-xs rounded-lg">
<div class="flex items-center gap-xs">
<span class="material-symbols-outlined text-primary text-[20px] fill">check_circle</span>
<span class="font-body-md text-body-md text-on-surface font-medium">7-day rescue plan ready</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom 40% Content Area -->
<div class="relative h-[40%] bg-surface-container-lowest rounded-t-3xl -mt-6 z-10 flex flex-col justify-between p-container-margin shadow-[0px_-8px_24px_rgba(0,0,0,0.04)]">
<!-- Text Content -->
<div class="mt-xs">
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-xs">Health Check &amp; Care Plan</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">GreenLens spots problems early and builds a rescue plan for you.</p>
</div>
<!-- Footer Controls -->
<div class="flex flex-col gap-lg pb-safe">
<!-- Progress Dots -->
<div class="flex items-center justify-center gap-2">
<div class="w-2 h-2 rounded-full bg-surface-variant"></div>
<!-- Active Dot -->
<div class="w-8 h-2 rounded-full bg-primary-container"></div>
<div class="w-2 h-2 rounded-full bg-surface-variant"></div>
</div>
<!-- Primary Action -->
<button class="w-full h-[56px] bg-primary-container text-on-primary font-label-lg text-label-lg rounded-[14px] flex items-center justify-center active:scale-95 transition-transform duration-150">
Continue
</button>
</div>
</div>
</main>
<style>
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</body></html>

BIN
design/stitch-onboarding/health_check_care_plan/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 KiB

270
design/stitch-onboarding/health_check_care_plan_dark_mode/code.html Normal file
View File

@@ -0,0 +1,270 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/>
<title>GreenLens Onboarding - Health Check</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;family=Manrope:wght@400&amp;family=JetBrains+Mono:wght@500&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px",
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
],
"label-lg": [
"Epilogue"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"label-lg": [
"16px",
{
"lineHeight": "1.4",
"fontWeight": "600"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
]
}
},
},
}
</script>
<style>
body {
-webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
font-variation-settings: 'FILL' 1;
}
/* Soft, natural shadow for cards */
.shadow-soft {
box-shadow: 0px 4px 20px rgba(16, 28, 18, 0.06);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background h-screen w-full flex justify-center items-center overflow-hidden antialiased">
<!-- Mobile Device Container (iPhone 15 Aspect Ratio roughly 19.5:9) -->
<main class="w-full h-full max-w-md mx-auto relative flex flex-col bg-surface-container-lowest md:rounded-[40px] md:h-[852px] md:w-[393px] md:shadow-2xl overflow-hidden">
<!-- Top 60% Image Area -->
<div class="relative h-[60%] w-full">
<div class="absolute inset-0 bg-cover bg-center w-full h-full" data-alt="A close-up, high-resolution lifestyle photograph of an indoor houseplant with a few visibly yellowing, slightly droopy leaves, set against a bright, airy cream-colored background. Soft, natural daylight streams in from an unseen window, creating a calm, minimalist aesthetic. The focus is sharp on the plant, embodying a premium, organic visual style typical of high-end botanical magazines." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDpIiAXrV02PGrV2kch25aBf36rzqZdzaUc3ve1x0O45wHQPSl-ZOiRyEK995UDMBRzUpAbTluxb-uEwFy83lmwfoXWhd7vjABtHpIatmirSuuR_22Nn5ixXze3DthIbP-ZKdfS-x7HBrSgcZ3oASanUHs4CUJc56uZvW_QIZX1IQnz2v32cl-Ro1jRK58xBuyWAfbgxmk3UnM1ibKRpufE6HKt0pXZjoqYKmnlYv2303rmMJENdBE-PaUu1BCAuPg3YKXCBpX6y4w')"></div>
<!-- Safe Area Overlay / Gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-black/50 via-transparent to-black/60"></div>
<!-- Diagnosis Card Overlay -->
<div class="absolute inset-x-container-margin bottom-6">
<div class="bg-surface-container-lowest/95 backdrop-blur-xl rounded-2xl p-sm shadow-soft animate-[slideUp_0.5s_ease-out_forwards]">
<!-- Card Header -->
<div class="flex items-center gap-xs mb-sm">
<div class="bg-error-container text-error rounded-full p-2 flex items-center justify-center">
<span class="material-symbols-outlined text-[18px]">medical_services</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface">Health Check</h3>
</div>
<!-- Diagnosis Rows -->
<div class="flex flex-col gap-xs">
<!-- Problem Row -->
<div class="flex items-center justify-between bg-error-container/30 px-sm py-xs rounded-lg">
<div class="flex items-center gap-xs">
<span class="material-symbols-outlined text-error text-[20px] fill">warning</span>
<span class="font-body-md text-body-md text-error font-medium">Overwatering detected</span>
</div>
</div>
<!-- Solution Row -->
<div class="flex items-center justify-between bg-surface-container-low px-sm py-xs rounded-lg">
<div class="flex items-center gap-xs">
<span class="material-symbols-outlined text-primary text-[20px] fill">check_circle</span>
<span class="font-body-md text-body-md text-on-surface font-medium">7-day rescue plan ready</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom 40% Content Area -->
<div class="relative h-[40%] bg-surface-container-lowest rounded-t-3xl -mt-6 z-10 flex flex-col justify-between p-container-margin shadow-[0px_-8px_24px_rgba(0,0,0,0.2)]">
<!-- Text Content -->
<div class="mt-xs">
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-xs">Health Check &amp; Care Plan</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">GreenLens spots problems early and builds a rescue plan for you.</p>
</div>
<!-- Footer Controls -->
<div class="flex flex-col gap-lg pb-safe">
<!-- Progress Dots -->
<div class="flex items-center justify-center gap-2">
<div class="w-2 h-2 rounded-full bg-surface-variant"></div>
<!-- Active Dot -->
<div class="w-8 h-2 rounded-full bg-primary-container"></div>
<div class="w-2 h-2 rounded-full bg-surface-variant"></div>
</div>
<!-- Primary Action -->
<button class="w-full h-[56px] bg-primary-container text-on-primary font-label-lg text-label-lg rounded-[14px] flex items-center justify-center active:scale-95 transition-transform duration-150">
Continue
</button>
</div>
</div>
</main>
<style>
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</body></html>

BIN
design/stitch-onboarding/health_check_care_plan_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 542 KiB

343
design/stitch-onboarding/login_to_greenlens/code.html Normal file
View File

@@ -0,0 +1,343 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"/>
<title>GreenLens - Login</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": [
"Plus Jakarta Sans"
],
"body-lg": [
"Plus Jakarta Sans"
],
"label-lg": [
"Plus Jakarta Sans"
],
"body-md": [
"Plus Jakarta Sans"
],
"headline-lg": [
"Plus Jakarta Sans"
],
"display": [
"Plus Jakarta Sans"
],
"headline-md": [
"Plus Jakarta Sans"
]
},
"fontSize": {
"label-md": [
"12px",
{
"lineHeight": "16px",
"fontWeight": "600"
}
],
"body-lg": [
"17px",
{
"lineHeight": "26px",
"fontWeight": "500"
}
],
"label-lg": [
"13px",
{
"lineHeight": "18px",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
],
"body-md": [
"15px",
{
"lineHeight": "22px",
"fontWeight": "400"
}
],
"headline-lg": [
"28px",
{
"lineHeight": "36px",
"letterSpacing": "-0.01em",
"fontWeight": "800"
}
],
"display": [
"34px",
{
"lineHeight": "42px",
"letterSpacing": "-0.02em",
"fontWeight": "800"
}
],
"headline-md": [
"22px",
{
"lineHeight": "28px",
"fontWeight": "700"
}
]
}
},
}
}
</script>
<style>
body {
-webkit-tap-highlight-color: transparent;
background-color: #000; /* For framing */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.iphone-frame {
width: 100%;
max-width: 393px; /* iPhone 15 width */
height: 100vh;
max-height: 852px; /* iPhone 15 height */
background-color: #FBFAF3; /* surface */
position: relative;
overflow: hidden;
display: flex;
flex-col;
}
@media (min-width: 400px) {
.iphone-frame {
height: 852px;
border-radius: 54px;
box-shadow: 0 0 0 10px #000, 0 20px 40px rgba(0,0,0,0.5);
margin: 20px;
}
}
.hero-section {
height: 35%;
position: relative;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(251,250,243,0) 50%, #FBFAF3 100%);
}
.form-sheet {
height: 65%;
background-color: #FBFAF3;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
margin-top: -24px; /* Pull up to overlap hero */
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
padding: 24px 20px;
}
/* Custom Input Styling matching guidelines */
.input-field {
height: 56px;
background-color: #FFFFFF;
border-radius: 14px;
border: 1px solid #D1D4CC;
padding: 0 16px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 500;
color: #191d16;
width: 100%;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
border-color: #437824;
box-shadow: 0 0 0 2px rgba(67, 120, 36, 0.2);
}
.input-field::placeholder {
color: #72796a;
font-weight: 400;
}
/* Button Styling */
.btn-primary {
height: 56px;
background-color: #437824;
border-radius: 14px;
color: #FFFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: none;
cursor: pointer;
transition: transform 0.1s, opacity 0.2s;
}
.btn-primary:active {
transform: scale(0.98);
}
.btn-apple {
height: 56px;
background-color: #000000;
border-radius: 14px;
color: #FFFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: none;
cursor: pointer;
gap: 8px;
transition: transform 0.1s;
}
.btn-apple:active {
transform: scale(0.98);
}
.divider-line {
height: 1px;
background-color: #e1e4d9;
flex-grow: 1;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-gray-100">
<div class="iphone-frame flex flex-col relative">
<!-- Hero Image Area (35%) -->
<div class="hero-section">
<img alt="Botanical hero image" class="hero-image" data-alt="A lush, high-resolution close-up of a Monstera Deliciosa leaf, softly backlit by warm morning sunlight. The botanical photography is premium, airy, and calming, featuring rich vibrant greens against a slightly blurred, clean background. The aesthetic is modern minimalist with a tactile organic feel, perfectly suited for a high-end plant care app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZ52RoNjzx9-A72eQKmdGgnrltylpxouotb1w9T0WHGj_3lAW7G9L6cV6MgKptlxFZiiYT6AobZ5G7R3rvT86jhDTo5J87nsGwWrcqHnBgUOQ4enGmQ7WSStk2vV4zdWdSHCBfPSndpOUj_DRF3od8ASsFMDcA6VS02INwlqEmewyvYC1lpHPrr1ZrsHut8BAc0tWBa3GB8MKSNcQo03Da-KD06wwLK6kNBFyEHQqt77xxescSLi2CZgi_Zq5c2hNhs9Qd993DV-o"/>
<div class="hero-gradient"></div>
<div class="absolute bottom-10 left-5">
<h1 class="font-display text-display text-on-surface">Welcome back!</h1>
</div>
</div>
<!-- Form Sheet Area (65%) -->
<div class="form-sheet">
<!-- Apple Login -->
<button class="btn-apple mb-lg">
<svg fill="currentColor" height="20" viewbox="0 0 24 24" width="20">
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.62-1.496 3.603-2.998 1.156-1.682 1.633-3.314 1.655-3.398-.035-.015-3.182-1.22-3.216-4.858-.026-3.04 2.484-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.693.792-1.353 2.235-1.169 3.603 1.343.104 2.61-.715 3.456-1.59z"></path>
</svg>
Continue with Apple
</button>
<!-- Divider -->
<div class="flex items-center gap-4 mb-lg">
<div class="divider-line"></div>
<span class="font-label-md text-label-md text-outline">OR</span>
<div class="divider-line"></div>
</div>
<!-- Inputs -->
<div class="flex flex-col gap-sm mb-md">
<input autocomplete="email" class="input-field" placeholder="Email address" type="email"/>
<input autocomplete="current-password" class="input-field" placeholder="Password" type="password"/>
</div>
<!-- Forgot Password -->
<div class="flex justify-end mb-lg">
<a class="font-body-md text-body-md text-primary-container font-semibold hover:opacity-80 transition-opacity" href="#">Forgot password?</a>
</div>
<!-- Submit Button -->
<button class="btn-primary mb-lg">
Log in
</button>
<!-- Spacer -->
<div class="flex-grow"></div>
<!-- Sign Up Link -->
<div class="text-center pb-8">
<span class="font-body-md text-body-md text-on-surface-variant">New here? </span>
<a class="font-body-md text-body-md text-primary-container font-bold hover:opacity-80 transition-opacity" href="#">Create account</a>
</div>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/login_to_greenlens/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

341
design/stitch-onboarding/login_to_greenlens_dark_mode/code.html Normal file
View File

@@ -0,0 +1,341 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"/>
<title>GreenLens - Login</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;family=JetBrains+Mono:wght@500&amp;family=Manrope:wght@400&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
]
}
},
},
}
</script>
<style>
body {
-webkit-tap-highlight-color: transparent;
background-color: #000; /* For framing */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.iphone-frame {
width: 100%;
max-width: 393px; /* iPhone 15 width */
height: 100vh;
max-height: 852px; /* iPhone 15 height */
background-color: #0c160d; /* surface */
position: relative;
overflow: hidden;
display: flex;
flex-col;
}
@media (min-width: 400px) {
.iphone-frame {
height: 852px;
border-radius: 54px;
box-shadow: 0 0 0 10px #000, 0 20px 40px rgba(0,0,0,0.5);
margin: 20px;
}
}
.hero-section {
height: 35%;
position: relative;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(12,22,13,0) 50%, #0c160d 100%);
}
.form-sheet {
height: 65%;
background-color: #0c160d;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
margin-top: -24px; /* Pull up to overlap hero */
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
padding: 24px 20px;
}
/* Custom Input Styling matching guidelines */
.input-field {
height: 56px;
background-color: #141e14;
border-radius: 14px;
border: 1px solid #43493a;
padding: 0 16px;
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 400;
color: #dae6d6;
width: 100%;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
border-color: #c1f388;
box-shadow: 0 0 0 2px rgba(193, 243, 136, 0.2);
}
.input-field::placeholder {
color: #8d9382;
font-weight: 400;
}
/* Button Styling */
.btn-primary {
height: 56px;
background-color: #a6d66f;
border-radius: 14px;
color: #365d00;
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: none;
cursor: pointer;
transition: transform 0.1s, opacity 0.2s;
}
.btn-primary:active {
transform: scale(0.98);
}
.btn-apple {
height: 56px;
background-color: #dae6d6;
border-radius: 14px;
color: #0c160d;
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: none;
cursor: pointer;
gap: 8px;
transition: transform 0.1s;
}
.btn-apple:active {
transform: scale(0.98);
}
.divider-line {
height: 1px;
background-color: #2d372d;
flex-grow: 1;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-gray-100 dark:bg-black">
<div class="iphone-frame flex flex-col relative">
<!-- Hero Image Area (35%) -->
<div class="hero-section">
<img alt="Botanical hero image" class="hero-image" data-alt="A lush, high-resolution close-up of a Monstera Deliciosa leaf, softly backlit by warm morning sunlight. The botanical photography is premium, airy, and calming, featuring rich vibrant greens against a slightly blurred, clean background. The aesthetic is modern minimalist with a tactile organic feel, perfectly suited for a high-end plant care app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZ52RoNjzx9-A72eQKmdGgnrltylpxouotb1w9T0WHGj_3lAW7G9L6cV6MgKptlxFZiiYT6AobZ5G7R3rvT86jhDTo5J87nsGwWrcqHnBgUOQ4enGmQ7WSStk2vV4zdWdSHCBfPSndpOUj_DRF3od8ASsFMDcA6VS02INwlqEmewyvYC1lpHPrr1ZrsHut8BAc0tWBa3GB8MKSNcQo03Da-KD06wwLK6kNBFyEHQqt77xxescSLi2CZgi_Zq5c2hNhs9Qd993DV-o"/>
<div class="hero-gradient"></div>
<div class="absolute bottom-10 left-5">
<h1 class="font-display text-display text-on-surface">Welcome back!</h1>
</div>
</div>
<!-- Form Sheet Area (65%) -->
<div class="form-sheet">
<!-- Apple Login -->
<button class="btn-apple mb-6">
<svg fill="currentColor" height="20" viewbox="0 0 24 24" width="20">
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.62-1.496 3.603-2.998 1.156-1.682 1.633-3.314 1.655-3.398-.035-.015-3.182-1.22-3.216-4.858-.026-3.04 2.484-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.693.792-1.353 2.235-1.169 3.603 1.343.104 2.61-.715 3.456-1.59z"></path>
</svg>
Continue with Apple
</button>
<!-- Divider -->
<div class="flex items-center gap-4 mb-6">
<div class="divider-line"></div>
<span class="font-label-sm text-label-sm text-outline">OR</span>
<div class="divider-line"></div>
</div>
<!-- Inputs -->
<div class="flex flex-col gap-4 mb-4">
<input autocomplete="email" class="input-field" placeholder="Email address" type="email"/>
<input autocomplete="current-password" class="input-field" placeholder="Password" type="password"/>
</div>
<!-- Forgot Password -->
<div class="flex justify-end mb-6">
<a class="font-body-md text-body-md text-primary-container font-semibold hover:opacity-80 transition-opacity" href="#">Forgot password?</a>
</div>
<!-- Submit Button -->
<button class="btn-primary mb-6">
Log in
</button>
<!-- Spacer -->
<div class="flex-grow"></div>
<!-- Sign Up Link -->
<div class="text-center pb-8">
<span class="font-body-md text-body-md text-on-surface-variant">New here? </span>
<a class="font-body-md text-body-md text-primary-container font-bold hover:opacity-80 transition-opacity" href="#">Create account</a>
</div>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/login_to_greenlens_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

178
design/stitch-onboarding/never_forget_watering/code.html Normal file
View File

@@ -0,0 +1,178 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>GreenLens - Onboarding</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@400..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px",
"sheet": "2rem"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "fontWeight": "600"}],
"body-lg": ["17px", {"lineHeight": "26px", "fontWeight": "500"}],
"label-lg": ["13px", {"lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700"}],
"body-md": ["15px", {"lineHeight": "22px", "fontWeight": "400"}],
"headline-lg": ["28px", {"lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800"}],
"display": ["34px", {"lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800"}],
"headline-md": ["22px", {"lineHeight": "28px", "fontWeight": "700"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
font-variation-settings: 'FILL' 1, 'wght' 600;
}
.fade-in-up-1 { animation: fadeInUp 0.8s ease-out 0.2s both; }
.fade-in-up-2 { animation: fadeInUp 0.8s ease-out 0.4s both; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface h-screen w-full flex flex-col overflow-hidden antialiased text-on-surface selection:bg-primary-container selection:text-on-primary">
<!-- Top 60% Image Section -->
<div class="relative h-[574px] w-full flex-shrink-0">
<div class="absolute inset-0 bg-cover bg-center w-full h-full" data-alt="A high-end, softly lit interior photography shot of a sleek wooden shelf filled with lush, healthy indoor houseplants including a vibrant Monstera and a small potted Basil. The setting is bright and airy, illuminated by natural morning sunlight creating a warm, modern aesthetic. The color palette emphasizes fresh natural greens against a soft, creamy background, fitting a premium lifestyle magazine layout." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA4uAMcvLFEJ2VgQ1TjVJ58xBi4YAa_V5XtYVfbGSpZAqonYJu56TJFY--BKMWxfBnecwSfeXvmKv9EwJKMH5eLLoIsP87j7tqZGUN4axa1C8Zk8Rvblw4tgpygjPRn634PK4nS5yHRkrxk0JXMu0nSl-yIlM4KQmbX_QuNVJaGPm-0RuY4jkSOMaIGg5UUeCuefUZeAhgp50PjNFeRqsXCj4rQPVCyP1BedEFOTx8Tvu-4PXol7WD2DqO-w8IhpHkrdzXMImLPiks')">
</div>
<!-- Gradient Overlay for contrast at the top/bottom -->
<div class="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-surface/40"></div>
<!-- Floating Reminder Chips -->
<div class="absolute inset-0 p-container-margin pt-16 flex flex-col gap-4 relative">
<!-- Chip 1 -->
<div class="fade-in-up-1 self-end mt-12 bg-surface-container-lowest/90 backdrop-blur-md px-sm py-2 rounded-full shadow-[0px_4px_20px_rgba(16,28,18,0.08)] flex items-center gap-2 border border-surface-variant max-w-max">
<div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined icon-fill text-[18px]">water_drop</span>
</div>
<div class="pr-2">
<p class="font-label-md text-label-md text-on-surface">Water Monstera</p>
<p class="font-label-md text-[10px] text-tertiary-container mt-0.5">Today</p>
</div>
</div>
<!-- Chip 2 -->
<div class="fade-in-up-2 self-start mt-8 ml-4 bg-surface-container-lowest/90 backdrop-blur-md px-sm py-2 rounded-full shadow-[0px_4px_20px_rgba(16,28,18,0.08)] flex items-center gap-2 border border-surface-variant max-w-max">
<div class="w-8 h-8 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed">
<span class="material-symbols-outlined icon-fill text-[18px]">eco</span>
</div>
<div class="pr-2">
<p class="font-label-md text-label-md text-on-surface">Fertilize Basil</p>
<p class="font-label-md text-[10px] text-on-surface-variant mt-0.5">In 3 days</p>
</div>
</div>
</div>
</div>
<!-- Bottom 40% Content Sheet -->
<div class="relative flex-1 bg-surface-container-lowest rounded-t-[32px] -mt-8 z-10 px-container-margin pt-xl pb-10 flex flex-col justify-between shadow-[0px_-8px_30px_rgba(16,28,18,0.04)]">
<!-- Text Content -->
<div class="flex flex-col items-center text-center px-4">
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-3">Never Forget Watering</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant">Smart reminders and your personal plant library keep everything on track.</p>
</div>
<!-- Pagination & Actions -->
<div class="flex flex-col items-center w-full gap-lg mt-auto">
<!-- Progress Dots -->
<div class="flex gap-2 items-center">
<div class="w-2 h-2 rounded-full bg-surface-variant transition-colors duration-300"></div>
<div class="w-2 h-2 rounded-full bg-surface-variant transition-colors duration-300"></div>
<div class="w-8 h-2 rounded-full bg-primary transition-all duration-300"></div>
</div>
<!-- Primary Button -->
<button class="w-full h-[56px] bg-primary-container hover:bg-primary text-on-primary font-label-lg text-label-lg rounded-[14px] flex items-center justify-center transition-all duration-200 active:scale-95 shadow-sm">
Continue
</button>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/never_forget_watering/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 642 KiB

235
design/stitch-onboarding/never_forget_watering_dark_mode/code.html Normal file
View File

@@ -0,0 +1,235 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>GreenLens - Onboarding</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@400..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
font-variation-settings: 'FILL' 1, 'wght' 600;
}
.fade-in-up-1 { animation: fadeInUp 0.8s ease-out 0.2s both; }
.fade-in-up-2 { animation: fadeInUp 0.8s ease-out 0.4s both; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface h-screen w-full flex flex-col overflow-hidden antialiased text-on-surface selection:bg-primary-container selection:text-on-primary">
<!-- Top 60% Image Section -->
<div class="relative h-[574px] w-full flex-shrink-0">
<div class="absolute inset-0 bg-cover bg-center w-full h-full" data-alt="A high-end, softly lit interior photography shot of a sleek wooden shelf filled with lush, healthy indoor houseplants including a vibrant Monstera and a small potted Basil. The setting is bright and airy, illuminated by natural morning sunlight creating a warm, modern aesthetic. The color palette emphasizes fresh natural greens against a soft, creamy background, fitting a premium lifestyle magazine layout." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA4uAMcvLFEJ2VgQ1TjVJ58xBi4YAa_V5XtYVfbGSpZAqonYJu56TJFY--BKMWxfBnecwSfeXvmKv9EwJKMH5eLLoIsP87j7tqZGUN4axa1C8Zk8Rvblw4tgpygjPRn634PK4nS5yHRkrxk0JXMu0nSl-yIlM4KQmbX_QuNVJaGPm-0RuY4jkSOMaIGg5UUeCuefUZeAhgp50PjNFeRqsXCj4rQPVCyP1BedEFOTx8Tvu-4PXol7WD2DqO-w8IhpHkrdzXMImLPiks')">
</div>
<!-- Gradient Overlay for contrast at the top/bottom -->
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-surface"></div>
<!-- Floating Reminder Chips -->
<div class="absolute inset-0 p-margin-mobile pt-16 flex flex-col gap-4 relative">
<!-- Chip 1 -->
<div class="fade-in-up-1 self-end mt-12 bg-surface-container-low/90 backdrop-blur-md px-3 py-2 rounded-full shadow-[0px_4px_20px_rgba(0,0,0,0.2)] flex items-center gap-2 border border-surface-variant max-w-max">
<div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined icon-fill text-[18px]">water_drop</span>
</div>
<div class="pr-2">
<p class="font-label-sm text-label-sm text-on-surface">Water Monstera</p>
<p class="font-label-sm text-[10px] text-tertiary-container mt-0.5">Today</p>
</div>
</div>
<!-- Chip 2 -->
<div class="fade-in-up-2 self-start mt-8 ml-4 bg-surface-container-low/90 backdrop-blur-md px-3 py-2 rounded-full shadow-[0px_4px_20px_rgba(0,0,0,0.2)] flex items-center gap-2 border border-surface-variant max-w-max">
<div class="w-8 h-8 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed">
<span class="material-symbols-outlined icon-fill text-[18px]">eco</span>
</div>
<div class="pr-2">
<p class="font-label-sm text-label-sm text-on-surface">Fertilize Basil</p>
<p class="font-label-sm text-[10px] text-on-surface-variant mt-0.5">In 3 days</p>
</div>
</div>
</div>
</div>
<!-- Bottom 40% Content Sheet -->
<div class="relative flex-1 bg-surface-container-lowest rounded-t-[32px] -mt-8 z-10 px-margin-mobile pt-8 pb-10 flex flex-col justify-between shadow-[0px_-8px_30px_rgba(0,0,0,0.1)]">
<!-- Text Content -->
<div class="flex flex-col items-center text-center px-4">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface mb-3">Never Forget Watering</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant">Smart reminders and your personal plant library keep everything on track.</p>
</div>
<!-- Pagination & Actions -->
<div class="flex flex-col items-center w-full gap-6 mt-auto">
<!-- Progress Dots -->
<div class="flex gap-2 items-center">
<div class="w-2 h-2 rounded-full bg-surface-variant transition-colors duration-300"></div>
<div class="w-2 h-2 rounded-full bg-surface-variant transition-colors duration-300"></div>
<div class="w-8 h-2 rounded-full bg-primary transition-all duration-300"></div>
</div>
<!-- Primary Button -->
<button class="w-full h-[56px] bg-primary-container hover:bg-primary text-on-primary-container font-label-sm text-label-sm rounded-lg flex items-center justify-center transition-all duration-200 active:scale-95 shadow-sm">
Continue
</button>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/never_forget_watering_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 629 KiB

149
design/stitch-onboarding/nocturnal_botanical/DESIGN.md Normal file
View File

@@ -0,0 +1,149 @@
---
name: Nocturnal Botanical
colors:
surface: '#0c160d'
surface-dim: '#0c160d'
surface-bright: '#313c31'
surface-container-lowest: '#071008'
surface-container-low: '#141e14'
surface-container: '#182218'
surface-container-high: '#222d22'
surface-container-highest: '#2d372d'
on-surface: '#dae6d6'
on-surface-variant: '#c3c9b6'
inverse-surface: '#dae6d6'
inverse-on-surface: '#283328'
outline: '#8d9382'
outline-variant: '#43493a'
surface-tint: '#a5d56e'
primary: '#c1f388'
on-primary: '#1e3700'
primary-container: '#a6d66f'
on-primary-container: '#365d00'
inverse-primary: '#41690c'
secondary: '#b7ccb5'
on-secondary: '#233424'
secondary-container: '#394b39'
on-secondary-container: '#a6bba4'
tertiary: '#dfe6d8'
on-tertiary: '#2c3229'
tertiary-container: '#c3cabc'
on-tertiary-container: '#4e554a'
error: '#ffb4ab'
on-error: '#690005'
error-container: '#93000a'
on-error-container: '#ffdad6'
primary-fixed: '#c0f287'
primary-fixed-dim: '#a5d56e'
on-primary-fixed: '#0f2000'
on-primary-fixed-variant: '#2e4f00'
secondary-fixed: '#d3e8d0'
secondary-fixed-dim: '#b7ccb5'
on-secondary-fixed: '#0f1f10'
on-secondary-fixed-variant: '#394b39'
tertiary-fixed: '#dee5d6'
tertiary-fixed-dim: '#c2c9bb'
on-tertiary-fixed: '#171d15'
on-tertiary-fixed-variant: '#42493e'
background: '#0c160d'
on-background: '#dae6d6'
surface-variant: '#2d372d'
typography:
display:
fontFamily: Epilogue
fontSize: 64px
fontWeight: '700'
lineHeight: '1.1'
letterSpacing: -0.02em
headline-lg:
fontFamily: Epilogue
fontSize: 40px
fontWeight: '600'
lineHeight: '1.2'
letterSpacing: -0.01em
headline-lg-mobile:
fontFamily: Epilogue
fontSize: 32px
fontWeight: '600'
lineHeight: '1.2'
headline-md:
fontFamily: Epilogue
fontSize: 28px
fontWeight: '500'
lineHeight: '1.3'
body-lg:
fontFamily: Manrope
fontSize: 18px
fontWeight: '400'
lineHeight: '1.6'
body-md:
fontFamily: Manrope
fontSize: 16px
fontWeight: '400'
lineHeight: '1.6'
label-sm:
fontFamily: JetBrains Mono
fontSize: 12px
fontWeight: '500'
lineHeight: '1.0'
letterSpacing: 0.05em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
unit: 8px
container-max: 1280px
gutter: 24px
margin-mobile: 16px
margin-desktop: 64px
---
## Brand & Style
This design system captures the essence of a moonlit conservatory, blending premium health and wellness with a sophisticated, late-night aesthetic. It targets an audience that values high-end botanical science, luxury self-care, and deep vitality.
The style is a fusion of **Minimalism** and **Glassmorphism**, utilizing deep, organic layers and sharp typography to create a sense of mystery and scientific precision. The UI should evoke a sense of calm, renewal, and premium exclusivity. Large-scale botanical photography should be treated with low-exposure and high-contrast to integrate seamlessly into the dark environment.
## Colors
The palette is rooted in deep, anaerobic greens to establish a luxurious dark mode experience.
- **Primary:** A vibrant, desaturated lime-green used for high-impact actions and essential highlights.
- **Surface Tiers:** Depth is created through subtle shifts in forest green values rather than pure grays, maintaining the botanical theme throughout the interface.
- **Typography:** Headlines utilize an off-white cream to ensure maximum legibility and a "glow" effect against the dark background, while body text uses a muted sage to reduce eye strain and establish hierarchy.
## Typography
The typography system uses a bold, geometric sans-serif for headlines to convey authority and modern style. Body text is set in a refined, highly legible sans-serif to maintain a professional and calm tone.
For technical data or botanical classifications, a monospaced font is used in all-caps to provide a "lab-certified" aesthetic. Ensure all display text has a slight negative letter-spacing to tighten the visual impact of the bold weights.
## Layout & Spacing
The layout follows a **Fluid Grid** model with generous outer margins to simulate the feeling of an editorial magazine.
- **Desktop:** 12-column grid with a 1280px max-width. Use 64px margins to allow the content to breathe.
- **Tablet:** 8-column grid with 32px margins.
- **Mobile:** 4-column grid with 16px margins.
Spacing should follow a strict 8px base unit. Use larger vertical gaps (80px+) between sections to emphasize the minimalist, premium feel.
## Elevation & Depth
Depth is achieved through **Tonal Layering** and **Backdrop Blurs**. Avoid traditional drop shadows; instead, use slightly lighter green surface colors to indicate elevation.
When an element needs to float (such as a modal or dropdown), apply a high-density background blur (20px+) to the surface and a 1px border using a low-opacity version of the Primary color (#A6D66F at 10% opacity) to define the edge. This "Inner Glow" technique replaces shadows to maintain the clean, organic feel.
## Shapes
The shape language is consistently **Rounded**, reflecting the soft, organic curves found in nature.
- Standard components (buttons, inputs) use a 0.5rem (8px) radius.
- Larger containers and cards use a 1.5rem (24px) radius to create a soft, inviting frame for botanical photography.
- Avoid sharp 90-degree angles to keep the UI feeling approachable and natural.
## Components
- **Buttons:** Primary buttons use the Primary Green background with dark charcoal text for maximum contrast. Secondary buttons use a ghost style with a 1px border.
- **Cards:** Use the Surface Container color (#1D2E1E) with no shadow. Imagery within cards should always have a subtle vignette to blend into the dark container.
- **Input Fields:** Filled style using the Surface color. The bottom border should animate to the Primary color on focus.
- **Chips/Badges:** Use a subtle tint of the primary color (15% opacity) for the background and the full-strength primary color for the text.
- **Progress Indicators:** Use thin, elegant lines. The track should be the neutral color, and the indicator should be the primary green.
- **Botanical Hero:** Full-bleed background images should have a dark gradient overlay (top to bottom) starting at 0% and ending at the background color (#0A140B) to ensure text legibility at the base of the section.

190
design/stitch-onboarding/out_of_credits/code.html Normal file
View File

@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Out of Credits</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px",
"modal": "24px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "fontWeight": "600"}],
"body-lg": ["17px", {"lineHeight": "26px", "fontWeight": "500"}],
"label-lg": ["13px", {"lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700"}],
"body-md": ["15px", {"lineHeight": "22px", "fontWeight": "400"}],
"headline-lg": ["28px", {"lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800"}],
"display": ["34px", {"lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800"}],
"headline-md": ["22px", {"lineHeight": "28px", "fontWeight": "700"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
font-variation-settings: 'FILL' 1;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background antialiased h-screen w-screen overflow-hidden flex justify-center items-center">
<!-- Mobile Frame Simulation -->
<div class="relative w-full h-full max-w-[430px] max-h-[932px] bg-black md:rounded-[48px] md:border-[8px] md:border-black overflow-hidden shadow-2xl">
<!-- Background (Blurred Camera Feed) -->
<div class="absolute inset-0 w-full h-full">
<img alt="Blurred plant background" class="w-full h-full object-cover blur-md scale-105" data-alt="A slightly blurred view of a lush, vibrant Monstera Deliciosa plant sitting in a modern terracotta pot indoors. The lighting is bright and natural, streaming from a nearby window, creating soft shadows. The overall mood is calm and botanical, fitting a premium plant care app. The focus is soft to act as a background canvas." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6czRRINu7xjGgvdD-yoc0YmUs2v89tYRPsgr4-uCdRpBWm0bqnfhTbV5KIx_KIm8yGs1AXeEQMoCV1dBUioReXPHv2-Jprro-G33clj1-lW3XLQgYg4ax6Y5Lsy_BJCVYM4uJ1kPHEi6OqGBzjV9M_jfJ3-bazQ2sIdUNJACfgRKoWOjibazJxke5zbQ9-TqG5UUJWRYzUR3UxpgCI0kqUjudZZvHlLPGuUekVZ2XwfdIrGxCip4b3roPP-1ZCFIJSdq1P06eRp8"/>
<!-- Dark Overlay for better contrast with the bottom sheet -->
<div class="absolute inset-0 bg-black/40"></div>
</div>
<!-- Top Status Bar Area (Safe Area) -->
<div class="absolute top-0 w-full h-12 z-20 flex justify-between items-center px-6 text-white">
<span class="font-label-md text-label-md">9:41</span>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[16px]">signal_cellular_4_bar</span>
<span class="material-symbols-outlined text-[16px]">wifi</span>
<span class="material-symbols-outlined text-[16px]">battery_full</span>
</div>
</div>
<!-- Bottom Sheet Modal -->
<div class="absolute bottom-0 w-full bg-surface-container-lowest rounded-t-[32px] shadow-[0px_-8px_40px_rgba(0,0,0,0.15)] flex flex-col items-center pt-4 pb-10 px-gutter transform transition-transform duration-300 translate-y-0">
<!-- Drag Handle -->
<div class="w-12 h-1.5 bg-surface-variant rounded-full mb-8"></div>
<!-- Zero Scans Icon -->
<div class="relative mb-6">
<div class="w-20 h-20 bg-secondary-container rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-on-secondary-container icon-fill">eco</span>
</div>
<!-- Badge -->
<div class="absolute -top-1 -right-1 w-8 h-8 bg-error text-on-error rounded-full flex items-center justify-center font-headline-md text-headline-md shadow-sm border-2 border-surface-container-lowest">
0
</div>
</div>
<!-- Text Content -->
<div class="text-center mb-8 px-4">
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-3">You're out of free scans</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Your 3 free scans renew on August 1. Upgrade to Pro for unlimited scanning.</p>
</div>
<!-- Primary Action -->
<button class="w-full h-[56px] bg-primary-container text-on-primary-container font-label-lg text-label-lg rounded-xl mb-4 hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-xl">workspace_premium</span>
See Pro Plans
</button>
<!-- Credit Top-ups -->
<div class="w-full mb-6">
<p class="font-label-md text-label-md text-outline mb-3 text-center uppercase tracking-wider">Or buy single credits</p>
<div class="flex justify-between gap-3">
<button class="flex-1 py-3 px-2 bg-surface-container-low border border-outline-variant rounded-xl flex flex-col items-center justify-center hover:bg-surface-container transition-colors">
<span class="font-headline-md text-headline-md text-primary">+30</span>
<span class="font-label-md text-label-md text-on-surface-variant">credits</span>
</button>
<button class="flex-1 py-3 px-2 bg-surface-container-low border border-outline-variant rounded-xl flex flex-col items-center justify-center hover:bg-surface-container transition-colors">
<span class="font-headline-md text-headline-md text-primary">+100</span>
<span class="font-label-md text-label-md text-on-surface-variant">credits</span>
</button>
<button class="flex-1 py-3 px-2 bg-surface-container-low border border-outline-variant rounded-xl flex flex-col items-center justify-center hover:bg-surface-container transition-colors relative overflow-hidden">
<!-- Best Value Badge -->
<div class="absolute top-0 w-full bg-secondary text-on-secondary text-[10px] font-bold py-0.5 text-center">BEST</div>
<span class="font-headline-md text-headline-md text-primary mt-3">+250</span>
<span class="font-label-md text-label-md text-on-surface-variant">credits</span>
</button>
</div>
</div>
<!-- Secondary Action -->
<button class="font-label-lg text-label-lg text-primary hover:text-primary-container transition-colors py-2 px-4">
Maybe later
</button>
</div>
<!-- Bottom Home Indicator Area -->
<div class="absolute bottom-2 w-full flex justify-center z-50">
<div class="w-32 h-1 bg-on-surface rounded-full opacity-50"></div>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/out_of_credits/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 226 KiB

245
design/stitch-onboarding/out_of_credits_dark_mode/code.html Normal file
View File

@@ -0,0 +1,245 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Out of Credits</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;family=Manrope:wght@400;500;600&amp;family=JetBrains+Mono:wght@500&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px",
"modal": "24px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
font-variation-settings: 'FILL' 1;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background antialiased h-screen w-screen overflow-hidden flex justify-center items-center">
<!-- Mobile Frame Simulation -->
<div class="relative w-full h-full max-w-[430px] max-h-[932px] bg-black md:rounded-[48px] md:border-[8px] md:border-black overflow-hidden shadow-2xl">
<!-- Background (Blurred Camera Feed) -->
<div class="absolute inset-0 w-full h-full">
<img alt="Blurred plant background" class="w-full h-full object-cover blur-md scale-105" data-alt="A slightly blurred view of a lush, vibrant Monstera Deliciosa plant sitting in a modern terracotta pot indoors. The lighting is bright and natural, streaming from a nearby window, creating soft shadows. The overall mood is calm and botanical, fitting a premium plant care app. The focus is soft to act as a background canvas." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6czRRINu7xjGgvdD-yoc0YmUs2v89tYRPsgr4-uCdRpBWm0bqnfhTbV5KIx_KIm8yGs1AXeEQMoCV1dBUioReXPHv2-Jprro-G33clj1-lW3XLQgYg4ax6Y5Lsy_BJCVYM4uJ1kPHEi6OqGBzjV9M_jfJ3-bazQ2sIdUNJACfgRKoWOjibazJxke5zbQ9-TqG5UUJWRYzUR3UxpgCI0kqUjudZZvHlLPGuUekVZ2XwfdIrGxCip4b3roPP-1ZCFIJSdq1P06eRp8"/>
<!-- Dark Overlay for better contrast with the bottom sheet -->
<div class="absolute inset-0 bg-black/60"></div>
</div>
<!-- Top Status Bar Area (Safe Area) -->
<div class="absolute top-0 w-full h-12 z-20 flex justify-between items-center px-6 text-white">
<span class="font-label-sm text-label-sm">9:41</span>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[16px]">signal_cellular_4_bar</span>
<span class="material-symbols-outlined text-[16px]">wifi</span>
<span class="material-symbols-outlined text-[16px]">battery_full</span>
</div>
</div>
<!-- Bottom Sheet Modal -->
<div class="absolute bottom-0 w-full bg-surface-container-lowest rounded-t-[32px] shadow-[0px_-8px_40px_rgba(0,0,0,0.15)] flex flex-col items-center pt-4 pb-10 px-gutter transform transition-transform duration-300 translate-y-0">
<!-- Drag Handle -->
<div class="w-12 h-1.5 bg-surface-variant rounded-full mb-8"></div>
<!-- Zero Scans Icon -->
<div class="relative mb-6">
<div class="w-20 h-20 bg-secondary-container rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-on-secondary-container icon-fill">eco</span>
</div>
<!-- Badge -->
<div class="absolute -top-1 -right-1 w-8 h-8 bg-error text-on-error rounded-full flex items-center justify-center font-headline-md text-headline-md shadow-sm border-2 border-surface-container-lowest">
0
</div>
</div>
<!-- Text Content -->
<div class="text-center mb-8 px-4">
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-3">You're out of free scans</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Your 3 free scans renew on August 1. Upgrade to Pro for unlimited scanning.</p>
</div>
<!-- Primary Action -->
<button class="w-full h-[56px] bg-primary-container text-on-primary-container font-body-md text-body-md font-bold rounded-xl mb-4 hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-xl">workspace_premium</span>
See Pro Plans
</button>
<!-- Credit Top-ups -->
<div class="w-full mb-6">
<p class="font-label-sm text-label-sm text-outline mb-3 text-center uppercase tracking-wider">Or buy single credits</p>
<div class="flex justify-between gap-3">
<button class="flex-1 py-3 px-2 bg-surface-container-low border border-outline-variant rounded-xl flex flex-col items-center justify-center hover:bg-surface-container transition-colors">
<span class="font-headline-md text-headline-md text-primary">+30</span>
<span class="font-label-sm text-label-sm text-on-surface-variant mt-1">credits</span>
</button>
<button class="flex-1 py-3 px-2 bg-surface-container-low border border-outline-variant rounded-xl flex flex-col items-center justify-center hover:bg-surface-container transition-colors">
<span class="font-headline-md text-headline-md text-primary">+100</span>
<span class="font-label-sm text-label-sm text-on-surface-variant mt-1">credits</span>
</button>
<button class="flex-1 py-3 px-2 bg-surface-container-low border border-outline-variant rounded-xl flex flex-col items-center justify-center hover:bg-surface-container transition-colors relative overflow-hidden">
<!-- Best Value Badge -->
<div class="absolute top-0 w-full bg-secondary text-on-secondary text-[10px] font-bold py-0.5 text-center">BEST</div>
<span class="font-headline-md text-headline-md text-primary mt-3">+250</span>
<span class="font-label-sm text-label-sm text-on-surface-variant mt-1">credits</span>
</button>
</div>
</div>
<!-- Secondary Action -->
<button class="font-body-md text-body-md font-bold text-primary hover:text-primary-container transition-colors py-2 px-4">
Maybe later
</button>
</div>
<!-- Bottom Home Indicator Area -->
<div class="absolute bottom-2 w-full flex justify-center z-50">
<div class="w-32 h-1 bg-on-surface rounded-full opacity-50"></div>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/out_of_credits_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

227
design/stitch-onboarding/personalization_question/code.html Normal file
View File

@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html class="h-full" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/>
<title>GreenLens - Onboarding Plant Count</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "fontWeight": "600"}],
"body-lg": ["17px", {"lineHeight": "26px", "fontWeight": "500"}],
"label-lg": ["13px", {"lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700"}],
"body-md": ["15px", {"lineHeight": "22px", "fontWeight": "400"}],
"headline-lg": ["28px", {"lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800"}],
"display": ["34px", {"lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800"}],
"headline-md": ["22px", {"lineHeight": "28px", "fontWeight": "700"}]
}
}
}
}
</script>
<style>
body {
background-color: #FBFAF3; /* Enforced from style guidance level 0 */
-webkit-tap-highlight-color: transparent;
}
/* Custom styles for precise matching */
.card-shadow {
box-shadow: 0px 4px 20px rgba(16, 28, 18, 0.06);
}
.progress-track {
background-color: #E6EADF;
}
.progress-fill {
background-color: #A6D66F;
width: 40%;
}
.option-card {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.option-card:active {
transform: scale(0.98);
}
.selected-card {
border-color: #437824;
background-color: rgba(166, 214, 111, 0.15); /* Tint derived from #A6D66F */
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="h-full flex justify-center bg-[#FBFAF3] font-body-md text-on-surface antialiased">
<!-- iPhone 15 Frame Simulator -->
<div class="relative w-full max-w-[393px] h-[852px] bg-[#FBFAF3] sm:rounded-[3rem] sm:shadow-2xl sm:overflow-hidden sm:my-8 flex flex-col">
<!-- Status Bar Area (Safe Area Top) -->
<div class="h-12 w-full shrink-0"></div>
<!-- Top Navigation Area -->
<div class="px-container-margin pt-2 pb-4 flex items-center shrink-0 relative">
<button aria-label="Go back" class="w-10 h-10 flex items-center justify-center rounded-full bg-surface-container-lowest card-shadow active:scale-95 transition-transform text-primary absolute left-container-margin">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">arrow_back</span>
</button>
<div class="w-full flex justify-center">
<div class="w-24 h-2 rounded-full progress-track overflow-hidden">
<div class="h-full rounded-full progress-fill"></div>
</div>
</div>
</div>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col px-container-margin overflow-y-auto pb-24 pt-4">
<!-- Header Text -->
<div class="text-center mb-xl">
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-xs">
How many plants do you have?
</h1>
<p class="font-body-md text-body-md text-on-surface-variant px-sm">
This helps us personalize your care plan.
</p>
</div>
<!-- Options List -->
<div class="flex flex-col gap-sm">
<!-- Option 1 -->
<button class="option-card w-full text-left bg-surface-container-lowest card-shadow rounded-[16px] p-lg border-2 border-transparent flex items-center gap-md">
<span class="text-[28px] leading-none select-none">🌱</span>
<span class="font-body-lg text-body-lg text-on-surface">Just starting (1-3)</span>
</button>
<!-- Option 2 -->
<button class="option-card w-full text-left bg-surface-container-lowest card-shadow rounded-[16px] p-lg border-2 border-transparent flex items-center gap-md">
<span class="text-[28px] leading-none select-none">🪴</span>
<span class="font-body-lg text-body-lg text-on-surface">A few (4-10)</span>
</button>
<!-- Option 3 (Selected) -->
<button class="option-card w-full text-left card-shadow rounded-[16px] p-lg border-2 flex items-center gap-md selected-card">
<span class="text-[28px] leading-none select-none">🌿</span>
<span class="font-body-lg text-body-lg text-primary-container font-bold">Quite a jungle (11-25)</span>
</button>
<!-- Option 4 -->
<button class="option-card w-full text-left bg-surface-container-lowest card-shadow rounded-[16px] p-lg border-2 border-transparent flex items-center gap-md">
<span class="text-[28px] leading-none select-none">🌳</span>
<span class="font-body-lg text-body-lg text-on-surface">Full jungle (25+)</span>
</button>
</div>
<div class="flex-1 min-h-[32px]"></div>
<!-- Floating Decorative Element (Abstract Blur to keep it visually interesting per styling guidelines) -->
<div class="absolute bottom-32 -right-16 w-64 h-64 bg-tertiary-fixed-dim/20 rounded-full blur-[60px] pointer-events-none z-0"></div>
</main>
<!-- Bottom Action Area -->
<div class="px-container-margin pb-10 pt-4 bg-[#FBFAF3]/90 backdrop-blur-md shrink-0 relative z-10 w-full rounded-b-[3rem]">
<button class="w-full h-[56px] bg-primary-container text-on-primary rounded-[14px] font-label-lg text-label-lg active:scale-98 transition-transform shadow-[0px_8px_16px_rgba(67,120,36,0.2)] flex items-center justify-center">
Continue
</button>
</div>
</div>
<script>
// Simple JS for interaction demonstration
document.querySelectorAll('.option-card').forEach(card => {
card.addEventListener('click', function() {
// Remove selected class from all
document.querySelectorAll('.option-card').forEach(c => {
c.classList.remove('selected-card');
c.classList.add('bg-surface-container-lowest', 'border-transparent');
c.querySelector('span:last-child').classList.remove('text-primary-container', 'font-bold');
c.querySelector('span:last-child').classList.add('text-on-surface');
});
// Add to clicked
this.classList.add('selected-card');
this.classList.remove('bg-surface-container-lowest', 'border-transparent');
let textSpan = this.querySelector('span:last-child');
textSpan.classList.remove('text-on-surface');
textSpan.classList.add('text-primary-container', 'font-bold');
});
});
</script>
</body></html>

BIN
design/stitch-onboarding/personalization_question/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

291
design/stitch-onboarding/personalization_question_dark_mode/code.html Normal file
View File

@@ -0,0 +1,291 @@
<!DOCTYPE html>
<html class="h-full dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/>
<title>GreenLens - Onboarding Plant Count</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;family=JetBrains+Mono:wght@500&amp;family=Manrope:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px",
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
],
"label-lg": ["JetBrains Mono"]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"label-lg": ["14px", {"lineHeight": "1.4", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
body {
background-color: #0c160d; /* Enforced dark mode background */
-webkit-tap-highlight-color: transparent;
}
/* Custom styles for precise matching */
.card-shadow {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
}
.progress-track {
background-color: #222d22;
}
.progress-fill {
background-color: #c1f388;
width: 40%;
}
.option-card {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.option-card:active {
transform: scale(0.98);
}
.selected-card {
border-color: #c1f388;
background-color: rgba(193, 243, 136, 0.15); /* Tint derived from #c1f388 */
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="h-full flex justify-center bg-background font-body-md text-on-surface antialiased">
<!-- iPhone 15 Frame Simulator -->
<div class="relative w-full max-w-[393px] h-[852px] bg-background sm:rounded-[3rem] sm:shadow-2xl sm:overflow-hidden sm:my-8 flex flex-col">
<!-- Status Bar Area (Safe Area Top) -->
<div class="h-12 w-full shrink-0"></div>
<!-- Top Navigation Area -->
<div class="px-container-margin pt-2 pb-4 flex items-center shrink-0 relative">
<button aria-label="Go back" class="w-10 h-10 flex items-center justify-center rounded-full bg-surface-container card-shadow active:scale-95 transition-transform text-primary absolute left-container-margin">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">arrow_back</span>
</button>
<div class="w-full flex justify-center">
<div class="w-24 h-2 rounded-full progress-track overflow-hidden">
<div class="h-full rounded-full progress-fill"></div>
</div>
</div>
</div>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col px-container-margin overflow-y-auto pb-24 pt-4">
<!-- Header Text -->
<div class="text-center mb-xl">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface mb-xs">
How many plants do you have?
</h1>
<p class="font-body-md text-body-md text-on-surface-variant px-sm">
This helps us personalize your care plan.
</p>
</div>
<!-- Options List -->
<div class="flex flex-col gap-sm">
<!-- Option 1 -->
<button class="option-card w-full text-left bg-surface-container card-shadow rounded-[16px] p-lg border-2 border-transparent flex items-center gap-md">
<span class="text-[28px] leading-none select-none">🌱</span>
<span class="font-body-lg text-body-lg text-on-surface">Just starting (1-3)</span>
</button>
<!-- Option 2 -->
<button class="option-card w-full text-left bg-surface-container card-shadow rounded-[16px] p-lg border-2 border-transparent flex items-center gap-md">
<span class="text-[28px] leading-none select-none">🪴</span>
<span class="font-body-lg text-body-lg text-on-surface">A few (4-10)</span>
</button>
<!-- Option 3 (Selected) -->
<button class="option-card w-full text-left card-shadow rounded-[16px] p-lg border-2 flex items-center gap-md selected-card">
<span class="text-[28px] leading-none select-none">🌿</span>
<span class="font-body-lg text-body-lg text-primary font-bold">Quite a jungle (11-25)</span>
</button>
<!-- Option 4 -->
<button class="option-card w-full text-left bg-surface-container card-shadow rounded-[16px] p-lg border-2 border-transparent flex items-center gap-md">
<span class="text-[28px] leading-none select-none">🌳</span>
<span class="font-body-lg text-body-lg text-on-surface">Full jungle (25+)</span>
</button>
</div>
<div class="flex-1 min-h-[32px]"></div>
<!-- Floating Decorative Element (Abstract Blur to keep it visually interesting per styling guidelines) -->
<div class="absolute bottom-32 -right-16 w-64 h-64 bg-primary/10 rounded-full blur-[60px] pointer-events-none z-0"></div>
</main>
<!-- Bottom Action Area -->
<div class="px-container-margin pb-10 pt-4 bg-background/90 backdrop-blur-md shrink-0 relative z-10 w-full rounded-b-[3rem]">
<button class="w-full h-[56px] bg-primary text-on-primary rounded-[14px] font-label-lg text-label-lg active:scale-98 transition-transform shadow-[0px_8px_16px_rgba(193,243,136,0.1)] flex items-center justify-center">
Continue
</button>
</div>
</div>
<script>
// Simple JS for interaction demonstration
document.querySelectorAll('.option-card').forEach(card => {
card.addEventListener('click', function() {
// Remove selected class from all
document.querySelectorAll('.option-card').forEach(c => {
c.classList.remove('selected-card');
c.classList.add('bg-surface-container', 'border-transparent');
c.querySelector('span:last-child').classList.remove('text-primary', 'font-bold');
c.querySelector('span:last-child').classList.add('text-on-surface');
});
// Add to clicked
this.classList.add('selected-card');
this.classList.remove('bg-surface-container', 'border-transparent');
let textSpan = this.querySelector('span:last-child');
textSpan.classList.remove('text-on-surface');
textSpan.classList.add('text-primary', 'font-bold');
});
});
</script>
</body></html>

BIN
design/stitch-onboarding/personalization_question_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

213
design/stitch-onboarding/personalizing_your_plan/code.html Normal file
View File

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>GreenLens - Progress</title>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", { "lineHeight": "16px", "fontWeight": "600" }],
"body-lg": ["17px", { "lineHeight": "26px", "fontWeight": "500" }],
"label-lg": ["13px", { "lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700" }],
"body-md": ["15px", { "lineHeight": "22px", "fontWeight": "400" }],
"headline-lg": ["28px", { "lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800" }],
"display": ["48px", { "lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "800" }],
"headline-md": ["22px", { "lineHeight": "28px", "fontWeight": "700" }]
}
}
}
}
</script>
<style>
/* Custom animations to enhance the "Gentle Precision" feel */
@keyframes subtle-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.02); opacity: 0.95; }
}
.animate-subtle-pulse {
animation: subtle-pulse 3s ease-in-out infinite;
}
@keyframes float-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-float-up {
animation: float-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface text-on-surface antialiased min-h-screen flex flex-col font-sans overflow-x-hidden selection:bg-primary-container selection:text-on-primary-container">
<!-- Main Canvas Content -->
<main class="flex-1 flex flex-col px-gutter pt-16 pb-12 w-full max-w-md mx-auto relative h-screen max-h-[900px]">
<!-- Top Section: Progress Display -->
<section class="flex flex-col items-center mt-4 mb-12 animate-float-up" style="animation-delay: 0.1s;">
<div class="animate-subtle-pulse flex flex-col items-center">
<h1 class="font-display text-display text-primary-container mb-8">73%</h1>
<div class="relative w-40 h-40 flex items-center justify-center mb-8">
<!-- Progress Ring Background -->
<svg class="absolute inset-0 w-full h-full transform -rotate-90" viewbox="0 0 120 120">
<circle class="stroke-surface-variant" cx="60" cy="60" fill="none" r="54" stroke-width="6"></circle>
<!-- Progress Ring Active (73% of 339.29 circumference = 247.6) -->
<circle class="stroke-primary-container transition-all duration-[2000ms] ease-out" cx="60" cy="60" fill="none" r="54" stroke-dasharray="339.29" stroke-dashoffset="91.6" stroke-linecap="round" stroke-width="6"></circle>
</svg>
<!-- Center Image -->
<div class="w-28 h-28 rounded-full overflow-hidden shadow-[0px_4px_20px_rgba(16,28,18,0.06)] relative z-10 border-4 border-surface-container-lowest bg-surface-container-low">
<img class="w-full h-full object-cover" data-alt="A beautifully lit, highly detailed macro photograph of a fresh, healthy Monstera Deliciosa leaf node emerging. The setting is bright, featuring soft, diffused natural daylight synonymous with premium lifestyle indoor plant photography. The background is a clean, minimal cream wall softly out of focus, allowing the lush green textures to command attention." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD8Ij49YnpXP0wrHVlraHqQPLHbq5nMP0HJHT-VhpkShra9HVYXZZa0OupKWUhBvR9N4-GIVlLrO55A41z_t3WZQBIupmEkYcnZj9OTKrDeZ5ZAwm1ONH4ZZila5Pww-Njw8Hn0oFBgAtnUZQb0VQi70qgX6xtUzNCLyIUX3OQopUcYBAfEMVKyPExSWfr1X2Kj4YWyP57xnqG5_672eJ2OzoAnrZPMDSBCLx0gqvmmBLurrxksL5O0fTM2afAEQOy-fReEwPLZCM"/>
</div>
</div>
</div>
<!-- Status Pill -->
<div class="bg-surface-variant/60 backdrop-blur-md rounded-full px-5 py-2.5 flex items-center gap-3 shadow-sm">
<span class="material-symbols-outlined text-on-surface-variant text-[18px] animate-spin" style="animation-duration: 3s;">sync</span>
<span class="font-label-lg text-label-lg text-on-surface-variant">Personalizing your care plan…</span>
</div>
</section>
<!-- Middle Section: Vertical Checklist -->
<section class="flex-1 w-full max-w-[280px] mx-auto flex flex-col justify-center gap-5 animate-float-up" style="animation-delay: 0.3s;">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary-container text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="font-body-md text-body-md text-on-surface">Analyzing your answers</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary-container text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="font-body-md text-body-md text-on-surface">Building your care plan</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary-container text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="font-body-md text-body-md text-on-surface">Preparing your scan credits</span>
</div>
<div class="flex items-center gap-4">
<div class="relative flex items-center justify-center w-6 h-6">
<span class="material-symbols-outlined text-outline-variant text-[24px] absolute">radio_button_unchecked</span>
<span class="w-1.5 h-1.5 bg-outline-variant rounded-full animate-pulse"></span>
</div>
<span class="font-body-md text-body-md text-on-surface-variant opacity-80">Finalizing your plan</span>
</div>
</section>
<!-- Bottom Section: Social Proof & Badge -->
<section class="mt-auto flex flex-col items-center animate-float-up w-full" style="animation-delay: 0.5s;">
<!-- Overlapping Testimonial Cards -->
<div class="relative w-full h-[140px] mb-6">
<!-- Background Card (Muted) -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[90%] bg-surface-container-highest rounded-xl h-24 shadow-[0px_4px_20px_rgba(16,28,18,0.06)] transform -translate-y-3 scale-95 opacity-50 z-0"></div>
<!-- Foreground Card (Active) -->
<div class="absolute top-0 left-0 w-full bg-surface-container-lowest rounded-xl shadow-[0px_8px_30px_rgba(16,28,18,0.08)] p-4 flex flex-col gap-2 z-10 border border-surface-variant/50">
<div class="flex items-center gap-3 mb-1">
<img class="w-10 h-10 rounded-full object-cover bg-surface-variant" data-alt="A bright, professional headshot of a smiling woman in her early thirties, bathed in warm, soft natural sunlight. The aesthetic is clean, approachable, and highly polished, fitting a premium digital service. She is framed intimately against a gently blurred background of subtle green foliage." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCwP_g6-fpeohdJjnhG1R_yA-RypkiO6-NENOC640_fORV6ygSF9wlJvjXnQwnUzWnNyLN3AnOErHziNl_el3scfiHFQ0MjcJbOruxYdE0bhxkrPIGHNrH4Dl0nS0WxfeiNPSSiZpuSMM4D-0ZnTZRd5hR6-DnM04dT_mc3beAjFEYeedIrFrSKhi5IsZvK8gTu0x6k5UN627ijnpIaO3WBSeJ1waNUMaZ2OD_tj2pbPohgmE92SunvsOw8qVTP8zPPm79KJgIuniY"/>
<div class="flex flex-col">
<span class="font-label-lg text-label-lg text-on-surface flex items-center gap-1">Elena R. <span class="text-lg">🇺🇸</span></span>
<div class="flex text-tertiary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
</div>
</div>
</div>
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed line-clamp-2 italic">
"GreenLens completely saved my Fiddle Leaf Fig. The daily routines feel incredibly precise and easy."
</p>
</div>
</div>
<!-- Store Badge -->
<div class="flex items-center justify-center gap-2 text-primary-container bg-surface-container-low px-4 py-2 rounded-full border border-primary-container/20">
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
<span class="font-label-lg text-label-lg uppercase tracking-widest text-[11px]">4.8 App Store Rating</span>
</div>
</section>
</main>
</body></html>

BIN
design/stitch-onboarding/personalizing_your_plan/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

275
design/stitch-onboarding/personalizing_your_plan_dark_mode/code.html Normal file
View File

@@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>GreenLens - Progress</title>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;family=JetBrains+Mono:wght@500&amp;family=Manrope:wght@400&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px",
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
]
}
},
},
}
</script>
<style>
/* Custom animations to enhance the "Gentle Precision" feel */
@keyframes subtle-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.02); opacity: 0.95; }
}
.animate-subtle-pulse {
animation: subtle-pulse 3s ease-in-out infinite;
}
@keyframes float-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-float-up {
animation: float-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface text-on-surface antialiased min-h-screen flex flex-col font-sans overflow-x-hidden selection:bg-primary selection:text-on-primary">
<!-- Main Canvas Content -->
<main class="flex-1 flex flex-col px-gutter pt-16 pb-12 w-full max-w-md mx-auto relative h-screen max-h-[900px]">
<!-- Top Section: Progress Display -->
<section class="flex flex-col items-center mt-4 mb-12 animate-float-up" style="animation-delay: 0.1s;">
<div class="animate-subtle-pulse flex flex-col items-center">
<h1 class="font-display text-display text-primary mb-8">73%</h1>
<div class="relative w-40 h-40 flex items-center justify-center mb-8">
<!-- Progress Ring Background -->
<svg class="absolute inset-0 w-full h-full transform -rotate-90" viewbox="0 0 120 120">
<circle class="stroke-surface-variant" cx="60" cy="60" fill="none" r="54" stroke-width="6"></circle>
<!-- Progress Ring Active (73% of 339.29 circumference = 247.6) -->
<circle class="stroke-primary transition-all duration-[2000ms] ease-out" cx="60" cy="60" fill="none" r="54" stroke-dasharray="339.29" stroke-dashoffset="91.6" stroke-linecap="round" stroke-width="6"></circle>
</svg>
<!-- Center Image -->
<div class="w-28 h-28 rounded-full overflow-hidden shadow-[0px_4px_20px_rgba(16,28,18,0.06)] relative z-10 border-4 border-surface-container-lowest bg-surface-container-low">
<img class="w-full h-full object-cover" data-alt="A beautifully lit, highly detailed macro photograph of a fresh, healthy Monstera Deliciosa leaf node emerging. The setting is bright, featuring soft, diffused natural daylight synonymous with premium lifestyle indoor plant photography. The background is a clean, minimal cream wall softly out of focus, allowing the lush green textures to command attention." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD8Ij49YnpXP0wrHVlraHqQPLHbq5nMP0HJHT-VhpkShra9HVYXZZa0OupKWUhBvR9N4-GIVlLrO55A41z_t3WZQBIupmEkYcnZj9OTKrDeZ5ZAwm1ONH4ZZila5Pww-Njw8Hn0oFBgAtnUZQb0VQi70qgX6xtUzNCLyIUX3OQopUcYBAfEMVKyPExSWfr1X2Kj4YWyP57xnqG5_672eJ2OzoAnrZPMDSBCLx0gqvmmBLurrxksL5O0fTM2afAEQOy-fReEwPLZCM"/>
</div>
</div>
</div>
<!-- Status Pill -->
<div class="bg-surface-variant/60 backdrop-blur-md rounded-full px-5 py-2.5 flex items-center gap-3 shadow-sm">
<span class="material-symbols-outlined text-on-surface-variant text-[18px] animate-spin" style="animation-duration: 3s;">sync</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">Personalizing your care plan…</span>
</div>
</section>
<!-- Middle Section: Vertical Checklist -->
<section class="flex-1 w-full max-w-[280px] mx-auto flex flex-col justify-center gap-5 animate-float-up" style="animation-delay: 0.3s;">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="font-body-md text-body-md text-on-surface">Analyzing your answers</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="font-body-md text-body-md text-on-surface">Building your care plan</span>
</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary text-[24px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="font-body-md text-body-md text-on-surface">Preparing your scan credits</span>
</div>
<div class="flex items-center gap-4">
<div class="relative flex items-center justify-center w-6 h-6">
<span class="material-symbols-outlined text-outline-variant text-[24px] absolute">radio_button_unchecked</span>
<span class="w-1.5 h-1.5 bg-outline-variant rounded-full animate-pulse"></span>
</div>
<span class="font-body-md text-body-md text-on-surface-variant opacity-80">Finalizing your plan</span>
</div>
</section>
<!-- Bottom Section: Social Proof & Badge -->
<section class="mt-auto flex flex-col items-center animate-float-up w-full" style="animation-delay: 0.5s;">
<!-- Overlapping Testimonial Cards -->
<div class="relative w-full h-[140px] mb-6">
<!-- Background Card (Muted) -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[90%] bg-surface-container-highest rounded-xl h-24 shadow-[0px_4px_20px_rgba(16,28,18,0.06)] transform -translate-y-3 scale-95 opacity-50 z-0"></div>
<!-- Foreground Card (Active) -->
<div class="absolute top-0 left-0 w-full bg-surface-container-lowest rounded-xl shadow-[0px_8px_30px_rgba(16,28,18,0.08)] p-4 flex flex-col gap-2 z-10 border border-surface-variant/50">
<div class="flex items-center gap-3 mb-1">
<img class="w-10 h-10 rounded-full object-cover bg-surface-variant" data-alt="A bright, professional headshot of a smiling woman in her early thirties, bathed in warm, soft natural sunlight. The aesthetic is clean, approachable, and highly polished, fitting a premium digital service. She is framed intimately against a gently blurred background of subtle green foliage." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCwP_g6-fpeohdJjnhG1R_yA-RypkiO6-NENOC640_fORV6ygSF9wlJvjXnQwnUzWnNyLN3AnOErHziNl_el3scfiHFQ0MjcJbOruxYdE0bhxkrPIGHNrH4Dl0nS0WxfeiNPSSiZpuSMM4D-0ZnTZRd5hR6-DnM04dT_mc3beAjFEYeedIrFrSKhi5IsZvK8gTu0x6k5UN627ijnpIaO3WBSeJ1waNUMaZ2OD_tj2pbPohgmE92SunvsOw8qVTP8zPPm79KJgIuniY"/>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm text-on-surface flex items-center gap-1">Elena R. <span class="text-lg">🇺🇸</span></span>
<div class="flex text-tertiary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
</div>
</div>
</div>
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed line-clamp-2 italic">
"GreenLens completely saved my Fiddle Leaf Fig. The daily routines feel incredibly precise and easy."
</p>
</div>
</div>
<!-- Store Badge -->
<div class="flex items-center justify-center gap-2 text-primary bg-surface-container-low px-4 py-2 rounded-full border border-primary/20">
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
<span class="font-label-sm text-label-sm uppercase tracking-widest">4.8 App Store Rating</span>
</div>
</section>
</main>
</body></html>

BIN
design/stitch-onboarding/personalizing_your_plan_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 KiB

155
design/stitch-onboarding/scan_any_plant/code.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>GreenLens - Onboarding</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", { "lineHeight": "16px", "fontWeight": "600" }],
"body-lg": ["17px", { "lineHeight": "26px", "fontWeight": "500" }],
"label-lg": ["13px", { "lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700" }],
"body-md": ["15px", { "lineHeight": "22px", "fontWeight": "400" }],
"headline-lg": ["28px", { "lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800" }],
"display": ["34px", { "lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800" }],
"headline-md": ["22px", { "lineHeight": "28px", "fontWeight": "700" }]
}
}
}
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface-dim flex items-center justify-center min-h-screen">
<div class="w-full max-w-md h-[884px] md:h-[844px] md:max-h-[839px] bg-background md:rounded-[40px] md:shadow-2xl relative overflow-hidden flex flex-col mx-auto border-0 md:border-[8px] md:border-black">
<!-- Top 60% Image Area -->
<div class="relative flex-grow h-[60%] w-full" data-alt="A high-resolution, bright, natural lighting photograph of a smartphone held in front of a lush, large green Monstera leaf. The style is premium minimalist lifestyle photography, emphasizing crisp details and fresh greenery. Soft cream and white blurred background behind the plant. A clear focus on the phone screen framing the vibrant leaf." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAUZPCiN64BDhHkPH2NIYPISrIugWbCp_EkjOkaMh3fiNS7ryUPfGspVCfH2uBadQkMHwjferaQCp08IRybFzVTWEwlamSXufp2jVmvwmyX95-xy2emX1T_vA22-KJ47FEjXNZXdiUrcXXe2IcpYPEJKr3kXqYMWWUcIscNC5ML8XENdrXkQHq9gi9oIewApl-N0tazA5Go8VUUuz3bl_OQKf74TXzd38fEAw7m0V4OMkx5rJhirV4ngl-afOe9exyyM2kmWWqfACg'); background-size: cover; background-position: center;">
<!-- Scan Overlay Frame -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none pb-12">
<div class="w-56 h-56 border-2 border-primary-fixed/50 rounded-2xl relative shadow-[0_0_40px_rgba(43,95,11,0.2)]">
<!-- Corner Accents -->
<div class="absolute -top-[2px] -left-[2px] w-8 h-8 border-t-[3px] border-l-[3px] border-primary-fixed rounded-tl-2xl"></div>
<div class="absolute -top-[2px] -right-[2px] w-8 h-8 border-t-[3px] border-r-[3px] border-primary-fixed rounded-tr-2xl"></div>
<div class="absolute -bottom-[2px] -left-[2px] w-8 h-8 border-b-[3px] border-l-[3px] border-primary-fixed rounded-bl-2xl"></div>
<div class="absolute -bottom-[2px] -right-[2px] w-8 h-8 border-b-[3px] border-r-[3px] border-primary-fixed rounded-br-2xl"></div>
<!-- Scanning line animation simulation -->
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-primary-fixed shadow-[0_0_8px_rgba(182,243,144,0.8)] opacity-70"></div>
</div>
</div>
<!-- Result Chip -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 translate-y-[140px] bg-surface-container-lowest/90 backdrop-blur-xl px-4 py-2.5 rounded-full shadow-[0px_8px_24px_rgba(16,28,18,0.12)] flex items-center space-x-2.5 border border-surface-variant">
<span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">temp_preferences_eco</span>
<span class="font-label-md text-label-md text-on-surface">Monstera identified · 98%</span>
</div>
</div>
<!-- Bottom 40% Sheet -->
<div class="relative h-[40%] bg-surface-container-lowest rounded-t-[32px] w-full px-gutter py-8 flex flex-col justify-between z-10 shadow-[0px_-8px_32px_rgba(16,28,18,0.06)] -mt-8">
<!-- Text Content -->
<div class="flex flex-col space-y-4 text-center mt-4">
<h1 class="font-display text-display text-on-surface">Scan Any Plant</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-[300px] mx-auto">
Point your camera at a plant and GreenLens identifies it in seconds.
</p>
</div>
<!-- Bottom Controls -->
<div class="flex flex-col space-y-8 items-center w-full pb-6">
<!-- Progress Dots -->
<div class="flex space-x-2.5">
<div class="w-8 h-2 bg-primary rounded-full transition-all duration-300"></div>
<div class="w-2 h-2 bg-surface-variant rounded-full transition-all duration-300"></div>
<div class="w-2 h-2 bg-surface-variant rounded-full transition-all duration-300"></div>
</div>
<!-- Action Button -->
<button class="w-full h-[56px] bg-primary-container text-on-primary rounded-[14px] font-label-lg text-label-lg flex items-center justify-center hover:opacity-90 active:scale-95 transition-all shadow-sm">
CONTINUE
</button>
</div>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/scan_any_plant/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 613 KiB

210
design/stitch-onboarding/scan_any_plant_dark_mode/code.html Normal file
View File

@@ -0,0 +1,210 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>GreenLens - Onboarding</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;family=JetBrains+Mono:wght@500&amp;family=Manrope:wght@400&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
]
}
},
},
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface-dim flex items-center justify-center min-h-screen">
<div class="w-full max-w-md h-[884px] md:h-[844px] md:max-h-[839px] bg-background md:rounded-[40px] md:shadow-2xl relative overflow-hidden flex flex-col mx-auto border-0 md:border-[8px] md:border-black">
<!-- Top 60% Image Area -->
<div class="relative flex-grow h-[60%] w-full" data-alt="A high-resolution, bright, natural lighting photograph of a smartphone held in front of a lush, large green Monstera leaf. The style is premium minimalist lifestyle photography, emphasizing crisp details and fresh greenery. Soft cream and white blurred background behind the plant. A clear focus on the phone screen framing the vibrant leaf." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAUZPCiN64BDhHkPH2NIYPISrIugWbCp_EkjOkaMh3fiNS7ryUPfGspVCfH2uBadQkMHwjferaQCp08IRybFzVTWEwlamSXufp2jVmvwmyX95-xy2emX1T_vA22-KJ47FEjXNZXdiUrcXXe2IcpYPEJKr3kXqYMWWUcIscNC5ML8XENdrXkQHq9gi9oIewApl-N0tazA5Go8VUUuz3bl_OQKf74TXzd38fEAw7m0V4OMkx5rJhirV4ngl-afOe9exyyM2kmWWqfACg'); background-size: cover; background-position: center;">
<!-- Scan Overlay Frame -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none pb-12">
<div class="w-56 h-56 border-2 border-primary-fixed/50 rounded-2xl relative shadow-[0_0_40px_rgba(43,95,11,0.2)]">
<!-- Corner Accents -->
<div class="absolute -top-[2px] -left-[2px] w-8 h-8 border-t-[3px] border-l-[3px] border-primary-fixed rounded-tl-2xl"></div>
<div class="absolute -top-[2px] -right-[2px] w-8 h-8 border-t-[3px] border-r-[3px] border-primary-fixed rounded-tr-2xl"></div>
<div class="absolute -bottom-[2px] -left-[2px] w-8 h-8 border-b-[3px] border-l-[3px] border-primary-fixed rounded-bl-2xl"></div>
<div class="absolute -bottom-[2px] -right-[2px] w-8 h-8 border-b-[3px] border-r-[3px] border-primary-fixed rounded-br-2xl"></div>
<!-- Scanning line animation simulation -->
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-primary-fixed shadow-[0_0_8px_rgba(182,243,144,0.8)] opacity-70"></div>
</div>
</div>
<!-- Result Chip -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 translate-y-[140px] bg-surface-container-lowest/90 backdrop-blur-xl px-4 py-2.5 rounded-full shadow-[0px_8px_24px_rgba(16,28,18,0.12)] flex items-center space-x-2.5 border border-surface-variant">
<span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">temp_preferences_eco</span>
<span class="font-label-sm text-label-sm text-on-surface uppercase tracking-wider">Monstera identified · 98%</span>
</div>
</div>
<!-- Bottom 40% Sheet -->
<div class="relative h-[40%] bg-surface-container-lowest rounded-t-[32px] w-full px-gutter py-8 flex flex-col justify-between z-10 shadow-[0px_-8px_32px_rgba(16,28,18,0.06)] -mt-8">
<!-- Text Content -->
<div class="flex flex-col space-y-4 text-center mt-4">
<h1 class="font-display text-headline-lg-mobile md:text-display text-on-surface">Scan Any Plant</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-[300px] mx-auto">
Point your camera at a plant and GreenLens identifies it in seconds.
</p>
</div>
<!-- Bottom Controls -->
<div class="flex flex-col space-y-8 items-center w-full pb-6">
<!-- Progress Dots -->
<div class="flex space-x-2.5">
<div class="w-8 h-2 bg-primary rounded-full transition-all duration-300"></div>
<div class="w-2 h-2 bg-surface-variant rounded-full transition-all duration-300"></div>
<div class="w-2 h-2 bg-surface-variant rounded-full transition-all duration-300"></div>
</div>
<!-- Action Button -->
<button class="w-full h-[56px] bg-primary-container text-on-primary-container rounded-[14px] font-body-md text-body-md font-bold uppercase tracking-widest flex items-center justify-center hover:opacity-90 active:scale-95 transition-all shadow-sm">
CONTINUE
</button>
</div>
</div>
</div>
</body></html>

BIN
design/stitch-onboarding/scan_any_plant_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 KiB

166
design/stitch-onboarding/sign_up_for_greenlens/code.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>GreenLens - Sign Up</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"4xl": "2rem",
"full": "9999px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "20px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", { "lineHeight": "16px", "fontWeight": "600" }],
"body-lg": ["17px", { "lineHeight": "26px", "fontWeight": "500" }],
"label-lg": ["13px", { "lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700" }],
"body-md": ["15px", { "lineHeight": "22px", "fontWeight": "400" }],
"headline-lg": ["28px", { "lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800" }],
"display": ["34px", { "lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800" }],
"headline-md": ["22px", { "lineHeight": "28px", "fontWeight": "700" }]
}
}
}
}
</script>
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; }
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-[#111111] flex items-center justify-center min-h-screen">
<!-- iPhone 15 Frame -->
<main class="w-full h-[884px] md:h-[852px] md:w-[393px] bg-surface relative overflow-hidden md:rounded-[55px] shadow-2xl md:border-[8px] md:border-black">
<!-- Top 45% - Botanical Hero -->
<div class="absolute top-0 left-0 w-full h-[50%] z-0">
<div class="w-full h-full bg-cover bg-center" data-alt="A moody, high-end close-up photograph of vibrant indoor Monstera foliage. Deep, rich shadows contrast with soft, natural highlights reflecting off the glossy dark green leaves. The aesthetic is premium, minimalist, and calming, designed to serve as a cinematic backdrop with a stark light-mode UI overlay." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB2FpbdibIeASSKYhIYDfwjgsD7FN1aOn1UfzEAbbg8U0xFmZkvNp0NX7FWPO8OYv6Vjzi46sLAmz5HjkexgD3c08MRpBnEmbf1nMU5CkJ8oNIQfMpta-gPg-h9cvojERpIFJcLWD5TKYuwwLJWd0tOqlV8MrqMkS32vRy8hO1m_AOTjVVoVLmW1sUlg8P-e6ojyA96g22IUckm0C9NcJCnoeYRo4u1f2lg-TZIWS4HJ61XG3u1DIrMCmsUmVYgGnz2qjixP46amm0')"></div>
<!-- Dark Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/50 to-[#121A10]"></div>
<!-- Hero Text Content -->
<div class="absolute bottom-[15%] left-0 w-full px-gutter text-white z-10 flex flex-col gap-1">
<h1 class="font-display text-display text-white">Anna,</h1>
<h2 class="font-headline-md text-headline-md text-white/90">Let's finish your setup!</h2>
<p class="font-body-md text-body-md text-white/80 mt-2 max-w-[90%]">
Create an account to save your plants and 3 free scans per month.
</p>
</div>
</div>
<!-- Bottom 55% - Cream Sheet -->
<div class="absolute bottom-0 left-0 w-full h-[55%] bg-surface rounded-t-4xl z-20 flex flex-col px-gutter pt-8 pb-10 shadow-[0px_-8px_30px_rgba(0,0,0,0.12)]">
<!-- Drag Handle (Visual only) -->
<div class="absolute top-3 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-surface-variant rounded-full"></div>
<div class="flex-1 flex flex-col gap-4 mt-4">
<!-- Apple Button -->
<button class="w-full h-[56px] bg-on-surface text-surface rounded-2xl flex items-center justify-center gap-3 hover:bg-on-surface/90 transition-colors active:scale-[0.98]">
<svg class="w-5 h-5 fill-current" viewbox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 24 184.8 8.8 245.4c-21.7 86.8 5.4 191.6 37.1 237.9 19.3 28.2 44.9 57.2 75.3 56.1 29.2-1.1 41.5-18.9 76.5-18.9 34.9 0 46.5 18.9 76.9 18.2 31.2-.7 53.9-26.8 72.8-55.4 23.3-35.1 32.8-69.2 33.3-71-1.3-.4-62.8-24.1-62-93.6zm-41-118c15.6-20.2 26.6-47.6 23.7-75.1-23.7 1-52.9 16.2-69.2 35.8-13.6 16.4-26.6 44.4-23 71.3 26 2 51.5-12.7 68.5-32z"></path></svg>
<span class="font-label-lg text-label-lg">Continue with Apple</span>
</button>
<!-- Divider -->
<div class="flex items-center gap-4 my-2 opacity-60">
<div class="flex-1 h-px bg-outline-variant"></div>
<span class="font-label-md text-label-md text-on-surface-variant uppercase">OR</span>
<div class="flex-1 h-px bg-outline-variant"></div>
</div>
<!-- Email Button -->
<button class="w-full h-[56px] bg-transparent border-2 border-outline-variant text-on-surface rounded-2xl flex items-center justify-center gap-3 hover:bg-surface-variant/50 transition-colors active:scale-[0.98]">
<span class="material-symbols-outlined" data-icon="mail" data-weight="fill" style="font-variation-settings: 'FILL' 1;">mail</span>
<span class="font-label-lg text-label-lg">Continue with Email</span>
</button>
</div>
<!-- Bottom Actions & Legal -->
<div class="mt-auto flex flex-col items-center gap-6">
<p class="font-body-md text-body-md text-on-surface">
Already have an account?
<a class="text-primary-container font-label-lg text-label-lg hover:underline ml-1" href="#">Log in</a>
</p>
<p class="text-[11px] leading-tight text-on-surface-variant text-center px-4">
By continuing, you agree to GreenLens's <a class="underline" href="#">Terms of Service</a> and <a class="underline" href="#">Privacy Policy</a>.
</p>
</div>
</div>
</main>
</body></html>

BIN
design/stitch-onboarding/sign_up_for_greenlens/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 KiB

243
design/stitch-onboarding/sign_up_for_greenlens_dark_mode/code.html Normal file
View File

@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>GreenLens - Sign Up</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&amp;family=JetBrains+Mono:wght@500&amp;family=Manrope:wght@400&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px",
"2xl": "1rem",
"3xl": "1.5rem",
"4xl": "2rem"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
],
"label-lg": [
"JetBrains Mono"
],
"label-md": [
"JetBrains Mono"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"label-lg": [
"14px",
{
"lineHeight": "1.2",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"label-md": [
"12px",
{
"lineHeight": "1.2",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
]
}
},
},
}
</script>
<style>
body { font-family: 'Manrope', sans-serif; }
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-[#111111] flex items-center justify-center min-h-screen">
<!-- iPhone 15 Frame -->
<main class="w-full h-[884px] md:h-[852px] md:w-[393px] bg-surface relative overflow-hidden md:rounded-[55px] shadow-2xl md:border-[8px] md:border-black">
<!-- Top 45% - Botanical Hero -->
<div class="absolute top-0 left-0 w-full h-[50%] z-0">
<div class="w-full h-full bg-cover bg-center" data-alt="A moody, high-end close-up photograph of vibrant indoor Monstera foliage. Deep, rich shadows contrast with soft, natural highlights reflecting off the glossy dark green leaves. The aesthetic is premium, minimalist, and calming, designed to serve as a cinematic backdrop with a stark light-mode UI overlay." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB2FpbdibIeASSKYhIYDfwjgsD7FN1aOn1UfzEAbbg8U0xFmZkvNp0NX7FWPO8OYv6Vjzi46sLAmz5HjkexgD3c08MRpBnEmbf1nMU5CkJ8oNIQfMpta-gPg-h9cvojERpIFJcLWD5TKYuwwLJWd0tOqlV8MrqMkS32vRy8hO1m_AOTjVVoVLmW1sUlg8P-e6ojyA96g22IUckm0C9NcJCnoeYRo4u1f2lg-TZIWS4HJ61XG3u1DIrMCmsUmVYgGnz2qjixP46amm0')"></div>
<!-- Dark Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/50 to-[#121A10]"></div>
<!-- Hero Text Content -->
<div class="absolute bottom-[15%] left-0 w-full px-gutter text-white z-10 flex flex-col gap-1">
<h1 class="font-display text-display text-white">Anna,</h1>
<h2 class="font-headline-md text-headline-md text-white/90">Let's finish your setup!</h2>
<p class="font-body-md text-body-md text-white/80 mt-2 max-w-[90%]">
Create an account to save your plants and 3 free scans per month.
</p>
</div>
</div>
<!-- Bottom 55% - Cream Sheet -->
<div class="absolute bottom-0 left-0 w-full h-[55%] bg-surface rounded-t-4xl z-20 flex flex-col px-gutter pt-8 pb-10 shadow-[0px_-8px_30px_rgba(0,0,0,0.12)]">
<!-- Drag Handle (Visual only) -->
<div class="absolute top-3 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-surface-variant rounded-full"></div>
<div class="flex-1 flex flex-col gap-4 mt-4">
<!-- Apple Button -->
<button class="w-full h-[56px] bg-on-surface text-surface rounded-2xl flex items-center justify-center gap-3 hover:bg-on-surface/90 transition-colors active:scale-[0.98]">
<svg class="w-5 h-5 fill-current" viewbox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 24 184.8 8.8 245.4c-21.7 86.8 5.4 191.6 37.1 237.9 19.3 28.2 44.9 57.2 75.3 56.1 29.2-1.1 41.5-18.9 76.5-18.9 34.9 0 46.5 18.9 76.9 18.2 31.2-.7 53.9-26.8 72.8-55.4 23.3-35.1 32.8-69.2 33.3-71-1.3-.4-62.8-24.1-62-93.6zm-41-118c15.6-20.2 26.6-47.6 23.7-75.1-23.7 1-52.9 16.2-69.2 35.8-13.6 16.4-26.6 44.4-23 71.3 26 2 51.5-12.7 68.5-32z"></path></svg>
<span class="font-label-lg text-label-lg">Continue with Apple</span>
</button>
<!-- Divider -->
<div class="flex items-center gap-4 my-2 opacity-60">
<div class="flex-1 h-px bg-outline-variant"></div>
<span class="font-label-md text-label-md text-on-surface-variant uppercase">OR</span>
<div class="flex-1 h-px bg-outline-variant"></div>
</div>
<!-- Email Button -->
<button class="w-full h-[56px] bg-transparent border-2 border-outline-variant text-on-surface rounded-2xl flex items-center justify-center gap-3 hover:bg-surface-variant/50 transition-colors active:scale-[0.98]">
<span class="material-symbols-outlined" data-icon="mail" data-weight="fill" style="font-variation-settings: 'FILL' 1;">mail</span>
<span class="font-label-lg text-label-lg">Continue with Email</span>
</button>
</div>
<!-- Bottom Actions & Legal -->
<div class="mt-auto flex flex-col items-center gap-6">
<p class="font-body-md text-body-md text-on-surface">
Already have an account?
<a class="text-primary font-label-lg text-label-lg hover:underline ml-1" href="#">Log in</a>
</p>
<p class="text-[11px] leading-tight text-on-surface-variant text-center px-4">
By continuing, you agree to GreenLens's <a class="underline" href="#">Terms of Service</a> and <a class="underline" href="#">Privacy Policy</a>.
</p>
</div>
</div>
</main>
</body></html>

BIN
design/stitch-onboarding/sign_up_for_greenlens_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 KiB

174
design/stitch-onboarding/welcome_to_greenlens/code.html Normal file
View File

@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>GreenLens - Welcome</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#375d00",
"on-surface": "#191d16",
"on-secondary-fixed": "#012104",
"on-secondary-fixed-variant": "#2d4e2b",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f2f5e9",
"error-container": "#ffdad6",
"secondary": "#446741",
"outline": "#72796a",
"on-secondary": "#ffffff",
"surface-container": "#ecefe4",
"on-error": "#ffffff",
"on-surface-variant": "#42493c",
"background": "#f8fbef",
"error": "#ba1a1a",
"outline-variant": "#c2c9b7",
"on-secondary-container": "#486b45",
"secondary-fixed": "#c5edbd",
"on-tertiary": "#ffffff",
"primary": "#2b5f0b",
"surface-dim": "#d8dbd0",
"primary-container": "#437824",
"tertiary-fixed-dim": "#a5d56e",
"inverse-on-surface": "#eff2e7",
"surface-container-high": "#e7e9de",
"surface-bright": "#f8fbef",
"inverse-surface": "#2e322a",
"on-background": "#191d16",
"on-primary-fixed": "#092100",
"secondary-container": "#c2eaba",
"on-tertiary-container": "#cbfd91",
"primary-fixed": "#b6f390",
"tertiary-container": "#4d771b",
"primary-fixed-dim": "#9bd776",
"tertiary-fixed": "#c0f287",
"surface-tint": "#366a17",
"secondary-fixed-dim": "#aad1a2",
"surface-variant": "#e1e4d9",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#2e4f00",
"on-primary": "#ffffff",
"on-primary-container": "#c1ff99",
"surface-container-highest": "#e1e4d9",
"on-tertiary-fixed": "#0f2000",
"on-primary-fixed-variant": "#205100",
"inverse-primary": "#9bd776",
"surface": "#f8fbef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"gutter": "16px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"label-md": ["Plus Jakarta Sans"],
"body-lg": ["Plus Jakarta Sans"],
"label-lg": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"headline-lg": ["Plus Jakarta Sans"],
"display": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"label-md": ["12px", { "lineHeight": "16px", "fontWeight": "600" }],
"body-lg": ["17px", { "lineHeight": "26px", "fontWeight": "500" }],
"label-lg": ["13px", { "lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700" }],
"body-md": ["15px", { "lineHeight": "22px", "fontWeight": "400" }],
"headline-lg": ["28px", { "lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800" }],
"display": ["34px", { "lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800" }],
"headline-md": ["22px", { "lineHeight": "28px", "fontWeight": "700" }]
}
}
}
}
</script>
<style>
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface h-screen w-full overflow-hidden flex flex-col font-body-md select-none">
<!-- Top 55%: Hero Image Area -->
<div class="h-[486px] w-full relative shrink-0">
<!-- Hero Background Image -->
<div class="absolute inset-0 bg-cover bg-center" data-alt="A stunning, high-resolution botanical photograph of a lush indoor jungle featuring large Monstera deliciosa and Calathea plants. The composition is shot from a slightly elevated angle, capturing the vibrant green, textured leaves bathed in soft, natural morning light pouring through a nearby window. The background features a subtle, warm cream-colored wall that perfectly aligns with a premium minimalist light-mode app aesthetic. The depth of field is shallow, keeping the foreground leaves razor-sharp while gently blurring the background, creating a calm, focused, and high-end lifestyle magazine mood." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBx6w-Q0WxDraDoAiIgMxWkqZHEYA2QyGU65IPOu1fB8mwd5-O08Z4VcoQ4LdjcnCsU2ybQtlguuy_01cHv1sVfj5RSFen2jMoqF5NAZe_Xg0NqFQXwLIioixIHU-D9ryaPU-Pe3Qgezzgdcr2DXHxTkITv_zzpjcgW4eHm-I5ms5386DGlPXluAxgD-Iy4bQES2VAU1KXak7ZJuqn74-Ue9xRIP85gxxYoST-BemjrzJCEc9jn_h4Fk7HesA75uZGOyzYuEY2lyNA')"></div>
<!-- Subtle Top Gradient for Text Legibility -->
<div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-on-surface/50 to-transparent"></div>
<!-- Header: Logo & App Store Badge -->
<div class="absolute top-12 left-0 w-full px-container-margin flex items-center justify-between">
<div class="flex items-center gap-2 text-surface-container-lowest">
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 1;">spa</span>
<span class="font-display text-display tracking-tight leading-none text-surface-container-lowest pt-1">GreenLens</span>
</div>
<div class="flex items-center gap-1 bg-surface-container-lowest/20 backdrop-blur-md border border-surface-container-lowest/10 rounded-full px-3 py-1.5 shadow-sm">
<span class="material-symbols-outlined text-[14px] text-surface-container-lowest" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="font-label-md text-label-md text-surface-container-lowest">4.8</span>
</div>
</div>
<!-- Floating Testimonial Card -->
<div class="absolute bottom-12 left-container-margin right-container-margin bg-surface-container-lowest/95 backdrop-blur-md rounded-[16px] p-4 shadow-[0px_4px_20px_rgba(16,28,18,0.12)] border border-surface-variant/50">
<p class="font-body-md text-body-md text-on-surface mb-3 italic leading-relaxed">"Finally my plants stay alive! Highly recommend."</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img class="w-8 h-8 rounded-full object-cover shadow-sm" data-alt="A professional, high-quality portrait photograph of a young woman with a warm, friendly smile, designed to be used as a circular avatar in a premium app interface. She has natural, effortless styling and is softly lit by diffused natural daylight. The background is a very soft, out-of-focus hint of an indoor plant shop or greenhouse, featuring muted greens and warm cream tones to perfectly match a sophisticated, minimalist light-mode aesthetic. The image exudes trust and approachability." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqKHPbHjvPxBBSroxRXwyNuYGln0ydKqum11jR-kIoUoBeWzrSqByhgdt-maLp0b9HbdyDabUsv2PBnqZy8oIBAGSjHmtG9PhPiWARa9AcQrlRAtKWOAVYdD3y03G9Y0ilbQMz4MvFDBv57IqGO7xcp4cEAddUgjS1sgPskTA6Rl-9vXibnYMo2ScPYD6r0ch02eNjaCfxNq1sP0OGSBIksgW1o1CUuw6Brzl0WQbmoVaRaflVdiDp25qFXfG1woIYJw0qF6LZ3_E"/>
<span class="font-label-md text-label-md text-on-surface-variant">Anna M.</span>
</div>
<div class="flex items-center gap-0.5 text-[#F5B041]">
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
</div>
</div>
</div>
</div>
<!-- Bottom 45%: Cream Sheet Area -->
<div class="flex-1 bg-background rounded-t-[32px] -mt-6 relative z-10 px-container-margin pt-10 pb-8 flex flex-col items-center text-center shadow-[0px_-8px_30px_rgba(0,0,0,0.04)]">
<!-- Sheet Handle (Subtle UI Detail) -->
<div class="absolute top-4 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-surface-variant rounded-full"></div>
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-3 mt-2">Welcome to GreenLens!</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-auto px-4 max-w-sm">Identify, understand and care for your plants — effortlessly.</p>
<!-- Actions -->
<div class="w-full mt-8 mb-6">
<button class="w-full h-[56px] bg-primary-container text-on-primary font-label-lg text-label-lg rounded-[14px] flex items-center justify-center transition-transform hover:scale-[0.98] active:scale-95 shadow-[0px_8px_16px_rgba(67,120,36,0.15)] mb-4">
Let's Go
</button>
<button class="w-full h-[44px] font-label-lg text-label-lg text-primary-container hover:opacity-80 transition-opacity flex items-center justify-center">
Log in
</button>
</div>
<!-- Legal -->
<p class="font-label-md text-label-md text-outline px-4 max-w-xs">
By continuing you agree to our <a class="underline hover:text-on-surface transition-colors" href="#">Privacy Policy</a> and <a class="underline hover:text-on-surface transition-colors" href="#">Terms</a>
</p>
</div>
</body></html>

BIN
design/stitch-onboarding/welcome_to_greenlens/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 647 KiB

244
design/stitch-onboarding/welcome_to_greenlens_dark_mode/code.html Normal file
View File

@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>GreenLens - Welcome</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800&amp;family=JetBrains+Mono:wght@400;500;600&amp;family=Manrope:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#2e4f00",
"inverse-primary": "#41690c",
"surface": "#0c160d",
"on-tertiary-fixed": "#171d15",
"primary-container": "#a6d66f",
"on-error-container": "#ffdad6",
"surface-dim": "#0c160d",
"surface-container-lowest": "#071008",
"secondary-fixed-dim": "#b7ccb5",
"secondary": "#b7ccb5",
"secondary-container": "#394b39",
"on-surface": "#dae6d6",
"primary-fixed": "#c0f287",
"primary": "#c1f388",
"on-primary": "#1e3700",
"surface-bright": "#313c31",
"tertiary-fixed": "#dee5d6",
"error-container": "#93000a",
"background": "#0c160d",
"on-tertiary-fixed-variant": "#42493e",
"on-tertiary": "#2c3229",
"on-surface-variant": "#c3c9b6",
"inverse-surface": "#dae6d6",
"on-secondary": "#233424",
"on-primary-container": "#365d00",
"inverse-on-surface": "#283328",
"surface-variant": "#2d372d",
"surface-container-low": "#141e14",
"surface-container-highest": "#2d372d",
"surface-container-high": "#222d22",
"tertiary-fixed-dim": "#c2c9bb",
"tertiary-container": "#c3cabc",
"outline": "#8d9382",
"on-background": "#dae6d6",
"on-secondary-fixed": "#0f1f10",
"on-error": "#690005",
"secondary-fixed": "#d3e8d0",
"outline-variant": "#43493a",
"error": "#ffb4ab",
"on-secondary-fixed-variant": "#394b39",
"on-tertiary-container": "#4e554a",
"surface-tint": "#a5d56e",
"tertiary": "#dfe6d8",
"surface-container": "#182218",
"on-secondary-container": "#a6bba4",
"primary-fixed-dim": "#a5d56e",
"on-primary-fixed": "#0f2000"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"unit": "8px",
"gutter": "24px",
"margin-mobile": "16px",
"margin-desktop": "64px",
"container-max": "1280px",
"xs": "8px",
"xl": "32px",
"base": "4px",
"sm": "12px",
"md": "16px",
"lg": "24px",
"container-margin": "20px"
},
"fontFamily": {
"display": [
"Epilogue"
],
"headline-md": [
"Epilogue"
],
"body-lg": [
"Manrope"
],
"headline-lg": [
"Epilogue"
],
"label-sm": [
"JetBrains Mono"
],
"headline-lg-mobile": [
"Epilogue"
],
"body-md": [
"Manrope"
],
"label-md": [
"JetBrains Mono"
],
"label-lg": [
"JetBrains Mono"
]
},
"fontSize": {
"display": [
"64px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"28px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"headline-lg": [
"40px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.0",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"headline-lg-mobile": [
"32px",
{
"lineHeight": "1.2",
"fontWeight": "600"
}
],
"body-md": [
"16px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"label-md": ["12px", { "lineHeight": "16px", "fontWeight": "600" }],
"label-lg": ["13px", { "lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700" }]
}
},
},
}
</script>
<style>
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface h-screen w-full overflow-hidden flex flex-col font-body-md select-none">
<!-- Top 55%: Hero Image Area -->
<div class="h-[486px] w-full relative shrink-0">
<!-- Hero Background Image -->
<div class="absolute inset-0 bg-cover bg-center" data-alt="A stunning, high-resolution botanical photograph of a lush indoor jungle featuring large Monstera deliciosa and Calathea plants. The composition is shot from a slightly elevated angle, capturing the vibrant green, textured leaves bathed in soft, natural morning light pouring through a nearby window. The background features a subtle, warm cream-colored wall that perfectly aligns with a premium minimalist light-mode app aesthetic. The depth of field is shallow, keeping the foreground leaves razor-sharp while gently blurring the background, creating a calm, focused, and high-end lifestyle magazine mood." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBx6w-Q0WxDraDoAiIgMxWkqZHEYA2QyGU65IPOu1fB8mwd5-O08Z4VcoQ4LdjcnCsU2ybQtlguuy_01cHv1sVfj5RSFen2jMoqF5NAZe_Xg0NqFQXwLIioixIHU-D9ryaPU-Pe3Qgezzgdcr2DXHxTkITv_zzpjcgW4eHm-I5ms5386DGlPXluAxgD-Iy4bQES2VAU1KXak7ZJuqn74-Ue9xRIP85gxxYoST-BemjrzJCEc9jn_h4Fk7HesA75uZGOyzYuEY2lyNA')"></div>
<!-- Subtle Top Gradient for Text Legibility -->
<div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-surface/80 to-transparent"></div>
<!-- Header: Logo & App Store Badge -->
<div class="absolute top-12 left-0 w-full px-container-margin flex items-center justify-between">
<div class="flex items-center gap-2 text-white">
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 1;">spa</span>
<span class="font-display text-display tracking-tight leading-none text-white pt-1">GreenLens</span>
</div>
<div class="flex items-center gap-1 bg-surface-container-lowest/40 backdrop-blur-md border border-white/20 rounded-full px-3 py-1.5 shadow-sm text-white">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="font-label-md text-label-md text-white">4.8</span>
</div>
</div>
<!-- Floating Testimonial Card -->
<div class="absolute bottom-12 left-container-margin right-container-margin bg-surface-container-lowest/95 backdrop-blur-md rounded-[16px] p-4 shadow-[0px_4px_20px_rgba(0,0,0,0.5)] border border-surface-variant/50">
<p class="font-body-md text-body-md text-on-surface mb-3 italic leading-relaxed">"Finally my plants stay alive! Highly recommend."</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img class="w-8 h-8 rounded-full object-cover shadow-sm" data-alt="A professional, high-quality portrait photograph of a young woman with a warm, friendly smile, designed to be used as a circular avatar in a premium app interface. She has natural, effortless styling and is softly lit by diffused natural daylight. The background is a very soft, out-of-focus hint of an indoor plant shop or greenhouse, featuring muted greens and warm cream tones to perfectly match a sophisticated, minimalist light-mode aesthetic. The image exudes trust and approachability." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqKHPbHjvPxBBSroxRXwyNuYGln0ydKqum11jR-kIoUoBeWzrSqByhgdt-maLp0b9HbdyDabUsv2PBnqZy8oIBAGSjHmtG9PhPiWARa9AcQrlRAtKWOAVYdD3y03G9Y0ilbQMz4MvFDBv57IqGO7xcp4cEAddUgjS1sgPskTA6Rl-9vXibnYMo2ScPYD6r0ch02eNjaCfxNq1sP0OGSBIksgW1o1CUuw6Brzl0WQbmoVaRaflVdiDp25qFXfG1woIYJw0qF6LZ3_E"/>
<span class="font-label-md text-label-md text-on-surface-variant">Anna M.</span>
</div>
<div class="flex items-center gap-0.5 text-primary">
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
</div>
</div>
</div>
</div>
<!-- Bottom 45%: Cream Sheet Area -->
<div class="flex-1 bg-background rounded-t-[32px] -mt-6 relative z-10 px-container-margin pt-10 pb-8 flex flex-col items-center text-center shadow-[0px_-8px_30px_rgba(0,0,0,0.2)]">
<!-- Sheet Handle (Subtle UI Detail) -->
<div class="absolute top-4 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-surface-variant rounded-full"></div>
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-3 mt-2">Welcome to GreenLens!</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-auto px-4 max-w-sm">Identify, understand and care for your plants — effortlessly.</p>
<!-- Actions -->
<div class="w-full mt-8 mb-6">
<button class="w-full h-[56px] bg-primary-container text-on-primary-container font-label-lg text-label-lg rounded-[14px] flex items-center justify-center transition-transform hover:scale-[0.98] active:scale-95 shadow-[0px_8px_16px_rgba(0,0,0,0.2)] mb-4">
Let's Go
</button>
<button class="w-full h-[44px] font-label-lg text-label-lg text-primary-container hover:opacity-80 transition-opacity flex items-center justify-center">
Log in
</button>
</div>
<!-- Legal -->
<p class="font-label-md text-label-md text-outline px-4 max-w-xs">
By continuing you agree to our <a class="underline hover:text-on-surface transition-colors" href="#">Privacy Policy</a> and <a class="underline hover:text-on-surface transition-colors" href="#">Terms</a>
</p>
</div>
</body></html>

BIN
design/stitch-onboarding/welcome_to_greenlens_dark_mode/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 645 KiB

71
docs/superpowers/specs/2026-07-06-onboarding-soft-paywall-free-tier-design.md Normal file
View File

@@ -0,0 +1,71 @@
# Onboarding Redesign, Soft Paywall & Free Tier — Design Spec
**Date:** 2026-07-06
**Status:** Approved design basis (Stitch export approved by Timo)
**Design reference:** `design/stitch-onboarding/` (Stitch export: 10 screens, light + dark variants, `code.html` per screen, design tokens in `botanical_vitality/DESIGN.md` (light) and `nocturnal_botanical/DESIGN.md` (dark))
## Goal
Replicate the Learna-style onboarding → soft paywall → sign-up flow, remove the hard paywall (client and server), and introduce a free tier with 3 monthly scan credits. Sign-up moves to the *end* of onboarding, after the paywall (pattern credited with +52% sales in the reference video).
## 1. New user flow
```
Welcome (social proof)
→ Benefit slides (3)
→ Personalization questions (existing: source, goal, experience, customize)
→ "Personalizing your care plan…" progress screen
→ Paywall (dismissible ✕)
→ Sign-up (Continue with Apple / Email)
→ App (tabs), free plan with 3 credits/month
```
- The guest **demo scan stays** available from the welcome screen (existing `isGuest` server handling unchanged).
- Existing users: "Log in" link on the welcome screen → login.
- Paywall ✕ during onboarding → continues to sign-up. Paywall ✕ in-app → simply closes.
## 2. Screens
Each screen follows the Stitch mockup in `design/stitch-onboarding/<name>/screen.png` (+ `_dark_mode` variant). `code.html` is the source of truth for spacing/sizes. Design tokens (colors, Plus Jakarta Sans-style extra-bold typography) come from the two `DESIGN.md` files, mapped into the existing `constants/Colors.ts` light/dark system.
| Screen | Stitch reference | Implementation | Imagery |
|---|---|---|---|
| Welcome | `welcome_to_greenlens` | Redesign `app/onboarding.tsx`: hero photo, rating badge "4.8", testimonial card, "Let's Go" CTA, "Log in" link, legal footer. Keep demo-scan entry. | Bright plant-room photo (new or existing asset) |
| Benefit slide 1 "Scan Any Plant" | `scan_any_plant` | New screen(s), progress dots, Continue | Reuse existing render style (`assets/onboarding_*_mockup.png` language); scan-frame + "Monstera identified · 98%" chip built natively in RN, NOT baked into the photo |
| Benefit slide 2 "Health Check & Care Plan" | `health_check_care_plan` | New screen | Photo + native overlay card (Overwatering detected / 7-day rescue plan ready) |
| Benefit slide 3 "Never Forget Watering" | `never_forget_watering` | New screen | Photo + native reminder chips |
| Personalization questions | `personalization_question` | Restyle existing `app/onboarding/{source,goal,experience,customize}.tsx`: top progress bar + back arrow, white option cards radius 16, selected = green border + tint, Continue button | Emoji/icon per option |
| Personalizing progress | `personalizing_your_plan` | New screen: animated % + progress ring, sequential checkmarks ("Analyzing your answers", "Building your care plan", "Preparing your scan credits", "Finalizing your plan"), testimonial card (filled stars), rating badge. Auto-advances to paywall. | Small round plant photo in ring |
| Paywall | `greenlens_pro_paywall` | Redesign paywall mode of `app/profile/billing.tsx`: ✕ top-left, Restore top-right, "GreenLens Pro / Get Unlimited Access", plan card, **Free Trial toggle** (ON = yearly with 7-day trial → "Due today €0 / Due <date> €39.99"; OFF = monthly, no trial), CTA "Try Free"/"Start Now", Cancel Anytime, Privacy/Terms. Dates dynamic. Credit top-ups remain reachable. | `assets/paywall_scan_background.png` as header |
| Sign-up | `sign_up_for_greenlens` | Restyle `app/auth/signup.tsx`: dark botanical hero with "<Name>, Let's finish your setup!" (name from onboarding answers if given, else generic), "Continue with Apple" (exists), OR divider, "Continue with Email" expanding to email/password fields (two-step), "Already have an account? Log in", legal. | `assets/welcome_botanical_hero.png` (replaces Stitch photo with baked-in fake form) |
| Login | `login_to_greenlens` | Restyle `app/auth/login.tsx`: "Welcome back!", Apple button, email/password, Forgot password?, "New here? Create account". | Clean botanical photo (existing assets) |
| Out of credits | `out_of_credits` | New bottom sheet over scanner: leaf icon with "0" badge, "You're out of free scans", renewal date, "See Pro Plans" → paywall, top-up chips (+30/+100/+250, BEST badge on 250), "Maybe later". | — |
Known mockup fixes (agreed): replace AI-artifact photos (garbled phone UI on scan slide, fake forms baked into sign-up/login backgrounds), filled stars on testimonials, dynamic dates.
## 3. Free tier (backend, `server/lib/billing.js` + `server/index.js`)
- `FREE_MONTHLY_CREDITS: 0 → 3`. Existing monthly-allowance reset logic already covers free accounts; verify reset works for plan `free`.
- **Remove server hard paywall:** drop `ensureActiveProEntitlement` from scan and health-check endpoints (`server/index.js`). Credit consumption becomes the only gate; 0 credits → existing 402 `INSUFFICIENT_CREDITS` error.
- **Same scan model for free and pro** (`getScanModel` returns the pro model for both plans). Cost accepted (~cents/user/month at 3 scans).
- **Low-confidence AI review pass stays pro-only** (unchanged) so a free scan never burns 2 credits, and Pro keeps a quality edge.
- Trial handling unchanged (yearly plan carries 7-day trial, 30 credits during trial).
## 4. Soft paywall (app)
- `app/_layout.tsx`: remove the `!hasActiveEntitlement → Redirect /profile/billing` block (line ~169). Signed-in users always reach the tabs regardless of plan.
- Scanner: on 402 `INSUFFICIENT_CREDITS` → open the out-of-credits bottom sheet (dismissible) instead of blocking.
- Free users see a credits badge (e.g. "3 scans left") on Home/Scanner so the limit is visible before it bites.
- Existing PostHog events (`trial_started`, purchase events) stay; add events for paywall_shown / paywall_dismissed / onboarding step views.
## 5. Out of scope
- Instagram-story auto-advance on benefit slides (manual Continue first)
- Win-back / cancellation flows
- Android Google Sign-In (RevenueCat Android key still placeholder)
- Chat-style onboarding rebuild
## 6. Open questions
- Exact free-credit renewal display date source (billing summary already exposes renewal info for pro; confirm shape for free accounts).
- Whether existing signed-in free users (previously hard-walled) need a one-time "you now have 3 free scans" toast. Nice-to-have.