Kopara

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

Lexend's open geometric shapes keep the warm, premium headings friendly, and Hanken Grotesk is a close neo-grotesk stand-in that stays neutral in the finance dashboard.

• LexendHeadings: H1 51px 600 at -0.02em, H2 46px at -0.04em, pull-quote 28px 600
• Hanken GroteskBody: body 16px/1.5 400, captions 14px, nav 15px, tabular stat figures

Patterns

• black hero with amber corner glow
• sparkle-flanked trust line above headline
• left headline with amber and white button pair
• trusted-by logo cluster at hero right
• browser-chrome framed dashboard straddling dark and light sections
• portrait plus large pull-quote statement
• double-border (frame within frame) cards and images
• three benefit cards inside a tinted tray
• photo left with numbered step list right
• feature accordion list with left accent bar beside a photo
• solid amber testimonial band with framed portrait
• logo grid in bordered cells
• mega-menu nav with dropdowns

States it is designed for

• Demo request form: validation, submitting, success with calendar link, error
• Mega-menu: open, closed, focus-within; mobile full-screen menu
• Accordion: one open; all collapsed on mobile initially
• Blog: filter by category with empty state
• Careers: no openings state
• Docs link-out marked as external
• Reduced motion: dashboard static, no glow animation

Who it is for

• finance leads at SMBs
• founders handling payroll and invoices
• accounting and operations teams

Layout

1. Header on black: logo mark and wordmark, dropdown nav (solutions, company, resources, developers), amber 'see a demo' button
2. Hero: sparkle trust line, two-line bold H1, supporting copy, amber and white buttons; 'trusted by' caption and four logo marks on the right; amber radial glow from the top-right and bottom edges
3. Dashboard in browser chrome (tabs, address bar), overlapping into the white section: sidebar with plan upsell card and menu, payroll header with date range and export, four stat cards with delta chips, bar chart with tooltip, donut card
4. Pull-quote: small framed portrait and a large bold quote with attribution
5. Benefits: H2 left with button right, wide framed media placeholder, tray of three benefit cards with icon tiles
6. Photo with double frame left; H2, paragraph, numbered steps and underlined link right
7. Feature accordion (active item with amber left bar, description and link) beside framed photo
8. Amber testimonial band with framed portrait and quote
9. Beige logo grid, integrations, diversity/values, blog insights, CTA, big footer
10. Mobile: buttons become full-width stacked; logos wrap; dashboard scales as a static figure; accordion image moves above list

Palette

Premium, warm, trustworthy. Late-evening amber glow over black gives finance a confident tone.

• hero black#000000
• page white#ffffff
• beige tray / section#efeee6
• amber glow (decorative)#d7780b
• amber fill and text (fixed)#b06209
• ink#0b0b0c
• muted text#61646b
• muted on dark#bfbbbb
• positive chip#1a7f45
• frame border#8f8d85

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

Lexend 600: H1 51px/1.1 at -0.02em; H2 46px/1.1 at -0.04em; pull-quote 28px/1.3 at 600

Body

Hanken Grotesk as a stand-in for the observed neo-grotesk, 400, 16px/1.5; captions 14px; nav 15px

Tight headline tracking; body stays neutral. Numbers in stat cards use tabular figures.

Spacing and imagery

1100px container, 24px gaps, 120px sections. Radius 10px buttons and cards, 14px image frames with a 6px inner padding (frame-within-frame), 16px tray. Borders 1px #e2e1d8 on cards; frames 1px #8f8d85 outer + white inner. Dashboard shadow 0 30px 60px rgba(0,0,0,0.35).

Warm studio portraits with orange accents; a browser-framed dashboard with peach bar charts and an amber donut; small outlined icon tiles in beige; greyscale logo marks.

Components

• Mega-menu nav with dropdowns
• Amber button
• White button
• Trust line with sparkles
• Hero logo cluster
• Amber glow backdrop
• Browser-chrome frame
• Dashboard sidebar with upsell card
• Stat card with delta chip
• Bar chart with tooltip
• Donut card
• Pull-quote with portrait
• Framed media
• Benefit card tray
• Numbered step item
• Feature accordion with accent bar
• Testimonial band
• Logo grid cell
• Blog card
• Footer with link columns

Interactions

• Mega-menu opens on hover and click; keyboard arrow navigation; closes on Escape
• Dashboard lifts slightly and flattens as it scrolls into view
• Accordion expands one item, accent bar slides to active item
• Bar chart tooltip on hover/focus
• Buttons darken 6% on hover; underlined links animate underline width
• Focus ring 2px amber text colour on light, 2px white on black

Data

• Solution{slug, title, summary, icon}
• Feature{order, title, description, link}
• Testimonial{quote, name, role, company_alias, portrait}
• Integration{slug, name_generic, category}
• Post{slug, title, category, excerpt, cover, published_at}
• Role{slug, title, team, location}
• DemoRequest{name, work_email, company, employees (1-10|11-50|51-250|250+), interest (invoicing|payroll|forecasting), created_at}

Guardrails

Experience

• Amber fills carry white labels only in the darker #b06209; the bright amber is glow only
• Dashboard figures are plausible, consistently formatted currency with invented employees
• One quote section per page; testimonials elsewhere use the band format
• Accordion descriptions stay under 30 words with a single link
• Mega-menu groups have short descriptions for each link
• Keep the hero headline to two lines at desktop, four on mobile

Accessibility

