Your guide to the quiet revolution
Helping everyday people understand and use AI — without the hype.
Solace is a static educational website that helps busy adults (25–65) understand and use AI tools for practical tasks in their personal and professional lives.
It's not a product, SaaS, or app — it's a warm, editorial guide that cuts through the noise.
"AI isn't about robots. It's about making your life a little easier — from filing taxes to planning vacations to finally getting your inbox under control."
| Page | Description | Topics |
|---|---|---|
🏠 Guide (index.html) |
Landing page — what AI is and why it matters | Introduction, Card grids, Getting started |
🏡 Home Life (home.html) |
AI for personal tasks | 💰 Tax prep · 📊 Budgeting · |
💼 Work Life (work.html) |
AI for professional growth | 📈 Career dev · 📬 Inbox/calendar · 📝 Performance reviews |
🧪 Labs (labs.html) |
6 hands-on AI experiments | Copy-paste prompts, 5–20 min each, zero setup |
| # | Lab | Tool | ⏱️ Time |
|---|---|---|---|
| 1 | Weekend Trip Planner | Perplexity | 10 min |
| 2 | Monthly Budget Check-in | Claude | 15 min |
| 3 | Resume Refresh | Claude | 20 min |
| 4 | Meeting Prep Brief | Perplexity | 10 min |
| 5 | Email Drafting Assistant | Claude | 5 min |
| 6 | Weekly Meal Planner | Perplexity | 10 min |
|
Colors
|
Typography
Spacing: Rem-based scale ( |
- 🌗 Dark mode — System detection + manual toggle with persistence
- 📱 Fully responsive — Mobile-first with breakpoints at 640/768/1024px
- ♿ Accessible — WCAG AA, skip links, ARIA attributes, keyboard support
- ✨ Animated — Scroll reveals, character animations, rough notation underlines
- 🎯 Reduced motion — All animations respect
prefers-reduced-motion - 📋 Copy-to-clipboard — Lab prompts with "Copied!" feedback
- 🔒 Not indexed —
robots.txtset toDisallow: /
HTML5 + CSS3 + Vanilla JS
├── No frameworks
├── No build system
├── No npm / bundler
└── Files served as-is
CDN Dependencies:
| Library | Version | Purpose |
|---|---|---|
| Rough Notation | 0.5.1 | Animated underline/highlight annotations |
| Splitting.js | 1.0.6 | Character splitting for hero text animation |
| Google Fonts | — | Instrument Serif typeface |
| Fontshare | — | Satoshi typeface (400/500/700) |
find-solace/
├── 📄 index.html Landing page
├── 📄 home.html Home Life guide
├── 📄 work.html Work Life guide
├── 📄 labs.html Hands-on Labs
├── 🎨 style.css Single shared stylesheet
├── 🕯️ favicon.svg Brand flame icon
├── 🤖 robots.txt noindex, nofollow
├── 🖼️ assets/ WebP images
├── 📋 specs/ Feature specifications (Spec Kit)
├── ⚙️ .specify/ Spec Kit internals
├── 🤝 .github/ Copilot agents & prompts
└── 📐 .vscode/ Editor settings
No build step required. Just serve the files:
# Option 1: Python
python -m http.server 8000
# Option 2: Node
npx serve .
# Option 3: VS Code
# Install "Live Server" extension → right-click index.html → "Open with Live Server"Then open http://localhost:8000 in your browser.
This project uses Spec Kit for structured development:
# Slash commands (in Copilot / Claude / your AI agent)
/speckit.constitution # Establish project principles
/speckit.specify # Create feature specification
/speckit.clarify # De-risk ambiguous areas
/speckit.plan # Create implementation plan
/speckit.tasks # Generate actionable tasks
/speckit.implement # Execute implementation| Component | Version | Status |
|---|---|---|
| Solace Site | 1.0.0 | ✅ Active |
| Spec Kit | 0.3.0 | ✅ Installed |
| Rough Notation | 0.5.1 | ✅ CDN |
| Splitting.js | 1.0.6 | ✅ CDN |
| HTML | 5 | ✅ Semantic |
| CSS | 3 | ✅ Custom Properties |
| JavaScript | ES6+ | ✅ Vanilla |
| Browser | Minimum Version | Status |
|---|---|---|
| Chrome | Last 2 versions | ✅ Supported |
| Firefox | Last 2 versions | ✅ Supported |
| Safari | Last 2 versions | ✅ Supported |
| Edge | Last 2 versions | ✅ Supported |
| IE 11 | — | ❌ Not supported |
| Platform | Support | Status |
|---|---|---|
| Desktop | Full | ✅ |
| Tablet | Full | ✅ |
| Mobile | Full (responsive) | ✅ |
| Screen readers | WCAG AA | ✅ |
Made with care · Powered by Perplexity Computer
🕯️ Finding solace in the quiet revolution