Softly - Digital Wellness App
superdesignCC0-1.0Prompt onlyLanding · landingTexture · textureWarm · warmLight · lightLow (display) · lowYellow · yellowVivid · vividSerif · serifGeneral · general
A soft-aesthetic, Gen-Z oriented design system optimized for wellness, meditation, journaling, and lifestyle brands. Features a warm off-white foundation (#FDFCF8) layered with soft pastel accents (Coral #FFB7B2, Sage #E8EFE8, Lavender #EFEDF4), grain-textured overlays, and a mix of modern geometric sans-serif ('Outfit') and organic handwriting ('Reenie Beanie') typography. The layout emphasizes breathing room, gentle scroll-triggered reveals, and 'floating' organic shapes to reduce cognitive load and evoke a sense of calm. Category: Waitlist & Coming Soon. Prompt author listed upstream: Shirley Lou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Softly - Digital Wellness App" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/softly-digital-wellness-app @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/softly-digital-wellness-app · 6c6090694520 · © Superdesign
Prompt
{
"summary": "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": {
"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'. \n- **Color Palette**: Background: #FDFCF8; Sage: #E8EFE8; Lavender: #EFEDF4; Peach/Coral: #FFB7B2 (Primary Accent); Dark Text: #292524; Muted Text: #78716C.\n- **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.\n- **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).\n- **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)."
},
"layout_and_structure": {
"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."
}
]
},
"special_ui_components": [
{
"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."
}
]
}
---
"Softly - Digital Wellness App" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/softly-digital-wellness-app @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Softly - Digital Wellness App. \"Softly - Digital Wellness App\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/softly-digital-wellness-app @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-softly-digital-wellness-app",
"license": "CC0-1.0",
"attribution": "\"Softly - Digital Wellness App\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/softly-digital-wellness-app @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#fdfcf8"
},
"foreground": {
"$type": "color",
"$value": "#292524"
},
"card": {
"$type": "color",
"$value": "#fdfcf8"
},
"card-foreground": {
"$type": "color",
"$value": "#292524"
},
"primary": {
"$type": "color",
"$value": "#fdfcf8"
},
"primary-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"secondary": {
"$type": "color",
"$value": "#292524"
},
"secondary-foreground": {
"$type": "color",
"$value": "#292524"
},
"accent": {
"$type": "color",
"$value": "#efedf4"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#eeede9"
},
"muted-foreground": {
"$type": "color",
"$value": "#747171"
},
"border": {
"$type": "color",
"$value": "#dad9d5"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#fdfcf8"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Softly - Digital Wellness App" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/softly-digital-wellness-app @ 6c6090694520. */
:root {
--background: #fdfcf8;
--foreground: #292524;
--card: #fdfcf8;
--card-foreground: #292524;
--primary: #fdfcf8;
--primary-foreground: #1c1917;
--secondary: #292524;
--secondary-foreground: #292524;
--accent: #efedf4;
--accent-foreground: #1c1917;
--muted: #eeede9;
--muted-foreground: #747171;
--border: #dad9d5;
--destructive: #dc2626;
--ring: #fdfcf8;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Softly - Digital Wellness App" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/softly-digital-wellness-app @ 6c6090694520. */
/** Tailwind theme extend for Softly - Digital Wellness App (superdesign-softly-digital-wellness-app) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#fdfcf8",
"foreground": "#292524",
"card": "#fdfcf8",
"primary": "#fdfcf8",
"primary-foreground": "#1c1917",
"secondary": "#292524",
"accent": "#efedf4",
"muted": "#eeede9",
"border": "#dad9d5",
"destructive": "#dc2626",
"ring": "#fdfcf8"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Softly - Digital Wellness App" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/softly-digital-wellness-app @ 6c6090694520. */
@layer base {
:root {
--background: #fdfcf8;
--foreground: #292524;
--card: #fdfcf8;
--card-foreground: #292524;
--primary: #fdfcf8;
--primary-foreground: #1c1917;
--secondary: #292524;
--secondary-foreground: #292524;
--accent: #efedf4;
--accent-foreground: #1c1917;
--muted: #eeede9;
--muted-foreground: #747171;
--border: #dad9d5;
--destructive: #dc2626;
--ring: #fdfcf8;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}