Fennmint

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

Fira Sans is a focused, highly legible sans with plenty of weights, so the near-black work surfaces and small mock UI text both stay crisp beside the mint signal.

• Fira SansHeadings: display 56px / 36px 500 at -0.05em, H2 40px at -0.04em, bento titles 24px
• Fira SansBody: body 16px/1.5 400/500, mock UI text 12px minimum

Patterns

• announcement chip above hero
• centred hero with dual CTAs
• glowing product dashboard mock with play overlay
• logo strip
• bento feature grid with live mini-UIs
• four-up icon feature row
• large quote testimonial with photo
• integration grid
• pricing toggle monthly/annual with radio pills
• mint glow accents

States it is designed for

• video dialog: loading spinner, error with 'Watch on product page' fallback
• contact form: validation, submitting, success, error
• annual toggle with no discount configured hides the 'save' tag
• reduced-motion: kanban and glow static
• status pills include text (Completed / In progress / Not started) for colour-independent meaning

Who it is for

• small businesses and startups
• project managers
• agency teams juggling clients
• operations leads

Layout

1. top bar: logo, links (About, Customers, Pricing, Contact), primary button; mobile menu sheet
2. hero: mint 'New' chip with announcement text, two-line H1, lede, mint primary button + dark secondary
3. dashboard mock with mint-to-blue top glow: icon rail, sidebar, ongoing-projects table with status pills and progress bars, to-do cards, revenue sparkline, recent transactions, messages panel; centred play button opens a video dialog
4. trust line with 6 monochrome logos
5. features: eyebrow pill, H2, lede; bento of 4 cards (workflow steps mock, voice/communication orb with avatars, 'Ask AI' glowing button, kanban with three status columns)
6. four-up icon row (analytics, dashboards, notifications, finance)
7. large testimonial card with quote left and portrait right
8. why-us, integrations grid, pricing (monthly/annual radio pills, 'save 15%', three plan cards), FAQ, footer CTA

Palette

Focused, nocturnal, energetic: near-black surfaces with crisp white type and a mint signal that feels like 'go'.

• canvas#07090e
• surface#14161a
• text#ffffff
• muted text#9c9d9f
• faint text#7e7f83
• mint primary#00ffa6
• label on mint#003725
• mint text#94ffda
• success green#00c078
• input border#5d6371

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

Fira Sans 500, 56px desktop / 36px mobile, line-height 1.1, tracking -0.05em

Body

Fira Sans 400/500, 16px, line-height 1.5

H2 40px/500 tracking -0.04em; bento titles 24px/500; mock UI text may drop to 12px minimum; the observed 10px labels are raised to 12px.

Spacing and imagery

Density: roomy sections (120px) with dense product mocks Grid: 12-column, 16px bento gap; bento rows 7/5 and 4/8 Container: 1140px max, 24px padding (16px mobile) Radius: cards 20px, mock window 16px, buttons 12px, chips 9999px Shadows: glows instead of shadows: mint/blue radial glow above the mock, soft inner light on bento cards

HTML-built product mocks with invented data, circular avatar photos, subtle dotted noise texture on cards, glowing gradient orb for voice features, 20px outline icons in mint-tinted squares.

Components

• top bar
• announcement chip
• mint button
• dark button
• dashboard mock with play overlay
• video dialog
• logo strip
• bento card
• workflow step card
• kanban mini-board
• status pill
• progress bar
• icon feature item
• testimonial card
• billing radio pills
• pricing card
• FAQ accordion

Interactions

• mock glow breathes slowly (opacity 0.7↔1, 6s), static under reduced motion
• play button opens a Dialog with a captioned product video
• kanban cards gently shuffle between columns on a loop when visible
• 'Ask AI' button has an animated gradient border on hover
• billing radio pills move a mint dot and update prices
• cards brighten border from 6% to 12% white on hover

Data

• Plan{id, name, monthly, annual, blurb, features[], cta}
• Feature{title, body, icon}
• Testimonial{quote, name, role, photoUrl}
• Integration{name, category, iconUrl}
• MockProject{name, status (completed|in_progress|not_started), deadline, progress}

Guardrails

Experience

• Mint is reserved for the single primary action per section and positive states.
• Status pills in mocks always carry text labels.
• The play overlay must open a real, captioned video or be removed.
• Keep bento mini-UIs legible at 12px minimum; scale the card, not the text.
• Annual pricing shows the effective monthly price and the billed total.

Accessibility

• Mint buttons use dark #003725 labels (10:1), never white.
• Faint helper text uses #7e7f83, which passes 4.5:1 on canvas and surface.
• Video has captions and the dialog traps focus and closes on Escape.
• Billing choice is a radio group with a legend.
• Focus ring: 2px #94ffda with 2px offset.

