Laborly

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

Alan Sans is a sleek, contemporary grotesk that looks controlled at regular weight and large sizes, which suits the cinematic dark control room and its cyan light.

• Alan SansHeadings: hero 60px 400, H2 48px 400, -0.04em
• Alan SansBody: lead 18-20px, body 16px/1.6 500, eyebrows 13px 500 uppercase +0.08em

Patterns

• grainy near-black canvas with faint noise texture
• 'NEW' cyan chip announcement pill
• centered two-line headline with white + ghost buttons
• atmospheric light-streak visual below hero
• two-row wordmark grid
• cyan dash + uppercase eyebrow
• two-tone headings (white line, gray line)
• three product cards with floating mini-UI (agent builder form, integrations list, live agents)
• use-case accordion list paired with a dashboard screenshot panel
• how-it-works steps
• benefit icon grid
• comparison table
• big stat row
• integrations ticker
• three-tier pricing with toggle
• FAQ

States it is designed for

• Accordion: one open item at a time, keyboard toggles
• Status chips: running, done, failed, queued, connected, not connected (text + dot)
• Pricing: monthly vs yearly, plan highlight
• Contact form: validation, submitting, success, error
• Sign-in route: error and rate-limited states
• 404 page in the same dark style
• Reduced motion: no shimmer, ticker or count-up

Who it is for

• Operations and RevOps leads
• Startup founders automating busywork
• Support managers triaging tickets
• Small agencies building automations for clients

Layout

1. Nav: logo left, links (Features, Use cases, Pricing, FAQ), 'Sign in' text link and white 'Try free' button right; hamburger on mobile
2. Hero: centered pill with cyan 'NEW' chip and arrow, 60px two-line headline, two-line subline, white 'Try free' + ghost outlined 'Learn more', then a tall atmospheric visual of vertical cyan light streaks
3. Trust: caption + two rows of four invented wordmarks
4. What it does: eyebrow, two-tone heading, three cards each with a floating mini-UI (agent form with 'create & deploy' button, connected-tools list with status chips, live agents list with 'running' chips), title and sentence
5. Use cases: eyebrow, two-tone heading, left accordion list (recurring tasks, lead routing, ticket triage, live reporting) with icon tiles; right a dashboard screenshot that swaps per item (scheduled tasks table with status dots)
6. How it works: centered heading, steps in cards
7. Benefits: icon cards (visibility, security, team roles), wide 'whole team' card with light streak art
8. Comparison table, stat row, testimonials, integrations ticker, pricing (Starter, Pro, Teams), FAQ, final CTA, footer with social links
9. Mobile: 40px headline, cards stack, accordion shows the screenshot inline under the open item

Palette

cinematic, confident, sleek, futuristic, controlled. A dark control room where cyan light marks what is running.

• canvas (near black)#0d0d0f
• card surface#141416
• primary text#fafafa
• muted text / second heading line#b0b0b0
• dim labels#8a8a8f
• cyan accent#21d2ed
• white button#ffffff
• input border#63636a
• status running/done#22c55e
• status failed#ef4444
• status queued#f59e0b

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

Alan Sans 400, 60px hero with -0.04em tracking, 48px section headings; second line of each heading in #b0b0b0

Body

Alan Sans 500, 18-20px lead, 16px / 1.6 body

Eyebrows 13px 500 uppercase with 0.08em tracking in cyan, preceded by a short cyan pill dash. Mini-UI text inside screenshots is decorative.

Spacing and imagery

Spacious: 1180px container, 140px sections, 16px card gaps; cards 16px radius with 1px rgba(255,255,255,.08) borders; buttons 12px radius; faint film-grain overlay across the page.

Vertical cyan light streaks and glows, grain texture, sharp dark-mode UI panels (forms, lists, tables with status dots), line icons in bordered square tiles, invented wordmarks.

Components

• Announcement pill with NEW chip
• White and ghost buttons
• Light-streak visual
• Wordmark grid
• Eyebrow with dash
• Two-tone heading
• Product card with floating mini-UI
• Status chip (running, connected, not connected)
• Use-case accordion with screenshot panel
• Scheduled tasks table mock
• Step card
• Benefit icon card
• Comparison table
• Stat figure
• Integrations ticker
• Pricing toggle + plan cards
• FAQ accordion

Interactions

• Light streaks shimmer slowly; pause under reduced motion
• Accordion item opening swaps the right screenshot with a 250ms fade
• Mini-UI cards float up 8px when in view
• Stat numbers count up
• Ticker scrolls; pauses on hover/focus
• White button dims on hover, ghost button fills subtly; 2px cyan focus ring

Data

• UseCase{slug, title, body, icon, screenshot}
• MockTask{name, trigger, agent, runs, status (done|running|failed|queued), last_run}
• Integration{name, category, connected (bool)}
• Plan{id, name, monthly, yearly, agents, runs_per_month, features[]}
• ComparisonRow{capability, ours, others}
• Stat{value, label}
• FaqItem{question, answer}
• ContactMessage{name, email, message}

Guardrails

Experience

• Every capability card shows a concrete mini-UI with invented agent names
• Two-tone headings: statement in white, softer continuation in gray
• Keep cyan for accents, chips and focus; never for body text blocks
• Use-case list shows exactly one open item and its matching screenshot
• Pricing states runs/agents limits plainly

Accessibility

