Greenlens/design/stitch-onboarding/botanical_vitality/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Botanical Vitality	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #f8fbef #d8dbd0 #f8fbef #ffffff #f2f5e9 #ecefe4 #e7e9de #e1e4d9 #191d16 #42493c #2e322a #eff2e7 #72796a #c2c9b7 #366a17 #2b5f0b #ffffff #437824 #c1ff99 #9bd776 #446741 #ffffff #c2eaba #486b45 #375d00 #ffffff #4d771b #cbfd91 #ba1a1a #ffffff #ffdad6 #93000a #b6f390 #9bd776 #092100 #205100 #c5edbd #aad1a2 #012104 #2d4e2b #c0f287 #a5d56e #0f2000 #2e4f00 #f8fbef #191d16 #e1e4d9	display headline-lg headline-md body-lg body-md label-lg label-md fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 34px 800 42px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 28px 800 36px -0.01em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 22px 700 28px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 17px 500 26px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 15px 400 22px fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 13px 700 18px 0.05em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 12px 600 16px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	base xs sm md lg xl container-margin gutter 4px 8px 12px 16px 24px 32px 20px 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.