Skip to content
VibeFather
Join

About this template

Senior Living Community Website is a single-page site for a residential community that needs to feel reassuring without hiding practical details. It suits independent living, assisted living, and memory care providers, as well as small operators building a first family-facing website. Visitors can enlarge the text, compare care levels, browse an ordinary day through photographs, review sample menus, switch between floor plans, and save a tour request. The experience gives older adults and their family members the same clear path rather than treating accessibility as a separate mode.

The visual direction uses warm ivory, deep evergreen, muted sage, and restrained clay accents. Fraunces adds a residential editorial character, while Atkinson Hyperlegible keeps long answers and form controls readable. A wide courtyard photograph anchors the first screen, followed by generous content bands, large buttons, visible focus states, and simple comparison tables. Motion is limited to short reveals and interface feedback, with reduced-motion support throughout. The layout also suits a single neighborhood or a small regional provider.

Six coordinated image prompts cover the courtyard, garden club, art workshop, dining room, apartment interior, and music social. Floor plans and icons are drawn locally. Default content introduces an invented community in Asheville, with a Santa Fe alternative for the second case. Change the brand, location, community type, audience, and phone number through variables, then adapt the centralized copy and sample details. The finished build is a static React site: filters, tabs, lightbox, text sizing, and tour requests work entirely in the browser, and the form never pretends to contact a server.

The template prompt

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

# Senior Living Community Website

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

## Brief
Build an original single-page website for [BRAND], a [COMMUNITY_TYPE] in [LOCATION]. It serves [AUDIENCE] with large readable type, a persistent text-size control, a clear comparison of independent living, assisted living, and memory care, a filterable daily-life gallery, sample dining menus, selectable floor plans, and a client-side tour request. Use the default English copy below, and rewrite every brand-specific, location-specific, audience-specific, and care-specific detail when variable values change.

- Audience: Older adults researching their own next home and adult children, partners, or caregivers comparing communities with them. The secondary audience is a senior-living operator who needs an accessible, trustworthy marketing and tour-request site.
- Goal: Make care options and daily life easy to understand, let visitors explore at their own reading size and pace, answer practical questions about meals and residences, and provide a clear tour request without backend services or false submission claims.
- Tone: Warm, calm, respectful, and concrete. Speak to residents as independent adults, never as patients or children. Use plain US English, specific routines and inclusions, no fear-based selling, no clinical promises, and no exaggerated claims.

