Trellisto

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 600, 20px page title
• InterBody: Inter 400/500, 16px/1.5; table 15px; chips 12px 600

Patterns

• top nav with credit counters
• page header with icon badge and primary action
• search + status filter toolbar
• seat counter with add-seats link
• selectable table with status and role chips
• per-page select with first/next pagination
• floating support chat bubble

States it is designed for

• Single admin row
• Invited (pending) status chip
• Deactivated user (muted row)
• Seat limit reached: Invite disabled with reason and Add seats link
• No search results
• Credit limit validation (must be ≥0 and ≤ workspace credits)
• Loading skeleton
• Low credits warning on counters

Who it is for

• Sales and recruiting team admins
• RevOps managers controlling data spend
• Agency owners sharing credits across staff

Layout

1. Top nav: app logo + workspace name, nav items (Lists, Contacts, Integrate, Team active as grey pill); right: two credit counters with small ring icons (email credits, phone credits), bell with dot, initials avatar
2. Page header: gradient icon badge, 'Team' title, description line; violet 'Invite user' button right
3. Toolbar: search users input, status filter select; right: seat counter '1 user / 1 seat' and '+ Add seats' link
4. Table: checkbox, Name (initials avatar), Email (mail icon), Status chip, Role chip, Credit limit
5. Footer: 'n users in total' left, per-page select and First / page / Next right
6. Floating support bubble bottom-right
7. Mobile: nav collapses to a menu; table becomes cards with checkbox top-left

Palette

businesslike, clear, spend-aware. Team management with the budget always in sight.

• page#ffffff
• table header#f4f7fa
• primary text#16181d
• muted text#5e6573
• border#8b919c
• accent violet#7b3fe4
• active chip fill#e7f8f2
• active chip text#047857
• role chip fill#f0f1f4
• focus ring#7b3fe4
• credit ring amber#b45309

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

Inter 600, 20px page title

Body

Inter 400/500, 16px/1.5; table 15px; chips 12px 600

Neutral grotesk similar to observed; credit counters use tabular numerals.

Spacing and imagery

Wide container (1200px) with 32px side padding; table rows 56px; toolbar controls 40px; chips radius 6px; buttons radius 8px; header separated by a 1px divider.

Gradient icon badge for the page; small ring-progress icons for credits; initials avatars; line icons.

Components

• Credit counters with ring progress
• Top nav with pill active state
• Page header with icon badge
• Invite user dialog (email, role, credit limit)
• Search input
• Status filter select
• Seat counter + Add seats
• Selectable table with bulk actions bar
• Status chip
• Role chip
• Credit limit cell (None / number, inline edit)
• Per-page select
• Pagination
• Support chat bubble

Interactions

• Selecting rows reveals a bulk bar (change role, set credit limit, remove)
• Credit limit cell edits inline with number input and Save/Cancel
• Status filter (All, Active, Invited, Deactivated) updates table and count
• Add seats opens a seat purchase dialog via hosted checkout
• Credit counters show tooltip with reset date

Data

• Workspace{id, name, seats, email_credits, phone_credits, credits_reset_at}
• TeamUser{workspace_id, user_id, name, email, status (active|invited|deactivated), role (admin|member), credit_limit (null=none)}
• CreditLedger{id, workspace_id, user_id, kind (email|phone), delta, reason, at}

Guardrails

Experience

• Keep seat usage next to the Invite action
• Make 'None' credit limit explicit rather than blank
• Allow bulk role and limit changes for larger teams
• Show pending invites in the same table with an Invited chip
• Warn before deactivating a user who owns lists

Accessibility

• Checkbox column has a header 'Select all' checkbox with aria-label
• Chips have text; colour secondary
• Inline edit returns focus to the cell after save
• Credit counters expose 'Email credits: 18 remaining' as text
• Support bubble has an accessible name and doesn't cover pagination on mobile

Security

• RLS: team rows visible to workspace members; role/limit/invite changes admin-only
• Credit spending enforced server-side against user limit and workspace balance in one transaction
• Seat purchases via hosted checkout; seat count updated only by verified webhook
• Audit credit limit and role changes

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 **Trellisto**'s Team page for a B2B contact-data tool where lookups spend email and phone credits. Admins invite teammates, assign roles, set per-person credit limits and watch seat usage, with credit balances always visible in the top nav.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix primitives) and lucide-react icons. TanStack Query for server state, react-hook-form + zod for forms, date-fns for dates. Supabase for Auth, Postgres and Row Level Security. TanStack Table for selection and pagination. Seat purchases use a hosted checkout provider with a verified webhook.

