Hovendale

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

Albert Sans keeps the refined, regular-weight editorial headings, and Golos Text is a sturdy, even text grotesk that stays crisp in the tilted UI cards.

• Albert SansHeadings: hero 56px 400, H2 40px, -0.05em
• Golos TextBody: body 16px/1.55 500 at -0.03em, UI labels 14px, eyebrow chips 12px uppercase

Patterns

• floating pill nav capsule
• split hero with overlapping tilted UI cards
• greyscale logo marquee
• large kanban board mockup
• numbered three-step cards overlapping the mockup edge
• segmented tab bar driving a feature panel
• integration icon tiles in a staggered two-column scroll
• numbered checklist steps
• dark rounded band section
• pricing cards
• testimonial success stories
• FAQ accordion
• giant email address footer

States it is designed for

• Tabs: selected, hover, focus-visible
• Hero cards static under reduced motion
• Contact form: empty, validation, sending, sent, failed with retry
• Mobile menu open with focus trap
• Pricing monthly/annual toggle
• Long customer names truncated with ellipsis in list mockups

Who it is for

• Small agencies serving multiple clients
• Startup operations leads
• Project managers coordinating remote teams
• Consultants sharing progress with stakeholders

Layout

1. Floating white capsule nav centred at top: logo mark + wordmark, three links, black 'Contact us' pill with circled arrow; mobile shows a black 'Menu' pill
2. Split hero on warm off-white with faint vertical stripe texture: 56px light-weight three-line headline, muted paragraph, black 'Get started' pill with arrow disc + outlined 'Contact us' pill; right, a tilted customers-list card with a yellow highlighted row overlapped by a tilted 'daily average' stacked-bar card
3. Greyscale logo marquee
4. Large kanban mockup (sidebar with projects, To do / In progress / Done columns, cards with priority chips, thumbnails, avatars) in a soft white frame, bottom overlapped by three numbered step cards (01 setup with a sign-up form mock, 02 collaborate, 03 track)
5. Centred heading + paragraph, a four-option segmented tab bar with icons, and a two-column panel (UI preview left, eyebrow chip + heading + text right)
6. Integrations: heading, text, black pill, three numbered checklist steps left; two staggered columns of rounded icon tiles right
7. Dark slate rounded band (full-width minus 15px margin) for a highlight section
8. Pricing, success stories, FAQ, closing CTA with yellow 'Schedule a demo' pill, footer with a very large contact email line
9. Breakpoints: hero centres and stacks cards below; step cards stack; tab bar scrolls horizontally; icon columns become a wrapping grid

Palette

calm, warm, editorial, trustworthy. A tidy studio desk in daylight: soft paper, black ink, a few sticky-note colours.

• page background (warm paper)#f4f2ee
• card surface#ffffff
• ink / primary pill#000000
• muted text#605f5f
• highlight row / demo pill yellow#fef7af
• chart segment amber#b68f01
• chart segment teal#0ea2ba
• chart segment coral#f2685e
• dark band#3a4144
• muted text on dark band#c9cccd
• input border#8a8886

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

Albert Sans 400, hero 56px/1.1 with -0.05em tracking, h2 40px with -0.05em

Body

Golos Text 500, 16px/1.55 with -0.03em tracking; UI labels 14px

Regular-weight display type with tight tracking gives a refined editorial feel; no bold headings. Eyebrow chips use 12px uppercase with 0.06em tracking on a yellow chip.

Spacing and imagery

Airy; 1000px content width, 120px sections; cards 16-24px radius with very soft 0 20px 40px rgba(0,0,0,.06) shadows; pills fully rounded (32px); segmented bar 32px radius with white active pill.

Product UI cards tilted a few degrees and overlapping; warm pastel illustration thumbnails in kanban cards; colourful rounded integration icons on white tiles; small circular avatars.

Components

• Capsule nav
• Pill button with arrow disc
• Tilted customer list card
• Stacked bar activity card
• Logo marquee
• Kanban board mockup
• Numbered step card
• Segmented tab bar
• Feature panel with eyebrow chip
• Integration icon tile column
• Numbered checklist
• Pricing card
• Success story card
• FAQ accordion

Interactions

• Hero cards float gently and straighten slightly on hover
• Segmented tabs slide the white active pill and crossfade the panel
• Integration columns scroll vertically in opposite directions, paused on hover
• Arrow disc in pills rotates -45deg on hover
• Step cards rise into place over the kanban mockup on scroll
• Accordion expands with plus-to-minus icon

Data

• FeatureTab{key, icon, label, eyebrow, title, body, preview}
• Step{number, title, body, visual}
• Integration{name, icon, category}
• Plan{name, price_monthly, price_yearly, features[], cta}
• Story{company, quote, person, role, metric}
• Faq{question, answer}
• ContactMessage{name, email, company, message, created_at}

Guardrails

Experience

• Black pill is the single primary action; outlined pill is secondary; yellow pill appears only in the final CTA
• Tilted cards stay under 4 degrees and never hide the hero headline
• Tab labels are short nouns with an icon; panel copy under 40 words
• Integration tiles show names on hover and in a list on mobile
• Keep the large footer email clickable and copyable

Accessibility

• Chart segments use the deepened amber, teal and coral with a legend and value labels
• Tabs use Radix Tabs with arrow keys; active state is shape plus colour
• Vertical icon scrolls pause under reduced motion and on focus
• Mockup cards are aria-hidden images with one alt summary each
• Focus ring 2px black with 2px offset on paper, white on the dark band
• Body text at least 16px; light display weight only at 40px and above

