Nevaro

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.

• Source Sans 3Headings: Source Sans 3 700 28px h1, -0.01em
• Source Sans 3Body: Source Sans 3 400 16px / 1.5

Patterns

• centered single-column create form under a top nav
• owner / name split input with slash separator
• 2x2 grid of toggle cards for regions
• visibility radio cards with icon
• feature icon tile above title
• billing note with inline pricing link

States it is designed for

• pristine
• name invalid / taken / available
• no regions selected (default)
• region unavailable on current plan (disabled card + tooltip)
• creating
• created
• quota exceeded error
• org owner without create permission

Who it is for

• ML engineers storing datasets and checkpoints
• research teams sharing large files

Layout

1. Top nav: logo + name, wide search input, links (models, datasets, spaces, buckets with 'new' badge, docs, pricing), menu, avatar
2. Centered column (max 400px): square tinted icon tile, h1, two-line explanation with underlined term link
3. Owner select / slash / Bucket name input on one row
4. CDN pre-warming heading + helper, 2x2 grid of region cards (switch, cloud glyph, region name, city), billing note with link
5. Divider, Visibility radio cards (Public, Private) each with icon, title and one-line description
6. Footer: Create bucket primary button and quiet cancel link
7. Mobile: owner and name stack; region grid becomes one column

Palette

Technical, open and friendly; white canvas with a single blue accent.

• page#ffffff
• text#111827
• muted text#6b7280
• card border#e5e7eb
• input border#8c95a2
• primary#111827
• on primary#ffffff
• accent blue#3b82f6
• icon tile#dbeafe
• switch off#d1d5db
• focus ring#3b82f6
• new badge text#1d4ed8

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

Source Sans 3 700 28px h1, -0.01em

Body

Source Sans 3 400 16px / 1.5

Similar to the observed humanist sans; JetBrains Mono 15px for bucket paths.

Spacing and imagery

Comfortable; 4px base, 32px between sections, 12px grid gap for region cards, 16px card padding; radius 8px cards and inputs; no shadows.

Square tinted icon tile above the title; small cloud-provider-neutral glyphs on region cards (generic cloud icons, no vendor logos).

Components

• TopNav with search
• FeatureIconTile
• OwnerSelect
• NameInput with inline availability check
• RegionToggleCard (switch, glyph, region, city)
• BillingNote
• VisibilityRadioCard
• CreateButton

Interactions

• Name input validates slug rules as you type and checks availability after 400ms; shows green check or conflict message
• Clicking anywhere on a region card toggles its switch; the card border turns blue when on
• Enabling regions shows an estimated monthly surcharge under the grid
• Visibility cards are a radiogroup; the whole card is clickable
• Create shows spinner then routes to the new bucket page

Data

• Bucket{id, owner_id, owner_type (user|org), name, visibility (public|private), prewarm_regions[], created_at, size_bytes}
• Region{id, label, city, provider_group, surcharge_per_gb}
• Owner{id, handle, type, plan}

Guardrails

Experience

• Show the full path (owner / name) exactly as it will appear
• Explain billing impact right under the regions
• Default to no pre-warming and to private visibility, so nothing costs money or becomes public by accident
• Use whole-card click targets for toggles and radios
• Keep the primary action at the end of the column

Accessibility

• Owner and name inputs are grouped with a legend 'Bucket path' and the slash is aria-hidden
• Each region card exposes a switch with name '<region>, <city>'
• Visibility radios carry descriptions via aria-describedby
• Availability result is announced politely
• Focus ring visible around whole cards when the inner control is focused (focus-within)

Security

• Validate names server-side and enforce unique (owner, name)
• Only the user or org admins can create buckets under an owner
• Private buckets are readable only by owner members (storage policies)
• Charge-bearing options (pre-warming) require confirmation of billing on file
• Rate-limit availability checks

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 **Nevaro**, a Create storage bucket page for a fictional model-hosting hub. Include the top nav, owner/name row, region toggle cards with cost estimate, visibility radio cards and every validation state.

### Stack
Use React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui, Radix, lucide-react, TanStack Query, react-hook-form, zod, Supabase.  Use Supabase for Auth, Postgres (row-level security on every table) and Storage where noted; keep only the anon key in the browser and run privileged work in Edge Functions.

### Pages & layout
1. **/new-bucket**: the form.
2. **/buckets/:owner/:name**: minimal bucket page (file list empty state) to land on.
3. **/pricing** stub for the billing link.

Regions, in order:
- Top nav: logo + name, wide search input, links (models, datasets, spaces, buckets with 'new' badge, docs, pricing), menu, avatar
- Centered column (max 400px): square tinted icon tile, h1, two-line explanation with underlined term link
- Owner select / slash / Bucket name input on one row
- CDN pre-warming heading + helper, 2x2 grid of region cards (switch, cloud glyph, region name, city), billing note with link
- Divider, Visibility radio cards (Public, Private) each with icon, title and one-line description
- Footer: Create bucket primary button and quiet cancel link
- Mobile: owner and name stack; region grid becomes one column

