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

---
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.