Shelfwise

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

Overpass descends from Highway Gothic road signage, apt for logistics, and its matching mono handles SKUs and quantities.

• OverpassHeadings: hero 52px 600, section titles 30px
• OverpassBody: body 16px
• Overpass MonoFigures and code: SKUs and quantities

Who it is for

• SMB operations managers
• Retailers with multiple locations
• Warehouse staff receiving stock
• Owners planning reorders

Layout

1. Light top nav: green cube logo + wordmark left, centered Features / Solutions / Analytics, soft grey 'Try demo' button right
2. Centered hero: photoreal cardboard box illustration, two-line bold headline, subcopy, green 'Try demo' button with arrow
3. 'Solutions' pill label section with a product dashboard UI mock: dark green sidebar (Suppliers, Purchase orders, Intelligence: Analytics, AI insights, Admin: Settings, Requests) and cards for Needs attention (low stock / out of stock lists with SKU + qty) and Recent activity (+/- movements)
4. 'Product tour' section: module list on left, browser-framed app on right with search, command-K, notifications badge, user menu
5. Feature grid (real-time tracking, reorder alerts, suppliers, barcode scanning, analytics, roles)
6. Closing CTA and footer
7. App: dashboard, items catalog, item detail, movements log, transfers, suppliers, purchase orders, analytics, AI insights, settings & custom fields

Palette

Grounded, practical, trustworthy, calm, modern. Warm neutrals and forest green make logistics feel orderly and approachable.

• background (warm off-white)#fcfaf6
• card#ffffff
• text (deep green-black)#05160d
• primary green#00844b
• secondary amber (low stock)#e49e22
• sidebar dark green#0f1f17
• muted#f2eee7

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

Overpass Sans 600, 52px hero with -1.3px tracking; section titles 30px

Body

Overpass Sans 400 16px; monospace for SKUs and quantities

One crisp grotesk with mono accents for data -- practical, modern and legible. 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

Centered 1100px container, large hero whitespace, cards with 10px radius and hairline borders, pill labels above section titles, dense data rows inside the product mock.

A single photoreal cardboard box as hero illustration; product UI mocks in browser frames; icons from lucide; in-app charts for stock and forecasts.

Components

• Top nav with centered links
• Hero product illustration
• Section pill labels
• Dark sidebar app shell with grouped nav
• Metric cards (SKUs, in stock, low, out)
• Needs-attention list with status dots
• Recent activity feed with +/- deltas
• Command palette (⌘K)
• Barcode scan input
• Items data table with filters
• Purchase order form and receiving screen
• Supplier directory with lead time metrics
• Forecast chart and reorder suggestions
• Custom field builder

Interactions

• ⌘K command palette navigation
• Natural-language search
• Scan barcode to find/adjust item
• Partial receiving updates stock
• Transfer stock between locations
• Accept AI reorder suggestion into draft PO
• Notification bell with count
• Role-gated actions

Data

• Location{id, name, parent_id, type: warehouse|zone|bin}
• Item{id, sku, barcode, name, category, unit_cost, price, reorder_point, supplier_id, custom_fields(json)}
• StockLevel{item_id, location_id, quantity}
• Movement{id, item_id, location_id, delta, reason, reference, user_id, at}
• Supplier{id, name, contact, terms, avg_lead_days, accuracy_pct}
• PurchaseOrder{id, supplier_id, status: draft|submitted|partial|received|cancelled, expected_at}
• POLine{po_id, item_id, qty_ordered, qty_received, unit_cost}
• CustomFieldDef{key, label, type, options}
• UserRole{user_id, role: admin|manager|staff|viewer}

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 **Shelfwise**, an inventory management app for small and mid-size businesses with one or several stock locations. Staff see what is low or out of stock at a glance, log every movement, transfer stock between locations, raise and receive purchase orders, and get suggested reorder quantities based on recent consumption and supplier lead times.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix, including Command for a ⌘K palette), lucide-react. TanStack Query + TanStack Table for catalog and movement lists, react-hook-form + zod for items, POs and custom fields, Recharts for stock trends and forecasts, a browser barcode reader (e.g. `@zxing/browser`) for camera scanning, date-fns. Supabase: Auth, Postgres with RLS and transactional functions for stock changes, Realtime for dashboard updates, and an Edge Function for AI reorder suggestions.