### Design system
- Colors: `--page: #ffffff` (page), `--text: #111827` (text), `--muted-text: #6b7280` (muted text), `--card-border: #e5e7eb` (card border), `--input-border: #8c95a2` (input border), `--primary: #111827` (primary), `--on-primary: #ffffff` (on primary), `--accent-blue: #3b82f6` (accent blue), `--icon-tile: #dbeafe` (icon tile), `--switch-off: #d1d5db` (switch off), `--focus-ring: #3b82f6` (focus ring), `--new-badge-text: #1d4ed8` (new badge text).
- Fonts: Source Sans 3 700 28px h1, -0.01em for headings; Source Sans 3 400 16px / 1.5 for body. Similar to the observed humanist sans; JetBrains Mono 15px for bucket paths.
- Spacing, radius and shadows: Comfortable; 4px base, 32px between sections, 12px grid gap for region cards, 16px card padding; radius 8px cards and inputs; no shadows.
- Motion: 150-200 ms ease-out for hover, focus and overlay transitions; overlays fade and scale from 98% to 100%; everything collapses to an instant change under prefers-reduced-motion.
- Mood: Technical, open and friendly; white canvas with a single blue accent. Imagery: Square tinted icon tile above the title; small cloud-provider-neutral glyphs on region cards (generic cloud icons, no vendor logos).

### Components & interactions
Build these components: TopNav with search; FeatureIconTile; OwnerSelect; NameInput with inline availability check; RegionToggleCard (switch, glyph, region, city); BillingNote; VisibilityRadioCard; CreateButton.

- Name input validates slug rules as you type and checks availability after 400ms; shows green check or conflict message
- Clicking anywhere on a region card toggles its switch; the card border turns blue when on
- Enabling regions shows an estimated monthly surcharge under the grid
- Visibility cards are a radiogroup; the whole card is clickable
- Create shows spinner then routes to the new bucket page

### Data & state
Model: `Bucket{id, owner_id, owner_type (user|org), name, visibility (public|private), prewarm_regions[], created_at, size_bytes}`; `Region{id, label, city, provider_group, surcharge_per_gb}`; `Owner{id, handle, type, plan}`.

Availability check hits an RPC `bucket_name_available(owner, name)`. Region list is seeded. The form schema enforces lowercase slug, 3-63 chars.

States to implement and demo:
- pristine
- name invalid / taken / available
- no regions selected (default)
- region unavailable on current plan (disabled card + tooltip)
- creating
- created
- quota exceeded error
- org owner without create permission

### Accessibility
- Owner and name inputs are grouped with a legend 'Bucket path' and the slash is aria-hidden
- Each region card exposes a switch with name '<region>, <city>'
- Visibility radios carry descriptions via aria-describedby
- Availability result is announced politely
- Focus ring visible around whole cards when the inner control is focused (focus-within)
- Body text is 16px with line-height 1.5 (15px only inside dense tables), nothing renders below 12px, weights of 300 or lighter appear only at 24px and above, and uppercase is limited to short labels with at least 0.05em tracking.
Verified contrast: body text on white: #111827 on #ffffff = 17.74:1; muted helper on white: #6b7280 on #ffffff = 4.83:1; Create label on dark: #ffffff on #111827 = 17.74:1; input border on white: #8c95a2 on #ffffff = 3.03:1; selected radio / switch on white: #3b82f6 on #ffffff = 3.68:1; focus ring on white: #3b82f6 on #ffffff = 3.68:1; new badge text on tile blue: #1d4ed8 on #dbeafe = 5.49:1; switch off track on white: #8c95a2 on #ffffff = 3.03:1.

### Security
- Validate names server-side and enforce unique (owner, name)
- Only the user or org admins can create buckets under an owner
- Private buckets are readable only by owner members (storage policies)
- Charge-bearing options (pre-warming) require confirmation of billing on file
- Rate-limit availability checks

RLS: `buckets` - public select where visibility='public', otherwise select for owner members; insert where the caller is the user owner or an org admin; `regions` - public select. Storage policies mirror bucket visibility.

### Performance & SEO
Debounce availability checks; prefetch owner list. The page is authenticated and noindex; public bucket pages can be indexed with a title and description.

### Guardrails
- Show the full path (owner / name) exactly as it will appear
- Explain billing impact right under the regions
- Default to no pre-warming and to private visibility, so nothing costs money or becomes public by accident
- Use whole-card click targets for toggles and radios
- Keep the primary action at the end of the column
- Use the product name Nevaro and fresh, generic copy throughout; all people, companies, amounts and IDs are invented, and no third-party brand, logo or wordmark appears.
- Keep components small and typed (no `any`), and surface every failure visibly instead of swallowing it.

Acceptance criteria:
- [ ] Name availability and validation work
- [ ] Region toggles update the estimate
- [ ] Visibility choice persists
- [ ] Unauthorized owners cannot be selected
- [ ] 390px layout works

Open the builderAll templatesThis palette on its own