### Pages & layout
1. **Top nav** (64px): logo + workspace name; nav Lists, Contacts, Integrate, Team (active grey pill); right: two credit counters (ring icon, number, label), bell with unread dot, initials avatar.
2. **/team** header: gradient icon badge, 'Team', 'Invite teammates, assign roles, set credit limits and more.'; violet '+ Invite user'.
3. **Toolbar**: search, status filter (All, Active, Invited, Deactivated); right: '1 user / 1 seat' and '+ Add seats'.
4. **Table**: checkbox, Name (initials avatar), Email (mail icon), Status chip, Role chip, Credit limit ('None' or number with inline edit).
5. **Footer**: '1 user in total', per-page select (15/30/50), First / page / Next.
6. **Bulk bar** appears when rows selected.
7. Mobile: cards; nav in a menu; support bubble offset above pagination.

### Design system
- Colors: `--bg: #ffffff` (page), `--thead: #f4f7fa` (table header), `--fg: #16181d` (primary text), `--muted: #5e6573` (muted text), `--border: #8b919c` (border), `--accent: #7b3fe4` (accent violet), `--active-bg: #e7f8f2` (active chip fill), `--active: #047857` (active chip text), `--chip: #f0f1f4` (role chip fill), `--ring: #7b3fe4` (focus ring), `--credit: #b45309` (credit ring amber).
- Fonts: Inter 400/500/600; title 20px 600; body 16px/1.5; table 15px; chips 12px 600.
- Spacing: 4px base; container 1200px; rows 56px.
- Radius: buttons 8px, chips 6px, inputs 8px, bubble full.
- Shadows: bubble `0 6px 20px rgb(123 63 228 / 0.35)`; dialogs `0 16px 40px rgb(0 0 0 / 0.15)`.
- Motion: bulk bar slides up 150ms; ring progress animates once on load.

### Components & interactions
`TopNav`, `CreditCounter` (SVG ring, tooltip with reset date), `PageHeader`, `InviteUserDialog` (email, role, optional credit limit), `SearchInput`, `StatusFilter`, `SeatCounter`, `AddSeatsDialog`, `TeamTable` (selection, sorting by name), `StatusChip`, `RoleChip`, `CreditLimitCell` (inline edit), `BulkActionBar`, `PerPageSelect`, `Pagination`, `SupportBubble`.

### Data & state
`workspaces(id, name, seats, email_credits, phone_credits, credits_reset_at)`, `team_users(workspace_id, user_id, name, email, status, role, credit_limit int null)`, `credit_ledger(id, workspace_id, user_id, kind, delta, reason, at)`. Spend via RPC `spend_credit(kind)` checking both limits atomically. Seed one admin; toggle adds invited and deactivated users.

### Accessibility
Select-all checkbox labelled; row checkboxes labelled with names. Chips and counters expose text. Inline edit has label 'Credit limit for Dana Reyes' (invented). Pagination in a nav landmark. Focus ring 2px violet.
Verified contrast: body text: #16181d on #ffffff = 17.76:1; muted text: #5e6573 on #ffffff = 5.86:1; header text on table head: #16181d on #f4f7fa = 16.52:1; violet button label: #ffffff on #7b3fe4 = 5.72:1; active chip text: #047857 on #e7f8f2 = 4.99:1; role chip text: #16181d on #f0f1f4 = 15.72:1; input/checkbox border: #8b919c on #ffffff = 3.17:1; focus ring violet: #7b3fe4 on #ffffff = 5.72:1; credit ring amber: #b45309 on #ffffff = 5.02:1.

### Security
RLS: `team_users` select for members; update/insert/delete admin-only; `workspaces` credits and seats not client-updatable (RPC and webhook only); `credit_ledger` insert via RPC, select admin-only. Validate limits with zod and a Postgres check. Webhook signature verified server-side. Audit role and limit changes.

### Performance & SEO
Paginate server-side; counters fetched with the session and cached 60s. App routes `noindex`.

### Guardrails
- Invent all users and emails.
- Refer to data sources and payments generically.
- Never let the client decrement credits directly.

Acceptance criteria:
- [ ] Inline credit limit saves and validates
- [ ] Bulk role change works for selected rows
- [ ] Invite disabled at seat limit with Add seats path
- [ ] Credit spend blocked when limit reached (server)
- [ ] Contrast pairs pass

Open the builderAll templatesThis palette on its own