Gumleaf

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

Belanosima is a chunky, slightly quirky grotesk that brings neighbourhood-cafe cheer to the dark-green headings, and Cabin is a down-to-earth humanist body.

• BelanosimaHeadings: hero 42px 600, H2 32-42px, card titles 20px
• CabinBody: body 16px/1.6 400, buttons 14px 600, eyebrows 12px uppercase 600 +0.06em

Patterns

• floating white capsule nav
• centred hero over cut-out founder photo
• concentric stadium line art behind the subject
• scattered flat geometric confetti shapes
• photo caption tag naming the featured customer
• four-quadrant service grid with hairline dividers
• split card: photo left, checklist right on pale tint
• dark-green photo cards with gradient fade into copy
• logo row
• social-proof heading with avatar cluster
• contact form section

States it is designed for

• Contact form: required fields, invalid email, sending, sent, error with retry
• Dropdown open; mobile menu open
• Reduced motion: shapes and rings static
• Hero image loading: tinted placeholder keeping layout
• Long service descriptions clamp to four lines with 'more' link

Who it is for

• Owners of small local businesses
• New founders setting up operations
• Small agencies offering managed services
• Teams wanting simple payments and project tracking

Layout

1. Floating white capsule nav centred at top: lemon-like logo + uppercase wordmark, links (About, Services, Pages dropdown, Contact), lime pill 'Get started'; hamburger on mobile
2. Hero on pale lime: centred 42px bold headline, one-line muted subcopy, small lime pill CTA; below, cut-out photo of two smiling founders over concentric stadium-shaped line rings with scattered pastel shapes (circle, triangle, square); small caption tag with names and business at lower right
3. White section: lime uppercase eyebrow and 32px heading left; 2x2 service grid right with line icons, titles and text divided by hairlines
4. Pale lime rounded card: photo left bleeding to card edge, dark uppercase eyebrow, heading, three check bullets and lime 'Learn more' pill right
5. Logo row of five invented wordmarks
6. Two dark-green cards: photo top fading into green, small uppercase eyebrow, lime title, text, white 'Learn more' pill
7. Centred eyebrow + heading + subcopy social proof, avatar cluster, testimonials, contact form section, footer
8. Breakpoints: hero photo crops tighter and rings shrink; service grid becomes one column; split card stacks photo on top; dark cards stack

Palette

cheerful, approachable, fresh, down-to-earth. A neighbourhood-cafe warmth applied to business software.

• hero / card tint (pale lime)#f2f9d8
• page background#ffffff
• dark green ink / dark cards#244034
• lime button / title on dark#d2f34c
• body text#484a3d
• muted text#6f6f6f
• eyebrow olive#667613
• rating star amber#bf8c00
• hairline divider / input border#939393
• confetti mint (decorative)#84fcca

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

Belanosima 600, hero 42px/1.2, h2 32-42px, card titles 20px

Body

Cabin 400, 16px/1.6 (observed 14px raised to 16px); buttons 14px 600

Chunky, slightly quirky grotesk headings in dark green. Eyebrows are 12px uppercase 600 with 0.06em tracking in olive or dark green.

Spacing and imagery

1100px container; 96-120px sections; cards 24-28px radius; pills 36px radius; hairline dividers in the service grid; soft shadow 0 6px 20px rgba(0,0,0,.08) under the nav only.

Cut-out portrait of small-business owners, candid workplace photography, photos fading into dark green, flat pastel geometric confetti, thin concentric line art, simple line icons.

Components

• Capsule nav with dropdown
• Lime pill button
• Cut-out hero photo with ring art and confetti
• Caption tag
• Service quadrant grid
• Split checklist card
• Logo row
• Dark photo-fade card
• Avatar cluster
• Testimonial card
• Contact form

Interactions

• Confetti shapes drift slowly with slight rotation
• Stadium rings pulse outward once on load
• Service grid cells tint pale lime on hover
• Dark cards zoom the photo 3% on hover
• Pages dropdown opens on click with keyboard support
• Pills darken slightly on hover and press

Data

• Service{icon, title, body}
• Highlight{eyebrow, title, bullets[], image, cta}
• PromoCard{eyebrow, title, body, image, href}
• Logo{name, svg}
• Testimonial{quote, name, business, avatar, rating}
• Inquiry{name, email, business_type, message, created_at}

Guardrails

Experience

• One lime pill CTA per section; white pills only on dark cards
• Hero caption tag identifies the featured (fictional) business so the photo reads as a story
• Service cells: icon, two-word title, max 25 words
• Checklist bullets start with a verb and stay under two lines
• Contact form asks for four fields at most

Accessibility

• Body text raised to 16px; muted grey darkened to #6f6f6f and eyebrow olive to #667613
• Lime titles only on dark green; dark green text on lime buttons
• Photo-to-green fade must be fully opaque behind text
• Confetti and rings are aria-hidden and static under reduced motion
• Dropdown and mobile menu keyboard accessible with focus return
• Focus ring 2px dark green with offset on light, lime on dark cards

