Evenheart

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Inter Tight keeps the thin, confident golden-hour headlines as named, and Wix Madefor Text is a warm, readable text grotesk that stays hushed beneath them.

• Inter TightHeadings: display 52px / 36px 300, statement text 40px / 28px 300
• Wix Madefor TextBody: body 16px/1.5 400, numbered list 16px, buttons 15px 500

Patterns

• left-aligned light-weight hero headline
• full-width rounded photo/video band
• logo strip
• two-tone statement paragraph (bright + dimmed)
• numbered feature list
• safety feature cards
• story testimonial carousel
• FAQ accordion with plus icons
• photo-backed CTA card with scrim

States it is designed for

• video fails or data-saver on: show poster image
• carousel with a single story hides arrows
• newsletter/contact form: validation, submitting, success, error with retry
• reduced-motion: no scroll-linked text reveal, video paused by default
• missing store badge region falls back to a single 'Get the app' link

Who it is for

• singles looking for long-term relationships
• people returning to dating after a break
• privacy-conscious users

Layout

1. minimal top bar: small mark left, text links (About, Features, Pricing, Blog, Contact), white 'Download' button right; hamburger under 768px
2. hero: left-aligned 52px light-weight headline, short lede, white button; followed by a full-width 16px-rounded looping video/photo band
3. small monochrome logo strip under the band
4. statement paragraph at 40px where the second half fades to a dim grey
5. numbered five-point feature list aligned right of a large gap (single column on mobile)
6. second full-width photo band
7. safety and control section: heading with 3-4 cards (verification, block/report, privacy controls)
8. member stories carousel with photo, quote and first-name-only attribution
9. FAQ accordion with hairline dividers
10. CTA card with photo background and dark scrim, then footer

Palette

Warm, hushed, cinematic: golden-hour photography on a charcoal canvas with thin, confident type.

• canvas#121212
• surface#1c1c1c
• text#ffffff
• soft text#d1d1cd
• muted text#a3a2a2
• dim statement text#868584
• warm gold accent#bd9f65
• button background#ffffff
• button label#121212
• input border#686868

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Inter Tight 300 (light), 52px desktop / 36px mobile, line-height 1.2, tracking -0.01em

Body

Wix Madefor Text 400, 16px, line-height 1.5

Light 300 weight is used only at 36px and above; statement paragraph 40px/300 with the second clause in --dim; numbered list 16px with 14px tabular numerals; buttons 15px/500.

Spacing and imagery

Density: sparse, cinematic; 128px between sections, 16px page gutters on desktop edges Grid: 12-column; text blocks span 5 columns, lists start at column 7 Container: full width with 16px outer margin for photo bands; text max 560px Radius: photo bands 16px, cards 12px, buttons 8px Shadows: none; separation by photography and space

Golden-hour lifestyle photography and short looping video of couples outdoors (licensed or commissioned, adults only), shown in large rounded bands; small line icons for safety features; no illustrations.

Components

• top bar
• white rectangular button
• video/photo band with poster
• logo strip
• two-tone statement paragraph
• numbered feature list
• safety card
• story carousel
• FAQ accordion
• photo CTA card with scrim
• footer

Interactions

• video bands autoplay muted and loop, with a visible pause button
• statement paragraph brightens word-by-word as it scrolls into view (static under reduced motion)
• carousel supports swipe, arrow buttons and keyboard arrows
• accordion plus icon rotates to a cross
• buttons invert on hover (white→soft grey)

Data

• Story{id, firstName, city, quote, photoUrl, photoAlt}
• Feature{order, text}
• SafetyFeature{icon, title, body}
• Faq{question, answer}
• Plan{name, price, period, perks[]}
• ContactMessage{name, email, topic (support|press|safety), message}

Guardrails

Experience

• Use first names and cities only in stories; never full names or identifiable details.
• Put the safety section before testimonials so trust is established early.
• Keep one CTA verb across the page ('Get the app') to avoid mixed intents.
• Video bands always have a pause control and a poster frame.
• The dimmed half of the statement paragraph must still pass contrast (≥4.5:1).

Accessibility

• Autoplay media is muted, has a pause button and stops under reduced motion (WCAG 2.2.2).
• Photo CTA card uses a 60% black scrim so white text passes against the brightest photo area.
• Light 300 weight only at 36px+; body copy stays 400.
• Carousel is a labelled region with slide x-of-y announcements.
• Accordion buttons expose aria-expanded and control their panels.

Security