Security

• Contact form endpoint validates with zod and rate-limits; messages delivered via a transactional email service.
• Video hosted on a privacy-respecting player; no autoplay tracking before consent.
• No customer data collected beyond name, email and message.
• Security headers: CSP, HSTS, X-Content-Type-Options.

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 **Fennmint**, a dark marketing site for an all-in-one work platform (projects, tasks, team messaging, simple finance tracking and an AI teammate). A glowing dashboard mock proves breadth at a glance, a bento grid of live mini-UIs explains features, and pricing converts small teams.

### Stack
Next.js (static) + TypeScript, Tailwind CSS, shadcn/ui (Radix Dialog, RadioGroup, Accordion, Sheet), lucide-react, Motion for glows and kanban shuffle, Recharts for the revenue sparkline, zod for the contact form.

### Pages & layout
1. **Home**: top bar → hero (announcement chip, H1, lede, 'Try it free' + 'Schedule a demo') → dashboard mock with glow and play overlay → logo strip → features bento (workflow steps, communication orb, AI teammate button, task kanban) → 4-up icon row → testimonial → why-us → integrations → pricing (Free / Team / Business; monthly-annual radio pills) → FAQ → CTA → footer.
2. **Customers**, **Pricing**, **Contact**.
3. Breakpoints: mock shows full layout ≥1024px, hides the messages panel at 768-1023px, and becomes a cropped static image with 'See it in action' button under 768px; bento stacks to one column.

### Design system
- Colors: `--canvas: #07090e`, `--surface: #14161a`, `--text: #ffffff`, `--muted: #9c9d9f`, `--faint: #7e7f83`, `--mint: #00ffa6`, `--on-mint: #003725`, `--mint-text: #94ffda`, `--success: #00c078`, `--border: #5d6371`.
- Fonts: Fira Sans 500 display 56/36px (tracking -0.05em), H2 40/28px; body Fira Sans 400 16px/1.5; mock text ≥12px.
- Spacing: 4px base; 120px sections; 16px bento gap; 28px card padding.
- Radius: 20px cards, 16px mock window, 12px buttons, pill chips.
- Glows: `radial-gradient(60% 40% at 50% 0%, rgba(0,255,166,.35), transparent)` blended with a blue radial at the mock top edge.
- Borders: 1px rgba(255,255,255,.06), hover .12.
- Motion: 200ms hovers; 6s glow breathing; kanban shuffle every 3s.

### Components & interactions
TopBar, AnnouncementChip, Button (mint, dark), DashboardMock (IconRail, Sidebar, ProjectsTable with StatusPill + ProgressBar, TodoCard, RevenueSparkline, TransactionsList, MessagesPanel), PlayOverlay + VideoDialog, LogoStrip, BentoCard, WorkflowSteps, VoiceOrb with avatars, AskAiButton, KanbanMini, IconFeature, TestimonialCard, IntegrationTile, BillingRadio, PricingCard, FaqAccordion, Footer.

### Data & state
Typed data: plans, features, testimonials, integrations and a mock dataset (projects, todos, transactions, messages) with invented names. Billing choice is local state mirrored to `?billing=annual`. Contact form → route handler → zod → email service.

### Accessibility
One H1. Mock is decorative except for a caption; mark internal fake controls `inert` so they aren't tabbable. Status pills read their text. Radio group labelled 'Billing period'. Captions on video. Reduced motion respected.
Verified contrast: body text: #ffffff on #07090e = 19.92:1; muted text on surface: #9c9d9f on #14161a = 6.67:1; faint text: #7e7f83 on #14161a = 4.53:1; mint button label: #003725 on #00ffa6 = 10.08:1; mint text on surface: #94ffda on #14161a = 15.16:1; success indicator: #00c078 on #07090e = 8.36:1; input border: #5d6371 on #14161a = 3.01:1.

### Security
Validate and rate-limit the contact endpoint, add a honeypot, keep the email-service key server-only. Strict CSP permitting only the video host frame. No analytics before consent.

### Performance & SEO
Render the mock as HTML/CSS with lazy Recharts; poster image for the video; fonts self-hosted with `font-display: swap`. Title, description, OG image, SoftwareApplication JSON-LD. Target CLS < 0.05.

### Guardrails
- Invent every project, person and figure in the mock.
- Logo strip uses neutral placeholder marks.
- Testimonials are clearly sample content until real ones are approved.
- Write original headlines; no borrowed slogans.

**Acceptance criteria**
- [ ] Mock renders at all breakpoints without horizontal scroll
- [ ] Video dialog opens, plays captioned video, and returns focus
- [ ] Pricing radio updates all plans and shows annual totals
- [ ] All status pills are readable without colour
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own