A calm AI wellness companion built around two-minute daily reflection. Meet Aura — gentle, patient, never clinical.
Visit the site → · Join the waitlist →
Most wellness apps fail for the same reason — they ask too much.
Long entries. Streaks that shame. Therapy-speak that doesn't fit how you actually feel.
Solace is built on the opposite bet. Two quiet minutes a day. One gentle question. Over weeks, the patterns reveal themselves — and you meet yourself again.
"We move through life without noticing how we feel. Solace is a quiet practice to start."
This repository contains the landing page for the product. The application itself is in private development.
A production-grade landing experience with:
- 🎨 Custom design system inspired by Wise + Headspace — sage canvas, lime CTA, Manrope 900 display type
- 🦋 10-section landing page with editorial layout, fade-up scroll animations, and full polarity cycling
- 🌗 Full dark mode that preserves brand polarity (the lime CTA never changes)
- 📱 Mobile-first responsive — built for iPhone SE upward, no horizontal overflow
- ♿ Accessibility-first — keyboard nav, focus rings,
prefers-reduced-motion, skip links - 📬 Working early-access waitlist with branded admin notifications via Resend
- 🖼 8 platform-specific OG cards — LinkedIn, X/Twitter, WhatsApp, Discord, Slack all auto-detect the right one
- 🔍 Full SEO — sitemap.xml, robots.txt, structured data (JSON-LD), per-page metadata
- 📊 Vercel Analytics for privacy-friendly visitor insights (no cookies, no banner needed)
- ⚡ Edge-runtime OG image generation — every social share renders a unique branded card
| Layer | Choice |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Animation | Framer Motion |
| Icons | Lucide React |
| Theme | next-themes |
| Resend | |
| Fonts | Inter + Manrope (via next/font/google) |
| Hosting | Vercel |
| Analytics | Vercel Analytics (privacy-first) |
Solace runs on a custom Wise-inspired design system. Every visual choice is intentional.
/* Surface */
--canvas-soft: #e8ebe6; /* Sage page background */
--canvas: #ffffff; /* White card */
--ink-surface: #0e0f0c; /* Polarity-flip dark sections */
/* Brand */
--primary: #9fe870; /* Lime CTA — the universal action color */
--primary-pale: #e2f6d5; /* Badges + soft surfaces */
--on-primary: #0e0f0c; /* Text on lime */
/* Text */
--ink: #0e0f0c; /* Headings */
--ink-deep: #163300; /* Subhead accents */
--body: #454745; /* Body text */
--mute: #868685; /* Captions, eyebrows */- Display: Manrope 900 (substitute for proprietary Wise Sans)
- Body: Inter 400 / 500 / 600
- Scale:
clamp(48px, 8vw, 96px)for hero, fluid responsive throughout
| Token | Value | Use |
|---|---|---|
sm |
8px | Pills, badges |
md |
12px | Inputs |
lg |
16px | Mid-size cards |
xl |
24px | Canonical brand radius — buttons + cards |
pill |
9999px | Stat pills, CTAs |
- Node.js 18+
- npm 9+ (or
pnpm/yarn) - (Optional) A free Resend account for early-access email notifications
git clone https://github.com/your-username/solace.git
cd solace
npm installCreate a .env.local file in the project root:
# Resend — for admin notifications when someone joins early access
RESEND_API_KEY=re_your_resend_key
ADMIN_EMAIL=you@example.com💡 Without these, the form still works — it just won't send you an email when someone signs up. The user always sees the success confirmation.
npm run devOpen http://localhost:3000 to see Solace.
npm run build
npm startsrc/
├── app/
│ ├── layout.tsx # Root layout (theme, fonts, metadata, structured data)
│ ├── page.tsx # Homepage — 10 sections composed
│ ├── globals.css # Tailwind v4 + design tokens
│ ├── icon.svg # Favicon (lime butterfly)
│ ├── apple-icon.svg # iOS home-screen icon
│ ├── opengraph-image.tsx # Homepage OG card (edge runtime)
│ ├── twitter-image.tsx # Homepage Twitter card
│ ├── robots.ts # robots.txt generator
│ ├── sitemap.ts # sitemap.xml generator
│ ├── not-found.tsx # Custom 404 page
│ │
│ ├── about/ # /about page + own OG card
│ ├── pricing/ # /pricing page + own OG card
│ ├── privacy/ # /privacy page + own OG card
│ ├── launch/ # /launch page + LinkedIn-optimized OG + Twitter card
│ │
│ └── actions/
│ └── early-access.ts # Server action — save signups + send branded email
│
├── components/
│ ├── layout/
│ │ ├── Navbar.tsx # Sticky nav with theme toggle + CTA
│ │ ├── Footer.tsx # Ink-band footer with social pills
│ │ └── StickyEarlyAccessBar.tsx # Scroll-triggered floating CTA
│ │
│ ├── sections/
│ │ ├── Hero.tsx # Hero + Mood Check-in card
│ │ ├── PressLogos.tsx # "Launching soon · Featured by" row
│ │ ├── HowItWorks.tsx # 3-step intro
│ │ ├── Problem.tsx # Relatable observations (no fear)
│ │ ├── MeetAura.tsx # Dark band with live chat mockup
│ │ ├── MoodTracking.tsx # Editorial analytics
│ │ ├── VoiceJournal.tsx # Recorder + AI summary
│ │ ├── GrowthStory.tsx # Day 1 → 30 → 90 transformation
│ │ ├── AppPreview.tsx # 3 iPhone mockups
│ │ ├── Testimonials.tsx # 6-card editorial grid
│ │ └── FinalCTA.tsx # Dark band with email form
│ │
│ ├── forms/
│ │ └── EarlyAccessForm.tsx # Server-action wired form
│ │
│ ├── illustrations/
│ │ ├── Butterfly.tsx # Brand butterfly (animated)
│ │ ├── FloatingButterflies.tsx
│ │ └── IPhoneFrame.tsx # iOS device mockup
│ │
│ ├── providers/
│ │ └── ThemeProvider.tsx # Light / dark mode wrapper
│ │
│ └── ui/
│ └── AnimatedCounter.tsx # Tabular-numeric counter
│
├── hooks/
│ └── useScrollAnimation.ts
│
├── lib/
│ ├── utils.ts # cn() helper
│ └── animations.ts # Reusable framer-motion variants
│
└── styles/
└── design-tokens.ts # TS-side mirror of CSS tokens
These guided every decision:
- Gentle by default — no streaks that shame, no notifications that interrupt, no copy that pressures
- Patterns over performance — help people notice, not optimize
- Surface contrast = elevation — sage canvas → white cards. No drop shadows on cards
- Lime is sacred — only used for primary CTAs. Never as decoration. Never on green backgrounds
- Display weight 900, body weight 600 — typographic story told through weight contrast
- 24px radius always — the brand's friendliness signature
- No stock photography — everything is custom SVG or illustrative
Working in software and security, I notice anomalies in systems all day. I rarely notice what's happening inside my own head.
Most wellness apps don't help — they either guilt-trip you into journaling or push therapy-speak you didn't ask for.
So I started designing something gentler.
Solace is a concept validated through this landing page. The actual application is in private development. If the idea resonates, the app gets built. If not, the brief lives on as a study in calm fintech-inspired design applied to mental wellness.
- Landing page (10 sections)
- Pricing, About, Privacy pages
- Working waitlist + admin notifications
- Multi-platform OG cards (LinkedIn, X, WhatsApp, etc.)
- LinkedIn + X launch campaign
- Vercel Analytics
- Reach 500 waitlist signups
- Email magic-link auth
- Daily mood check-in (mood + text reflection)
- 7-day mood history view
- Weekly summary email
- Web-only, mobile-responsive
- AI conversation flow with safety guardrails
- Voice journaling with auto-transcription
- Pattern detection across 30+ day windows
- iOS app (React Native)
- Android app
- Group reflection circles (opt-in)
- Export to therapist / coach (user-controlled)
- Localization (Spanish, French, Hindi)
Solace is currently a solo project in private development.
If you have feedback, ideas, or just want to talk wellness tech / calm UX / Wise-inspired design systems, feel free to:
- ⭐ Star this repo if the design or approach resonates
- 🐛 Open an issue if you spot a bug on the landing page
- 💌 Reach out via the waitlist form or LinkedIn
I read every message personally.
Built on the shoulders of builders smarter than me:
- Wise — for the design system that shaped every visual choice
- Linear — for the typography rhythm
- Headspace — for the brand voice
- Refactoring UI — for the card layering patterns
- Pieter Levels — for the "ship the landing page first" philosophy
- Marc Lou — for indie hacker pacing
- Vercel — for making deployment feel like nothing
- The countless open-source contributors whose work powers every line here
This project is source-available, NOT open source.
The code in this repository may be viewed for educational and reference purposes only.
❌ Commercial use is prohibited ❌ Brand copying is prohibited (name "Solace", butterfly mark, color system, Aura concept, design language) ❌ Production deployment of forks is prohibited
✅ Reading, learning, and discussing the technical implementation is welcome
See LICENSE for complete terms.
If you're building something genuinely your own and want to chat about wellness UX, design systems, or Next.js patterns — DM me. I'm happy to share knowledge. I'm not happy to be reskinned.
— [Sharad Manani]