Tallyway

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

Funnel Sans is a tight, modern grotesk with a little edge that suits the black hero and violet fintech CTA.

• Funnel SansHeadings: hero 68px semibold at -1.7px, H2 36px
• Funnel SansBody: body 16px at 1.6, muted meta

Who it is for

• Fintech and payments startups
• B2B SaaS marketing teams
• Founders presenting tiered pricing
• Small editorial teams running a company blog

Layout

1. Sticky nav: logo left, 5 centered links, dark 'Get Started' pill right; turns translucent on scroll
2. Dark hero: two trust badges, big centered headline, primary purple CTA + ghost link, floating 3D coin, card and balance widget mock
3. Six-item feature grid on white
4. 'Take full control' split heading with CTA on right
5. Rounded dark photo panel with scheduling widget overlay
6. Mobile app section with phone mocks
7. Pay/checkout promo section
8. Integrations logo wall
9. Compliance trust trio
10. Testimonials carousel
11. Pricing tiers + FAQ accordion (pricing page)
12. Blog listing with category chips and post page
13. Admin dashboard for posts behind auth
14. Footer

Palette

Sleek, trustworthy, modern, premium, techy. Black hero and bright violet CTA create a confident fintech first impression that relaxes into clean white content.

• hero background#000000
• page background#ffffff
• text#141414
• muted text (meta, captions)#6b6b6b
• hero subtext#a3a3a3
• primary/accent#6142ff
• card/secondary#f4f4f4
• decorative divider#e6e6e6
• input border#8d8d8d
• positive chip#2bd49a

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

Funnel Sans semibold, 68px hero with -1.7px tracking, 36px H2 with -0.9px

Body

Funnel Sans 16px regular, line-height 1.6; muted meta in #6b6b6b

One tight grotesk throughout; negative tracking on headlines gives a crisp fintech feel

Spacing and imagery

Medium density, ~1200px container, 24px (1.5rem) radius on large panels, 12px on buttons, big rounded dark media panels alternating with white sections

3D-rendered coin and payment card, UI widget mocks (balance, schedule calendar), lifestyle photo of a person on a phone inside a rounded dark panel, partner logos, Lottie animations

Components

• Sticky blurred navbar
• Trust badge row
• Hero with floating product mocks
• Feature card grid
• Rounded media panel with UI overlay
• Phone mock section
• Integrations logo grid
• Testimonials carousel
• Pricing tier cards
• FAQ accordion
• Blog list with category chips
• Rich-text post editor
• Admin posts table
• Footer with link columns

Interactions

• Nav background fades to translucent dark on scroll
• Hero mocks float/parallax subtly
• Lottie animations lazy-loaded in view
• Testimonial carousel autoplay with pause on hover
• Category chip filtering of blog posts
• FAQ accordion expand/collapse
• Editor toolbar formatting with autosave toast
• Role-gated admin redirects unauthenticated users

Data

• Post{id, slug, title, excerpt, body_json, cover_url, category_id, author_id, reading_minutes, status, published_at}
• Category{id, name, slug}
• Profile{id, display_name, avatar_url}
• UserRole{user_id, role: admin|editor}
• PricingTier{name, price, features[]}
• Testimonial{quote, name, role}

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 a template'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 templates)
- 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.

### Goal
Build a marketing site with a built-in blog CMS for a fictional payments startup called **Tallyway**. The audience is small-business owners and finance leads comparing payment platforms, plus an internal team of two or three editors. The site explains the product, shows pricing, earns trust, and lets editors publish articles from a protected admin area.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react, React Router, Framer Motion for scroll reveals and the floating hero mocks, Embla for the testimonial carousel, lottie-react for lightweight hero/feature animations, TanStack Query for data fetching, Tiptap for the rich-text editor, react-hook-form + zod for forms, date-fns for post dates. Supabase provides Postgres (posts, categories, roles), Auth (email magic link for editors), and Storage (post cover images).

