Tessellate Lab

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

Red Hat Text is a sturdy, open sans with an institutional authority that still reads warmly to students, and the mono nods to data and code.

• Red Hat TextHeadings: hero 60px 700 at -0.04em, section heads 36px
• Red Hat TextBody: body 16px
• JetBrains MonoFigures and code: dates, DOIs and counts

Who it is for

• Principal investigators
• Lab managers and research groups
• Prospective students and postdocs
• Collaborators and funders

Layout

1. Sticky white header: flask icon + lab name left, Home / Team / Research / Publications / News with teal underline for the active page
2. Full-width dark hero with molecular illustration, 60px extra-bold headline, mission paragraph, teal 'Explore Research' and outline 'Meet Our Team' buttons
3. Animated stats row (researchers, publications, projects, funding)
4. Featured Research: three project cards with status badges
5. Recent News: stacked white cards with category pill, monospace date, title and arrow; View All button
6. 'Explore our research' CTA band and footer
7. Other pages: Team grid with role filter and bio modals, Research projects, Publications with search/filters, News feed, Join Us / recruitment with FAQ

Palette

Scientific, credible, calm, modern, precise. It feels like a well-funded lab that is approachable to students.

• background#f8fafc
• text (ink navy)#0f1729
• primary (teal)#1f7d74
• accent teal dark#1a6f67
• secondary (slate)#344256
• border#e1e7ef
• hero dark#1c2636

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

Red Hat Text 800, 60px hero with tight -3px tracking; 36px section headings at 700

Body

Red Hat Text 16px; JetBrains Mono for dates and metadata

A single sans for authority, with a monospace accent that nods to data and code.

Spacing and imagery

Clean and roomy; 1250px container, 12px radius cards with faint shadows, 96px section spacing, pill badges.

Dark teal molecular/protein 3D illustration behind the hero; project cards with scientific imagery; round team headshots.

Components

• Sticky nav with active underline
• Molecular hero with dual CTAs
• Animated stats counters
• Research project card with status badge
• News card with category pill and mono date
• Team member card and bio modal
• Role filter tabs
• Publication list with search and filters
• Lab-member author highlighting
• FAQ accordion
• Open positions list
• Footer

Interactions

• Count-up stats when in view
• Publication search and filter by year/type/topic
• Team role filtering
• Bio modals with keyboard close
• Card hover elevation
• Page transitions with Framer Motion
• Arrow nudge on news item hover

Data

• Member{id, name, role, title, photo, bio, interests[], links}
• Publication{id, title, authors[], venue, year, type, doi, pdfUrl, topics[]}
• Project{slug, title, summary, status, image, members[]}
• NewsItem{id, category, date, title, body}
• Position{title, type, description, deadline}

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 **Tessellate Lab**, the website of a fictional computational biology research group. Visitors are prospective students, collaborators and funders. The site must explain the lab's mission, show active projects, present the team, make the publication list searchable, share news, and recruit new members.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Dialog, Badge, Input, Select, Accordion, Card), lucide-react, Framer Motion for page transitions and count-ups, React Router for six pages. Content from typed JSON or Markdown files; Fuse.js (or simple filtering) for publication search. Optional Recharts bar of publications per year. No backend; the application link can point to an external form.

### Pages & layout
1. **Home** – sticky white header with flask icon, lab name and five links (active link teal with underline). Dark hero with a subtle molecular illustration, extra-bold two-to-three line headline, mission sentence, primary teal and outline buttons. Stats row that counts up (members, papers, projects, funding). Featured Research (3 cards with status badges: Active, Recruiting, Completed). Recent News list (category pill, monospace date, title, arrow). CTA band and footer.
2. **Team** – role filter tabs (PI, Postdocs, PhD, Staff, Alumni); card grid; click opens a bio modal with interests and links.
3. **Research** – project detail sections with members and related papers.
4. **Publications** – search box, filters (year, type, topic), results grouped by year, lab members bolded in author lists, DOI/PDF links, optional per-year chart.
5. **News** – filterable by category.
6. **Join us** – open positions, what we look for, FAQ accordion.

