Lanternbase

Who it is for

• SaaS teams publishing product documentation
• Open-source maintainers
• Technical writers running a knowledge base
• Developer-relations teams shipping changelogs

Layout

1. Top bar: lantern logo mark + wordmark, inline search field with ⌘K keycaps, right-aligned Docs / API / Changelog links
2. Centered hero on pure black: greeting pill ('Hello, I'm ...'), large bold headline, subtitle, big search field with keycaps, 'Search shortcuts' chips
3. 'Explore by category' three cards (Documentation, API Reference, Changelog) with CTA links
4. 'Community & support' cards
5. AI assistant section: headline with blur-in text animation, glass chat panel with demo notice and input, light-streak video/gradient backdrop
6. Docs pages: grouped sidebar, content, scroll-spy TOC; API pages with method badges; changelog with typed badges

Palette

cinematic, sleek, monochrome, confident, modern. It reads like a launch keynote turned into documentation.

• background#000000
• text#f8fafc
• card#18191b
• secondary/keycap#242529
• border#1f2123
• ring/muted text#cbd5e1
• assistant accent violet#8b7cf6

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

Satoshi Bold 60px with heavy negative tracking (-3px); H2 30px bold (Satoshi is not on Google Fonts; a vibld project loads Plus Jakarta Sans)

Body

Satoshi 16px (Satoshi is not on Google Fonts; a vibld project loads Plus Jakarta Sans)

A single geometric grotesk in a monochrome scheme; tight tracking on display text gives it a premium, product-launch feel.

Spacing and imagery

Wide 1150px container, generous vertical rhythm (~120px), 12px radius on inputs and cards, pill chips; content pages use a fixed sidebar with a 760px article column.

HLS background video and light-streak gradients in the hero and assistant sections; no photos; lucide icons; the assistant panel uses frosted glass.

Components

• Top bar with inline search trigger
• Keycap hints
• Greeting pill
• Hero search field
• Search shortcut chips
• Command palette with grouped results
• Category cards
• Support cards
• AI assistant chat panel (demo)
• Grouped sidebar with breadcrumbs
• Scroll-spy TOC
• API endpoint block with method badge and params table
• Changelog entry with Added/Fixed/Improved badges
• Toasts

Interactions

• ⌘K opens a palette with results grouped by Docs / API / Changelog
• Shortcut chips jump to popular pages
• Page transitions fade and un-blur
• Headline text blurs in word by word
• TOC highlights the active section
• Sidebar groups collapse
• Mobile hamburger with its own search
• Assistant input disabled with a notice until a backend is connected

Data

• DocPage{slug, title, group, order, summary, body, headings[]}
• ApiEndpoint{method, path, title, description, params[{name,type,required,description}], sample}
• ChangelogEntry{version, date, type Added|Fixed|Improved, title, body}
• SearchItem{title, kind docs|api|changelog, url, excerpt}

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 **Lanternbase**, a dark, cinematic documentation and knowledge hub for a fictional SaaS product. It brings guides, an API reference and a changelog together behind one global search, and adds an optional AI-assistant panel. Readers should find any answer within two keystrokes, and the site should feel like a premium product page.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Command, Collapsible, Sheet) and lucide-react. Use Framer Motion for page transitions and the blur-in headline, hls.js for the adaptive background video (with a native Safari fallback), react-helmet-async for per-page meta, and TanStack Query mounted ready for later API calls. Content lives in MDX or typed TS modules. There is no backend at launch; the assistant is a UI shell until an Edge Function is added.

### Pages & layout
1. **Home**:
   - Top bar: logo, a compact search trigger with keycaps, and Docs / API / Changelog links.
   - Hero on pure black: a greeting pill, a bold tight-tracked headline, a subtitle, a large search field and "popular" shortcut chips.
   - "Explore by category": three cards. Then support cards, then an assistant section with a glass chat panel (`rgba(0,0,0,.6)` scrim) over a slow light-streak video.
