Eldervane

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

Parkinsans has a characterful, slightly quirky bold that gives the cosmic headings personality, while the named Instrument Sans body stays crisp against midnight indigo.

• ParkinsansHeadings: H1 58px / 36px 700, H2 52px / 32px 700, stat numbers 48px 700
• Instrument SansBody: body 16px/1.5 500, bento titles 20px 600 +0.02em

Patterns

• arched glow hero with starfield
• dashboard mock with overlapping floating pill nav
• logo marquee
• bento feature grid with AI command list
• stat counters row
• kanban showcase section
• integration grid
• three-tier pricing
• waitlist CTA
• social follow buttons

States it is designed for

• waitlist form: empty, invalid email, submitting, joined (with position message), already joined, error
• chart tooltips have keyboard equivalents
• reduced-motion static hero
• mobile: bento cards stack; kanban becomes horizontal scroll with snap

Who it is for

• sales teams at SMBs
• founders managing pipelines
• customer-success managers
• marketing ops

Layout

1. floating pill navigation that overlaps the dashboard mock (logo, Home, Blog, Changelog, Contact, social icon, violet 'Join the waitlist')
2. hero: large bold H1 under a glowing arc with a violet starfield, lede, violet pill CTA, 'used by 2,000+ teams' line with globe icon
3. dashboard mock: sidebar (orders, settlements, products, messages, calendar, settings), revenue and active-customer cards, daily sales bar chart, calendar with meetings, customers-by-region map
4. trusted-by marquee of placeholder logos
5. features: crown-icon eyebrow pill, H2, lede; bento: AI quick-launcher list, real-time customer chart, value vs competition bars, AI solution list with coloured side bars, keyboard-shortcut tile, contact analysis, content automation search
6. stats row (4 counters), kanban feature section, integrations grid, pricing (3 tiers), testimonials, FAQ, waitlist CTA, footer

Palette

Cosmic, radiant, premium: midnight indigo with violet light and soft starfields.

• canvas#000018
• surface#0f0f2d
• raised#141439
• heading text#f1f1f3
• body text#e5e5e7
• muted text#aeaeb8
• dim text#7b7b8f
• violet primary#7a33ff
• lilac accent text#9a9acb
• input border#5858ac

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

Parkinsans 700, 58px desktop / 36px mobile, line-height 1.2

Body

Instrument Sans 500, 16px, line-height 1.5

H2 52/32px Parkinsans 700 in #ddddee-like tint; bento titles 20px/600 with 0.02em tracking; stat numbers 48px/700.

Spacing and imagery

Density: spacious with dense bento internals Grid: 12-column; bento 6/6 then 4/4/4 with a tall middle card Container: 1200px max, 32px padding (16px mobile) Radius: cards 20px, inner items 10px, buttons 9999px Shadows: violet glows (0 0 80px rgba(122,51,255,.35)) behind hero arc and key cards; faint diagonal stripe texture on cards

Starfield dots and a glowing arc in the hero, violet gradient bars and line charts in cards, small coloured accent bars on list items (green, blue, orange, violet, magenta), placeholder logo marks; avatars small and round.

Components

• floating pill nav
• violet pill button
• starfield arc hero
• dashboard mock
• logo marquee
• eyebrow pill with icon
• bento card
• AI command list
• line chart card
• bar comparison card
• keyboard key tile
• stat counter
• kanban board
• integration tile
• pricing card
• waitlist form

Interactions

• floating nav stays fixed at the top after the hero with a blurred backdrop
• stars twinkle subtly (reduced-motion: static)
• quick-launcher list items highlight on hover and arrow keys
• chart tooltip follows pointer and keyboard focus
• counters animate once on view
• marquee pauses on hover

Data

• WaitlistEntry{email, company, role, createdAt}
• Plan{name, price, period, features[], highlighted}
• Stat{label, value, suffix}
• Feature{title, body, variant (launcher|chart|bars|list|keys|contacts|content)}
• ChangelogEntry{version, date, notes[]}
• Post{slug, title, date}

Guardrails

Experience

• Keep one primary CTA per section: trial in hero, waitlist in nav and footer.
• Coloured side bars on AI list items are decorative; each item has a text title.
• Floating nav must never cover headings when scrolled to via anchor links (scroll-margin-top).
• Stats need a source footnote or be labelled as illustrative.
• Kanban showcase uses invented deals and names.

Accessibility

• Dim text uses #7b7b8f so it still passes 4.5:1 on surface.
• Charts have hidden data tables and descriptive captions.
• Floating nav is a nav landmark; on mobile the menu button has aria-expanded.
• Focus ring: 2px #9a6bff offset 2px, visible on indigo.
• Starfield and glows are aria-hidden decoration.

Security