### Design system
- Tokens: `--background: #f8fafc`, `--foreground: #0f1729`, `--primary: #1f7d74`, `--accent: #1a6f67`, `--secondary: #344256`, `--muted: #f1f5f9`, `--border: #e1e7ef` (decorative), `--input-border: #64748b`, `--radius: 0.75rem`; hero surface `#1c2636` to `#0e3b3a` gradient.
- Fonts: Red Hat Text (400/600/800) and JetBrains Mono for dates, DOIs and counts. Scale: 12 / 14 / 16 / 18 / 24 / 36 / 60, display tracking -0.04em.
- Spacing 4px base; sections 96px; cards 24px padding, shadow `0 1px 3px rgb(15 23 41 / .06)`, hover `0 8px 24px rgb(15 23 41 / .08)`.
- Motion: page transition 250ms fade/slide; counters 1.2s ease-out; hover 150ms.

### Components & interactions
Nav link (default/hover/active/focus), CTA buttons, stat counter, project card with status badge, news row (hover arrow shift), team card + modal (focus trap, Escape, prev/next member), filter tabs, publication search (typing debounced, empty state "No papers match", clear filters), accordion, skeletons for lazy sections.

### Data & state
`Member{id,name,role,title,photo,bio,interests[],links{scholar,orcid,site}}`, `Publication{id,title,authors[],venue,year,type,doi?,pdf?,topics[]}`, `Project{slug,title,summary,status,image,memberIds[]}`, `News{id,category,date,title,body}`, `Position{id,title,type,deadline,description}`. Filters live in URL params. Seed ~12 fictional members, 30 plausible-sounding but invented papers, 4 projects, 6 news items.

### Accessibility
The teal primary is darkened to `#1f7d74` so white button labels reach 4.95:1 and teal icons and active underlines clear 3:1 (4.7:1 on `#f8fafc`); teal text links and the hover accent use `#1a6f67` (5.7:1). The search box and filters use `--input-border: #64748b` (4.55:1); `#e1e7ef` borders are decorative. Hero text on the dark gradient exceeds 12:1. Counters announce final values (render final number in the DOM, animate visually only; skip under reduced motion). Filter tabs follow the Radix tab pattern; results count is announced via `aria-live`. Team photos have name-based alt text. Author lists mark lab members with `<strong>`, not color only.
Verified contrast: body text on page background #0f1729 on #f8fafc = 17.08:1; slate secondary text on page background #344256 on #f8fafc = 9.74:1; teal link text on page background #1a6f67 on #f8fafc = 5.71:1; white label on teal primary button #ffffff on #1f7d74 = 4.95:1; white label on teal accent hover #ffffff on #1a6f67 = 5.98:1; white hero text on dark gradient start #ffffff on #1c2636 = 15.22:1.

### Security
Static, so keep it proportionate: no secrets in client code, sanitize any Markdown bodies with DOMPurify, validate the contact/interest form with zod plus a honeypot and a rate-limited endpoint if one is added. External links (DOI, PDFs, profiles) open safely with `rel="noopener noreferrer"`. Don't publish personal emails in plain text; use a contact form or obfuscated addresses.

### Performance & SEO
Prerender routes; ScholarlyArticle JSON-LD for publications and Person for members; per-page meta and OG image. Lazy-load the hero illustration as optimized WebP, and team photos at fixed sizes. Lighthouse 95+.

### Guardrails
- Fictional lab, people, grants and papers; no real institutions, journals' logos or funders' marks.
- Don't present sample awards as real.
- Small typed components, no `any`, visible errors and empty states.
- Done when: all six pages route; publication search and filters work with URL state; team modal is keyboard accessible; counters respect reduced motion; teal contrast issues are resolved.

Open the builderAll templatesThis palette on its own