Driftbox

Who it is for

• Founders launching a file-sharing SaaS
• Agencies building client portals
• Small businesses needing branded storage
• Developers skipping auth/billing boilerplate

Layout

1. Top nav on a soft grey cloudy gradient: cloud logo + wordmark, Start Here / Pricing / Help links, 'Log in' and black 'Get started free'
2. Centered hero: green-dot 'Live demo' pill, two-line 60px headline, grey subcopy, black primary + light grey secondary button
3. Browser-framed app mock: sidebar (Home, My Files…), search bar, bell, avatar; My Files header with New Folder and Upload; file table (Name, Modified, Size)
4. Logo cloud
5. Bento grid of feature cards with outlined icons and large faint background icons (Organize, Share, Security, Collaboration, Speed)
6. 'Upload & Share' product sections (files, calendar, team spaces)
7. Testimonials and pricing comparison
8. CTA and footer
9. App: files, shared, starred, trash, preview modal, share dialog, settings (2FA, language, theme), billing, admin

Palette

Clean, calm, trustworthy, premium, understated. Warm near-whites and black buttons evoke modern productivity tools.

• background#fdfdfc
• section grey#f6f5f4
• card#ffffff
• text / primary#1d212b
• muted text#6a717f
• border#e8e6e3
• live green#178841

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

Display

Inter 700, 60px with -1.5px tracking; 48px section heads

Body

Inter 400 16px

Neutral Inter throughout for a calm, familiar productivity-suite feel. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

1150px container, 12px radius on buttons and cards, bento grid with 20px gaps, generous section padding, soft shadows and warm grey borders.

Soft blurred cloudy gradient behind the hero, product UI mocks, oversized faint line icons as card backgrounds, logo cloud of placeholder brands.

Components

• Announcement pill with status dot
• Browser-framed app mock
• Bento feature grid with watermark icons
• Logo cloud
• Pricing comparison table
• File manager table with checkboxes
• Upload dropzone with progress
• Folder tree / breadcrumb
• Preview modal (image, PDF, video, audio, text)
• Share dialog (email invite, public link)
• Notification bell with realtime updates
• Storage usage meter with warnings
• 2FA setup (TOTP QR)
• Stripe checkout and billing portal

Interactions

• Drag-and-drop upload with per-file progress
• Star, rename, move, delete to trash (30-day auto-purge)
• Preview files via signed URLs
• Create public link with token; revoke
• Realtime toast when a file is shared with you
• Storage warnings at 80%/95%
• Upgrade plan via hosted checkout
• Theme and language toggles

Data

• Profile{user_id, name, avatar, locale, theme, plan, storage_used, storage_limit, totp_enabled}
• Folder{id, owner_id, parent_id, name}
• File{id, owner_id, folder_id, name, mime, size, path, starred, deleted_at}
• Share{id, file_id, grantee_email|user_id, permission, created_by}
• PublicLink{file_id, token, expires_at, revoked}
• Notification{user_id, type, payload, read}
• Subscription{user_id, stripe_customer_id, price_id, status, current_period_end}
• UserRole{user_id, role: user|admin}

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 **Driftbox**, a cloud storage and file-sharing SaaS for small teams and client portals. Users upload files into folders, preview them in the browser, share by email or link, and get notified when something is shared with them. Plans are sold by subscription with storage limits; admins manage users and settings. A marketing site with pricing ships alongside the app, in English, Spanish and French.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. react-dropzone for uploads, TanStack Query + TanStack Table for the file manager, react-hook-form + zod, Framer Motion for hero and bento animations, Embla for testimonials, Recharts for admin usage, i18next for translations, pdf.js for PDF previews. Supabase: Auth (email/password, Google, TOTP MFA), Postgres, Storage (private buckets), Realtime for notifications, Edge Functions for Stripe checkout, customer portal and webhooks, and for trash cleanup (scheduled).

