Lostlane

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

AR One Sans is a calm, polished sans with a soft personality, which keeps a short apology forgiving over the busy gallery mosaic.

• AR One SansHeadings: heading 40px 600 at -0.02em, status eyebrow 14px 600 uppercase +0.08em
• AR One SansBody: body 16px/1.6 400

Patterns

• full-bleed dark mosaic of rounded preview tiles
• centered floating 404 card over dimmed mosaic
• plain-language apology line
• primary 'back home' + secondary 'report broken link' actions
• inline site search on the 404
• suggested destinations list
• vivid per-tile colour fields (coral, lavender, lime-green, cobalt)
• 3-column tile grid collapsing to 1 on mobile

States it is designed for

• Default 404 with referrer-aware copy ('the link from another site is out of date' vs internal)
• Report form: sending, thanks, error with retry
• Search: empty query disabled button; no results handled on the search page
• Tiles failing to load fall back to flat colour fields
• Reduced motion: static mosaic, no scale-in
• Server returns HTTP 404 status, never 200

Who it is for

• Visitors who followed an outdated or mistyped link
• Marketing and web teams maintaining redirects
• Marketplace operators showcasing many items

Layout

1. Background: full-bleed black canvas with a 3-column grid of large rounded tiles (each a colourful preview: product UI card on a coloured field, 3D letterform on pastel, icon set on a green gradient, photo-led site previews), dimmed with a 60% black overlay
2. Foreground: centered card (max 480px) with a small status code eyebrow, a short heading, one apology line, a primary 'Back home' button and a secondary 'Tell us' text link
3. Below the actions: a search field and three suggested links (home, pricing, help)
4. Optional minimal top bar with logo only
5. Mobile: mosaic becomes a single column of tiles scrolling behind; card is pinned near the top with 16px gutters

Palette

calm, polished, forgiving, playful, gallery-like. A broken link that lands you in a lit gallery instead of an empty room.

• canvas (near black)#0a0b0b
• card surface#161718
• primary text#f2f1f1
• muted text#9a9a9a
• primary button (green)#6bcd79
• input border#636467
• tile field: coral (decorative)#ce836c
• tile field: lavender (decorative)#c9c8e1
• tile field: plum (decorative)#6b4656
• tile field: deep navy#12182e

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

AR One Sans 600, 40px heading with -0.02em tracking; status code eyebrow 14px 600 uppercase 0.08em

Body

AR One Sans 400, 16px / 1.6

Keep all foreground copy short: a heading of under six words and one sentence of apology.

Spacing and imagery

Tiles 20px radius with 24px gaps and 24px outer margin; foreground card 20px radius, 32px padding, 1px hairline border and a large soft shadow; button 10px radius.

Colourful preview tiles: floating app panels on saturated fields, soft 3D letterforms on pastel gradients, white line icons on a lime-to-green gradient, editorial photo site mockups. All invented, all dimmed behind the card.

Components

• Mosaic tile grid (background)
• Dim overlay
• Floating 404 card
• Status eyebrow
• Primary button
• Report link / mini form
• Search input
• Suggested links list

Interactions

• Mosaic drifts upward very slowly (parallax 20px) and pauses under reduced motion
• Card fades and scales in from 0.98 on load
• Search submits on Enter and routes to the site search page
• 'Tell us' opens a small inline form that captures the broken URL automatically
• Buttons: hover brighten, 2px green focus ring with offset

Data

• ShowcaseTile{id, image, alt, bg_color}
• BrokenLinkReport{id, path, referrer, user_agent_family, created_at}
• SuggestedLink{label, href}
• Redirect{from_path, to_path, status (301|302)}

Guardrails

Experience

• Primary action is always 'Back home'; nothing competes with it
• Copy is honest and brief; no jokes that blame the visitor
• Offer search and at most three suggested destinations
• Background tiles are decorative and never clickable
• Check the redirects table first and redirect automatically when a match exists

Accessibility

