Hivelight

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

Plus Jakarta Sans keeps the sleek medium-weight display as named, and Rubik's slightly rounded corners add candy-bright playfulness to the developer-grade UI.

• Plus Jakarta SansHeadings: hero 64px 500, H2 48px, -0.05em
• RubikBody: body 16px/1.6 500, component labels 14px, eyebrow tags 13px uppercase +0.1em

Patterns

• announcement banner strip above nav
• version badge beside wordmark
• mega-menu dropdown
• rounded hero panel with vertical gradient light lines
• hero with bleeding product inbox mockup
• two-tone headline with mint accent word
• outlined icon eyebrow tag
• 3x2 bento of live UI component demos
• integration arc of logo discs around a centred heading
• pricing with comparison link
• testimonial marquee
• membership CTA

States it is designed for

• Banner visible vs dismissed
• Dropzone: idle, drag-over, file accepted (name chip), rejected (too large) -- demo only, nothing uploads
• Toggle on/off/disabled
• Quick-action menu with destructive item styled and confirming
• Mega-menu open; mobile menu open
• Reduced motion: static light lines, gauge at value, marquees still
• Contact / membership form: validation, submitting, success, error

Who it is for

• Support and success teams
• Startup founders handling customer chat
• Operations leads consolidating channels
• Product teams evaluating inbox tools

Layout

1. Violet announcement strip: 'New' chip + one-line message, dismissible
2. Top bar on dark navy: logo mark + wordmark with tiny version badge, centred links (Home, Mega menu dropdown, Pricing, Blog, Contact), violet 'Get started' button
3. Hero panel (rounded 32px, slightly lighter navy) with thin vertical gradient lines falling from the top edge: 64px three-line headline with the product word in mint, short paragraph; right, inbox mockup (icon rail, folder list with counts, conversation list with avatars and unread badges, thread pane) bleeding off the right edge
4. Greyscale logo marquee
5. Features: outlined mint eyebrow tag, 48px heading with a fade-out right end, paragraph left + 'See more features' button right; 3x2 bento of cards each holding a working mini component and a centred title + text
6. Integrations: large semicircular arc of glossy violet bands and round logo discs around a centred eyebrow, heading, paragraph and button, with a violet glow
7. Revenue/organisation feature section, testimonial marquee of person cards, pricing with 'detailed comparison' button, membership CTA, footer
8. Breakpoints: banner wraps to two lines; hero stacks copy above the mockup (mockup clipped); bento becomes one column; arc scales down and logos reduce to a ring

Palette

sleek, technical, playful, night-mode. A developer-grade dark UI with candy-bright violet and mint.

• page background#181921
• card / hero panel#1f212e
• raised surface#272938
• secondary button / chip#353744
• heading text#edeff0
• muted text#7f8a94
• primary button violet#7a45ff
• violet accent (charts, toggles, links)#997bff
• mint accent word / eyebrow#7effe7
• destructive menu item#f87171
• border / hairline#686c77

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.

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

Type scale

Display

Plus Jakarta Sans 500, hero 64px/1.05 with -0.05em tracking, h2 48px with -0.05em

Body

Rubik 500, 16px/1.6 for body; component labels 14px

Medium-weight display with tight tracking; one accent word in mint. Eyebrow tags are 13px uppercase with 0.1em tracking inside a 1px mint outline.

Spacing and imagery

1240px container, 16-18px gaps in the bento, cards 20px padding and 16px radius, hero panel 32px radius, buttons 8px radius; borders instead of shadows; generous 140px section rhythm.

Real-looking UI mockups and live mini components; glossy 3D violet arc bands; circular white logo discs; thin gradient light lines; small avatars.

Components

• Dismissible announcement banner
• Mega-menu
• Version badge
• Hero panel with light lines
• Inbox mockup (rail, folders, conversation list, thread)
• Logo marquee
• Eyebrow tag
• Rich-text toolbar demo
• File dropzone demo
• Mini data table with delete actions
• Semicircle gauge with legend
• Settings toggle rows
• Quick-action dropdown menu
• Integration arc
• Testimonial marquee
• Pricing cards

Interactions

• Banner closes with a fade and stays closed for the session
• Light lines shimmer downward slowly in the hero panel
• Bento demos are interactive: toggles switch, dropzone highlights on drag-over, quick-action menu opens and navigates with arrows
• Gauge animates to its value when in view
• Integration discs float subtly; hover shows the category name
• Testimonial marquee pauses on hover/focus

Data

• Announcement{message, href, active}
• Feature{title, body, demo (editor|dropzone|table|gauge|toggles|menu)}
• Integration{name, category, icon}
• Testimonial{quote, name, role, avatar}
• Plan{name, price_monthly, features[], highlighted}
• Member{email, created_at}

Guardrails

Experience

• Demos in the bento are clearly sandboxed; nothing is saved or uploaded
• Only one violet primary button per viewport; secondary buttons use the slate chip
• Mint is reserved for the hero accent word and eyebrows
• The inbox mockup uses invented names and short messages that read naturally
• The announcement banner is dismissible and never covers the nav

Accessibility

• Muted text is #7f8a94 or lighter on cards (raised from the observed grey)
• Interactive demos use real controls (Switch, DropdownMenu) with labels
• Dropzone demo also offers a 'browse' button for keyboard users
• Arc logos have accessible names and a text list of integrations
• Fade-out heading effect never cuts meaningful words for screen readers (full text in DOM)
• Violet focus ring 2px with offset on dark

