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

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Nocturnal Botanical	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 #0c160d #0c160d #313c31 #071008 #141e14 #182218 #222d22 #2d372d #dae6d6 #c3c9b6 #dae6d6 #283328 #8d9382 #43493a #a5d56e #c1f388 #1e3700 #a6d66f #365d00 #41690c #b7ccb5 #233424 #394b39 #a6bba4 #dfe6d8 #2c3229 #c3cabc #4e554a #ffb4ab #690005 #93000a #ffdad6 #c0f287 #a5d56e #0f2000 #2e4f00 #d3e8d0 #b7ccb5 #0f1f10 #394b39 #dee5d6 #c2c9bb #171d15 #42493e #0c160d #dae6d6 #2d372d	display headline-lg headline-lg-mobile headline-md body-lg body-md label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Epilogue 64px 700 1.1 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Epilogue 40px 600 1.2 -0.01em fontFamily fontSize fontWeight lineHeight Epilogue 32px 600 1.2 fontFamily fontSize fontWeight lineHeight Epilogue 28px 500 1.3 fontFamily fontSize fontWeight lineHeight Manrope 18px 400 1.6 fontFamily fontSize fontWeight lineHeight Manrope 16px 400 1.6 fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 12px 500 1.0 0.05em	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	unit container-max gutter margin-mobile margin-desktop 8px 1280px 24px 16px 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.