• Contact form validated with zod and rate-limited; safety reports route to a monitored inbox via a transactional email service.
• No member data is collected on the marketing site; account creation happens in the app.
• Photography has model releases; store consent records outside the public repo.
• Set a strict CSP and Referrer-Policy; embed no third-party trackers before consent.

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Evenheart**, a cinematic landing site for a relationship-matching app built around long-term compatibility and member safety. The page should feel warm and calm, let large photography carry emotion, explain what makes matching thoughtful, show safety controls clearly, and drive app downloads.

### Stack
Astro + TypeScript, Tailwind CSS, shadcn/ui (Radix) for Accordion, Sheet and Carousel controls, lucide-react for icons, Motion (React island) for the scroll-linked statement reveal and carousel, zod for the contact form.

### Pages & layout
1. **Home**: top bar → hero (headline, lede, 'Get the app') → full-width video band → logo strip → two-tone statement paragraph → numbered feature list (5 items) → second photo band → safety & control cards → member stories carousel → FAQ (6 questions on privacy, blocking/reporting, costs) → photo CTA card → footer with store badges area.
2. **Features**, **Pricing** (free + premium tiers), **Blog**, **Contact** (topic select incl. Safety).
3. Breakpoints: text column and list sit side-by-side ≥1024px, stack below; photo bands keep 16px margins and a 4:3 crop on mobile; top links collapse into a Sheet.

### Design system
- Colors: `--canvas: #121212`, `--surface: #1c1c1c`, `--text: #ffffff`, `--soft: #d1d1cd`, `--muted: #a3a2a2`, `--dim: #868584`, `--gold: #bd9f65`, `--button: #ffffff`, `--on-button: #121212`, `--border: #686868`.
- Fonts: Inter Tight 300 for display (52/36px) and statement text (40/28px); Wix Madefor Text 400 body 16px/1.5; buttons Wix Madefor Text 500 15px.
- Spacing: 8px base; 128px section spacing desktop, 80px mobile.
- Radius: 16px photo bands, 12px cards, 8px buttons.
- Shadows: none.
- Scrim: `linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6))` over photos with text.
- Motion: 300ms ease-out fades; statement reveal tied to scroll; carousel slides 400ms.

### Components & interactions
TopBar, Button (white filled, text dark), MediaBand (video with poster + pause toggle), LogoStrip (neutral placeholder marks), StatementParagraph (two spans, second in --dim), NumberedList (tabular numerals), SafetyCard (icon, title, body), StoryCarousel (photo, quote, first name + city; arrows, dots, swipe), FaqAccordion, PhotoCtaCard (scrim + centred text + button), Footer. Hover on list rows reveals a gold hairline.

### Data & state
Content collections for `stories`, `features`, `safetyFeatures`, `faqs`, `plans`. Carousel index is local state. Contact form posts to a server endpoint that validates with zod and forwards to a transactional email service; nothing is stored in a database.

### Accessibility
One H1; landmarks for header, main, footer. Video has a pause button with aria-pressed and no audio. Carousel uses aria-roledescription='carousel' and live region for slide changes. Photos carry descriptive alt text without naming people. Maintain 44px touch targets. Reduced-motion disables the word-by-word reveal and autoplay.
Verified contrast: body text: #ffffff on #121212 = 18.73:1; muted text: #a3a2a2 on #121212 = 7.36:1; dim statement text: #868584 on #121212 = 5.09:1; dim text on surface: #868584 on #1c1c1c = 4.63:1; gold accent label: #bd9f65 on #121212 = 7.41:1; button label: #121212 on #ffffff = 18.73:1; input border: #686868 on #121212 = 3.36:1; text over photo scrim (worst case): #ffffff on #666666 = 5.74:1.

### Security
Contact endpoint: zod schema, length limits, honeypot, 5/min/IP rate limit; emails sent server-side with the email-service key kept in environment variables. No cookies set on the marketing site without consent. Safety topic messages are flagged in the subject for priority routing.

### Performance & SEO
Video bands: 6-10s H.264/WebM loops under 2MB with posters; lazy-load below the fold. Serve responsive AVIF photos. Title, description, OG image, MobileApplication JSON-LD and FAQPage schema. Target LCP < 2.5s.

### Guardrails
- Write original copy that stresses respect and consent; avoid pressure tactics.
- Use only licensed images of adults; no real member stories unless consented.
- Logo strip uses generic placeholder marks, not real publications.
- Pricing and perks live in one editable data file.

**Acceptance criteria**
- [ ] Hero, bands and CTA render at 390px with no horizontal scroll
- [ ] Video can be paused and never autoplays under reduced motion
- [ ] Dim statement text and all muted text pass 4.5:1
- [ ] Carousel and accordion fully keyboard operable
- [ ] Contact form sends and shows success/error states

Open the builderAll templatesThis palette on its own