### Pages & layout
1. **Marketing**: soft cloudy gradient hero with nav (logo, Start here, Pricing, Help, Log in, black CTA), a status-dot announcement pill, two-line headline, subcopy, black and grey buttons, and a browser-framed file-manager mock; logo cloud (fictional brands); bento grid of feature cards with faint oversized icons; product sections; testimonials (illustrative); pricing comparison; CTA; footer.
2. **Files**: sidebar (Home, My files, Shared with me, Starred, Trash, storage meter), top search + notifications + avatar; header with breadcrumb, New folder, Upload; table with checkbox, name/icon, modified, size, row menu.
3. **Preview modal**: image, PDF, video, audio, text.
4. **Share dialog**: invite by email with permission; public link toggle with expiry and revoke.
5. **Settings**: profile, language, theme, security (2FA enrol/disable), sessions.
6. **Billing**: current plan, usage, upgrade (hosted checkout), manage in customer portal.
7. **Admin**: users table (role, plan, usage), broadcast notification, config.

### Design system
Light with dark mode. Tokens: `--background: #fdfdfc`, `--card: #ffffff`, `--foreground: #1d212b`, `--primary: #1d212b`, `--primary-foreground: #ffffff`, `--secondary: #f6f5f4`, `--muted: #f1f0ee`, `--border: #e8e6e3`, `--success: #178841`, `--warning: #b16105`, `--danger: #dc2626`. Font: Inter 400/500/600/700; scale 13/14/16/20/48/60. Radius 12px; pills for badges. Shadows soft (`0 1px 2px rgb(29 33 43 / .06)`). Motion 200ms; bento cards fade-up on scroll. Add `--muted-foreground: #6a717f` and `--input-border: #9c9487`. Dark: `--background: #14161c`, `--card: #1c1f27`, `--foreground: #f3f4f6`, `--muted-foreground: #a1a7b3`, `--primary: #f3f4f6` with `--primary-foreground: #14161c`.

### Components & interactions
Uploads: queued, uploading (%), done, failed (retry), over-quota (blocked with upgrade CTA). Table rows: hover, selected, drag-to-folder target. Trash shows days remaining; restore or delete forever (confirm). Share links copy with toast. Storage meter turns amber at 80% and red at 95%. Empty states per view.

### Data & state
Profile(plan, storage_used, storage_limit, locale, totp_enabled), Folder(parent_id), File(folder_id, mime, size, path, starred, deleted_at), Share, PublicLink(token, expires_at, revoked), Notification, Subscription, UserRole. Keep storage_used accurate via triggers on file insert/delete. Seed a demo account with fictional folders and sample files.

### Accessibility
File table is a proper table with selectable rows announced; drag-to-folder has a "Move to…" alternative. Preview modal traps focus and supports Esc. Language switch updates `lang` attribute. Icons have labels. Grey muted text checked at 4.5:1. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1d212b on #fdfdfc = 15.81:1; body text #1d212b on #f6f5f4 = 14.78:1; muted text #6a717f on #fdfdfc = 4.82:1; muted text #6a717f on #f6f5f4 = 4.5:1.

### Security
RLS: owners access their files/folders; shares grant read or edit to named users; public links resolved by an Edge Function that checks token, expiry and revocation, then issues a short-lived signed URL. Storage bucket private; object paths namespaced by user id. Enforce quotas server-side before upload (policy + function). MFA via Supabase TOTP; require AAL2 for billing and security settings. Stripe: hosted Checkout and Customer Portal only; verify webhook signatures; keep secret keys in function env, never the client (admins never paste Stripe secrets into the UI). Validate filenames, block executable MIME types from inline preview, sanitize text previews.

### Performance & SEO
Virtualise large folders; lazy-load pdf.js and media players; thumbnail generation for images. Marketing pages localized with hreflang, meta/OG per language, Lighthouse 90+; app `noindex`.

### Guardrails
- Original copy; fictional logo cloud and testimonials, clearly illustrative.
- Collect only what billing and auth require.
- Typed components, no `any`, visible errors.
- Done when: upload, preview, share-by-link (with expiry) and trash restore all work; quotas block oversize uploads; a shared user gets a realtime notification; upgrading via checkout updates the plan through the webhook; 2FA gates sensitive settings.

Open the builderAll templatesThis palette on its own