Security

• Inquiry form validated with zod client and server; strip markup
• RLS on inquiries: anon insert-only; staff role reads
• Rate limiting and honeypot
• Store no payment or IT credentials; state that none are requested

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 **Gumleaf**, a growth and operations service platform for small businesses: project tracking, simple payments and managed IT in one place. It should feel cheerful and approachable: pale lime backgrounds, dark green chunky headings, a cut-out photo of two smiling (fictional) cafe founders with playful line art, and clear service grids. Primary action: get started; secondary: contact the team.

### Stack
Astro with React islands and TypeScript, Tailwind CSS, shadcn/ui on Radix (NavigationMenu, Sheet), lucide-react, Motion for confetti drift and ring pulse, react-hook-form + zod for the inquiry form, Supabase for inquiries.

### Pages & layout
1. **Home**: floating white capsule nav (logo + uppercase wordmark, About, Services, Pages dropdown, Contact, lime pill). Hero on pale lime: centred bold headline (fresh copy about starting and running a small business), one-line subcopy, lime pill. Below, a cut-out photo of two founders over concentric stadium rings and pastel confetti; caption tag with fictional names and business.
   Services: olive eyebrow + heading left, 2x2 grid (Business, Management, Consulting, Engineering) with line icons and hairline dividers right.
   Split card on pale lime: photo left, eyebrow, heading, three check bullets, lime pill right.
   Logo row (invented). Two dark-green cards: photo fading into green, eyebrow, lime title, text, white pill.
   Social proof: eyebrow, heading, subcopy, avatar cluster, testimonials with star ratings. Contact section with form. Footer.
2. **About**, **Services**, **Blog**, **Contact**.
Mobile: capsule nav with hamburger, hero photo cropped, grids single column.

### Design system
```
--tint: #f2f9d8; --bg: #ffffff; --green: #244034; --lime: #d2f34c;
--body: #484a3d; --muted: #6f6f6f; --eyebrow: #667613; --star: #bf8c00;
--line: #939393; --confetti-mint: #84fcca;
```
Fonts: Belanosima 600 display (42px hero, 32-42px h2, 20px card titles); Cabin 400 body 16px/1.6; eyebrows 12px uppercase 600 +0.06em. Spacing 8px base, 96-120px sections, 1100px container. Radius: cards 24-28px, pills 36px, capsule nav 36px. Shadow only under the nav. Motion: 12s confetti drift, 1s ring pulse on load, 200ms hover tints.

### Components & interactions
CapsuleNav (dropdown, Sheet), PillButton (lime | white), HeroCutout (RingArt SVG, Confetti, CaptionTag), ServiceGrid, SplitChecklistCard, LogoRow, PhotoFadeCard, AvatarCluster, TestimonialCard (text rating "4.8 of 5"), InquiryForm.

### Data & state
Content collections: `services`, `highlights`, `promoCards`, `logos`, `testimonials` (all invented). Inquiry writes `inquiries(id, name, email, business_type, message, created_at)`. Client state: menu open, form status.

### Accessibility
Observed 14px body raised to 16px; muted and olive darkened to pass on white and lime. Lime text only on dark green; dark green labels on lime. Fade overlays fully opaque behind text. Decorative art aria-hidden and static under reduced motion. Focus ring swaps colour per surface. Hero photo alt describes the fictional founders.
Verified contrast: dark green heading on pale lime: #244034 on #f2f9d8 = 10.4:1; body text on pale lime: #484a3d on #f2f9d8 = 8.32:1; muted text on white: #6f6f6f on #ffffff = 5.02:1; eyebrow olive on white: #667613 on #ffffff = 5.04:1; dark green label on lime pill: #244034 on #d2f34c = 8.97:1; lime title on dark green card: #d2f34c on #244034 = 8.97:1; white body on dark green card: #ffffff on #244034 = 11.3:1; hairline / input border on white: #939393 on #ffffff = 3.07:1; rating star on white: #bf8c00 on #ffffff = 3.01:1.

### Security
Zod validation both sides with length limits; RLS on `inquiries`: enable, anon insert-only, select for a `staff` role. Rate limit, honeypot, and notify via a transactional email service. Never request payment details or system credentials in the form.

### Performance & SEO
Static build; hero cut-out as transparent WebP/AVIF with fixed size and priority; ring art inline SVG. Lazy photos below the fold. Self-host fonts. Metadata, OG image, Organization JSON-LD. Lighthouse 95+.

### Guardrails
- All people, businesses, logos and quotes are invented; use licensed or generated photos.
- Keep claims generic (no guaranteed growth figures).
- Typed components, no `any`, content in collections.
- Acceptance criteria: (1) hero legible and CTA visible at 390px; (2) form handles all states; (3) all motion stops under reduced motion; (4) every text on photo fade passes contrast; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own