• Status is always text plus dot colour
• Accordion built with Radix, aria-expanded and focus-visible styles
• Grain overlay is pointer-events none and does not reduce text contrast
• Screenshots have alt text summarising the table
• Shimmer, ticker and count-up disabled under prefers-reduced-motion

Security

• Contact form via Edge Function with zod, honeypot and per-IP rate limit
• RLS on contact_messages: no anon read
• Security claims link to a real policy page; do not display compliance badges not held
• Sign-in uses hosted auth with lockout and generic errors

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 landing site for **Laborly**, a no-code platform where teams describe a repetitive job in plain language and deploy an AI agent that runs it across their tools on a schedule or trigger. The site should feel cinematic and controlled: grainy black, cyan light, and dark product panels that make the agents feel real.

### Stack
Astro with React islands, TypeScript, Tailwind CSS, shadcn/ui on Radix (Accordion, Switch, Table), lucide-react, Motion for shimmer, float-ins and count-ups, react-hook-form + zod for contact. Supabase Edge Function for contact messages and hosted auth for the sign-in page.

### Pages & layout
1. **Home**: nav; hero (NEW pill, 60px two-line headline, subline, white "Try free" + ghost "Learn more", light-streak visual); wordmark grid; "what it does" three product cards with mini-UIs; use-case accordion + screenshot panel; how it works steps; benefit icon cards + wide team card; comparison table; stats; testimonials; integrations ticker; pricing (Starter, Pro, Teams, monthly/yearly); FAQ; final CTA; footer with social links.
2. **Contact**, **Sign in**, **Privacy**, **Terms**, **404**.
Mobile: 40px headline; product cards stack; accordion reveals its screenshot inline; table scrolls horizontally with a sticky first column.

### Design system
- Colors: `--canvas: #0d0d0f`, `--card: #141416`, `--fg: #fafafa`, `--muted: #b0b0b0`, `--dim: #8a8a8f`, `--cyan: #21d2ed`, `--btn: #ffffff`, `--on-btn: #0d0d0d`, `--input-border: #63636a`, `--ok: #22c55e`, `--fail: #ef4444`, `--queued: #f59e0b`, `--ring: #21d2ed`.
- Fonts: Alan Sans; hero 60px/1.1 400 -0.04em; H2 48px 400 -0.04em; body 16px/1.6 500; eyebrow 13px 500 uppercase 0.08em.
- Spacing: 8px base; sections 140px / 88px; container 1180px.
- Radius: cards 16px, buttons 12px, chips 999px, icon tiles 10px.
- Borders: `rgba(255,255,255,.08)`. Grain: fixed SVG noise at 4% opacity.
- Motion: shimmer 8s linear; float-in 400ms; accordion 200ms; ticker 35s.

### Components & interactions
Nav, AnnouncementPill, Button (white | ghost), LightStreaks (CSS gradients, paused off-screen), WordmarkGrid, Eyebrow, TwoToneHeading, ProductCard + MiniUI variants (AgentForm, IntegrationList, LiveAgents), StatusChip, UseCaseAccordion + ScreenshotPanel, TaskTableMock, StepCard, BenefitCard, ComparisonTable, StatFigure, IntegrationTicker, PricingToggle + PlanCard, FaqAccordion, ContactForm.

### Data & state
Static JSON: use cases, mock tasks with invented agent names ("Weekly digest agent", "Invoice matcher"), integrations as generic categories, plans, comparison rows, stats (sample), FAQ. Accordion index in URL hash. Contact states: idle, invalid, submitting, success, error.

### Accessibility
Body 16px+; eyebrows short uppercase with tracking. Status chips show text. Accordion via Radix with focus-visible rings. Grain and streaks are aria-hidden and never lower text contrast. Reduced motion stops shimmer, ticker and count-up. Focus ring 2px `--ring` with 2px offset.
Verified contrast: primary text on canvas: #fafafa on #0d0d0f = 18.60:1; muted text on card: #b0b0b0 on #141416 = 8.48:1; dim labels on canvas: #8a8a8f on #0d0d0f = 5.65:1; button label on white button: #0d0d0d on #ffffff = 19.44:1; cyan eyebrow on canvas: #21d2ed on #0d0d0f = 10.64:1; dark text on cyan NEW chip: #0d0d0d on #21d2ed = 10.65:1; failed status dot on card: #ef4444 on #141416 = 4.89:1; running status dot on card: #22c55e on #141416 = 8.07:1; queued status dot on card: #f59e0b on #141416 = 8.57:1; input border on card: #63636a on #141416 = 3.09:1; focus ring (cyan) on canvas: #21d2ed on #0d0d0f = 10.64:1.

### Security
Contact Edge Function: zod, honeypot, per-IP rate limit, service-role insert; `contact_messages` RLS with no anon read. Sign-in via hosted auth with lockout and generic errors. No compliance badges unless held; link to the security page instead.

### Performance & SEO
Light streaks in CSS (no video). Screenshots AVIF, lazy. Islands only for accordion, toggle, ticker and forms. Unique meta per page, OG image, FAQ structured data. Target LCP under 1.8s.

### Guardrails
- Invented wordmarks and integration names only; no real tool logos.
- Stats are labelled sample until real.
- Acceptance criteria:
  - [ ] Accordion and screenshot stay synced by keyboard and mouse
  - [ ] Pricing toggle updates all plans
  - [ ] Contact form stores rows safely with all states
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own