The live demo was built from exactly this text — nothing added.

# Lifestyle Notes Community

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original English-language lifestyle notes community centered on [NICHE] for [AUDIENCE]. The product is a polished three-page static web app: a masonry discovery feed at index.html, an immersive note detail at note.html, and a featured creator profile at profile.html. The default brand is Morrow & Moss and its editorial promise is 'Small rituals, beautifully shared.' Every screen must feel populated, intentional, and usable rather than like a marketing mockup.

- Audience: Creators, independent publishers, designers, and community builders who want an image-led notes product for [AUDIENCE], with realistic content and social interactions that work entirely in the browser.
- Goal: Let visitors discover visual notes, filter and search them, open a complete note, swipe through its photography, react and comment, then continue to the featured creator's notes and collections. Keep all content swappable through five variables while preserving the same layout and interaction model.
- Tone: Warm, observant, specific, and quietly optimistic. Write like thoughtful people sharing useful details from daily life, never like an engagement farm. Use concise US English, invented names, original conversations, and no claims about real users or online activity.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: Vite 5 (MIT), React 18 (MIT), Tailwind CSS 3.4 (MIT), Motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/dm-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Configure Vite with base './', build.sourcemap false, and three explicit HTML entry points: index.html, note.html, and profile.html. Each HTML file loads its own small React entry that shares components and content.
  - Use Tailwind for layout and state styling, with the supplied colors, spacing, radii, and font families in the theme. Add only a small global stylesheet for base typography, masonry columns, focus states, and reduced-motion overrides.
  - Put all variable values, navigation labels, notes, creator bios, tags, comments, collections, image paths, alt text, and calls to action in src/content.ts. Rewrite every content item to suit changed variable values; do not leave slow-living copy in an alternate case.
  - Create shared TypeScript models and a small localStorage store whose key is derived from a slug of [BRAND]. Persist likes, saves, follows, added comments, and selected creator tab locally; sample counts and conversations are fictional and never fetched.
  - Import Fraunces Variable and DM Sans Variable from their Fontsource packages and use Lucide React icons. Bundle all six supplied images from public/images; no remote fonts, icons, scripts, or images.
  - Use shared accessible buttons, visible keyboard focus, descriptive labels, and a skip link. Support 1440×900 and 390×844 without overflow, provide touch targets of at least 44px, and honor prefers-reduced-motion.

## Variables
- [BRAND] — Community name (default: "Morrow & Moss"). An invented two- or three-word lifestyle community name.
- [NICHE] — Community focus (default: "slow living and thoughtful homes"). The subject shared by all notes and collections.
- [AUDIENCE] — Audience (default: "people creating calmer, more personal spaces"). The people this community is meant to serve.
- [TAGLINE] — Editorial promise (default: "Small rituals, beautifully shared."). A short original sentence used as the discovery-page headline.
- [CREATOR_NAME] — Featured creator (default: "Maya Ellison"). An invented creator whose profile, notes, and collections are featured.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/lifestyle-notes-community in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F7F3EC` — Page background and primary text on dark buttons
- Surface `#FFFCF7` — Cards, carousel controls, and input surfaces
- Ink `#24251F` — Headings, body text, and dark primary buttons
- Sage `#56604D` — Active filters, follow states, links, and quiet accents
- Terracotta `#C96F4A` — Likes, small decorative marks, and image accents; never small text on Paper
- Sand `#E3DACD` — Borders, dividers, and inactive controls
- Muted `#6F7168` — Secondary text and metadata

