Cashtide

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

Red Hat Display and Red Hat Text are a matched corporate pair built for headings and small UI text respectively, which gives the dependable fintech SaaS look.

• Red Hat DisplayHeadings: headings 600, 20-24px
• Red Hat TextBody: UI, labels, dense tables, tabular numbers

Who it is for

• Solopreneurs reporting to investors
• Agency owners proving profitability
• Freelancers billing in several currencies
• Small business owners without a CFO

Layout

1. Split auth screen: left white half with a centered bordered card (gradient-blue chart icon tile, welcome heading, subtitle, email and password inputs with leading icons, gradient sign-in button, outlined demo button with user icon, sign-up link); right half a diagonal blue gradient panel with a large line chart icon, a short headline and a one-line description
2. App: sidebar + top bar with period and currency selectors
3. Overview KPI cards and revenue/expense trend
4. Revenue analytics by product/client/region
5. Accounts receivable ageing buckets
6. Cash flow waterfall and daily balance
7. Expense categories donut and budget vs actual
8. Reports: CSV import, scheduled delivery, forecast

Palette

professional, trustworthy, clean, corporate, reassuring. A familiar fintech SaaS look that signals reliability.

• background#ffffff
• text#020617
• primary blue (gradient start)#1a64db
• gradient end#2b6fe1
• muted text#64748b
• border#e2e8f0
• on-blue text#ffffff

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

Red Hat Display SemiBold 20-24px headings, slight negative tracking on the panel title

Body

Red Hat Text 16px body; labels 14px medium; dense tables 15px

Red Hat Display headings with an Red Hat Text body give a crisp, businesslike SaaS look.

Spacing and imagery

50/50 split; auth card about 450px wide with 32px padding and 8px radius; 40px-tall inputs and buttons; generous centered whitespace.

No photos; a line chart icon in a gradient tile; a diagonal blue gradient panel; charts (waterfall, donut, area) inside the app.

Components

• Split-screen auth layout
• Auth card with icon inputs
• Gradient primary button
• Demo login button
• Brand gradient panel
• Sidebar navigation
• Period and currency switchers
• KPI cards with period comparison
• Revenue breakdown charts
• AR ageing table
• Cash flow waterfall chart
• Expense donut with budget vs actual bars
• CSV import wizard
• Scheduled report settings

Interactions

• Demo login signs in to a seeded workspace
• Form validation and loading state on sign-in
• Filter by project, department, product, region and accounting basis
• Switch currency and see converted values
• Compare to the previous week, month, quarter or year
• Hover chart tooltips
• CSV upload with column mapping
• Dark mode toggle

Data

• Organization{id, name, base_currency}
• Transaction{id, org_id, date, amount, currency, type income|expense, category, project, department, product, region, client_id}
• Invoice{id, org_id, client_id, number, issued_on, due_on, amount, currency, status, paid_on}
• Client{id, org_id, name, country}
• FxRate{date, base, quote, rate}
• ReportSchedule{id, org_id, cadence, recipients[], report_type}
• Forecast{org_id, month, projected_net, low, high}

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 **Cashtide**, a financial analytics dashboard for small businesses, agencies and freelancers who don't have a finance team. It answers four questions at a glance: where revenue comes from, where money goes, who owes us, and what cash will look like next quarter. A one-click demo lets prospects try it on sample data.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Select, Tabs, Popover, Dialog, Table) and lucide-react. Use Recharts (area, bar, waterfall built from stacked bars, donut), TanStack Query and Table, react-hook-form + zod, date-fns and Papa Parse for CSV. Supabase provides:
- Auth: email and a dedicated demo account.
- Postgres for transactions, invoices, clients, FX rates and schedules.
- Edge Functions for CSV ingestion, nightly FX refresh, scheduled email reports (via a transactional email provider) and a simple forecast (trailing averages plus seasonality).