Security

• Contact form validated with zod client and server; strip markup
• RLS on contact_messages: anon insert only, staff role reads
• Rate-limit and honeypot the form endpoint
• Publish the contact email as a mailto link with basic obfuscation against scrapers

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 the landing site for **Hovendale**, a shared workspace where agencies and startups plan tasks, share progress with clients and track team output. The page should feel warm and editorial (paper-toned background, black ink, pill buttons, a few sticky-note colours) while realistic product cards prove the tool. Primary action: get started; secondary: contact sales.

### Stack
Astro with React islands and TypeScript, Tailwind CSS, shadcn/ui on Radix (Tabs, Accordion, Sheet), lucide-react, Motion for card float, tab transitions and icon columns, Recharts for the small stacked bar chart, react-hook-form + zod for contact, Supabase for storing messages.

### Pages & layout
1. **Home**: floating white capsule nav (logo, About/Features/Pricing, black "Contact us" pill with arrow disc). Split hero on a paper background with faint vertical stripes: 56px regular-weight headline on three lines, muted paragraph, black "Get started" pill + outlined "Contact us". Right: tilted customer-list card with one yellow highlighted row and inline actions, overlapped by a tilted "daily average" card with a stacked bar chart (amber/teal/coral).
   Greyscale logo marquee of invented names.
   Large kanban mockup (project sidebar, three columns, cards with priority chips, thumbnails, avatars, comment counts) with three numbered step cards overlapping its bottom edge.
   Feature tabs: centred heading, four-option segmented bar (Client portal, KPI tracking, Workflow automation, Team management), panel with preview left and eyebrow chip + heading + text right.
   Integrations: copy, pill, numbered checklist left; two opposing vertical scrolls of icon tiles right.
   Dark slate band, pricing, success stories, FAQ, CTA with yellow "Schedule a demo" pill, footer with oversized contact email.
2. **Pricing**, **About**, **Contact**, **Integrations** directory.
Mobile: centred hero, cards below; step cards stack; tab bar scrolls horizontally.

### Design system
```
--bg: #f4f2ee; --surface: #ffffff; --ink: #000000; --muted: #605f5f;
--highlight: #fef7af; --chart-amber: #b68f01; --chart-teal: #0ea2ba; --chart-coral: #f2685e;
--band: #3a4144; --muted-on-band: #c9cccd; --input-border: #8a8886;
```
Fonts: Albert Sans 400 display (56px hero, 40px h2, tracking -0.05em); Golos Text 500 body 16px/1.55 (-0.03em). Spacing 8px base, 120px sections, 1000px content. Radius: cards 20px, step cards 16px, pills 32px. Shadow: 0 20px 40px rgba(0,0,0,.06) on floating cards only. Motion: 6s float loop (2px), 250ms tab crossfade, 30s icon column scroll.

### Components & interactions
CapsuleNav + MobileSheet, PillButton (solid | outline | yellow) with rotating arrow disc, TiltCard, CustomerListMock, ActivityChart (Recharts stacked bars with legend), LogoMarquee, KanbanMock, StepCard, FeatureTabs (sliding active pill), IntegrationColumns (pause on hover/focus, list fallback), NumberedChecklist, PricingCards with toggle, StoryCard, FaqAccordion, ContactForm, BigEmailFooter.

### Data & state
Content collections for `featureTabs`, `steps`, `integrations`, `plans`, `stories`, `faqs`, `logos` (all invented). Contact writes `contact_messages(id, name, email, company, message, created_at)`. Client state: active tab, billing period, menu open.

### Accessibility
Chart segments use deepened colours with a legend and values; pastel yellow used only behind ink text. Tabs follow Radix keyboard behaviour. All scrolling and floating stops under reduced motion. Mockups are decorative with alt summaries. Focus ring black on paper, white on the dark band. Light 400 weight display only at 40px+.
Verified contrast: ink on paper: #000000 on #f4f2ee = 18.78:1; muted text on paper: #605f5f on #f4f2ee = 5.69:1; white label on black pill: #ffffff on #000000 = 21.0:1; ink on yellow highlight: #000000 on #fef7af = 19.14:1; white text on dark band: #ffffff on #3a4144 = 10.4:1; muted text on dark band: #c9cccd on #3a4144 = 6.44:1; amber chart segment on white card: #b68f01 on #ffffff = 3.04:1; teal chart segment on white card: #0ea2ba on #ffffff = 3.05:1; coral chart segment on white card: #f2685e on #ffffff = 3.04:1; input border on white: #8a8886 on #ffffff = 3.53:1.

### Security
Zod validation client and server with length limits; RLS on `contact_messages`: enable, anon insert-only, select for a `staff` role only. Rate limit per IP, honeypot, notification through a transactional email service. No secrets in client code.

### Performance & SEO
Static build; hydrate only nav, tabs, integrations and form. Kanban mockup as AVIF with fixed aspect ratio, lazy below the fold. Self-host fonts. Metadata, OG image, FAQPage JSON-LD. Lighthouse 95+.

### Guardrails
- Invent all names, companies, logos, tasks and figures in mockups.
- Keep display type regular weight; do not add bold headings.
- Typed components, no `any`, content outside JSX.
- Acceptance criteria: (1) tabs switch by click, keyboard and touch; (2) chart readable without colour; (3) contact form handles all states; (4) no horizontal scroll at 390px; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own