• Card text sits on a solid surface, never directly on tiles
• Page title reads 'Page not found' and focus lands on the heading
• Mosaic is aria-hidden; tiles carry empty alt
• Green button carries dark text (#0a0b0b), which passes 4.5:1
• Reduced motion stops drift and scale-in

Security

• Never reflect the requested path unescaped in the page
• Broken-link reports go through an Edge Function with rate limiting and zod validation; referrer truncated and no IP stored
• RLS on broken_link_reports: insert via service role only, staff read
• Redirect table editable only by admin role; only same-site targets allowed (no open redirects)

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 **Lostlane**, a reusable not-found page for a SaaS marketing site or template marketplace. When a link breaks, the visitor lands on a calm card floating above a dimmed gallery of colourful showcase tiles, with a clear way home, a search box and a one-click way to report the broken link. It should feel forgiving and polished rather than like an error.

### Stack
Next.js (App Router) using the `not-found.tsx` convention, React and TypeScript, Tailwind CSS, shadcn/ui (Button, Input), lucide-react (arrow, search, flag icons), Motion for the drift and scale-in, zod for the report payload. Supabase for the `redirects` lookup (middleware) and `broken_link_reports` inserts via an Edge Function.

### Pages & layout
1. **404 view**: black canvas; background grid of nine or more rounded preview tiles (three columns desktop, two tablet, one mobile) under a 60% black overlay; centered card with "404" eyebrow, short heading ("This page wandered off"), one sentence of apology, green "Back home" button, "Tell us" text link, search input and three suggested links.
2. **Middleware**: before rendering the 404, look up the path in `redirects` and issue a 301/302 when found.
3. **Search results** page that the 404 search routes to (can be a simple stub).
Mobile: single-column mosaic behind; card pinned 24px from the top with 16px gutters.

### Design system
- Colors: `--canvas: #0a0b0b`, `--card: #161718`, `--fg: #f2f1f1`, `--muted: #9a9a9a`, `--primary: #6bcd79`, `--on-primary: #0a0b0b`, `--input-border: #636467`, `--ring: #6bcd79`; tile fields (decorative) `#ce836c`, `#c9c8e1`, `#6b4656`, `#12182e`.
- Fonts: AR One Sans; heading 40px/1.15 600 -0.02em; body 16px/1.6; eyebrow 14px 600 uppercase 0.08em.
- Spacing: 8px base; card padding 32px; tile gap 24px; outer margin 24px.
- Radius: tiles 20px, card 20px, button 10px, input 10px.
- Shadows: card `0 30px 80px rgba(0,0,0,.6)`; hairline `rgba(255,255,255,.08)`.
- Motion: card 300ms fade + scale 0.98→1; mosaic drift 40s alternate, 20px range.

### Components & interactions
MosaicBackground (aria-hidden tiles with flat-colour fallback), NotFoundCard, PrimaryButton, ReportLink → inline ReportForm (auto-fills path and referrer, one optional note field), SearchInput (Enter submits to `/search?q=`), SuggestedLinks. Focus moves to the heading on mount.

### Data & state
`ShowcaseTile[]` from static JSON with invented previews. Report states: idle, open, sending, thanks, error. The server response status must be 404. Referrer-aware copy: external referrer shows "The link you followed is out of date"; internal shows "We moved something and missed a redirect".

### Accessibility
Card text always on `--card`. Mosaic `aria-hidden`, tiles empty alt. Title "Page not found". Green button uses dark text. Reduced motion disables drift and scale-in. Focus ring 2px `--ring` with 2px offset. Body 16px.
Verified contrast: heading text on card: #f2f1f1 on #161718 = 15.92:1; muted text on card: #9a9a9a on #161718 = 6.38:1; dark label on green button: #0a0b0b on #6bcd79 = 9.98:1; green link text on canvas: #6bcd79 on #0a0b0b = 9.98:1; focus ring (green) on card: #6bcd79 on #161718 = 9.09:1; search input border on card: #636467 on #161718 = 3.03:1; white text on navy tile caption: #ffffff on #12182e = 17.56:1.

### Security
Escape any echoed path; prefer not echoing it. Reports go through an Edge Function: zod validation (path ≤ 512 chars, note ≤ 500), per-IP rate limit, no IP stored, referrer trimmed to origin + path. RLS: `broken_link_reports` insert via service role, select for `staff` role only; `redirects` select for anon (read-only lookup via middleware using the anon key is fine) but insert/update/delete only for `admin`. Redirect targets must be same-origin paths to prevent open redirects.

### Performance & SEO
Tiles as small AVIF thumbnails, lazy below the fold, blurred placeholders. `noindex` on the 404. Keep JS for the page under 40KB. Log 404s (path only) for the redirect backlog.

### Guardrails
- Tiles show invented previews only; no real brand panels, logos or photos of real people.
- No blame, no jokes at the visitor's expense.
- Acceptance criteria:
  - [ ] Unknown routes return HTTP 404 with this page
  - [ ] Known redirect paths 301 before render
  - [ ] Report and search work by keyboard; report stores a row
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own