Security

• Dropzone demo never sends files; validate type and size client-side only for display
• Membership form validated with zod both sides; anon insert-only RLS
• Rate-limit form endpoints; honeypot
• No third-party chat widget scripts on the marketing site

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 marketing site for **Hivelight**, a shared customer inbox that lets teams triage chats, assign conversations and act fast. The site is a dark navy canvas with violet and mint accents, a bleeding inbox mockup in the hero, and a bento of small working UI components that let visitors feel the product. Primary action: get started; secondary: see integrations and pricing.

### Stack
Next.js with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (NavigationMenu, Switch, DropdownMenu, Sheet, Accordion), lucide-react, Motion for light lines, gauge, marquee and arc, react-hook-form + zod for the membership form, Supabase for storing members.

### Pages & layout
1. **Home**: violet announcement strip (New chip + message, close button). Top bar with logo, tiny version badge, links including a mega-menu, violet "Get started". Hero panel (32px radius) with thin gradient vertical lines: 64px headline with the product name in mint, short paragraph; inbox mockup on the right bleeding past the panel edge (icon rail, folders New/Mine/Assigned/Closed with counts, conversation list with invented names, times, unread badges, thread pane).
   Logo marquee. Features: mint eyebrow tag, heading, paragraph + "See more features". 3x2 bento: editor toolbar + message box, file dropzone, mini customer table with delete actions, semicircle gauge with legend, settings toggles, quick-action dropdown menu, each with a title and one line.
   Integrations: semicircular arc of glossy violet bands and round logo discs around a centred eyebrow, heading, paragraph and button.
   Organisation feature split, testimonial marquee, pricing with "Detailed comparison" button, membership CTA, footer.
2. **Pricing** (with comparison table), **Integrations** directory, **Blog**, **Contact**.
Mobile: banner wraps; copy above clipped mockup; bento single column; arc reduces to a ring of discs.

### Design system
```
--bg: #181921; --card: #1f212e; --raised: #272938; --chip: #353744;
--text: #edeff0; --muted: #7f8a94; --violet: #7a45ff; --violet-2: #997bff;
--mint: #7effe7; --danger: #f87171; --line: #686c77;
```
Fonts: Plus Jakarta Sans 500 display (64px hero, 48px h2, tracking -0.05em); Rubik 500 body 16px/1.6, labels 14px; eyebrow 13px uppercase +0.1em. Spacing 8px base, 140px sections, 1240px container, 16px bento gap. Radius: hero panel 32px, cards 16px, buttons 8px. No shadows; violet radial glow at 25% behind the arc. Motion: 8s line shimmer, 800ms gauge, 40s marquee.

### Components & interactions
AnnouncementBanner (dismiss stored in sessionStorage with try/catch), NavBar + MegaMenu, HeroPanel (LightLines, InboxMock), LogoMarquee, EyebrowTag, BentoCard with demos: EditorToolbarDemo, DropzoneDemo (drag-over state, browse button, size rejection, nothing uploaded), CustomerTableDemo, GaugeDemo, ToggleDemo (Radix Switch), QuickActionDemo (Radix DropdownMenu with a destructive item), IntegrationArc (named discs, text list fallback), TestimonialMarquee, PricingCards, MemberForm.

### Data & state
Content JSON: `features`, `integrations`, `testimonials`, `plans`, `logos`, `inboxMock` (invented people like "Mara Quinn"). Local component state only for demos. Membership writes `members(id, email unique, created_at)`.

### Accessibility
Muted text raised to #7f8a94 to pass on cards. Demos use real labelled controls; dropdown and switch keyboard-operable; dropzone has a button alternative. Gradient-fade heading keeps full text in the DOM. Arc logos named, plus list. Reduced motion stops lines, marquee and floating. Violet 2px focus ring.
Verified contrast: heading text on page: #edeff0 on #181921 = 15.17:1; muted text on card: #7f8a94 on #1f212e = 4.54:1; white label on violet button: #ffffff on #7a45ff = 5.09:1; violet link text on card: #997bff on #1f212e = 5.04:1; mint accent word on page: #7effe7 on #181921 = 14.46:1; text on slate secondary button: #edeff0 on #353744 = 10.22:1; destructive item on raised menu: #f87171 on #272938 = 5.2:1; card border on card: #686c77 on #1f212e = 3.04:1; violet gauge arc and focus ring on page: #997bff on #181921 = 5.53:1.

### Security
Demo dropzone never transmits files. Membership: zod validation both sides, RLS on `members` with anon insert-only and no select, rate limit, honeypot, confirmation through a transactional email service. No third-party widget scripts; strict CSP.

### Performance & SEO
Static generation; inbox mockup rendered as lightweight HTML/CSS or AVIF with fixed size; arc as a single optimised SVG plus CSS. Lazy-hydrate bento demos when visible. Self-host fonts. Metadata, OG images, SoftwareApplication JSON-LD. Lighthouse 90+.

### Guardrails
- Invent every person, message, logo and figure in mockups and testimonials.
- Demos are illustrative and must not persist data.
- Typed components, no `any`, content outside JSX.
- Acceptance criteria: (1) banner dismiss works and never shifts layout unexpectedly; (2) every bento demo works by keyboard; (3) arc integrations listed as text; (4) no horizontal scroll at 390px besides the intentionally clipped mockup; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own