Relay Desk

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

Fraunces keeps the soft, artisan serif voice, and Outfit is a clean, round geometric body that keeps the sunlit-studio warmth.

• FrauncesHeadings: hero 72px 400 with italic accent word, section titles 700 40px, card titles
• OutfitBody: body 16px, warm grey

Who it is for

• Operations and people-ops teams
• IT access and provisioning owners
• Approvers in multi-stage chains
• Compliance-minded admins

Layout

1. Floating rounded cream nav: italic serif wordmark left, centered Features / How it works / Studio / Pricing (active underline), dark brown pill 'Get started' right
2. Split hero on cream with faint plus-pattern: dark pill eyebrow, huge serif headline with italic second line, warm subcopy, rust pill primary + outlined secondary; right a tilted, rounded sun-lit photo of a desk with the app on screen
3. Stats row (e.g. hours saved, SLA %, teams)
4. Feature grid of rounded outlined cards with rust icons and serif titles (Smart routing, Approval workflows, Custom forms, Real-time dashboard, Audit trail) plus a 'studio' feature card
5. Three-step split: tilted laptop photo left, numbered serif steps (01, 02, 03) with icons right
6. Closing CTA and footer
7. App: request intake form, Kanban board by stage, queue with SLA badges, approval detail with actions, rules/routing config, form builder, dashboard and audit log

Palette

Warm, calm, crafted, human, reassuring. It deliberately makes operations software feel like a sunlit studio rather than a ticketing system.

• background (cream)#fbf9f0
• card#f4f2ec
• text (espresso)#34251f
• primary rust#994920
• secondary clay#8e6a56
• muted#e6e4df
• border#d2cdc5

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

Fraunces 400 at 72px with italic accent word; section titles Fraunces 700 40px; card titles in a text serif

Body

Outfit 400 16px, warm grey

Soft, characterful serif against a clean geometric sans -- an 'artisan' take on enterprise workflow software. 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

Wide 1200px container, generous whitespace, 16px radius cards with thin warm borders, pill buttons, tilted photo frames with 24px radius, numbered steps with large muted numerals.

Warm golden-hour photographs of desks, plants, coffee and screens showing the app, framed with rounded corners and slight rotation; Material Symbols line icons in rust.

Components

• Floating pill navbar with active underline
• Eyebrow pill badge
• Serif hero with italic accent
• Tilted rounded photo frame
• Stats row
• Feature cards with rust icons
• Numbered step list
• Request intake with dynamic fields
• Kanban board by workflow stage
• SLA countdown badges (on track / at risk / breached)
• Approval panel (approve, reject, request changes, reassign)
• Batch action toolbar
• Routing rules editor
• Delegation / out-of-office settings

Interactions

• Rules evaluate on submit and show assigned approver
• Drag cards across Kanban stages
• Multi-select batch approve/reassign
• SLA badges tick down and change colour
• Escalation notification when thresholds pass
• Delegate toggle reroutes new approvals
• Filter and export reports
• Hover lift on cards and nav underline transitions

Data

