Softly - Digital Wellness App

=== ARCHITECTURE & VISION ===
Design a 'Softly' themed mobile-first landing page for a digital wellness app using a warm, desaturated pastel palette, high-end grain textures, and fluid, low-velocity animations. The UI should feel like a 'digital living room'—minimalist, tactile, and intentionally slow.

=== STYLE & DIRECTION ARTISTIQUE ===
• description: The style essence combines 'Digital Minimalism' with 'Gen-Z Lifestyle' aesthetics. Typography pairs the clean, rounded 'Outfit' sans-serif with the whimsical 'Reenie Beanie' cursive. The color story uses #292524 for soft-black text against a primary background of #FDFCF8. Visual depth is achieved through high-radius blurs on background blobs and a persistent 35% opacity SVG noise/grain overlay for a paper-like feel.
• prompt: Create a visual style based on 'Digital Wellness'. 
- **Color Palette**: Background: #FDFCF8; Sage: #E8EFE8; Lavender: #EFEDF4; Peach/Coral: #FFB7B2 (Primary Accent); Dark Text: #292524; Muted Text: #78716C.
- **Typography**: Primary font: 'Outfit' (Sans-serif), Headings at 48px-96px with tracking-tight (-0.025em), Sentence-case only. Accent font: 'Reenie Beanie' (Cursive) for expressive emphasis.
- **Visual Effects**: 0.35 opacity fractal noise grain overlay. Border-radius: 2rem to 4rem for all containers. Soft shadows: 0 4px 20px -2px rgba(0,0,0,0.05).
- **Animations**: Use 'reveal-on-scroll' (translateY: 30px to 0, opacity 0 to 1, duration 0.8s). Floating animations for background blobs (6s loop, translateY +/- 10px).

=== STRUCTURE & SECTIONS ===
• description: A vertical, single-column flow designed for mobile-first consumption. It transitions from a spacious hero to interactive horizontal scrolls, ending in high-contrast (dark on light) conversion sections.
• prompts: [{"part":"Navigation","prompt":"Floating pill-shaped nav bar: 70% white opacity, 20px backdrop-blur. Contains a small circular logo (Coral #FFB7B2 with white dot), text links in 14px Outfit Medium, and a dark stone (#292524) pill CTA button. Width should be constrained to 100% minus 32px on mobile."},{"part":"Hero Section","prompt":"Center-aligned layout. Two large blurred background blobs (#FFE4E1 and #E6E6FA) at 60% opacity. Headline uses 72px Outfit with a handwritten cursive word inserted for emphasis. Sub-headline max-width 500px. Dual CTA buttons: primary pill in Coral #FFB7B2 with soft shadow, secondary pill in white with 1px stone-200 border."},{"part":"Horizontal Scenario Scroll","prompt":"A list of cards that scroll horizontally. Each card: 288px width, 160px height, white background, rounded-3xl (24px). Top-left timestamp in 14px stone-400, bottom text in 20px stone-800. On hover, the text color should change to a pastel accent."},{"part":"App Experience Preview","prompt":"A three-mockup stacked layout. Center phone is 300x620px, fully opaque, with a Coral (#FFB7B2) pulsing 'Breathe' button. Left and right phones are 280x580px, 80% opacity, slightly translated vertically (left +48px, right +96px) to create a cascading effect. Use Sage (#E8EFE8) and Lavender (#EFEDF4) for screen backgrounds."},{"part":"Diary Entry Testimonials","prompt":"Two-column grid for desktop, single for mobile. Cards should have a slight rotation (+1 or -1 degree) to mimic physical notes. Background: White. Signature style: A 32px horizontal line followed by 'Reenie Beanie' cursive text in 24px stone-500."},{"part":"Waitlist Conversion","prompt":"Full-width section with a central focus. Background uses high-blur floating gradients. Feature a dark stone #292524 rounded-square icon at the top with a coral dot. Form: Email input (rounded-full, bg-stone-50) and a black submit button that scales up on hover."}]

=== COMPOSANTS CLÉS ===
• {"component":"Interactive FAQ Accordion","description":"Smooth expanding/collapsing questions with icon rotation.","prompt":"Container: white background, 16px rounded corners, 1px stone-100 border. Header: 24px padding, 500 weight text, 'plus' icon that rotates 45 degrees. Content: Transition from height 0 to auto using duration-500ms ease-in-out. Reveal text with bottom padding 24px."}
• {"component":"Grain Overlay","description":"A global texture layer that makes the flat design feel analog.","prompt":"A fixed div covering the viewport with z-index 50. Background-image uses an SVG filter with feTurbulence (baseFrequency 0.65). Mix-blend-mode: overlay. Opacity: 0.35. Pointer-events: none."}

Superdesign UI · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.