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

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

design/stitch-onboarding/nocturnal_botanical/DESIGN.md

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