### Typography
- Display and note titles: Fraunces Variable (OFL), weights 400/500/600
- Interface, body, and metadata: DM Sans Variable (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use an 8px base grid with a 1360px maximum content width, 40px desktop gutters, 20px mobile gutters, and a 72px desktop header. The discovery hero is a 5/7-column split with 48px between columns, 56px top padding, and 40px bottom padding. Feed cards have 20px text blocks and 28px masonry gaps. Note reading copy is capped at 640px. Mobile uses 24px section gaps and a 64px bottom navigation clearance.
- Radius: Use 20px for feature and note cards, 16px for image frames and inputs, 12px for small buttons, and full pills for tags and counters. Keep shadows minimal: 0 12px 36px rgba(36,37,31,0.08) only on the floating carousel controls and mobile navigation.
- Motion: On first load, fade the hero copy and feature image in over 420ms with a 12px upward offset and a 70ms stagger; do not animate again when returning to the page.
- Motion: Use Motion layout animations for masonry filter and search changes, 260ms with easing [0.22,1,0.36,1], while preserving document reading order and focus.
- Motion: Move carousel slides horizontally with a 280ms ease-out transition; support pointer swipe with a 45px threshold, touch swipe, arrow buttons, dots, and left/right keyboard keys without autoplay.
- Motion: Give like and save controls a 160ms icon fill and 0.92-to-1 scale response, and animate follow-state text with a simple 160ms crossfade.
- Motion: Use 180ms fade-and-8px-rise transitions between Notes and Collections and for locally added comments. Disable transforms and smooth scrolling when reduced motion is requested.
- Imagery: Use only the six coordinated local editorial lifestyle photographs listed in assets: morning-table.webp, reading-corner.webp, ceramic-hands.webp, kitchen-ritual.webp, balcony-garden.webp, and creator-portrait.webp. They share warm ivory, muted sage, terracotta, and caramel tones, soft window light, natural grain, and tactile unstyled imperfection. Reuse them deliberately across notes and collection collages with stable aspect-ratio containers and focal-point crops rather than stretching. The featured creator portrait is an entirely fictional adult and must not resemble a real individual. No readable packaging, text, logos, recognizable brands, landmarks, celebrities, or real people's likenesses. Every image gets content-specific US English alt text from src/content.ts; decorative duplicates use empty alt text.

## Pages & Sections
### Discover notes (`index.html`)
1. **Shared shell and navigation** — Use a typographic [BRAND] wordmark with no copied emblem, linking to ./index.html. Desktop navigation contains Discover (./index.html), Collections (./profile.html?tab=collections), Saved (./index.html?view=saved), a Search button that focuses the feed search field, and the featured creator portrait linking to ./profile.html. Add a skip link to the main content. Reuse this shell on note.html and profile.html. At 390px, keep only the wordmark and portrait in the top bar and add fixed bottom navigation for Discover, Saved, Collections, and Profile; the active item uses Sage and a small filled indicator.
   Layout: Sticky 72px top bar with a translucent Paper background, subtle Sand bottom border, and 1360px centered inner row. Desktop links sit right with 28px gaps. Mobile bottom navigation is a four-column Surface bar with safe-area padding and 44px targets.
   Motion: Navigation state changes use a 160ms color transition; no sticky-header movement.
2. **Editorial discovery hero** — Left eyebrow: 'A COMMUNITY FOR [NICHE]'. H1 exactly [TAGLINE], default 'Small rituals, beautifully shared.' Supporting copy: 'Unhurried notes about rooms, rituals, and the objects that make a day feel like yours.' Primary button 'Explore today's notes' scrolls to the filters; secondary text link 'Meet [CREATOR_NAME]' opens ./profile.html. Right feature is the note 'The five-minute reset that saved my mornings' by [CREATOR_NAME], labeled 'NOTE OF THE DAY', linking to ./note.html?id=morning-reset and using morning-table.webp. The first viewport must show a substantial photographic anchor, not typography alone.
   Layout: Desktop 12-column grid: five columns of copy aligned center-left and seven columns for a 4:3 image card. Place the note title in a Surface panel overlapping the image bottom-left by 24px, with author and 1,284 likes beneath. On mobile stack copy first with a 40px Fraunces H1, then the full-width image and a non-overlapping caption.
   Motion: Apply only the specified first-load stagger and a gentle image scale from 1.02 to 1 on entry; disable both for reduced motion.
3. **Tag filters and local search** — Heading 'Find your next small inspiration' and live result count. Filter pills are All notes, Slow Living, Home, Food, Craft, and Wellness. Search placeholder 'Search notes, creators, or tags'. Selecting a tag filters immediately, updates aria-pressed, and writes ?tag= to the URL without reloading. Search filters title, creator, excerpt, and tags locally. ?view=saved replaces the heading with 'Your saved notes' and shows only saved items; if none, show 'Notes you save will gather here.' and a working 'Discover notes' reset button. Clear filters appears only when needed.
   Layout: A 64px high filter row below the hero, with horizontally scrollable pills and a 280px search field at the right on desktop. On mobile, search occupies its own full-width row and pills scroll below it without clipping.
   Motion: Animate result layout for 260ms and crossfade the count; do not delay actual filtering.
4. **Masonry notes feed** — Populate nine original default notes with exact titles and like counts: 'The five-minute reset that saved my mornings' — Maya Ellison — Slow Living — 1,284; 'A reading corner that finally gets used' — Theo Bennett — Home — 946; 'What my first pottery class taught me' — Lena Ortiz — Craft — 731; 'A softer start: citrus, mint, and ten quiet minutes' — Maya Ellison — Food — 1,102; 'The six-pot balcony garden' — Jun Park — Home — 854; 'A linen table for doing absolutely nothing' — Maya Ellison — Slow Living — 669; 'Three small objects that make a room feel yours' — Theo Bennett — Home — 512; 'The no-recipe weekend lunch I keep repeating' — Lena Ortiz — Food — 988; 'Before the messages: a morning on the balcony' — Jun Park — Wellness — 1,476. Assign the listed local photographs logically, vary 4:3, 3:4, and 1:1 covers, and give each a one-sentence original excerpt. Image and title link to ./note.html?id=<note-id>. Heart and bookmark buttons toggle local state and update counts without opening the note. Secondary creator initials are acceptable in the feed; the featured profile uses the generated portrait.
   Layout: Use CSS columns for a true three-column masonry feed at desktop, two at tablet, and one at 390px. Cards remain inline-block with 28px column and row gaps. Keep image and title links separate from action buttons. Card body contains creator row, 24px Fraunces title, two-line excerpt, tag, like count, and save action. Maintain a sensible DOM order on every breakpoint.
   Motion: Filter with Motion layout animations; hovering a cover scales it no more than 1.025 over 240ms. Touch and reduced-motion modes remove hover scaling.
5. **Community prompt and footer** — A compact editorial band says 'THIS WEEK'S PROMPT' and 'Show us a corner that helps you exhale.' Supporting copy invites browsing rather than posting: 'See how [CREATOR_NAME] collected quiet corners, useful objects, and slow morning ideas.' CTA 'Explore the collection' opens ./profile.html?tab=collections. Footer contains [BRAND], 'A softer place to share what makes a day.', text links to Discover, Collections, and Profile, and the optional [CREDIT] link. Do not add social icons, fake app-store badges, dates, or external links.
   Layout: Full-width Sand-tinted band with a 2/1 text-to-button grid and 32px padding, followed by a simple footer with a Sand top border. Stack CTA below copy on mobile.
   Motion: No reveal animation required; CTA hover uses color only.

### Note detail (`note.html`)
1. **Note carousel and identity** — Read ?id= from the URL and show the matching note; with no id or an unknown id, always show morning-reset. The default carousel uses morning-table.webp, reading-corner.webp, and kitchen-ritual.webp in that order, with unique alt text and a visible '1 / 3' counter. Above the title show 'Slow Living · 5 min read'. H1 is 'The five-minute reset that saved my mornings'. Author row uses creator-portrait.webp, [CREATOR_NAME], and 'Home rituals, secondhand finds, and meals that take their time.' Follow toggles to Following locally and stays synchronized with profile.html. Like and Save controls show current state and count.
   Layout: After the shared header, a back link 'Back to all notes' opens ./index.html. Desktop main is a 7/5 split with 48px gap: carousel left and sticky identity panel right. Carousel uses a stable 4:5 frame with contain-safe focal crops, previous/next buttons at the sides, and three dots below. Mobile stacks title and author before a full-width 4:3 carousel, followed by actions; all controls remain at least 44px.
   Motion: Implement swipe, pointer drag, arrow keys, buttons, and dots with the specified 280ms slide transition. Never autoplay; reduced motion switches images instantly.
2. **Rich note body and tags** — Opening paragraph: 'For years, I treated mornings like a race I was already losing. Then I started ending each evening with five quiet minutes of reset—not cleaning the whole home, just giving my future self a softer place to begin.' Add three headed sections. 'Start where your eyes land first' explains clearing only the breakfast table, returning one object to its place, and leaving a cup and current book ready. 'Make the first action easy' describes setting out the kettle, a favorite cup, and a blank journal so there is no searching before tea. 'Stop before it becomes a project' recommends a five-minute timer and leaving the rest untouched. Include the pull quote 'The point is not a perfect room. It is one kind thing waiting for you.' Closing: 'The next morning will still be a morning. It just will not begin with yesterday's clutter.' Tags Slow Living, Home, and Morning link to ./index.html?tag=<tag>. Rewrite this complete narrative for alternate variable values rather than only replacing the title.
   Layout: Body sits below the carousel in a 640px readable column aligned with its left edge, with 18px body text, 1.75 line height, 32px paragraph spacing, and 34px Fraunces section headings. Pull quote has a 3px Terracotta left rule and 24px Fraunces italic. Tags wrap as pills below.
   Motion: No scroll-jacking or reveal gates; all article text is visible immediately.
3. **Comments and related notes** — Comments heading includes the count. Seed three original comments: Nora P. — 'The tray by the door is such a small change, but I can see it making mornings calmer.'; Ellis R. — 'I tried the five-minute version while my tea steeped. The clear surface really did change the room.'; Amara K. — 'Saving the one thing back where it belongs rule for tonight.' Use initials avatars, names, and full sentences with no dates. Comment textarea placeholder 'Add something thoughtful...' and button 'Post comment' append a trimmed non-empty comment locally, clear the field, update the count, and persist after reload. Empty submission keeps an inline helpful error. Small note: 'Your reactions and comments stay on this device.' Up next shows three related cards for reading-corner, citrus-mint, and linen-table, each linked to its note.html query.
   Layout: Desktop comments occupy the same left reading column while a right rail holds Up next as three compact horizontal cards. Mobile uses one column with related cards after comments. Composer is a Surface card with 16px padding and a right-aligned Ink button.
   Motion: New comments fade and rise 8px over 180ms; no simulated other-user activity or delayed fake posting.

### Creator profile (`profile.html`)
1. **Featured creator introduction** — Show [CREATOR_NAME], default Maya Ellison, with the creator-portrait.webp image and eyebrow 'FEATURED CREATOR'. Bio: 'Collecting quiet corners, useful objects, and recipes worth repeating. I share small ways to make home feel more like your own.' Details read 'Portland, Oregon', '48 notes', '6 collections', and '12.8K followers' as fictional sample content with no dates. Follow button shares state with note.html. A secondary 'View notes' button activates the Notes tab. Rewrite location, counts, bio, and specialty when variables change.
   Layout: Desktop profile hero is a 3/9 grid inside a Surface card: 240×280 portrait left, text center-left, and follow controls aligned right. Mobile uses a 112×144 portrait above the text and a full-width follow button. Keep the name at 48px desktop and 38px mobile in Fraunces.
   Motion: Follow text crossfades in 160ms; the portrait remains static.
2. **Notes and Collections tabs** — Two accessible tabs, Notes and Collections, update ?tab= without a page reload and default to Notes unless ?tab=collections. Notes shows six [CREATOR_NAME] notes: the three feed notes morning-reset, citrus-mint, and linen-table plus 'A home for the books I have not read', 'How I choose a secondhand lamp', and 'Sunday soup, without the timetable', reusing reading-corner.webp, ceramic-hands.webp, and kitchen-ritual.webp. Every note opens its working note.html?id= view. Collections shows three cards: 'The gentle reset' — 12 notes — morning-table, reading-corner, balcony-garden; 'Rooms with room to breathe' — 8 notes — reading-corner, ceramic-hands, morning-table; 'A better cup' — 6 notes — kitchen-ritual, morning-table, ceramic-hands. Selecting a collection expands an inline panel with a two-sentence original description and three linked note titles; selecting again collapses it. No card is a dead button.
   Layout: Tab bar has a Sand bottom border and 44px targets. Notes uses the same three/two/one-column visual grid language as the feed. Collections is a three-column desktop grid and single-column mobile grid; each card has a three-image collage, 28px Fraunces title, count, and expand icon. The inline collection panel spans the grid below the selected card.
   Motion: Use the specified 180ms tab transition and height/opacity expansion for a collection, with instant reduced-motion states and correct aria-expanded.
3. **Creator note and footer** — Closing strip quotes [CREATOR_NAME]: 'I save notes I want to live with, not just look at.' Add 'Browse the community' linking to ./index.html and repeat the shared simple footer. Do not add contact forms, external social profiles, or unimplemented message buttons.
   Layout: A centered 720px text block with generous 48px vertical padding, followed by the footer. Keep the closing quote in 30px Fraunces on desktop and 26px on mobile.
   Motion: None.

## Assets
- image: https://media.vibefather.ai/assets/307d2680-aefc-4aa0-acac-c3171ab038d2/morning-table.webp → public/images/morning-table.webp. Alt: 'Linen-covered breakfast table with ceramic tea cups and an open blank journal in warm window light.' Used for the discovery feature, morning-reset carousel, feed cards, and collection collages. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record in ASSETS.md.
- image: https://media.vibefather.ai/assets/307d2680-aefc-4aa0-acac-c3171ab038d2/reading-corner.webp → public/images/reading-corner.webp. Alt: 'A soft armchair beside a reading lamp and a small stack of unmarked books.' Used for reading notes, the morning-reset carousel, creator notes, and collections. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record in ASSETS.md.
- image: https://media.vibefather.ai/assets/307d2680-aefc-4aa0-acac-c3171ab038d2/ceramic-hands.webp → public/images/ceramic-hands.webp. Alt: 'Hands shaping a small clay bowl on a pottery wheel.' Used for pottery and secondhand-object notes and collection collages. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record in ASSETS.md.
- image: https://media.vibefather.ai/assets/307d2680-aefc-4aa0-acac-c3171ab038d2/kitchen-ritual.webp → public/images/kitchen-ritual.webp. Alt: 'Ceramic kettle, citrus, and herbs arranged on a wooden kitchen counter.' Used for food and morning-ritual notes, the default carousel, and A better cup collection. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record in ASSETS.md.
- image: https://media.vibefather.ai/assets/307d2680-aefc-4aa0-acac-c3171ab038d2/balcony-garden.webp → public/images/balcony-garden.webp. Alt: 'A small balcony garden with terracotta pots and a folded throw over a wooden stool.' Used for balcony and wellness notes and The gentle reset collection. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record in ASSETS.md.
- image: https://media.vibefather.ai/assets/307d2680-aefc-4aa0-acac-c3171ab038d2/creator-portrait.webp → public/images/creator-portrait.webp. Alt: 'A creator seated beside a bright window in a warm, plant-filled room.' Used for the featured creator's profile, header avatar, and default note author row. The person is entirely fictional and does not resemble any real individual. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Download locally and record in ASSETS.md.
- font: Self-host Fraunces Variable through @fontsource-variable/fraunces and DM Sans Variable through @fontsource-variable/dm-sans, both OFL-1.1. Import locally in the app, list packages and license in ASSETS.md, and never use a font CDN.
- icon: Use locally bundled lucide-react icons (ISC) for Search, Heart, Bookmark, ArrowLeft, ArrowRight, ChevronLeft, ChevronRight, Plus, Check, Home, User, Grid2X2, and Send. Do not draw or import any existing community platform's icons; list Lucide and its license in ASSETS.md.

## Don'ts
- Do not use any existing lifestyle or social platform's name, logo, mascot, slogan, exact palette, custom font, unique iconography, code, copy, photography, or signature interface composition.
- Do not use real people's likenesses, celebrities, licensed characters, recognizable product branding, readable packaging, or third-party logos. The generated creator must remain an explicitly fictional person.
- Do not add a backend, authentication, database, API routes, third-party APIs, analytics, real posting, remote comments, or network-dependent social counts. All interactions and persistence must be honest browser-only behavior.
- Do not hotlink assets or load scripts, fonts, icons, or images from CDNs. Do not use Unsplash, Pexels, Pixabay, placeholder-image services, restricted component source, or non-permissive dependencies.
- Do not use commercial fonts or external font services; ship only the specified self-hosted OFL Fontsource families.
- Do not leave placeholder copy, lorem ipsum, slow-living remnants in an alternate case, empty detail views, dead buttons, nonfunctional tabs, or unimplemented navigation. note.html without a valid id must show morning-reset.
- Do not use bare-directory links, client-only routes that break on static hosting, source maps, copied src directories, or absolute production asset paths. Use ./index.html, ./note.html, and ./profile.html with relative assets and Vite base './'.
- Do not display dates, fabricated live-status indicators, online-member claims, or engagement numbers presented as real activity. All people, conversations, and counts are fictional sample content.
- Do not make the first screen typography-only, replace the photographic feed with generic cards, add autoplay to the carousel, or hide article content behind scroll animations.
- Do not exceed 20 MB in dist/, ignore mobile touch gestures or keyboard controls, allow horizontal overflow at 390px, or ship console errors. Respect prefers-reduced-motion throughout.
- Do not mention VibeFather inside the product except the optional [CREDIT] footer link. Keep all site copy, sample data, labels, and alt text in US English.

---
— Prompt by VibeFather · https://vibefather.ai/t/lifestyle-notes-community · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.