Tallyroot

Who it is for

• Homeowners balancing property equity against a mortgage
• Collectors of vehicles, watches or precious metals
• People preparing a net-worth summary for an adviser or lender
• Individuals with many alternative asset types

Layout

1. Minimal top bar: leaf logo + wordmark left, outlined 'View demo' and solid white 'Get started' pills right
2. Centered hero on deep forest-green canvas: large tight headline, monospace tagline, two pill CTAs
3. Horizontally overflowing bento strip of frosted tiles (net worth, leverage, allocation, timeline) bleeding off both edges
4. Thin divider and footer with wordmark and copyright line
5. App: bento Overview dashboard with nine tiles
6. App: Assets list with kind filter chips and search
7. App: full-page Add/Edit asset form
8. Auth screens (email + OAuth) and a public read-only demo route

Palette

calm, earthy, precise, private, grown-up. A quiet dark-green ledger that makes personal finances feel settled rather than stressful.

• canvas background (dark green)#1c2e10
• frosted tile surface#45563a
• text on dark#ffffff
• app body background#f4f6f7
• app body text#0a2833
• accent lime (chart line, healthy)#8bc34a
• liability salmon#f2b8a8

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

Display

Barlow SemiBold, 40px hero, tight negative tracking (-2.4px), sentence case

Body

Geist Mono 16px for labels, numbers, buttons and tile titles

Condensed grotesk headline against a monospace UI gives a ledger/terminal feel; numbers read like figures on a statement.

Spacing and imagery

Airy hero, then a bento grid of tiles with ~24px gutters; tiles use ~0.7rem radius, pills fully rounded; content max ~1200px but the tile strip deliberately overflows the viewport.

No photos. All visuals are data: area chart with lime line and soft fill, segmented allocation bar, traffic-light leverage scale, small line icons in tile headers.

Components

• Top bar with logo and two pill CTAs
• Hero headline + monospace tagline
• Frosted bento tile
• Net worth hero tile with monthly delta
• Leverage scale bar with healthy/caution/high zones and marker
• Allocation segmented bar with legend and '+N more'
• 12-month timeline area chart
• Concentration meters (top three assets)
• Own vs owe equation tile
• Liquidity split bar
• Holdings list with kind badges
• Asset table with kind filter chips and search
• Add/Edit asset form
• Active/inactive toggle

Interactions

• Tiles fade/slide in on load with staggered timing
• Chart tooltips on hover over timeline points
• Filter chips toggle asset kinds; search filters instantly
• Inactive toggle dims a row and removes it from totals
• Form validation with inline errors and a save toast
• Pill buttons invert on hover
• Public demo route loads seeded read-only data

Data

• Asset{id, user_id, name, kind (property|vehicle|investment|collectible|metal|private_equity|other|liability), value, currency, acquired_on, notes, is_active}
• NetWorthSnapshot{id, user_id, date, total_assets, total_liabilities, net}
• Profile{id, display_name, base_currency}

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 **Tallyroot**, a private net-worth tracker for individuals whose wealth lives outside a bank app: a home and its mortgage, a car, a watch, some gold, a small angel investment. The user enters each asset or debt as one row; the app turns those rows into a calm dashboard that answers "what am I actually worth, and how exposed am I?"

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use Recharts for the timeline area chart and sparkline, Framer Motion for staggered tile entrances, TanStack Query for server state, react-hook-form + zod for the asset form, and date-fns for snapshot dates. Use Supabase for Auth (email + one OAuth provider), Postgres for assets and daily snapshots, and a scheduled Edge Function (or database trigger) that writes a snapshot whenever assets change.

### Pages & layout
1. **Landing**: slim top bar (logo left, outlined "Try demo" and solid "Create account" pills right); centered hero with a short headline and monospace tagline; a horizontally overflowing strip of dashboard tiles that bleeds past the viewport edges; simple footer.
2. **Auth**: sign in / sign up cards on the same dark canvas.
3. **Overview**: bento grid of nine tiles: net worth hero with monthly change, 12-month timeline, holdings list, allocation bar, own-vs-owe equation, leverage scale, concentration meters, liquidity split, all-time gain sparkline.
4. **Assets**: table with kind filter chips, search, value column, active toggle, row actions.
5. **Add / Edit asset**: full-page form grouped into identity, value and notes.
6. **/demo**: the Overview with seeded read-only data, no login required.