### Pages & layout
1. Home: sticky nav (logo, Features, Pricing, Company, Blog, Contact, "Get started" pill), black hero with two check-badge claims, big centered headline, violet CTA plus ghost link, and a composition of a glassy card, a 3D coin and a balance widget; six-feature grid; split "take control" statement with CTA; rounded dark photo panel with a scheduling widget overlay; mobile-app section; checkout section; integrations logo wall; compliance trio; testimonials carousel; closing CTA; footer.
2. Pricing: three tiers (Starter, Growth, Scale) with monthly/annual toggle and FAQ accordion.
3. Blog: category chips, post cards (cover, category, title, reading time), pagination. Post page with author and related posts.
4. Admin (`/admin`): posts table (status, updated date), editor with Tiptap toolbar, category manager.

### Design system
Tokens: `--background: #ffffff; --foreground: #141414; --primary: #6142ff; --primary-foreground: #ffffff; --secondary: #f4f4f4; --border: #e6e6e6 (decorative dividers only); --input-border: #8d8d8d; --muted-foreground: #6b6b6b; --hero: #000000; --success: #2bd49a`. Font: Funnel Sans (400/500/600) from Google Fonts. Type scale: 68 / 48 / 36 / 20 / 16 / 14px (14px only for meta and chips at weight 500; body line-height 1.6, max 70ch), with -2.5% tracking on 36px and above. Radius: 24px panels, 12px buttons and inputs, 9999px chips. Shadows: soft `0 20px 40px -20px rgb(0 0 0 / .35)` on floating mocks only. Motion: 300ms ease-out reveals, 6s gentle float loops. Light site with a dark hero; the admin area is light.

### Components & interactions
- Navbar: transparent over the hero, blurred dark after 40px of scroll; mobile sheet menu.
- Buttons: primary violet with a hover lift, focus ring, and a loading spinner variant.
- Carousel: arrows, dots, autoplay that pauses on hover or focus.
- Pricing toggle animates the price change; annual shows a "save" chip.
- Blog chips filter via URL param; show skeleton cards while loading, an empty state for categories with no posts, and an error card with retry.
- Editor: headings, lists, links, images, code; autosave every 10s with "Saved" status; publish confirmation dialog.

### Data & state
Tables: `posts(id, slug unique, title, excerpt, body jsonb, cover_path, category_id, author_id, reading_minutes, status draft|published, published_at)`, `categories(id, name, slug)`, `profiles(id, display_name)`, `user_roles(user_id, role)`. Server state through TanStack Query; marketing content (features, tiers, testimonials) lives in typed static files. Seed eight posts across four categories with invented authors.

### Accessibility
Check contrast: white on #6142ff is 5.6:1, which passes; the "save" chip uses #141414 text on #2bd49a; inputs use the #8d8d8d border token; gray hero subtext must stay at #a3a3a3 or lighter on black. Carousel needs pause control, labelled slides and keyboard arrows. Accordions use Radix semantics. Decorative hero mocks get `aria-hidden`; Lottie respects `prefers-reduced-motion`. Editor toolbar buttons need labels and `aria-pressed`. Verified contrast: body text on page background: #141414 on #ffffff = 18.42:1; white text on primary button: #ffffff on #6142ff = 5.63:1; save chip text on success fill: #141414 on #2bd49a = 9.64:1.

### Security
Enable RLS: `posts` select allowed for `status = 'published'` publicly; insert/update/delete only when `has_role(auth.uid(),'editor')` or admin via a security-definer function; `user_roles` writable by admins only. Storage bucket for covers: images only, 5 MB max, editor-only writes. Sanitize rendered post HTML with DOMPurify. Validate posts with zod on the client and in an edge function if publishing goes through one. Ship only the anon key. Rate-limit the contact form and add a honeypot.

### Performance & SEO
Lazy-load below-the-fold sections and Lottie JSON; code-split the admin code. Per-post meta, OG image from the cover, canonical URLs, generated sitemap and RSS. Use AVIF/WebP images with dimensions. Target LCP under 2.5s and Lighthouse 90+.

### Guardrails
- Write original copy; use placeholder partner logos, not real brands.
- Label sample testimonials as illustrative.
- Collect only the email editors need to sign in.
- Keep components small and typed, never use `any`, and surface errors visibly.
- Done when: an unauthenticated user cannot reach `/admin` or write posts; published posts render sanitized; category chips filter and deep-link; the pricing toggle works on keyboard; Lighthouse accessibility is 95 or higher.

Open the builderAll templatesThis palette on its own