## Stack
- Framework: Vite 6 + React 19 + TypeScript
- Styling: Tailwind CSS 4
- Libraries: react (MIT), react-dom (MIT), tailwindcss (MIT), @tailwindcss/vite (MIT), motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource/atkinson-hyperlegible (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Configure vite.config.ts with base './', build.sourcemap false, and the React and Tailwind Vite plugins. The production entry is index.html and every asset URL must be relative.
  - Use Tailwind CSS 4 with a small src/index.css theme for the exact colors, font families, focus rings, text-size variants, keyframes, print rules, and reduced-motion overrides. Keep reusable interface pieces in src/components.
  - Put all variable defaults, headlines, paragraphs, navigation labels, care descriptions, comparison values, gallery captions, menu items, floor-plan details, reviews, FAQs, contact details, and asset paths in src/content.ts. Rewrite default-specific content when variables change; never leave the previous brand, location, audience, community type, or phone number behind.
  - Keep shared state in src/App.tsx. Implement text-size preference, gallery filters, lightbox state, care and dining tabs, floor-plan selection, mobile navigation, and the tour-request draft in React. Persist only text-size preference and the local tour request in localStorage, with safe fallbacks when storage is unavailable.
  - Import self-hosted Fraunces Variable and Atkinson Hyperlegible 400/700 in src/main.tsx. Use Motion for React through motion/react and Lucide React for interface icons; do not load any CDN resource.
  - Create an original favicon from a rounded architectural arch and two simple evergreen leaf shapes. Do not imitate a real community logo or use a recognizable facility emblem.
  - Use semantic landmarks, a skip link, labelled controls, keyboard-operable tabs and dialogs, visible focus, and an aria-live confirmation. All tap targets are at least 44×44px and primary form controls are at least 52px high.

## Variables
- [BRAND] — Community name (default: "Avenbrook Community"). An invented senior-living community name used throughout the site.
- [LOCATION] — Community location (default: "Asheville, North Carolina"). A city and state or region; adapt the address and local references to match.
- [COMMUNITY_TYPE] — Community type (default: "full-service senior living community"). A short lowercase phrase describing the community model.
- [AUDIENCE] — Primary audience (default: "older adults and their families"). A short lowercase phrase describing who the community welcomes.
- [PHONE] — Tour phone number (default: "(828) 555-0146"). A display and telephone-link number; use fictional sample contact details.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/senior-living-community-website 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
- Ivory `#F7F3EA` — Main page canvas and warm negative space.
- Paper `#FFFDF8` — Header, cards, form controls, menus, and lightbox surfaces.
- Evergreen `#183C34` — Primary text, dark buttons, footer, active controls, and strong icon strokes.
- Soft Pine `#52665D` — Secondary copy at 16px or larger; never use for faint microtype.
- Sage `#DEE7D9` — Selected tabs, care highlights, schedule rows, and soft information panels.
- Clay `#984B34` — Small editorial accents, underlines, and secondary emphasis; pair with Ivory or Paper text only where contrast passes.
- Honey `#E6B65C` — Active marker and small decorative highlight behind Evergreen text, never body text on Ivory.
- Linen Line `#CBD1C5` — One-pixel borders, input outlines, comparison rules, and separators.

### Typography
- Display, section headings, and large quotations: Fraunces Variable (OFL), weights 500/600/700
- Body, navigation, controls, tables, and numbers: Atkinson Hyperlegible (OFL), weights 400/700

### Layout & motion
- Spacing: Use a centered 1200px maximum container with 32px desktop gutters and 20px mobile gutters. Build on an 8px base grid. Desktop sections have 96px vertical padding and mobile sections 64px. The hero has 48px top and 64px bottom padding. Cards use 24–32px padding, form rows 20px gaps, and body copy a maximum measure of 68 characters.
- Radius: Use 28px corners for hero and gallery photography, 20px for major panels and dialogs, 14px for cards and inputs, and full pills only for text-size, filter, and time-slot controls. Use 1px Linen Line borders and very restrained shadows rather than floating every section.
- Motion: Reveal major sections once with Motion whileInView: opacity 0 to 1 and y 14 to 0 over 420ms, stagger direct children by 60ms, viewport amount 0.16.
- Motion: Use 180–220ms transitions for tabs, gallery filtering, mobile navigation, accordion height, buttons, and focus states; never delay reading while animation completes.
- Motion: Open the gallery lightbox with a 180ms opacity and 8px scale transition; support Escape, left/right arrows, focus trapping, and restoring focus to the originating thumbnail.
- Motion: Crossfade the selected care detail, dining menu, and floor-plan drawing over 180ms while keeping panel dimensions stable enough to avoid layout jumps.
- Motion: When prefers-reduced-motion is enabled, remove transforms and smooth scrolling, show final states immediately, and keep every interaction functional.
- Imagery: Use six coordinated photorealistic editorial images generated specifically for this template. The shared look is soft late-morning light, muted sage, cream, honey oak, and terracotta, realistic residential materials, subtle 35mm film grain, and calm documentary composition. Show an operating community through spaces, activities, and meals rather than institutional corridors or posed clinical scenes. People are fictional, varied in age and ethnicity, and photographed only from behind or at a distance with no recognizable face. The hero is a spacious courtyard scene, never a face close-up. Download every image locally and list each in ASSETS.md with the supplied generated-asset credit. Do not add other photographs, logos, readable signs, watermarks, or branded objects.

## Pages & Sections
### [BRAND] — Senior living in [LOCATION] (`index.html`)
1. **Accessible header and photographic hero** — Begin with a Skip to main content link that becomes visible on focus. Create a 76px sticky Paper header with a Linen Line bottom border. Left: the original arch-and-leaf favicon and [BRAND] in Atkinson Hyperlegible 700. Center desktop anchors: Care options, Daily life, Dining, Residences, FAQ. Right: a Text size button with Lucide CaseSensitive, visible state Standard or Large, and an Evergreen Schedule a tour button. The text-size button toggles a root data-text-size attribute and aria-pressed, saves the preference locally, and raises body copy from 18px to 20px, secondary copy from 16px to 18px, and control labels by 2px without clipping or horizontal page overflow. On mobile show brand, Text size, and Menu; put navigation, [PHONE], and Schedule a tour in the expanded menu. Hero eyebrow: [COMMUNITY_TYPE] · [LOCATION]. H1 in Fraunces 600: A familiar rhythm. Support when it matters. Supporting copy: [BRAND] welcomes [AUDIENCE] with thoughtful care, good food, and days shaped around what you enjoy. Primary CTA: Explore care options. Secondary CTA: Schedule a tour. Add a quiet telephone link: Questions? Call [PHONE]. Use hero-courtyard.webp with alt: Covered garden walkway and courtyard at a welcoming residential community. Add a small Paper caption card over the lower-left: A courtyard made for unhurried mornings.
   Layout: Hero is a 12-column grid with 5 columns for copy and 7 for the photograph, 56px column gap, and a minimum 570px hero body. H1 is clamp(48px, 5vw, 72px), line-height 1.02, letter-spacing -0.025em. Body copy is 19px with 1.6 line height. The image fills a 4:3 desktop frame with object-fit cover and 28px radius; the caption is 240px wide and offset 20px. CTAs sit side by side with 52px minimum height. At 390px stack copy before a 4:3 photograph, use a 43px H1, full-width CTAs, and a static caption below the image rather than overlaid. Large text mode must wrap naturally without hiding navigation or CTAs.
   Motion: Fade the eyebrow, headline, copy, and actions with a 60ms stagger. Scale the photograph from 1.02 to 1 over 600ms. Anchor navigation smooth-scrolls with 96px scroll-margin-top; use instant scrolling under reduced motion.
2. **Everyday assurance strip** — Add three concise assurances with Lucide Utensils, Sparkles, and Clock3 icons: Three meals prepared each day; Weekly housekeeping and linen service; A team member on site around the clock. Supporting lines respectively: With choices at every meal. So home stays easy to manage. For a familiar response when needs change.
   Layout: A full-width Evergreen band with three equal columns inside the standard container, 28px vertical padding, Paper text, and subtle vertical dividers on desktop. Each item is an icon plus a two-line text group. On mobile stack three rows with 16px gaps and remove dividers.
   Motion: One 400ms reveal on entry; no looping badges or counters.
3. **Welcome and decision guide** — Anchor as about. Eyebrow: START WITH YOUR DAY, NOT A CHECKLIST. H2: Home should still feel like your own. Copy: Choose the routines you want to keep and the tasks you would rather hand off. At [BRAND], a private apartment, shared meals, and a familiar weekly rhythm can sit alongside just the right amount of support. Add three plain-language decision prompts with Lucide Check icons: Want freedom from cooking and home maintenance? Start with independent living. Would help with dressing, medication reminders, or mobility make the day easier? Explore assisted living. Are memory changes making familiar routines harder to navigate? Learn about our memory care neighborhood. Closing note: You do not need to decide before visiting. A tour is a chance to ask questions, not commit.
   Layout: Two-column section: 5 columns for sticky eyebrow, H2, and copy; 7 columns for three Paper decision cards stacked with 16px gaps. Each card has a small Sage icon field and 24px padding. On mobile use one column and remove sticky positioning.
   Motion: Cards reveal with a 60ms stagger and no hover lift on touch devices.
4. **Care-level tabs and comparison** — Anchor as care. Eyebrow: CARE THAT FITS THE PERSON. H2: Compare the support, side by side. Intro: These descriptions are starting points. A real care plan should be discussed with the individual and their family. Build three keyboard-operable tabs. Independent living panel title: Your own routine, with fewer chores. Copy: A private apartment, dining, activities, housekeeping, and maintenance for people who want community without home upkeep. Best for: Independent daily routines with optional social and dining support. Assisted living panel title: A steady hand with daily tasks. Copy: The same residential comforts plus personalized help with dressing, bathing, mobility, and medication reminders. Best for: People who want to stay involved in their day with consistent support nearby. Memory care panel title: Familiar cues and a secure setting. Copy: A smaller neighborhood, consistent daily rhythms, and purposeful activities designed for people living with memory loss. Best for: People who benefit from a secured environment and more structured guidance. Below the panels, provide a comparison table with columns Independent, Assisted, Memory care and rows: Chef-prepared meals — Included / Included / Included; Weekly housekeeping — Included / Included / Included; Personal care plan — Optional / Included / Included; Medication reminders — Optional / Included / Included; Secured courtyard access — Open / Open / Secured. CTA below: Talk through your options, scrolling to the tour form.
   Layout: Section sits on Paper. Three equal tab buttons form a segmented row with 48px minimum height; selected tab uses Evergreen with Paper text. The active detail is a 20px-radius Sage panel split into 7 columns of copy and 5 columns containing Best for and a small Lucide Compass icon. The comparison table appears below with a sticky first column on desktop and clear Included/Optional labels rather than check-only encoding. At 390px stack tab buttons vertically, show the panel in one column, and place the table in its own labelled horizontal scroll region with a visible Scroll to compare hint; the page itself must never overflow.
   Motion: Crossfade the active panel over 180ms. Move focus only when the user activates a tab; arrow keys move between tabs. Reduced motion shows immediate changes.
5. **Daily-life gallery and schedule** — Anchor as daily-life. Eyebrow: AN ORDINARY DAY, WELL LIVED. H2: See where the day can take you. Intro: Browse a few sample moments from the community. Filters: All 5, Activities 3, Dining 1, Spaces 1. Gallery items and alt text: garden-club.webp, Activities, Residents potting herbs together on a sunny terrace, caption Garden club on the terrace; art-workshop.webp, Activities, An open art table with residents painting botanical shapes, caption Open art table; dining-room.webp, Dining, A bright dining room with comfortable chairs and a seasonal lunch, caption Lunch in the garden room; apartment-interior.webp, Spaces, A sunny studio apartment with clear walking paths, caption Room for favorite things; music-social.webp, Activities, Residents listening to an acoustic music social, caption Afternoon music social. Every thumbnail opens a lightbox with the same image, descriptive alt, caption, counter, Previous and Next controls, and Close. Below the gallery add Sample day at [BRAND]: 7:30 AM Morning stretch; 9:00 AM Garden club; 12:00 PM Lunch; 2:00 PM Art workshop; 4:30 PM Music social; 6:00 PM Dinner. Note: Activities are illustrative; personal routines always come first.
   Layout: Use a 12-column masonry-like but deterministic grid: the garden image spans 7 columns and 2 rows, art spans 5 columns, dining spans 5 columns, apartment spans 4 columns, and music spans 8 columns. Keep all image frames 4:3 within their grid allocation using object-fit cover; place captions on Paper strips below images, never over faces. Filters are 44px-high wrapping pills above the grid. The sample-day schedule is a Paper panel with six two-column time/activity rows and Linen Line separators. At 390px use one image per row, no horizontal carousel, and keep time and activity in two readable columns.
   Motion: Filtering crossfades and slightly scales remaining cards over 180ms without reordering them unexpectedly. Lightbox uses the specified accessible dialog behavior. No autoplay or infinite motion.
6. **Dining and sample menu** — Anchor as dining. Eyebrow: THE TABLE IS A GATHERING PLACE. H2: Come hungry. Stay for conversation. Copy: Meals at [BRAND] balance familiar favorites with a seasonal choice, served in a room where nobody needs to rush. Add three tabs: Breakfast, Lunch selected initially, Dinner. Breakfast items: Cinnamon oatmeal with stewed apples; Vegetable omelet with whole-grain toast; Greek yogurt with berries and walnuts. Lunch items: Herb-roasted chicken with carrots and mashed potatoes; Butternut squash soup with a garden salad; Lemon rice bowl with chickpeas and roasted vegetables. Dinner items: Baked salmon with dill and green beans; Turkey meatloaf with sweet potato and peas; Mushroom risotto with roasted tomatoes. Mark the rice bowl and mushroom risotto Vegetarian. Include a Print sample menu button using window.print and a print stylesheet for the active menu. Note: This is a sample menu. Ingredients and dietary needs should be reviewed individually with the dining team.
   Layout: Two equal columns with 56px gap. Left uses dining-room.webp in a 4:3 frame and a small caption: A seat with time to enjoy it. Right contains heading, copy, three large tabs, and a Paper menu panel with three rows, dish names in 18px 700, and Vegetarian tags in Sage with Evergreen text. On mobile place the image after the intro and before the tabs; print button remains full width.
   Motion: Menu changes use a short opacity transition; no flipping cards or auto-advancing meal tabs.
7. **Residences and selectable floor plans** — Anchor as residences. Eyebrow: SPACE TO MAKE YOUR OWN. H2: Choose the layout that fits your life. Intro: Every sample residence includes a private bathroom, step-free shower, wide doorways, individual climate control, and an emergency call button. Create three selector cards: Studio — 420 sq ft, from $3,300/month; One bedroom — 600 sq ft, from $4,100/month; Companion suite — 500 sq ft, from $3,000/month. Selecting one updates an original code-drawn SVG plan and details. Studio zones: sleeping/living 15' × 13', kitchenette, accessible bath, entry closet. One bedroom zones: bedroom 12' × 12', living 14' × 12', kitchenette, accessible bath, two closets. Companion suite zones: two sleeping areas each 10' × 11', shared sitting area, accessible bath, two closets. Draw walls, doors with swing arcs, fixtures, furniture, labels, and dimensions in simple Evergreen lines on Paper; use Sage for the selected zone and Honey only for small markers. Add a Print floor plan button and text: Monthly rates are illustrative for this invented community and include dining, housekeeping, activities, and utilities. Care pricing is discussed separately. Place apartment-interior.webp beside the introduction with alt: A furnished studio apartment with a bed, armchair, and clear walking paths.
   Layout: Start with a 5-column photograph and 7-column heading/introduction. Below, use a 4-column stack of three selector cards and an 8-column Paper floor-plan panel. Selector cards show name, size, rate, and ChevronRight; selected card has a 2px Evergreen border and Sage background. The SVG uses a consistent 4:3 viewBox with a title and description for screen readers, plus a text list of every zone below it. At 390px use one column, make selector cards full width, and keep the SVG within the viewport without horizontal scrolling.
   Motion: Crossfade the plan and details over 180ms and highlight the selected zone without animating dimensions. Reduced motion switches immediately.
8. **Family and resident notes** — Eyebrow: WHAT FAMILIES NOTICE. H2: The little details become the important ones. Display three invented quotations without portraits, ratings, or external review badges. Quote 1: Dad used the menu and floor-plan pages before our visit, so he arrived with his own questions. That made the tour feel like his decision. — Nadia P., daughter of a resident. Quote 2: I brought my reading chair and my Friday routine. The difference is that I no longer have to plan every dinner or repair. — Robert M., assisted living resident. Quote 3: The care comparison gave us a way to talk about help without making the whole conversation about loss. — Elena and Mark S., family visitors. Footer note: Names and quotations are invented sample content for this demo.
   Layout: An Ivory section with heading aligned left and three equal Paper cards below, 24px gaps and 28px padding. Quote text uses Fraunces 500 at 23px with 1.4 line height; attribution uses Atkinson Hyperlegible 16px. On mobile stack the cards vertically, never in a clipped carousel.
   Motion: Single staggered reveal only; no auto-rotating testimonials.
9. **Frequently asked questions** — Anchor as faq. Eyebrow: GOOD QUESTIONS ARE WELCOME. H2: Before you come for a look around. Use six accessible accordion items, first open initially. Do I need to know which care level I want? — No. Bring your questions and daily routine. The care comparison is only a starting point for a longer conversation. Can residents bring their own furniture? — Yes. A favorite chair, photographs, and familiar linens help a residence feel personal; the tour is a good time to discuss measurements. What does the monthly rate include? — The sample rates include the residence, dining, housekeeping, activities, maintenance, and utilities. Personal care is priced separately after an assessment. How are dietary needs handled? — Menus offer more than one choice, and ingredients or texture needs should be reviewed with the dining team before move-in. How long does a tour take? — Allow about 45 minutes for a residence, shared spaces, and time for questions. You are welcome to bring a family member. Is a tour a commitment? — No. Visiting is simply a way to see the spaces, meet people, and decide what you want to ask next.
   Layout: Two-column section with a 4-column heading and an 8-column accordion. Each question is a full-width 52px-minimum button with Plus/Minus icon, aria-expanded, and a Linen Line bottom border. Answers use Atkinson Hyperlegible 18px with 1.65 line height. On mobile use one column and keep answers at full readable width.
   Motion: Animate answer height and opacity over 200ms and rotate Plus 45 degrees when open. Instant under reduced motion.
10. **Client-side tour request** — Anchor as tour. Eyebrow: COME AS YOU ARE. H2: Walk in as a visitor. Leave with a clearer plan. Copy: Choose a day and time, tell us who is coming, and bring the questions that matter to you. You do not need to bring paperwork. Form fields: Full name required, Email required, Phone optional, Who is the tour for? select with Myself, Parent, Partner, Someone else, Care interest select with Not sure yet, Independent living, Assisted living, Memory care, Preferred date required native date input, Preferred time required with three radio-style buttons 10:00 AM, 1:00 PM, 4:00 PM, and Questions or accessibility needs optional textarea. Include inline validation, autocomplete attributes, persistent labels, and an aria-live error summary. Submit button: Save tour request. Beside the form show Visiting details: Tours Monday–Saturday, 9:00 AM–5:00 PM; Allow about 45 minutes; [LOCATION]; [PHONE]. Because this is a static demo, valid submit saves the request and selected values to localStorage and replaces the form with an in-page confirmation: Your tour request is saved on this device. No message was sent. Your requested time is [chosen date] at [chosen time]. To talk with the sample community now, call [PHONE]. Include Start a new request to clear the form. Never claim a coordinator received or confirmed the request.
   Layout: A Paper 20px-radius panel on an Evergreen section background. Inside, use 7 columns for the form and 5 for an Ivory visiting-details card. Name/email and phone/date use two-column field rows; remaining fields span full width. Inputs have Paper backgrounds, 1px Linen Line borders, 52px minimum height, and 3px Honey/Evergreen focus treatment. Time choices are three equal large buttons. At 390px stack visiting details before the form, use one field per row, and keep the confirmation fully in normal flow.
   Motion: Reveal once, then replace the form with confirmation using a 200ms fade. Focus the confirmation heading after submit. Do not show a spinner or simulate network activity.
11. **Footer** — Use an Evergreen footer with [BRAND], the line A [COMMUNITY_TYPE] for [AUDIENCE], and anchor links Care options, Daily life, Dining, Residences, FAQ, and Schedule a tour. Show [PHONE], [LOCATION], and Tours Monday–Saturday, 9:00 AM–5:00 PM. Bottom line: Illustrative rates, menus, availability, and sample business content. Include the optional [CREDIT] link unobtrusively; do not mention VibeFather anywhere else in the site.
   Layout: Standard container with a large Fraunces brand line above a 3-column navigation, visit, and contact grid. Use 56px vertical padding desktop and 40px mobile. Stack on small screens with 18px links and at least 44px tap targets. Paper text and Sage secondary text maintain strong contrast.
   Motion: No reveal required; use only clear underline and color transitions on links.

## Assets
- image: Download https://media.vibefather.ai/assets/e18d2a62-de8e-4dac-be66-56a4244f8108/hero-courtyard.webp to public/images/hero-courtyard.webp. Alt: Covered garden walkway and courtyard at a welcoming residential community. Use as the large hero photograph. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record the path, exact source URL, author, and this credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/e18d2a62-de8e-4dac-be66-56a4244f8108/garden-club.webp to public/images/garden-club.webp. Alt: Residents potting herbs together on a sunny terrace. Use first in the daily-life gallery. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/e18d2a62-de8e-4dac-be66-56a4244f8108/art-workshop.webp to public/images/art-workshop.webp. Alt: An open art table with residents painting botanical shapes. Use in the daily-life gallery. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/e18d2a62-de8e-4dac-be66-56a4244f8108/dining-room.webp to public/images/dining-room.webp. Alt: A bright dining room with comfortable chairs and a seasonal lunch. Use in the dining section and Dining gallery filter. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/e18d2a62-de8e-4dac-be66-56a4244f8108/apartment-interior.webp to public/images/apartment-interior.webp. Alt: A furnished studio apartment with a bed, armchair, and clear walking paths. Use in the residences introduction and Spaces gallery filter. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/e18d2a62-de8e-4dac-be66-56a4244f8108/music-social.webp to public/images/music-social.webp. Alt: Residents listening to an acoustic music social. Use last in the daily-life gallery. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record it in ASSETS.md.
- icon: Use locally bundled lucide-react icons only: CaseSensitive, Menu, X, Phone, ArrowRight, Utensils, Sparkles, Clock3, Check, Compass, ChevronRight, ChevronLeft, Plus, Minus, CalendarDays, MapPin, Printer, and CircleCheck. Do not import brand icons. List lucide-react and its ISC license in ASSETS.md.
- font: Self-host Fraunces Variable through @fontsource-variable/fraunces and Atkinson Hyperlegible 400/700 through @fontsource/atkinson-hyperlegible. Both are OFL-1.1; import the npm packages locally, never Google Fonts or another font CDN, and list both packages and licenses in ASSETS.md.

## Don'ts
- Do not use a backend, server code, API routes, database, authentication, external form service, third-party API, analytics, or real network submission. The tour request is local-only and must say that no message was sent.
- Do not produce anything other than a static production build in dist/ with one npm run build command, relative asset paths, minified output, no source maps, no src/ copied into dist/, and total size under 20 MB.
- Do not use bare-directory links, broken routes, placeholder-image services, CDN scripts, CDN stylesheets, remote font loads, hotlinked images, or remote media. All assets must ship locally and internal navigation must use working section anchors on index.html.
- Do not use Unsplash, Pexels, Pixabay, Google Images, real community photography, copied floor plans, or any asset with a restrictive or non-redistributable license. Use only the six supplied generated images, original SVG plans, the listed icon library, and self-hosted fonts.
- Do not show recognizable people, real resident or staff likenesses, celebrities, tight face close-ups, logos, branded uniforms, readable facility signs, watermarks, or trademarked emblems. Generated people must remain fictional and faces must not be identifiable.
- Do not use real community names, existing slogans, branded typography, mascots, signature illustrations, unique iconography, copied copy, medical outcome promises, unverified awards, accreditation seals, review-platform badges, or claims about real availability.
- Do not make the site feel clinical, institutional, childish, or fear-driven. Avoid hospital-blue palettes, medical-cross branding, exaggerated smiling stock portraits, pressure countdowns, and language that treats older adults as dependents.
- Do not hide essential information behind hover, autoplay, animation, or horizontal page scrolling. No autoplay carousel, continuous parallax, custom cursor, scroll-jacking, or motion required to understand the content.
- Do not use low-contrast text, placeholder-only form labels, icon-only controls without accessible names, tiny targets, keyboard traps, clipped large text, or color-only status encoding. Maintain visible focus, 44×44px minimum targets, reduced-motion support, and zero console errors at 1440×900 and 390×844.
- Do not leave default-specific brand, location, audience, community type, phone number, address, rates, menus, care copy, or testimonials unchanged when variables differ. Keep all such content in src/content.ts and rewrite it coherently.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemap work, keyword-stuffed headings, publication dates, or unrelated pages. A plain title containing [BRAND] and the original favicon are sufficient.
- Do not mention VibeFather inside the site except the optional [CREDIT] footer link, and never claim that the local demo form contacted or confirmed anything with staff.

---
— Prompt by VibeFather · https://vibefather.ai/t/senior-living-community-website · 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.

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Senior Living Community Website"
colors:
  ivory: "#F7F3EA"
  paper: "#FFFDF8"
  evergreen: "#183C34"
  soft_pine: "#52665D"
  sage: "#DEE7D9"
  clay: "#984B34"
  honey: "#E6B65C"
  linen_line: "#CBD1C5"
typography:
  display_section_headings_and_large_quotations: { family: "Fraunces Variable", weights: [500, 600, 700] }
  body_navigation_controls_tables_and_numbers: { family: "Atkinson Hyperlegible", weights: [400, 700] }
spacing: "Use a centered 1200px maximum container with 32px desktop gutters and 20px mobile gutters. Build on an 8px base grid. Desktop sections have 96px vertical padding and mobile sections 64px. The hero has 48px top and 64px bottom padding. Cards use 24–32px padding, form rows 20px gaps, and body copy a maximum measure of 68 characters."
radius: "Use 28px corners for hero and gallery photography, 20px for major panels and dialogs, 14px for cards and inputs, and full pills only for text-size, filter, and time-slot controls. Use 1px Linen Line borders and very restrained shadows rather than floating every section."
---

# Senior Living Community Website — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Ivory** `#F7F3EA` — Main page canvas and warm negative space.
- **Paper** `#FFFDF8` — Header, cards, form controls, menus, and lightbox surfaces.
- **Evergreen** `#183C34` — Primary text, dark buttons, footer, active controls, and strong icon strokes.
- **Soft Pine** `#52665D` — Secondary copy at 16px or larger; never use for faint microtype.
- **Sage** `#DEE7D9` — Selected tabs, care highlights, schedule rows, and soft information panels.
- **Clay** `#984B34` — Small editorial accents, underlines, and secondary emphasis; pair with Ivory or Paper text only where contrast passes.
- **Honey** `#E6B65C` — Active marker and small decorative highlight behind Evergreen text, never body text on Ivory.
- **Linen Line** `#CBD1C5` — One-pixel borders, input outlines, comparison rules, and separators.

## Typography
- **Display, section headings, and large quotations** — Fraunces Variable (OFL), weights 500/600/700. Self-host the font files.
- **Body, navigation, controls, tables, and numbers** — Atkinson Hyperlegible (OFL), weights 400/700. Self-host the font files.

## Spacing & shape
- Spacing: Use a centered 1200px maximum container with 32px desktop gutters and 20px mobile gutters. Build on an 8px base grid. Desktop sections have 96px vertical padding and mobile sections 64px. The hero has 48px top and 64px bottom padding. Cards use 24–32px padding, form rows 20px gaps, and body copy a maximum measure of 68 characters.
- Radius: Use 28px corners for hero and gallery photography, 20px for major panels and dialogs, 14px for cards and inputs, and full pills only for text-size, filter, and time-slot controls. Use 1px Linen Line borders and very restrained shadows rather than floating every section.

## Motion
- Reveal major sections once with Motion whileInView: opacity 0 to 1 and y 14 to 0 over 420ms, stagger direct children by 60ms, viewport amount 0.16.
- Use 180–220ms transitions for tabs, gallery filtering, mobile navigation, accordion height, buttons, and focus states; never delay reading while animation completes.
- Open the gallery lightbox with a 180ms opacity and 8px scale transition; support Escape, left/right arrows, focus trapping, and restoring focus to the originating thumbnail.
- Crossfade the selected care detail, dining menu, and floor-plan drawing over 180ms while keeping panel dimensions stable enough to avoid layout jumps.
- When prefers-reduced-motion is enabled, remove transforms and smooth scrolling, show final states immediately, and keep every interaction functional.

## Imagery
Use six coordinated photorealistic editorial images generated specifically for this template. The shared look is soft late-morning light, muted sage, cream, honey oak, and terracotta, realistic residential materials, subtle 35mm film grain, and calm documentary composition. Show an operating community through spaces, activities, and meals rather than institutional corridors or posed clinical scenes. People are fictional, varied in age and ethnicity, and photographed only from behind or at a distance with no recognizable face. The hero is a spacious courtyard scene, never a face close-up. Download every image locally and list each in ASSETS.md with the supplied generated-asset credit. Do not add other photographs, logos, readable signs, watermarks, or branded objects.

## Tone
Warm, calm, respectful, and concrete. Speak to residents as independent adults, never as patients or children. Use plain US English, specific routines and inclusions, no fear-based selling, no clinical promises, and no exaggerated claims.

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