### Design system
- Colors: `--canvas: #1c2e10`, `--tile: #45563a` at ~85% opacity with backdrop blur, `--on-dark: #ffffff`, `--muted-on-dark: #c9d2c0`, `--accent: #8bc34a`, `--caution: #e8b04a`, `--danger: #e58f79`, `--liability: #f2b8a8`, `--liquid: #87cbe0`. Light app surfaces: `--bg: #f4f6f7`, `--fg: #0a2833`, `--accent-on-light: #689632` for focus rings and indicators, `--input-border: #7a8a94`.
- Fonts: Barlow 600 for headings with -0.05em tracking; Geist Mono (or JetBrains Mono) for body (16px, line-height 1.5), labels (12px minimum) and all figures, using tabular numerals.
- Spacing on a 4px base; tile padding 20-24px; grid gutter 24px.
- Radius: tiles 0.7rem, buttons and chips fully rounded.
- Shadows: almost none; separate tiles by tone and blur instead.
- Motion: 250ms ease-out fades, 40ms stagger between tiles.
- Stay dark on the marketing and dashboard canvas. Forms may use the light surface.

### Components & interactions
Tile shell (loading skeleton, empty state), NetWorthHero, LeverageScale (three zones and a marker with a text label such as Healthy, Caution or High), AllocationBar (segments, legend, "+N more" popover), TimelineChart (hover tooltip, keyboard-focusable points), ConcentrationMeters, OwnOweEquation, LiquiditySplit, KindBadge (icon + color per kind), AssetTable (sortable headers, empty and error rows), FilterChips (pressed state), AssetForm (disabled submit while saving, inline zod errors, success toast), ActiveToggle (dims row to 50% and excludes it from totals).

### Data & state
`assets(id, user_id, name, kind, value numeric, currency, acquired_on, notes, is_active, updated_at)` and `net_worth_snapshots(id, user_id, day, assets_total, liabilities_total, net)`, unique per user and day. Compute leverage, concentration and liquidity in a pure, unit-tested module. Server state lives in TanStack Query; filters live in URL params. Seed the demo with one fictional household and twelve months of snapshots.

### Accessibility
White and pale-green text both pass on the `#45563a` tile. Never convey leverage or allocation by color alone; add text labels and percentages. Give each chart a visually hidden data table or a "View as table" toggle. Use visible 2px lime focus rings; on light forms use `--accent-on-light`. Honor `prefers-reduced-motion` by disabling tile staggering. Make the overflowing tile strip keyboard-reachable.
Verified contrast: white: #ffffff on #1c2e10 = 14.5:1; white on tile: #ffffff on #45563a = 7.9:1; muted: #c9d2c0 on #45563a = 5.1:1; body: #0a2833 on #f4f6f7 = 14.2:1.

### Security
Enable RLS on `assets` and `net_worth_snapshots` with owner-only select, insert, update and delete (`user_id = auth.uid()`). Serve the demo from static seed JSON, never from real rows. Validate numeric ranges and kinds with zod on the client and again in any Edge Function. Keep only the anon key in the client.

### Performance & SEO
Code-split the authenticated app from the landing page. Lazy-load Recharts. Memoize derived metrics. Add title, meta description and OG image on the landing page; noindex app routes. Target Lighthouse 90+.

### Guardrails
- Write fresh copy and generic asset names; no real brands, logos or people.
- Don't present sample testimonials as real.
- Collect no data beyond what the dashboard needs.
- Keep components small and typed; no `any`. Surface errors visibly.
- Done when: (1) adding, editing or deactivating an asset updates every tile; (2) a snapshot is written per day of change; (3) RLS blocks cross-user reads; (4) /demo works logged out; (5) keyboard and screen-reader users can read every metric.

Open the builderAll templatesThis palette on its own