• Waitlist stored in Supabase `waitlist` with RLS: anon insert only, unique email, staff select.
• zod validation, per-IP rate limiting, honeypot, and email confirmation via a transactional email service.
• Changelog and blog are static; no user content rendered.
• Social links use rel='noopener noreferrer'.

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 **Eldervane**, a cosmic, indigo-dark marketing site for an AI-assisted CRM that unifies revenue dashboards, customer insight, lead scoring, a quick task launcher and content automation. It should feel premium and radiant, show the product via a dashboard mock and a rich bento grid, and capture trials and waitlist sign-ups.

### Stack
Next.js (static) + TypeScript, Tailwind CSS, shadcn/ui (Radix Sheet, Tooltip, Accordion), lucide-react, Recharts for mock charts, Motion for reveals and counters, react-hook-form + zod for the waitlist, Supabase for storage.

### Pages & layout
1. **Home**: floating pill nav → arched starfield hero (H1, lede, 'Start free trial', usage line) → dashboard mock → trusted-by marquee → features bento (7 cards) → stats row → kanban showcase → integrations → pricing (Starter / Growth / Scale) → testimonials → FAQ → waitlist CTA → footer.
2. **Blog**, **Changelog** (version list), **Contact**.
3. Breakpoints: bento 3 columns ≥1024, 2 at 640-1023, 1 below; floating nav becomes logo + menu button pill; dashboard mock crops the right column under 768px.

### Design system
- Colors: `--canvas: #000018`, `--surface: #0f0f2d`, `--raised: #141439`, `--heading: #f1f1f3`, `--body: #e5e5e7`, `--muted: #aeaeb8`, `--dim: #7b7b8f`, `--primary: #7a33ff`, `--lilac: #9a9acb`, `--border: #5858ac`.
- Fonts: Parkinsans 700 for H1 58/36px and H2 52/32px; Instrument Sans 500 body 16px/1.5; counters 48px.
- Spacing: 8px base; 120px sections; 16px bento gap; 24px card padding.
- Radius: 20px cards, 10px inner rows, pill buttons and nav.
- Glows: violet radial behind hero arc; `0 0 80px rgba(122,51,255,.35)` on highlighted pricing card.
- Texture: 45° 1px stripes at 4% white on cards.
- Motion: 250ms eases; counters 1s; marquee 35s.

### Components & interactions
FloatingNav, PillButton (violet), StarfieldArc, DashboardMock (Sidebar, KpiCard, SalesBarChart, CalendarCard, RegionMap placeholder), LogoMarquee, EyebrowPill, BentoCard variants (QuickLauncher, LiveChart, ValueBars, AiSolutionList with accent bars, KeysTile, ContactAnalysis, ContentSearch), StatCounter, KanbanShowcase, IntegrationTile, PricingCard, TestimonialCard, FaqAccordion, WaitlistForm, Footer.

### Data & state
Typed data for features, stats, plans, testimonials, changelog entries; MDX posts. Waitlist form → route handler → zod → Supabase `waitlist` (unique lower(email)). Chart data fixed arrays.

### Accessibility
One H1; anchor targets get `scroll-margin-top` equal to nav height. Charts have captions and hidden tables. Quick-launcher list is a listbox mock with aria-hidden if purely decorative, or a real listbox if interactive. Reduced motion disables twinkle, counters and marquee.
Verified contrast: heading text: #f1f1f3 on #000018 = 18.37:1; body text: #e5e5e7 on #000018 = 16.48:1; muted text on surface: #aeaeb8 on #0f0f2d = 8.47:1; dim text on surface: #7b7b8f on #0f0f2d = 4.5:1; violet button label: #ffffff on #7a33ff = 5.61:1; lilac accent text: #9a9acb on #0f0f2d = 6.98:1; input border: #5858ac on #0f0f2d = 3.02:1; focus ring: #9a6bff on #000018 = 5.84:1.

### Security
RLS on `waitlist` (insert for anon with column check; select for staff). Rate-limit, honeypot, confirmation email. No secrets in the client; CSP and HSTS headers.

### Performance & SEO
Starfield as CSS radial-gradient dots or a single tiny SVG; lazy-load Recharts. Title, meta, OG, SoftwareApplication JSON-LD; changelog pages indexable. LCP < 2.5s.

### Guardrails
- All company logos, customer names and figures are invented.
- Don't imitate any real CRM's UI chrome; design original mock layouts.
- Write fresh headlines and descriptions.
- Waitlist copy states what email will be used for.

**Acceptance criteria**
- [ ] Floating nav stays usable and never hides anchor headings
- [ ] Bento reflows without overflow at 390px
- [ ] Waitlist dedupes and confirms by email
- [ ] Charts expose data to screen readers
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own