### Pages & layout
1. **Auth**: a 50/50 split. The left side holds a bordered card with a gradient icon tile, heading and subtitle, email and password inputs with leading icons, a gradient Sign in button, an outlined "Try demo" button and a sign-up link. The right side is a diagonal blue gradient with a large line icon, a short headline and one sentence.
2. **App shell**: sidebar (Overview, Revenue, Receivables, Cash flow, Expenses, Reports, Settings); top bar with period, comparison, currency and filters.
3. **Overview**: KPI cards (revenue, expenses, net, cash) with deltas, and a trend chart.
4. **Revenue**: breakdown by product, client and region.
5. **Receivables**: ageing buckets (current, 1-30, 31-60, 61-90, 90+) and an overdue list.
6. **Cash flow**: a waterfall of inflows and outflows, plus the daily balance line.
7. **Expenses**: category donut and budget vs actual bars.
8. **Reports**: CSV import wizard, schedules, and the 12-month forecast band.

### Design system
- Tokens: `--background: #ffffff`, `--foreground: #020617`, `--primary: #1a64db`, gradient `linear-gradient(135deg,#1a64db,#2b6fe1)`, `--muted-fg: #64748b`, `--border: #e2e8f0` (decorative), `--input-border: #7591b7`, `--success: #15803d`, `--danger: #dc2626`.
- Dark mode: `#0b1220` background and `#e2e8f0` text, with chart colors re-tuned.
- Fonts: Red Hat Display for headings (600), Red Hat Text for UI and numbers (tabular). Scale 12/14/16/20/24/32; body 16px (line-height 1.5), labels 14px, dense tables 15px.
- Spacing on a 4px base; radius 8px; hairline borders; minimal shadow on cards.
- Motion: 150-200ms.

### Components & interactions
AuthCard (field errors, loading, "invalid credentials" alert), DemoButton, KpiCard (skeleton, up/down indicator with sign), FilterBar (multi-select, reset), CurrencySelect (converted values show the original on hover), AgingTable (sortable, overdue badges), WaterfallChart, BudgetBars, CsvImportWizard (upload, map columns, preview, errors per row, confirm), ScheduleForm (cadence, recipients, test send), ForecastChart (confidence band), EmptyState (for no data). Every async view handles loading, empty and error with retry.

### Data & state
Tables: `organizations`, `org_members(org_id, user_id, role)`, `transactions`, `invoices`, `clients`, `fx_rates`, `report_schedules`, `forecasts`. Store amounts in minor units with a currency code, and convert at query time using the rate for that date. Keep filters and period in URL params. Seed a fictional studio with 18 months of data across three currencies.

### Accessibility
The gradient end is deepened to `#2b6fe1`, so white text passes across the whole gradient. Inputs keep visible labels, not icons alone. KPI deltas include text signs. Charts get data tables and descriptive titles. Filters are keyboard-operable, with focus returning to the trigger. Respect reduced motion.
Verified contrast: body: #020617 on #ffffff = 20.2:1; muted: #64748b on #ffffff = 4.8:1; white on primary: #ffffff on #1a64db = 5.4:1; white on gradient end: #ffffff on #2b6fe1 = 4.7:1.

### Security
RLS scopes every table to org membership, and only admins manage schedules and imports. The demo account is read-only, enforced by a role check in RLS, and is reset nightly. The CSV Edge Function checks membership, a 10 MB cap, MIME type and a zod row schema, and inserts in a transaction. Validate report recipients' emails and rate-limit test sends. Keep the email and FX API keys server-side only. Never evaluate formulas from CSV cells (escape a leading `=`, `+`, `-` or `@` on export).

### Performance & SEO
Pre-aggregate monthly rollups in SQL views. Lazy-load chart-heavy routes. Index `(org_id, date)`. The auth page gets a title and meta; noindex the app. Target interactions under 100ms on 50k transactions.

### Guardrails
- Write fresh copy; use fictional clients and no real bank or accounting-software logos.
- Don't label forecasts as guarantees.
- Store no bank credentials.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) the demo login shows populated dashboards; (2) CSV import maps and validates rows; (3) currency switching converts consistently; (4) ageing buckets match invoice due dates; (5) RLS isolates organizations.

Open the builderAll templatesThis palette on its own