Loftboard

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

Zalando Sans is a clean, premium grotesk that looks composed at regular weight and 72px, so the late-night studio stays calm and lets the ember glow lead.

• Zalando SansHeadings: hero 72px 400, -0.04em; H2 44px 400
• Zalando SansBody: body 16px/1.6 500, card titles 22px 500, eyebrows 14px 500 uppercase +0.08em

Patterns

• ember glow gradient at top of a warm-black canvas
• centered light-weight oversized headline with gradient text
• single burnt-orange pill CTA
• full sprint-board screenshot under hero
• uppercase orange eyebrow labels
• placeholder logo marquee
• 3x2 icon feature cards with double-border glow frame
• masonry how-it-works cards (step label, title, text, cropped UI screenshot)
• testimonial cards with avatars
• pricing cards with light and dark CTA variants
• waitlist CTA in nav

States it is designed for

• Waitlist: invalid email, submitting, joined (with position), already joined, error
• Pricing: monthly/yearly selection and highlighted plan
• Screenshots: skeleton frame while loading
• Blog: empty and pagination
• Reduced motion: static glow and marquee, no parallax or blur-in
• Long issue titles clamp to two lines in board mock

Who it is for

• Small software and product teams
• Engineering managers running sprints
• Agency teams managing client projects
• Founders choosing a first project tool

Layout

1. Nav: angled-stripe logo + wordmark left, links (Features, How it works, Pricing, Blog, Contact), burnt-orange 'Join waitlist' pill right; hamburger on mobile
2. Hero: ember radial glow from the top, 72px light-weight two-line headline with a soft gradient on the text, muted two-line subline, burnt-orange 'Get started free' pill
3. Product screenshot: wide framed sprint board (top app bar, left project sidebar, three columns To do / In progress / Done with issue cards, tags, priority icons, avatars)
4. Trust: uppercase caption and a placeholder logo marquee
5. Features: orange eyebrow, heading, 3x2 grid of cards with circular icon badge, title and two-line text, cards framed by a thin outer ember border
6. How it works: eyebrow, heading, masonry of three step cards (step label in orange uppercase, title, text, cropped UI screenshot bleeding off the card edge)
7. Testimonials: cards with quote, avatar, name and company
8. Pricing: eyebrow, heading, subline, plan cards (light pill CTAs, highlighted plan with dark CTA)
9. Closing CTA and footer
10. Mobile: headline 40px, screenshot scrolls horizontally inside its frame, grids single column

Palette

warm, focused, premium, calm, nocturnal. A late-night studio lit by a single ember, where the work board glows.

• canvas (warm black)#0e0c0b
• card surface#1e1813
• raised surface / icon badge#2a2320
• primary text#fcfcfc
• muted text#bdb4ae
• light button / secondary text#d5cfcb
• burnt orange CTA#813203
• orange eyebrow / icons#fa7a30
• soft peach accent#fba36f
• tag chip yellow#f5c542
• input border#736258

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

Zalando Sans 400, 72px hero with -0.04em tracking, 1.1 line-height; section headings 44px 400

Body

Zalando Sans 500, 16px / 1.6 with -0.01em; card titles 22px 500

Eyebrows uppercase 14px 500 with 0.08em tracking in orange. Light display weight only at 40px+ (400 minimum, never 300).

Spacing and imagery

Generous: 140px sections, 1140px container, 16px grid gaps; cards 16px radius with a 1px inner border and a second faint ember outer border 6px away; buttons fully rounded (42-48px); screenshot frame 12px radius.

Dark-mode product screenshots (sprint board, sidebar, analytics table) cropped inside cards; outline icons in orange inside circular badges; small avatar photos; placeholder wordmarks; a radial ember gradient at the top of the page.

Components

• Pill nav CTA
• Gradient-text headline
• Ember glow background
• Framed product screenshot
• Issue card (title, tag chip, type icon, priority icon, points, key, avatar)
• Logo marquee
• Double-border feature card with icon badge
• Step card with cropped screenshot
• Testimonial card
• Pricing card with light/dark CTA
• Waitlist form

Interactions

• Ember glow breathes slowly (opacity 0.8-1) on a 6s loop
• Board screenshot rises and sharpens from slight blur on load
• Feature cards brighten their outer ember border on hover/focus
• Step screenshots parallax a few pixels on scroll
• Marquee pauses on hover/focus
• Pills brighten on hover; 2px peach focus ring

Data

• Feature{icon, title, body}
• Step{number, title, body, screenshot}
• Testimonial{quote, name, company, avatar}
• Plan{id, name, monthly, yearly, seats, features[], highlighted}
• WaitlistEntry{email, team_size, created_at, position}
• Post{slug, title, excerpt, published_at}
• MockIssue{key, title, tag, type (story|bug|task), priority (low|medium|high|urgent), points, assignee_initials, column (todo|in_progress|done)}

Guardrails

Experience

• One CTA style (burnt-orange pill) for primary actions; light pills only inside pricing
• Board screenshot uses invented issue titles and keys; no real third-party product names
• Feature copy is distinct per card (no duplicated descriptions)
• Keep the ember glow behind the hero only; the rest of the page is flat warm black
• Waitlist confirmation tells people what happens next

Accessibility