2. **Docs**: grouped sidebar with breadcrumbs, the article, and a scroll-spy TOC.
3. **API**: endpoint blocks with a method badge, path, params table and example request/response.
4. **Changelog**: a reverse-chronological timeline with version, date and typed badges.
5. **404**.

### Design system
- Tokens: `--background: #000000`, `--foreground: #f8fafc`, `--card: #18191b`, `--secondary: #242529`, `--border: #1f2123` (decorative), `--input-border: #636a70`, `--muted-fg: #a1a1aa`, `--ring: #cbd5e1`, `--primary: #f8fafc` (white buttons with dark text `#131416`), and an assistant accent `#8b7cf6` used sparingly.
- Font: Satoshi (Fontshare) or Manrope (Google). Display 56-64px at -0.05em, H2 30px, body 16px/1.7 (72ch max), nothing below 12px, code in JetBrains Mono; fall back to system-ui.
- Spacing on a 4px base; section rhythm 112-128px; radius 12px for inputs and cards, full for chips.
- Shadows: none; use 1px borders and subtle inner glows instead.
- Motion: route transitions of 250ms opacity + 8px y + 4px blur, easing `cubic-bezier(.2,.8,.2,1)`.
- Dark only.

### Components & interactions
CommandPalette (grouped results, recent searches, empty and no-match states, Enter/Esc/arrow keys), SearchTrigger, ShortcutChips, CategoryCard (hover border brighten, focus ring), Sidebar (active, collapsed), Toc, EndpointBlock (copyable path, method badge with text), ParamsTable, ChangelogItem, AssistantPanel (disabled input with an explanatory note, then loading dots, streamed reply, error and retry once connected), VideoBackdrop (poster image, pauses when offscreen), MobileNav (Sheet).

### Data & state
Typed collections: `DocPage`, `ApiEndpoint`, `ChangelogEntry`. Build a flat search index at build time. Keep UI state (palette open, sidebar groups) in local component state, and the last-visited section in localStorage. Write all sample content for an invented product and use example.com endpoints.

### Accessibility
On pure black, secondary text is `#a1a1aa` (8.2:1); text over the video sits on a 60% black scrim. Give keycaps an accessible label ("Command K"). The palette traps focus and restores it. The video is decorative (`aria-hidden`), pauses under `prefers-reduced-motion` and exposes a pause control. Turn the blur-in headline off for reduced motion. Method badges carry text and do not rely on color. Include a skip link, and landmark roles for the nav, main and complementary TOC.
Verified contrast: body: #f8fafc on #000000 = 20.1:1; muted: #a1a1aa on #000000 = 8.2:1; button label: #131416 on #f8fafc = 17.6:1; text on video scrim: #ffffff on #666666 = 5.7:1.

### Security
Static content still gets sanitized: disable raw HTML in MDX or pass it through DOMPurify. When the assistant is wired up, route it through an Edge Function holding the model key server-side, validate prompts with zod, rate-limit per IP, cap input length, and render replies as sanitized markdown. External links get `rel="noopener noreferrer"`. Use a CSP that allows only your video origin.

### Performance & SEO
Serve the video as HLS with a small poster, load it after first paint and skip it on save-data connections. Pre-render routes, add per-page titles, descriptions, canonical URLs and OG tags, and generate a sitemap. Lazy-load the palette index. Target LCP under 2.0s.

### Guardrails
- Write fresh copy for a fictional product; no real brand names or logos.
- Don't present the assistant as working until it is connected.
- Collect no personal data.
- Keep components small and typed; no `any`. Show search and assistant errors visibly.
- Done when: (1) ⌘K finds docs, API and changelog items; (2) the TOC tracks scroll; (3) the video degrades gracefully and respects reduced motion; (4) every page has unique meta; (5) keyboard-only navigation covers everything.

Open the builderAll templatesThis palette on its own