Seatplot

Who it is for

• Office and workplace managers
• Hybrid teams coordinating office days
• Facilities teams tracking utilization
• Employees booking desks, rooms and parking

Layout

1. Minimal header: orange uppercase wordmark left; a log-in link and an outlined CTA right
2. Centered hero: headline with the key word in orange on a peach highlight chip, grey subcopy, square orange CTA
3. Browser-framed dashboard mock straddling a dark navy band: sidebar (Dashboard, Floor map, My bookings, Parking & lockers, Team, My week), greeting, resource counts, 'Today's booking' card with Check in button, quick actions
4. Feature list with icons beside a photo (floor maps, one-click booking, team coordination)
5. Three numbered orange circles joined by a dashed line
6. Testimonials, FAQ, footer
7. App: dashboard, floor map, booking wizard, my bookings, parking & lockers, team presence, my week planner, admin floor designer, rules, analytics

Palette

organized, bright, efficient, friendly, modern. A tidy office manager in app form, with a confident orange accent.

• background#f9fafb
• text#050917
• primary orange-red#d63400
• highlight peach#ffe4d9
• dark band navy#050917
• muted surface#f1f5f9
• available green#0e9f6f

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

Plus Jakarta Sans SemiBold 60px, -1.5px tracking; H2 36px

Body

Plus Jakarta Sans 16px grey

A friendly geometric sans with a highlighted keyword gives a light, optimistic product tone.

Spacing and imagery

1100px container, small 4px radius (square-ish buttons), browser frame with dark border, numbered circles with dashed connectors, about 120px sections.

Product mock as hero, an office/team photo beside the feature list, colored resource icons (desk, parking, locker).

Components

• Header with outlined CTA
• Highlighted-keyword hero headline
• Browser-framed dashboard mock
• Resource count strip
• Today's booking card with Check in
• Quick actions list
• Feature list with icons
• Numbered steps with dashed connector
• Testimonials and FAQ accordion
• Interactive floor map with status colors
• Booking wizard (resource, date, time)
• Weekly hybrid planner
• Admin drag-and-drop floor designer
• Utilization charts

Interactions

• Click a desk on the floor map to see details and book
• Guided booking wizard with availability check
• Recurring bookings within rule limits
• Join a waitlist for full resources and get notified
• QR check-in; unchecked bookings auto-release
• Plan my week and see teammates' days
• Admin drags desks and rooms onto the floor plan
• Utilization dashboards filter by floor and date

Data

• Office{id, name, timezone}
• Floor{id, office_id, name, plan_image?, layout jsonb}
• Resource{id, floor_id, type desk|room|parking|locker, label, x, y, w, h, capacity, amenities[]}
• Booking{id, resource_id, user_id, starts_at, ends_at, status booked|checked_in|released|cancelled, recurrence_id?}
• Waitlist{id, resource_id, user_id, date, position}
• Rule{office_id, max_days_ahead, max_recurring_weeks, checkin_grace_min}
• Profile{id, name, team, role employee|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 **Seatplot**, an internal booking app for hybrid offices. Employees reserve desks, meeting rooms, parking and lockers from an interactive floor map, see which teammates are in, and check in on arrival. Admins lay out floors, set booking rules and see how space is actually used.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Dialog, Tabs, Popover, Calendar, Select) and lucide-react. Use an SVG floor map with dnd-kit for the admin designer, react-hook-form + zod, TanStack Query, date-fns / date-fns-tz, Recharts for utilization, and `qrcode.react` plus a camera scanner for check-in. Supabase provides:
- Auth (email).
- Postgres with an exclusion constraint to prevent double booking.
- Realtime for live availability.
- A scheduled Edge Function that auto-releases unchecked bookings and notifies waitlists.

### Pages & layout
1. **Landing**:
   - Header: orange wordmark, Log in, outlined CTA.
   - Hero: headline with one keyword highlighted on a peach chip, subcopy and a square orange CTA; a browser-framed dashboard mock straddling a dark navy band.
   - Feature list with an office photo, three steps with numbered circles and a dashed connector, testimonials (marked as samples), FAQ and footer.