• RequestType{id, name, form_schema, workflow_id, sla_hours}
• Workflow{id, name, stages[{order, approver_rule, sla_hours}]}
• RoutingRule{id, type_id, condition(json), assignee_user_id|group_id, priority}
• Request{id, type_id, requester_id, data, stage_index, assignee_id, status, due_at, created_at}
• Approval{request_id, stage_index, approver_id, decision, comment, decided_at}
• Delegation{user_id, delegate_id, starts, ends}
• AuditEvent{request_id, actor_id, action, payload, at}
• UserRole{user_id, role: requester|approver|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 **Relay Desk**, an internal request routing tool for operations, IT and people teams. Employees submit a request through a type-specific form; rules decide who should approve it; multi-stage chains move it forward with SLA timers and escalation; every action lands in an audit log. The product should feel warm and human while being rigorous about ownership and deadlines.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. dnd-kit for the Kanban board, TanStack Query + TanStack Table for queues and audit log, react-hook-form + zod for dynamic forms, Recharts for SLA and volume reports, date-fns for business-hours maths, Framer Motion for subtle entrances. Supabase: Auth, Postgres (RLS), Edge Functions or scheduled jobs (pg_cron) for SLA escalation, and a routing function executed on submit.

### Pages & layout
1. **Landing**: floating cream nav with italic serif wordmark and centered links; split hero with dark pill eyebrow, oversized serif headline ending in an italic word, subcopy, rust pill CTA + outline; a slightly rotated, rounded warm photo. Stats row; feature card grid; "three steps" split with tilted photo and large numerals; CTA; footer.
2. **Submit**: choose request type, fill dynamic form, preview who it will route to.
3. **My queue** (approvers): list sorted by due time with SLA badges; batch approve/reassign.
4. **Board**: Kanban columns per stage; drag to advance where permitted.
5. **Request detail**: fields, current stage, approver chain, comments, actions (approve, reject, request changes, reassign), timeline.
6. **Admin**: request types + form builder, workflows and stages, routing rules (conditions on fields, department, amount), business hours, delegation.
7. **Reports**: SLA compliance, volume by type, time to resolution; CSV export.
8. **Audit log**: filterable table.

### Design system
Light, warm. Tokens: `--background: #fbf9f0`, `--card: #f4f2ec`, `--foreground: #34251f`, `--primary: #994920`, `--primary-foreground: #fbf9f0`, `--secondary: #8e6a56`, `--muted: #e6e4df`, `--border: #d2cdc5`; SLA states on-track `#3f7d4e`, at-risk `#9b661a`, breached `#b42318`. Fonts: Fraunces (display 400 with italic accents, 700 for section titles) and Outfit 400-600 for UI. Scale 14/16/20/28/40/72. Radius 16px cards, pills for buttons and chips. Shadows soft and warm (`0 8px 24px rgb(52 37 31 / .08)`). Motion 220ms ease-out; card hover lifts 2px. Subtle plus-sign background pattern on marketing pages only. Add `--muted-foreground: #6e5a4e` for warm grey body copy and `--input-border: #9a8f7d` for inputs, chips and Kanban column outlines (the `#d2cdc5` border is decorative).

### Components & interactions
Buttons (rust primary, outline, ghost, destructive) with focus, loading and disabled states. SLA badge shows remaining time and changes state automatically. Batch toolbar appears when rows are selected. Rule editor validates conditions and shows a test-against-sample preview. Drag on the board is blocked (with a toast) if the user isn't the stage approver. Empty queue state is encouraging; errors show inline banners with retry.

### Data & state
RequestType, Workflow(stages JSON), RoutingRule(condition JSON, priority), Request(stage_index, assignee_id, status, due_at), Approval, Delegation, AuditEvent, UserRole. Routing and transitions run server-side; the client only requests actions. Seed three departments, five request types (access, equipment, purchase, leave, vendor onboarding) and ~50 fictional requests at mixed SLA states.

### Accessibility
Rust `#994920` passes 4.5:1 as text on cream, and cream text on rust buttons passes too. Kanban has a keyboard sensor and a "Move to…" menu alternative. SLA badges include text, not just colour. Photos get concise alt text; decorative patterns are CSS only. Tables use proper headers and sort announcements. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #34251f on #fbf9f0 = 13.92:1; body text #34251f on #f4f2ec = 13.11:1; warm grey muted text #6e5a4e on #f4f2ec = 5.8:1; cream text #fbf9f0 on #994920 = 5.98:1.

### Security
Roles in a dedicated table checked via a security-definer function. RLS: requesters see their own requests; approvers see requests assigned to them or their delegators; admins see all. Status and assignee changes only through server functions that verify the actor is the current approver. Audit events are insert-only. Validate dynamic form data with zod against the stored schema on both sides. Rate-limit submissions per user. CSV exports escape formula-leading cells.

### Performance & SEO
Paginate queues; index `assignee_id`, `due_at`, `status`. Serve hero photos as responsive WebP with explicit dimensions and lazy-load lower images. Landing meta/OG; app `noindex`.

### Guardrails
- Original copy and generated or royalty-free placeholder photos; no real company logos.
- No fabricated customer stats presented as real; label sample metrics.
- Typed components, no `any`, visible errors.
- Done when: a submitted request auto-routes per rules; a two-stage chain advances only via the right approvers; SLA state changes and escalates on schedule; delegation reroutes during leave; the audit log records every action.

Open the builderAll templatesThis palette on its own