### Pages & layout
1. **Landing**: nav with centered links and a soft "Try demo" button; centered hero with a product illustration (a parcel), headline, subcopy, green CTA; a "Solutions" section with a large dashboard UI mock; a product tour with a module list beside a browser-framed app; feature grid; CTA; footer.
2. **App shell**: dark green sidebar grouped into Inventory, Purchasing, Intelligence, Admin; top bar with search, ⌘K hint, scan button, notification bell, user menu.
3. **Dashboard**: metric cards; Needs attention (low stock with qty/threshold, out of stock); Recent activity with signed deltas; open POs.
4. **Items**: filterable table; item detail with stock per location, movement history, custom fields.
5. **Movements** and **Transfers**.
6. **Suppliers**: directory with lead time and fulfilment accuracy.
7. **Purchase orders**: list, editor, receiving screen with partial quantities.
8. **Analytics / AI insights**: turnover, stock value, forecast chart, suggested reorders.
9. **Settings**: locations hierarchy, custom fields, members and roles.

### Design system
Light. Tokens: `--background: #fcfaf6`, `--card: #ffffff`, `--foreground: #05160d`, `--primary: #00844b`, `--primary-foreground: #fcfaf6`, `--warning: #e49e22`, `--danger: #d93b3b`, `--muted: #f2eee7`, `--border: #edebe7`, `--sidebar: #0f1f17`. Fonts: Overpass 400-600 with Overpass Mono for SKUs and numbers. Scale 12/14/16/20/30/52. Radius 10px; buttons 10px. Shadows subtle; section labels as small green pills. Motion 150-200ms. Add `--warning-text: #a66300` for low-stock text (the amber `#e49e22` is a fill with dark text), `--muted-foreground: #5f6b64`, sidebar text `#e8efe9` and muted sidebar text `#9fb3a7`, and `--input-border: #8f8a80`.

### Components & interactions
Stock status dot + label (in stock, low, out). Quantity inputs with steppers and validation against available stock. Command palette jumps to items, POs and actions. Scan mode opens camera with a manual fallback. Receiving lets users enter partial quantities and shows remaining. Suggestions card: accept adds to a draft PO; dismiss hides for 7 days. Empty, loading (skeleton) and error states on every list.

### Data & state
Location(parent_id), Item(custom_fields JSON), StockLevel(item, location, qty), Movement(delta, reason, reference), Supplier, PurchaseOrder, POLine, CustomFieldDef, UserRole. All stock changes go through a Postgres function that writes a Movement and updates StockLevel atomically; never let the client set quantities directly. Seed two warehouses, ~40 office and electronics items, five suppliers and a few POs.

### Accessibility
"Low stock" text uses `--warning-text: #a66300`; amber fills carry dark text. Status is always text + colour. The command palette and scanner dialogs trap focus and have labels. Tables use headers and sortable button semantics. Camera scanning always has a typed-entry alternative. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #05160d on #fcfaf6 = 17.87:1; muted text #5f6b64 on #fcfaf6 = 5.34:1; button text #fcfaf6 on #00844b = 4.58:1; primary green link text #00844b on #ffffff = 4.77:1.

### Security
Roles table with a `has_role()` security-definer function. RLS: viewers read only; staff record movements and receive POs; managers create POs and transfers; admins manage settings. Stock functions validate that quantities don't go negative and run in transactions. Validate all forms with zod and database constraints. The AI function receives aggregated consumption only, keeps keys server-side and is rate-limited. CSV imports capped and sanitized.

### Performance & SEO
Paginate items and movements server-side with indexes on sku, barcode and item/location. Realtime subscriptions only on the dashboard. Optimise the hero image (WebP, explicit size). Landing meta/OG; app `noindex`.

### Guardrails
- Original copy, generic product names, no real brand logos on items.
- No fabricated customer testimonials.
- Typed components, no `any`, visible errors.
- Done when: a movement updates stock and appears in activity; a PO received partially adjusts stock and remains open; transfers move quantity between locations; low-stock items surface on the dashboard; staff cannot change settings.

Open the builderAll templatesThis palette on its own