• Gradient headline text keeps its lowest stop at #d5cfcb or lighter to pass on the canvas
• Muted text #bdb4ae only on dark surfaces
• Screenshots get concise alt text; decorative crops use empty alt
• Uppercase eyebrows are short labels with 0.08em tracking
• Marquee and glow animation stop under prefers-reduced-motion

Security

• Waitlist insert via Edge Function with zod validation, honeypot and per-IP rate limit
• RLS on waitlist_entries: no anon read; position computed server-side
• Double opt-in email via a transactional email service
• Store only email and team size

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 the marketing site for **Loftboard**, a project and sprint collaboration tool for small software teams. The site should feel warm and focused: a dark canvas lit by an ember glow, a big calm headline and a convincing sprint-board screenshot. The main conversion is joining the waitlist or starting free.

### Stack
Astro with React islands, TypeScript, Tailwind CSS, shadcn/ui on Radix (Accordion, Switch, Sheet), lucide-react outline icons, Motion for glow, blur-in and parallax, react-hook-form + zod for the waitlist. Supabase Edge Function stores waitlist entries.

### Pages & layout
1. **Home**: nav with "Join waitlist" pill; hero (ember glow, 72px two-line headline with subtle vertical gradient text, muted subline, "Get started free" pill); framed sprint-board screenshot built as static JSX or an optimized image; trust caption + logo marquee; features (eyebrow, heading, 3x2 double-border cards); how it works (masonry of three step cards with cropped screenshots); testimonials; pricing; closing CTA; footer.
2. **Pricing**, **Blog** + post, **Contact**, **Waitlist** (standalone form page).
Mobile: 40px headline; screenshot frame scrolls horizontally with a visible hint; cards single column; nav in a Sheet.

### Design system
- Colors: `--canvas: #0e0c0b`, `--card: #1e1813`, `--raised: #2a2320`, `--fg: #fcfcfc`, `--muted: #bdb4ae`, `--light: #d5cfcb`, `--cta: #813203`, `--on-cta: #ffffff`, `--orange: #fa7a30`, `--peach: #fba36f`, `--tag: #f5c542`, `--input-border: #736258`, `--ring: #fba36f`.
- Fonts: Zalando Sans; hero 72px/1.1 weight 400 tracking -0.04em; H2 44px 400; body 16px/1.6 500; eyebrow 14px 500 uppercase 0.08em.
- Spacing: 8px base; sections 140px / 88px mobile; container 1140px; grid gap 16px.
- Radius: cards 16px (outer ember frame 22px), pills 999px, screenshot frame 12px.
- Shadows: none; use `radial-gradient(ellipse at 50% 0, rgba(129,50,3,.55), transparent 60%)` for the glow.
- Motion: glow breathe 6s; blur-in 700ms; parallax max 16px.

### Components & interactions
Nav (Sheet on mobile), PillButton (ember | light | dark), GradientHeadline, EmberGlow, BoardMock (AppBar, ProjectSidebar, Column, IssueCard with tag chip, type/priority icons, points badge, key, avatar), LogoMarquee, FeatureCard (double border, icon badge), StepCard (label, title, text, cropped screenshot), TestimonialCard, PlanCard, WaitlistForm.

### Data & state
Static JSON for features, steps, testimonials, plans and mock issues (invented titles such as "Add CSV export to reports", keys like "LB-42"). WaitlistForm states: idle, invalid, submitting, joined (shows position), already joined, error. Billing switch state in URL.

### Accessibility
Body 16px+, eyebrows short uppercase with tracking. Gradient headline lowest stop `#d5cfcb`. Board mock is `aria-hidden` with an adjacent caption summarising it. Icon badges have text titles beside them. Focus ring 2px `--ring` with 2px offset. Reduced motion disables glow breathing, marquee, blur-in and parallax.
Verified contrast: headline and body text on canvas: #fcfcfc on #0e0c0b = 19.02:1; muted text on card: #bdb4ae on #1e1813 = 8.62:1; white label on burnt-orange pill: #ffffff on #813203 = 8.78:1; orange eyebrow on canvas: #fa7a30 on #0e0c0b = 7.33:1; dark label on light pill: #1e1813 on #d5cfcb = 11.39:1; tag chip text on yellow: #1e1813 on #f5c542 = 10.83:1; orange icon on card: #fa7a30 on #1e1813 = 6.60:1; focus ring (peach) on card: #fba36f on #1e1813 = 8.84:1; input border on card: #736258 on #1e1813 = 3.03:1.

### Security
Waitlist Edge Function: zod validation, honeypot, per-IP rate limit, service-role insert, double opt-in via a transactional email service. `waitlist_entries` RLS: no anon select/update/delete. Collect only email and team size.

### Performance & SEO
Board screenshot as AVIF with explicit dimensions (or lightweight JSX). Lazy-load step screenshots. Static generation, per-page meta and OG image, sitemap. Target LCP under 2s (headline is LCP).

### Guardrails
- No real brand names in mock issues, logos or testimonials.
- Keep the palette warm; no cool blues except issue-type icons.
- Acceptance criteria:
  - [ ] Hero and board mock render sharply at 390/768/1440px
  - [ ] Waitlist handles all states and stores safely
  - [ ] Feature and step cards keyboard reachable where interactive
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own