2. **Dashboard**: greeting and date, resource counts, today's booking with Check in, quick actions, upcoming bookings.
3. **Floor map**: floor selector, date/time picker and resource type filter; desks colored available, booked or mine; click to book.
4. **Booking wizard**: resource type, date, time or all-day, recurrence and confirmation.
5. **My bookings** (cancel, QR), **Parking & lockers**, **Team** (who's in, by day), **My week** planner.
6. **Admin**: floor designer (drag resources, set labels and amenities), rules, utilization analytics.

### Design system
- Tokens: `--background: #f9fafb`, `--card: #ffffff`, `--foreground: #050917`, `--primary: #d63400`, `--highlight: #ffe4d9`, `--muted: #f1f5f9`, `--border: #e1e6ea` (decorative), `--input-border: #7d92a4`, `--muted-fg: #5b6472`, `--dark: #050917`.
- Status colors: available `#0e9f6f`, booked `#7b8ea8`, mine `#d63400`, restricted `#c27d08`.
- Font: Plus Jakarta Sans. Hero 56-60px semibold at -0.025em, H2 36px, body 16px at line-height 1.6, nothing below 12px.
- Spacing on a 4px base; radius 4px on buttons and inputs, 8px on cards.
- Shadows: the mock frame gets `0 24px 48px -16px rgb(5 9 23 / .25)`.
- Motion: 150ms.

### Components & interactions
FloorMap (zoom and pan, tooltips, keyboard focus per resource, legend), ResourcePopover (amenities, Book button, disabled when taken), BookingWizard (step validation; conflict error from the DB shown clearly), RecurrencePicker (bounded by rules), WaitlistButton (position shown), CheckInQR and Scanner (camera-denied fallback to a code entry), WeekPlanner (toggle office/remote per day; teammates avatars), FloorDesigner (drag, snap to grid, delete, undo), RulesForm, UtilizationCharts (by floor, weekday and resource type). Include empty, loading and error states.

### Data & state
Tables: `offices`, `floors`, `resources`, `bookings` (with an `EXCLUDE USING gist (resource_id WITH =, tstzrange(starts_at, ends_at) WITH &&) WHERE status in ('booked','checked_in')` constraint), `waitlist`, `rules`, `profiles`, `user_roles`. Store times in UTC and render them in the office timezone. Seed one fictional office.

### Accessibility
The orange primary is `#d63400`, so white button labels pass (4.8:1); the peach-chip keyword is 60px display text (4.0:1). The floor map needs a list or table alternative with the same actions, and each resource needs an accessible name and status ("Desk D-01, available"). Status is never shown by color alone (use icons or patterns). The designer supports keyboard nudging. The QR scanner offers a manual code entry.
Verified contrast: body: #050917 on #f9fafb = 19.0:1; subcopy: #5b6472 on #f9fafb = 5.7:1; white on primary: #ffffff on #d63400 = 4.8:1.

### Security
RLS:
- Employees read resources and availability, and create or cancel only their own bookings.
- Admins manage floors, resources and rules.
- Profiles show names only, not emails.
QR tokens are signed, short-lived and single-booking. The check-in endpoint verifies the token, time window and user. The auto-release function uses the service key server-side only. Validate everything with zod and DB constraints. Rate-limit booking creation.

### Performance & SEO
Render the map as SVG with memoized resource nodes. Subscribe to availability changes only for the active floor and date. Index `(resource_id, starts_at)`. Split admin routes. Landing page: meta and OG tags plus an optimized photo; noindex the app.

### Guardrails
- Write fresh copy; use invented people in the mock and royalty-free imagery.
- Don't track location beyond check-in.
- Keep components small and typed; no `any`. Show booking conflicts visibly.
- Done when: (1) double booking is impossible, even when two users book at the same moment; (2) unchecked bookings auto-release after the grace period and notify the waitlist; (3) the floor map has a full keyboard and list alternative; (4) admins can lay out a floor; (5) utilization matches booking records.

Open the builderAll templatesThis palette on its own