• Glow is behind empty areas; hero text sits on pure black
• Mega-menu follows disclosure pattern with aria-expanded and focus management
• Framed images have meaningful alt text or are decorative
• Delta chips include sign and arrow
• Donut and bars include sr-only summaries
• Minimum 44px touch targets for nav and buttons on mobile

Security

• Demo form validated server-side with zod; rate limit, honeypot
• Demo requests in a table with RLS: server inserts only, no anon read
• No financial data collected on marketing forms
• Docs and developer links use HTTPS and rel=noopener for external

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 **Kopara**, the marketing site for an AI invoicing, payroll and cash-flow tool for growing businesses. The page moves from a black hero with an amber glow and a browser-framed payroll dashboard into warm light sections that explain extraction, approvals, payments, reconciliation and forecasting. Convert visitors into demo requests.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui on Radix (navigation menu, accordion), Recharts for the dashboard bars and donut, Motion for scroll effects, lucide-react icons, react-hook-form + zod. Supabase stores demo requests. MDX for blog and careers.

### Pages & layout
1. **Home**: black header with logo mark, a mega-menu (Solutions, Company, Resources, Developers) and an amber "See a demo" button. Hero with a sparkle trust line, a bold two-line H1, copy, an amber "Why us" button and a white "Contact" button; a "trusted by" caption and four logo marks on the right; amber glow from the corners. Browser-framed dashboard overlapping into white: sidebar (upsell card, menu), payroll header (date range, export), four stat cards with delta chips, a bar chart with tooltip, a donut card. Pull-quote with a small framed portrait. Benefits (H2 plus right button, framed media, tray of three cards). Photo plus numbered steps. Feature accordion with an amber accent bar beside a framed photo. Amber testimonial band. Beige logo grid. Integrations, values, insights, CTA, footer.
2. **Solutions** detail pages, **About**, **Careers**, **Blog**, **Customers**, **Integrations**, **Pricing**, **Contact / Demo**, **Terms / Privacy**; the Developers menu links to external docs.
Mobile: full-width stacked buttons, logos wrap, the dashboard becomes a static figure, and the menu is full-screen.

### Design system
- Colors: `--black: #000000`, `--white: #ffffff`, `--beige: #efeee6`, `--glow: #d7780b` (decorative only), `--amber: #b06209` (fills and links), `--ink: #0b0b0c`, `--muted: #61646b`, `--muted-dark: #bfbbbb`, `--positive: #1a7f45`, `--frame: #8f8d85`, card hairline `#e2e1d8`.
- Fonts: Lexend 600 for display (H1 51px/1.1 at -0.02em, H2 46px at -0.04em). Hanken Grotesk for body (16px/1.5), close to the observed neo-grotesk.
- Spacing: 8px base, 24px gaps, 120px sections, 1100px container.
- Radius: 10px buttons and cards, 14px frames with a 6px inner gap, 16px trays.
- Shadow: dashboard `0 30px 60px rgb(0 0 0 / .35)`; cards flat with hairlines.
- Motion: 700ms dashboard lift-to-flat, 250ms accordion, 200ms hovers.

### Components & interactions
MegaMenu (Radix NavigationMenu; arrow keys, Escape), AmberButton, WhiteButton, TrustLine, HeroLogos, AmberGlow (CSS radial gradients, aria-hidden), BrowserFrame, DashboardMock (Sidebar + UpsellCard, StatCard + DeltaChip, PayrollBars with tooltip, BonusDonut), PullQuote, FramedMedia, BenefitTray, StepList, FeatureAccordion (accent bar animates to active), TestimonialBand, LogoGrid, PostCard, DemoForm, Footer.

### Data & state
Typed data for solutions, features, testimonials and integrations; MDX for posts and roles. `demo_requests(id, name, work_email, company, employees, interest, created_at)`. Dashboard mock data is invented, with currency formatted by Intl. Menu and accordion state is local.

### Accessibility
The hero text sits on pure black, clear of the glow. White labels appear only on `--amber`. The mega-menu uses Radix semantics. Charts have sr-only summaries, and delta chips show sign plus arrow. Touch targets are at least 44px. Focus ring: 2px `--amber` on light and 2px white on black.
Verified contrast: hero text on black: #ffffff on #000000 = 21.0:1; muted on black: #bfbbbb on #000000 = 11.04:1; body text on white: #0b0b0c on #ffffff = 19.67:1; muted text on beige: #61646b on #efeee6 = 5.09:1; button label on amber: #ffffff on #b06209 = 4.57:1; amber link text: #b06209 on #ffffff = 4.57:1; positive chip text: #1a7f45 on #ffffff = 5.04:1; frame / input border: #8f8d85 on #ffffff = 3.32:1; focus ring amber on white: #b06209 on #ffffff = 4.57:1.

### Security
The demo form posts to a server route that validates with zod, checks a honeypot and applies a rate limit. `demo_requests` has RLS enabled with no anon select, and the server inserts with the service role. Marketing forms collect no financial data. External doc links use rel="noopener".

### Performance & SEO
Build the dashboard in HTML/SVG and lazy-load Recharts. Serve portraits as AVIF with fixed frames. Load Lexend 600 and Hanken Grotesk 400/500. Give each solution page unique metadata and add FAQPage and Organization JSON-LD. Target LCP under 2.2s.

### Guardrails
- Use original copy; invented people and companies; placeholder logos; statistics labelled illustrative.
- Use the bright amber only for glow and decoration.
- Acceptance criteria: (1) the mega-menu is fully keyboard operable; (2) the dashboard reads at desktop and degrades on mobile; (3) the accordion and demo form cover their states; (4) reduced motion stops the lift animation; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own