2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
Biotech Startup Website is a lab-clean marketing site for an invented protein-design company. The page opens on a white ground with a cool teal accent and generous whitespace, anchored by a large molecule drawn entirely in code: an eighteen-atom ball-and-stick model rendered on canvas, rotating slowly in three dimensions with depth-sorted atoms and bonds. Behind it two faint cell shapes drift, and a fine dot grid keeps the first screen scientific rather than decorative. A platform explainer follows in three moves: the problem, the approach as three numbered steps, and a mechanism panel with a code-drawn circuit diagram, each block carrying one line of technical depth in a mono face. The pipeline is the centerpiece: a full-width table with Discovery, Preclinical, Phase I and Phase II columns, program codes in mono, and pill status chips that pop as their stage column lights up on scroll. Below sit a count-up metrics band, a publications list with invented papers in generically named journals, a team row of monogram tiles and a careers strip with three roles. All copy stays at platform-science level: no medical claims, no efficacy language. Everything is drawn in code, so there are no photographs anywhere, which keeps the page crisp and the build tiny. It suits biotech, ag-biotech, materials and deep-tech startups that need to look scientifically credible to partners, investors and candidates. The default case is a protein-design company; the alternate case is a soil-microbiome startup, showing how brand, platform, focus and program codes swap while the layout holds. Change the variables, rewrite one content file, and the same calm structure serves any lab-adjacent brand.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Biotech Startup Website
Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.
## Brief
A single-page marketing site for [BRAND], an invented science company whose [PLATFORM] platform works on [FOCUS]. The page opens with a hero anchored by a large code-drawn molecule rotating on canvas over a faint dot grid, with two drifting cell shapes behind it. It then explains the platform in three moves (problem, three-step approach, mechanism with a drawn diagram), presents the pipeline as a stage table (Discovery, Preclinical, Phase I, Phase II) with invented [PROGRAM_PREFIX] codes and pill status chips, a metrics band with count-up numbers, an invented publications list with generic journal descriptors, a team row of monogram tiles and a careers strip with three roles. Static site, no backend, no forms; both CTAs are mailto links. Every visual is drawn in code.
- Audience: Prospective pharma and ag-tech partners evaluating the platform, early-stage investors, job candidates in science and engineering, and journalists looking for a credible deep-tech story. Secondarily, founders of any science or materials startup who want a credible, quiet, lab-clean presence.
- Goal: Convince a technical reader in one scroll that [BRAND] runs a real, disciplined platform: they should grasp the three-step approach, remember the stage pipeline, trust the numbers as examples, and end on the careers or partner CTA.
- Tone: Precise, calm, confident. Short declarative sentences, concrete sample numbers, no hype, no exclamation marks, no marketing superlatives. Headlines read like figure captions from a well-set paper; mono labels carry the data.
## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), tailwindcss (MIT), motion (MIT), lucide-react (ISC), vite (MIT), typescript (Apache-2.0), @fontsource/sora (OFL-1.1), @fontsource/inter (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
- Scaffold with npm create vite@latest using the react-ts template, then install tailwindcss 3.4, motion, lucide-react and the three Fontsource packages.
- vite.config.ts: base './', build { outDir: 'dist', sourcemap: false, assetsInlineLimit: 0 }. Do not copy src/ into dist/.
- tailwind.config.js: content covers index.html and src/**/*.{ts,tsx}; theme.extend.colors maps exact tokens: paper #fcfefd, ink #12262e, slate #5d6f7c, mist #e9f2f1, hairline #d8e5e3, teal #0e7c86, tealdeep #0a5a62, cellsoft #90a4ad; theme.extend.fontFamily: display ['Sora','sans-serif'], text ['Inter','sans-serif'], mono ['IBM Plex Mono','monospace'].
- Fonts imported in src/main.ts: @fontsource/sora/600.css, @fontsource/sora/700.css, @fontsource/inter/400.css, @fontsource/inter/500.css, @fontsource/inter/600.css, @fontsource/ibm-plex-mono/400.css, @fontsource/ibm-plex-mono/500.css.
- File layout: src/content.ts holds every string (hero, platform blocks, programs, metrics, publications, team, roles, footer); src/molecule-data.ts exports ATOMS and BONDS; src/components/ holds Header, Hero, CellField, Molecule, Platform, Pipeline, Metrics, Publications, Team, Careers, Footer; src/App.tsx composes them; src/index.css carries the dot-grid utility, keyframes and reduced-motion overrides.
- Molecule canvas: DPR-aware (Math.min(devicePixelRatio, 2)); the animation loop runs only while the hero is intersecting the viewport and the tab is visible; under prefers-reduced-motion render exactly one frame at t = 0 and stop.
- Scroll reveals use motion/react whileInView with once: true, viewport { margin: '-15% 0px' }; count-up numbers run once over 1.1 s with ease-out.
- All copy lives in src/content.ts. When any variable value differs from the defaults, rewrite the copy there to fit the new brand, platform, focus, headquarters and program prefix, keeping the same lengths, structure and tone. Never leave default copy under new values.
- public/favicon.svg is hand-written as described in the Document section. <title>[BRAND]</title>, lang 'en'. Write ASSETS.md at the project root listing the three Fontsource packages (OFL-1.1), lucide-react (ISC) and the hand-written favicon (original).
## Variables
- [BRAND] — Company name (default: "Vantra Biosciences"). Wordmark, <title>, footer and mailto links built from it (partners@<brand-slug>.example).
- [PLATFORM] — Platform name (default: "Loopfold"). One coined word for the internal platform; appears in the hero sub, approach steps and one publication title.
- [FOCUS] — What the platform works on (default: "protein circuits"). Lower-case phrase used inside sentences, e.g. 'nitrogen-fixing soil consortia'.
- [HQ_LINE] — Headquarters line (default: "14 Meridian Lane, Cambridge, MA"). Address in the footer; its city segment is the location shown on team and role cards.
- [PROGRAM_PREFIX] — Program code prefix (default: "VN-"). Pipeline program codes are built from it: VN-241, VN-307, VN-318, VN-332, VN-345.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/biotech-startup-website in the footer (default: yes; delete this line to remove it)
The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.
## Design
### Colors
- Paper `#fcfefd` — Page ground everywhere; slightly cool white
- Ink `#12262e` — Primary text, Phase II filled chip, molecule carbon atoms
- Slate `#5d6f7c` — Secondary text, Discovery outlined chips, inactive table dots
- Mist `#e9f2f1` — Panel tint behind approach steps, careers strip and team tiles
- Hairline `#d8e5e3` — 1px rules, table grid, dot-grid dots, card borders
- Teal `#0e7c86` — The single accent: links, buttons, Phase I filled chip, Preclinical outlined chip, nitrogen atoms, focus rings
- Teal deep `#0a5a62` — Button hover state, oxygen atoms in the molecule, strong underlines
- Cell soft `#90a4ad` — Molecule hydrogen atoms, inactive stage dots, muted mono labels
### Typography
- Display (wordmark, headlines, program names, stat numbers): Sora (OFL), weights 600/700
- Text (body copy, buttons, chips, captions): Inter (OFL), weights 400/500/600
- Mono (eyebrows, program codes, technical depth lines, table headers, small print): IBM Plex Mono (OFL), weights 400/500
### Layout & motion
- Spacing: 8px vertical rhythm throughout. Sections py-28 (desktop) / py-16 (mobile); container max-w-[1160px] with px-6 (px-5 mobile). Hero min-h-[92vh] with items centered. Eyebrow to headline 16px, headline to body 20px, body max-width 560px. Table cells py-5 px-4; program column 260px, stage columns equal. Mono eyebrows 12px, uppercase, letter-spacing 0.16em.
- Radius: Pills 999px for status chips and the header CTA; 12px on the molecule card and mechanism panel; 6px on buttons and inputs; 0 on the pipeline table, hairline rules and stat blocks. No other rounded shapes except the code-drawn cells.
- Motion: Molecule canvas: rotate the fixed 18-atom model around Y at 0.16 rad/s under a constant X tilt of -18 degrees; orthographic projection, center (280,280), scale 80; depth factor 1 - 0.18*zN on atom radius, bond alpha 0.92 - 0.38*mean(zN); draw far to near each frame; loop paused off-screen or when the tab is hidden.
- Motion: Cell blobs drift on 26 s and 34 s keyframe loops (translate up to 20px, rotate up to 4 degrees, alternate, ease-in-out); they stop under prefers-reduced-motion.
- Motion: Section entrances: eyebrow, headline and body rise 20px and fade over 0.6 s with 90 ms stagger, once, cubic-bezier(.2,.8,.2,1).
- Motion: Pipeline: each stage column's header underline draws scaleX 0 to 1 over 0.5 s when the column enters; its chips pop from scale 0.85 and fade in, 80 ms stagger; past columns stay lit when scrolling back up.
- Motion: Metrics count up once from 0 over 1.1 s ease-out; under reduced motion the final numbers render immediately.
- Motion: Hover micro-interactions: buttons darken to Teal deep and shift the Lucide arrow 3px; publication titles draw a 2px Teal underline scaleX 0 to 1; team monogram rings brighten from 40% to 100% Teal.
- Motion: prefers-reduced-motion: molecule renders one static frame at t = 0 (tilt only), cells rest, entrances become plain opacity fades, counters render final values, chips render in their final state.
- Imagery: Everything is drawn in code and nothing is a bitmap: the hero molecule (canvas, exact atom and bond data below), the two drifting cell blobs (SVG), the mechanism circuit diagram (SVG), the pipeline chips and dots, the dot-grid background (CSS radial-gradient), and the favicon (hand-written SVG). No photographs, no people, no logos, no downloaded files beyond fonts and the icon package. Palette strictly the eight tokens above.
## Pages & Sections
### Home (single page) (`index.html`)
1. **Document and header** — <title>[BRAND]</title>, lang 'en'. Favicon public/favicon.svg: 32x32 rounded square (rx 7) filled Paper with a 1.5px Hairline border, containing a tiny six-ring molecule: six Teal circles r 2.5 on a 12px ring with 1px Ink bonds. Header: wordmark '[BRAND]' in Sora 700 18px Ink with a 6px Teal dot after the last letter; nav links Platform, Pipeline, Science, Team, Careers (Inter 500 14px Slate, hover Ink with 2px Teal underline); pill CTA 'Partner with us' (Teal fill, Paper text, 6px radius) linking to mailto:[email protected] built from the BRAND slug.
Layout: Sticky header, top 0, z 50, bg paper/85 with backdrop blur 8px, 1px Hairline bottom border appearing after 24px of scroll. Height 68px, inner container aligned with the page container. Mobile: nav links collapse into a plain details-style menu (no JS drawer required): a 'Menu' mono button toggling a Paper panel with the five links stacked; CTA stays visible.
Motion: Header border and a 4px soft shadow fade in after 24px scroll. Nav underline draws on hover over 0.25 s.
2. **Hero** — Two columns on desktop. LEFT: mono eyebrow 12px uppercase Teal 'PROTEIN CIRCUITS, DESIGNED ON PURPOSE'; headline Sora 700 clamp(44px, 5.4vw, 76px), line-height 1.05, letter-spacing -0.02em, Ink: 'Biology, compiled / with care.' (second line wraps naturally); body Inter 400 17px/1.65 Slate, max-width 520px: '[PLATFORM], our design platform, screens more than forty thousand variants a run, then tunes the winners until they keep their shape where they have to work. No cells are harmed in the making of this paragraph - only measured.'; CTAs: solid 'Explore the platform' (Teal, Paper text, Lucide ArrowRight 16px) anchoring to #platform, and outline 'See the pipeline' (1.5px Ink border) anchoring to #pipeline; below them a mono 12px Cell soft stat row: '40K VARIANTS / RUN - 5 PROGRAMS - 92% ASSAY REPEATABILITY'. RIGHT: the molecule card described next. Bottom of hero: a mono 11px scroll cue 'SCROLL' with a 1px x 40px Hairline line.
Layout: Hero is a 2-col grid (7/5) at >= 1024px, single column below (copy first, molecule after). min-h-[92vh], items center, py-24. Background: dot grid (radial-gradient(Hairline 1px, transparent 1px), 28px grid) covering the hero only, masked with a radial fade so dots dissolve before the section edges; two cell blobs sit absolutely behind the molecule card.
Motion: Entrance: eyebrow fades (0.5 s), headline lines rise 24px with 0.12 s stagger, body and CTAs rise 16px (0.7 s), molecule card fades and scales 0.97 to 1 over 0.9 s. On scroll the molecule card translates up at 0.1x scroll (subtle parallax); the copy stays.
3. **Molecule card (hero anchor)** — A 560x560 CSS px card (12px radius, Paper fill, 1px Hairline border, soft shadow 0 24px 60px rgba(18,38,46,0.08)) holding canvas#molecule at 520x520 centered. Corner labels in mono 11px Cell soft: top-left 'MODEL [PROGRAM_PREFIX]241 - 18 ATOMS', bottom-right 'ROTATION 0.16 RAD/S'. The canvas draws the fixed ball-and-stick model: ATOMS (x y z element radius): (1.00 0.00 0.18 C 16) (0.50 0.87 -0.18 C 16) (-0.50 0.87 0.18 C 16) (-1.00 0.00 -0.18 C 16) (-0.50 -0.87 0.18 C 16) (0.50 -0.87 -0.18 C 16) (1.72 0.51 0.42 N 18) (2.42 0.18 -0.02 C 16) (3.18 0.72 -0.28 O 15) (-1.72 -0.51 -0.42 N 18) (-2.42 -0.18 0.02 C 16) (-3.18 -0.72 0.28 O 15) (0.82 1.62 -0.30 H 9) (-0.82 1.62 0.30 H 9) (0.82 -1.62 -0.30 H 9) (-0.82 -1.62 0.30 H 9) (2.30 -0.55 -0.40 H 9) (-2.30 0.55 0.40 H 9). BONDS: ring 1-2-3-4-5-6-1; side chains 1-7, 7-8, 8-9, 4-10, 10-11, 11-12; hydrogens 2-13, 3-14, 6-15, 5-16, 8-17, 11-18. Element colors: C Ink, N Teal, O Teal deep, H Cell soft; ring bonds 3.5px, side bonds 2.5px, hydrogen bonds 1.5px; small specular dot (white 30%) offset -30% -30% inside each atom circle.
Layout: Card sits in the hero right column, max-width 560px, aspect square, w-full on mobile with the canvas at 100% width (touch: still 560 logical px scaled by CSS). The two cell blobs behind it: 420px and 300px organic blobs (border-radius 46% 54% 48% 52% / 52% 46% 54% 48%), Teal fill at 4%, 1.5px Teal stroke at 12%, each with an off-center nucleus circle at 16% Teal; one top-right at -40px offsets, one bottom-left.
Motion: Continuous rotation as specified in Design motion; the card casts no moving shadow. Cells drift on their keyframe loops. Reduced motion: one static frame at t = 0.
4. **Platform (problem, approach, mechanism)** — Section eyebrow mono 'THE PLATFORM', anchor id 'platform'. H2 Sora 700 clamp(34px, 3.6vw, 52px): 'Three moves from sequence to working circuit.' BLOCK 1 - Problem: full-width text block, body Inter 17px/1.65 Slate max-w-[760px]: 'Cells decide things with [FOCUS] - groups of proteins that meet, change shape and pass a signal on. Nature stumbles into good ones slowly. Screening them by hand is slower still.' BLOCK 2 - Approach: three Mist cards (12px radius, 1px Hairline border) numbered in mono Teal 01/02/03, titles Sora 600 20px: 'Design' ('[PLATFORM] samples backbones from a seeded library and proposes binders with the fold already built in'), 'Screen' ('A 96-well dial-out assay pushes forty thousand variants a run and keeps only the ones that fold'), 'Tune' ('Winning variants get stability passes until they hold their shape at the temperatures that matter'). Each card footer: mono 11px Cell soft technical depth line - 01: 'SEARCH SPACE ~10^12 SCAFFOLDS', 02: '40,000 WELLS / RUN', 03: '+18 C MELTING SHIFT, MEDIAN PASS'. BLOCK 3 - Mechanism panel: full-width Mist panel (12px radius) with a code-drawn SVG diagram (640x260): left blob 'protein A' (irregular rounded path, Paper fill, 1.5px Teal stroke, mono label), right smaller blob 'protein B' (Paper fill, 1.5px Ink stroke); between them three 5px Teal interface dots; an arrow to a response curve (polyline rising then plateauing, 2px Teal) on hairline axes with mono labels 'INPUT', 'COMPLEX', 'OUTPUT'; caption Inter 15px Slate: 'Two designed parts meet only where they are told to. The output curve is the point.'
Layout: Vertical stack: eyebrow + H2, problem block, then a 3-col grid for the approach cards (1-col on mobile), then the mechanism panel. Gaps: 40px between blocks, 24px inside.
Motion: Blocks enter on scroll with the standard rise-and-fade; approach cards stagger 120 ms; the mechanism diagram draws its bonds and curve with stroke-dashoffset over 0.8 s once when the panel enters (reduced motion: shown complete).
5. **Pipeline table** — Anchor id 'pipeline'. Eyebrow mono 'PIPELINE', H2 'Five programs, one platform.' A full-width table (no outer border, 1px Hairline row rules, column rules only between program column and stages): header row mono 12px uppercase Cell soft: 'PROGRAM', 'DISCOVERY', 'PRECLINICAL', 'PHASE I', 'PHASE II'. Rows (program cell: mono 500 15px Ink code + Inter 14px Slate descriptor; stage cells hold one pill chip each or a 4px Hairline dot for empty): [PROGRAM_PREFIX]241 Degrader scaffold - chip 'Phase II' (Ink fill, Paper text); [PROGRAM_PREFIX]307 Tagged delivery scaffold - chip 'Phase I' (Teal fill, Paper text); [PROGRAM_PREFIX]318 Stabilized helix library - chip 'Preclinical' (outlined Teal 1.5px, Teal text, Mist fill); [PROGRAM_PREFIX]332 Conditional binder - chip 'Discovery' (outlined Slate 1.5px, Slate text); [PROGRAM_PREFIX]345 Novel fold family - chip 'Discovery' (outlined Slate). Legend under the table: the four chip styles plus a mono 11px footnote 'RESEARCH-STAGE EXAMPLES - NOT APPROVED PRODUCTS'.
Layout: Desktop: real <table>, program column 260px left-aligned, four stage columns equal width center-aligned, cells py-5 px-4. Mobile (< 768px): the table becomes stacked program cards (Hairline top rule each): code + descriptor, the current chip, and a four-dot progress row where dots up to the current stage are filled (Slate for Discovery, Teal from Preclinical on).
Motion: Each stage column header underline (2px, Teal for Phase I/II, Hairline for the rest) draws scaleX 0 to 1 when its column top enters the viewport; chips in that column pop (scale 0.85 to 1, fade, 80 ms stagger). Column light-ups are one-shot. Rows enter with 60 ms stagger rise.
6. **Metrics band** — Full-bleed band between Hairline rules, container-width grid of 4 stat blocks: number Sora 700 clamp(40px, 4.6vw, 64px) Ink with count-up, label mono 12px uppercase Slate under each: '40,000' VARIANTS PER SCREENING RUN; '2.1M' DESIGNED BACKBONES IN LIBRARY; '5' PROGRAMS IN PIPELINE; '38%' FIRST-PASS STABILITY RATE. Mono 11px Cell soft footnote right-aligned: 'ILLUSTRATIVE PLATFORM FIGURES'.
Layout: 4-col grid desktop, 2-col mobile, py-16. Numbers use tabular lining figures.
Motion: Count-up once on first view over 1.1 s ease-out (from 0; 2.1M counts from 0.0M with one decimal). Reduced motion: final values immediately.
7. **Publications** — Anchor id 'science'. Eyebrow mono 'SELECTED WRITING', H2 'From the bench, in public.' Four rows (Hairline rule between): title Sora 600 19px Ink; meta line Inter 14px Slate 'L. Marsh, P. Okonkwo et al. - Journal of Directed Protein Design'; right-aligned mono chip 11px: 'PEER-REVIEWED' (Hairline outline, Slate) or 'PREPRINT' (Teal outline, Teal). Entries: 'Routing binders through constrained helices' (peer-reviewed, authors as above); 'A 96-well dial-out screen for folding stability' - 'S. Iyer, D. Calloway et al. - Assay Engineering Reports' (peer-reviewed); '[PLATFORM]: sampling conformational space with seeded backbones' - 'E. Varga, M. Nunes et al. - Computational Biology Collective' (preprint); 'Teaching old folds new interfaces' - 'R. Aldana, K. Brandt - Notes in Structural Biochemistry' (peer-reviewed). Journal names stay generic descriptors; no years are shown anywhere.
Layout: Rows py-5, title left, chip right on desktop; chip wraps under the title on mobile. Container width, no side panels.
Motion: Rows rise 16px on entry, 80 ms stagger; hover draws a 2px Teal underline under the title (scaleX 0 to 1, transform-origin left) and lifts the row 1px.
8. **Team** — Anchor id 'team'. Eyebrow mono 'PEOPLE', H2 'Small team, long assays.' Row of six tiles: monogram circle 72px (1.5px Teal ring at 40% opacity, Paper fill, initials Sora 600 20px Teal), name Inter 600 15px Ink, role Inter 400 14px Slate, mono 11px Cell soft location (city segment of [HQ_LINE]). People: LM 'Dr. Lena Marsh' Chief Executive; PO 'Dr. Priya Okonkwo' Chief Scientific; EV 'Dr. Emre Varga' Head of Platform; RN 'Rosa Nunes' Operations; SI 'Dr. Sam Iyer' Screening; KB 'Kate Brandt' Business Development. Closing line Inter 15px Slate: 'Sixty-two people across the lab and the platform team - most days both.'
Layout: 6-tile grid (3 cols x 2 rows) desktop, 2 cols mobile, gap 32px, tiles centered. The monograms are the drawn accent; no photographs anywhere on the page.
Motion: Tiles enter 70 ms stagger; on hover the monogram ring brightens to full Teal and the circle fills Mist.
9. **Careers strip** — Anchor id 'careers'. Mist full-bleed panel (12px radius inset container), eyebrow mono 'JOIN', H2 'Do the most careful work in biology.' Three role cards (Paper fill, 1px Hairline border, 6px radius): title Sora 600 18px Ink, meta mono 11px Cell soft 'DEPT - CITY' where CITY is the city segment of [HQ_LINE], one Inter 14px Slate line each: 'Scientist, High-Throughput Screening' - 'Own the dial-out assay end to end, forty thousand wells at a time' - 'SCREENING'; 'Computational Biologist, [PLATFORM]' - 'Make the sampler braver without making it wrong' - 'PLATFORM'; 'Head of Partnering' - 'Turn pharma interest into signed platform work' - 'BUSINESS'. CTA ghost pill 'All open roles' (1.5px Ink border, Ink text, Lucide ArrowUpRight) linking to mailto:[email protected] built from the BRAND slug.
Layout: 3-col grid desktop (1-col mobile), gap 24px, panel py-20. CTA centered under the grid.
Motion: Cards rise on entry, 100 ms stagger; hover lifts the card 2px and draws a Teal top border (scaleX).
10. **Footer** — Hairline top rule. Four columns: (1) wordmark + one-liner Inter 14px Slate '[PLATFORM] is how [BRAND] works on [FOCUS]'; (2) 'Explore' links: Platform, Pipeline, Science, Team, Careers (in-page anchors); (3) 'Contact': [HQ_LINE] on its own Inter 14px lines, plus mailto partners link; (4) mono 11px Cell soft small print column: 'PROGRAM CODES, FIGURES AND PAPERS ON THIS PAGE ARE ILLUSTRATIVE EXAMPLES' and the optional [CREDIT] link. Bottom bar: mono 11px Cell soft '[BRAND] - ALL VISUALS DRAWN IN CODE'.
Layout: py-16, 4-col grid (2-col mobile), bottom bar between Hairline rules. Text left-aligned per column.
Motion: None beyond link hover underline.
## Assets
- font: Self-hosted through Fontsource, imported in src/main.ts: @fontsource/sora (600, 700), @fontsource/inter (400, 500, 600), @fontsource/ibm-plex-mono (400, 500). Vite bundles the woff2 files into dist/. Never load fonts from a CDN.
- icon: lucide-react (ISC), installed from npm: only ArrowRight and ArrowUpRight at 16px, stroke 2, currentColor. No other icons; no emoji anywhere.
- image: No image files at all. Everything visual is drawn in code: the molecule (canvas, exact ATOMS/BONDS data in src/molecule-data.ts), two cell blobs and the mechanism diagram (inline SVG), dot grid (CSS), chips and rules (CSS), favicon (hand-written SVG in public/favicon.svg). Write ASSETS.md at the project root listing the Fontsource packages (OFL-1.1), lucide-react (ISC) and the original favicon; no other third-party files exist.
## Don'ts
- No backend of any kind: no server code, API routes, databases, auth, analytics, or forms that submit. Both CTAs are mailto links built from the BRAND slug; nothing posts anywhere.
- No real biotech or pharmaceutical companies, drugs, trials, gene names or journal names anywhere; programs, papers, stages, numbers and journals are invented examples. Journal descriptors stay generic ('Journal of Directed Protein Design', 'Assay Engineering Reports', 'Computational Biology Collective', 'Notes in Structural Biochemistry').
- No medical, therapeutic or efficacy claims: copy stays at platform-science level. Never write 'treats', 'cures', 'patients receive' or outcome claims about any program; keep the 'RESEARCH-STAGE EXAMPLES - NOT APPROVED PRODUCTS' footnote on the pipeline.
- Everything code-drawn: no photographs, no bitmaps, no people, no external image downloads, no placeholder-image services. The only files in public/ are favicon.svg.
- No calendar dates, years or timestamps anywhere on the page, including publications and the pipeline (rule: the front end never shows dates).
- Do not load fonts from fonts.googleapis.com, fonts.gstatic.com or any CDN; Fontsource only. No CDN <script> or <link> tags; every dependency is npm-bundled.
- Production build: minified, build.sourcemap false, no src/ in dist/, relative asset paths (Vite base './'). Internal links are in-page anchors on ./index.html.
- Do not change the stack (Vite 5 + React 18 + TypeScript + Tailwind CSS 3.4 + motion + lucide-react) unless the user asks. No three.js, no WebGL, no UI kits, no Aceternity UI or Tailwind Plus source.
- Use only Sora, Inter and IBM Plex Mono, and only the eight hex tokens in Design. Teal is the single accent; no gradients except the hero's radial dot fade, no shadows beyond the molecule card's single soft shadow.
- The molecule must be deterministic: exactly the ATOMS/BONDS data given, fixed rotation speed, no random values, so two builds produce the same visual. Do not add randomized drift or particles.
- Respect prefers-reduced-motion exactly as specified (static molecule frame, no cell drift, opacity-only reveals, instant counters). Pause the canvas loop when the hero is off-screen or the tab is hidden.
- Must work at 1440x900 and 390x844 with zero console errors, no horizontal scroll, keyboard-reachable links with a visible 2px Teal focus ring.
- Keep dist/ under 20 MB (it should be well under 1 MB); no video, no audio.
- Keep all copy in src/content.ts and rewrite it whenever variable values differ from the defaults; never ship default copy under a changed brand, platform, focus, HQ or program prefix. No lorem ipsum, no filler.
- No mention of VibeFather or any template source inside the site except the optional [CREDIT] footer link.
---
— Prompt by VibeFather · https://vibefather.ai/t/biotech-startup-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.
DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Biotech Startup Website"
colors:
paper: "#fcfefd"
ink: "#12262e"
slate: "#5d6f7c"
mist: "#e9f2f1"
hairline: "#d8e5e3"
teal: "#0e7c86"
teal_deep: "#0a5a62"
cell_soft: "#90a4ad"
typography:
display_wordmark_headlines_program_names_stat_numbers: { family: "Sora", weights: [600, 700] }
text_body_copy_buttons_chips_captions: { family: "Inter", weights: [400, 500, 600] }
mono_eyebrows_program_codes_technical_depth_lines_table_headers_small_print: { family: "IBM Plex Mono", weights: [400, 500] }
spacing: "8px vertical rhythm throughout. Sections py-28 (desktop) / py-16 (mobile); container max-w-[1160px] with px-6 (px-5 mobile). Hero min-h-[92vh] with items centered. Eyebrow to headline 16px, headline to body 20px, body max-width 560px. Table cells py-5 px-4; program column 260px, stage columns equal. Mono eyebrows 12px, uppercase, letter-spacing 0.16em."
radius: "Pills 999px for status chips and the header CTA; 12px on the molecule card and mechanism panel; 6px on buttons and inputs; 0 on the pipeline table, hairline rules and stat blocks. No other rounded shapes except the code-drawn cells."
---
# Biotech Startup Website — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **Paper** `#fcfefd` — Page ground everywhere; slightly cool white
- **Ink** `#12262e` — Primary text, Phase II filled chip, molecule carbon atoms
- **Slate** `#5d6f7c` — Secondary text, Discovery outlined chips, inactive table dots
- **Mist** `#e9f2f1` — Panel tint behind approach steps, careers strip and team tiles
- **Hairline** `#d8e5e3` — 1px rules, table grid, dot-grid dots, card borders
- **Teal** `#0e7c86` — The single accent: links, buttons, Phase I filled chip, Preclinical outlined chip, nitrogen atoms, focus rings
- **Teal deep** `#0a5a62` — Button hover state, oxygen atoms in the molecule, strong underlines
- **Cell soft** `#90a4ad` — Molecule hydrogen atoms, inactive stage dots, muted mono labels
## Typography
- **Display (wordmark, headlines, program names, stat numbers)** — Sora (OFL), weights 600/700. Self-host the font files.
- **Text (body copy, buttons, chips, captions)** — Inter (OFL), weights 400/500/600. Self-host the font files.
- **Mono (eyebrows, program codes, technical depth lines, table headers, small print)** — IBM Plex Mono (OFL), weights 400/500. Self-host the font files.
## Spacing & shape
- Spacing: 8px vertical rhythm throughout. Sections py-28 (desktop) / py-16 (mobile); container max-w-[1160px] with px-6 (px-5 mobile). Hero min-h-[92vh] with items centered. Eyebrow to headline 16px, headline to body 20px, body max-width 560px. Table cells py-5 px-4; program column 260px, stage columns equal. Mono eyebrows 12px, uppercase, letter-spacing 0.16em.
- Radius: Pills 999px for status chips and the header CTA; 12px on the molecule card and mechanism panel; 6px on buttons and inputs; 0 on the pipeline table, hairline rules and stat blocks. No other rounded shapes except the code-drawn cells.
## Motion
- Molecule canvas: rotate the fixed 18-atom model around Y at 0.16 rad/s under a constant X tilt of -18 degrees; orthographic projection, center (280,280), scale 80; depth factor 1 - 0.18*zN on atom radius, bond alpha 0.92 - 0.38*mean(zN); draw far to near each frame; loop paused off-screen or when the tab is hidden.
- Cell blobs drift on 26 s and 34 s keyframe loops (translate up to 20px, rotate up to 4 degrees, alternate, ease-in-out); they stop under prefers-reduced-motion.
- Section entrances: eyebrow, headline and body rise 20px and fade over 0.6 s with 90 ms stagger, once, cubic-bezier(.2,.8,.2,1).
- Pipeline: each stage column's header underline draws scaleX 0 to 1 over 0.5 s when the column enters; its chips pop from scale 0.85 and fade in, 80 ms stagger; past columns stay lit when scrolling back up.
- Metrics count up once from 0 over 1.1 s ease-out; under reduced motion the final numbers render immediately.
- Hover micro-interactions: buttons darken to Teal deep and shift the Lucide arrow 3px; publication titles draw a 2px Teal underline scaleX 0 to 1; team monogram rings brighten from 40% to 100% Teal.
- prefers-reduced-motion: molecule renders one static frame at t = 0 (tilt only), cells rest, entrances become plain opacity fades, counters render final values, chips render in their final state.
## Imagery
Everything is drawn in code and nothing is a bitmap: the hero molecule (canvas, exact atom and bond data below), the two drifting cell blobs (SVG), the mechanism circuit diagram (SVG), the pipeline chips and dots, the dot-grid background (CSS radial-gradient), and the favicon (hand-written SVG). No photographs, no people, no logos, no downloaded files beyond fonts and the icon package. Palette strictly the eight tokens above.
## Tone
Precise, calm, confident. Short declarative sentences, concrete sample numbers, no hype, no exclamation marks, no marketing superlatives. Headlines read like figure captions from a well-set paper; mono labels carry the data.
---
— Prompt by VibeFather · https://vibefather.ai/t/biotech-startup-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A soil-microbiome startup: set BRAND to your company, PLATFORM to your consortium platform, FOCUS to nitrogen-fixing soil consortia and swap the protein programs for field-trial codes.
- A materials science lab spinout: keep the pipeline table but relabel the stages to discovery, bench validation, pilot line and partner trials, and rewrite the mechanism line for your process.
- A biotech recruiting page: keep the hero and team row, expand the three careers roles into full descriptions and point both CTAs at your hiring inbox.
- An early-stage investor one-pager: trim the publications list, keep the count-up metrics band and pipeline table, and set HQ_LINE to your registered office city.
Biotech Startup Website: questions and answers
How do I change the molecule, pipeline stages and program codes in the Biotech Startup Website template?
The Biotech Startup Website template keeps every string in one content file and the molecule's atom and bond data in a separate data file. Set BRAND, PLATFORM, FOCUS, HQ_LINE and PROGRAM_PREFIX in your prompt, then rewrite the hero, approach steps, pipeline rows, metrics, publications, team and roles to match. Program codes are built from PROGRAM_PREFIX, so VN-241 becomes your prefix plus the same numbers. The molecule's 18-atom model is fixed geometry; to show a different compound you edit the atom and bond data, not the canvas code.
What sections does the Biotech Startup Website template include?
The Biotech Startup Website template is a single page with a hero anchored by a code-drawn rotating molecule over a dot grid, a three-part platform explainer (problem, three-step approach, mechanism diagram), a full-width pipeline table with Discovery, Preclinical, Phase I and Phase II columns, a count-up metrics band, a publications list, a team row of monogram tiles and a careers strip with three roles. The footer carries the headquarters line and both CTAs are mailto links.
Can I use the Biotech Startup Website template for an ag-biotech or materials company instead of protein design?
Yes. The Biotech Startup Website template ships two demo cases: a protein-design company and a soil-microbiome startup. The soil-microbiome demo shows brand, platform, focus and program codes swapping while the layout holds. For an ag-biotech or materials company, set BRAND, PLATFORM and FOCUS to your science, rewrite the approach steps and mechanism line to your method, and replace the pipeline programs with your own stages. Keep the copy at platform-science level with no medical or efficacy claims.
Is the Biotech Startup Website template free, and what do I get with Pro?
The Biotech Startup Website template is free. Its prompt and every DESIGN.md are free for personal, non-commercial use under CC BY-NC 4.0. Commercial and client work needs Pro, which also gives you the full prompt and the source code of the demos. The brief, stack and variables are shown publicly either way.
How do I replace the invented publications and team members in the Biotech Startup Website template?
The Biotech Startup Website template keeps publications, team tiles and roles in the same content file as the rest of the copy. Swap the invented paper titles and generic journal descriptors for your own, replace the monogram tiles with your team's initials and names, and edit the three careers roles to your open positions. The location shown on team and role cards comes from the city segment of HQ_LINE, so set that first. The layout and hover motion stay as they are.
How do I build a biotech startup website with AI?
Copy the prompt from this page or run npx vibefather add biotech-startup-website, replace [BRAND], [FOCUS], [HQ_LINE] and [PLATFORM] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.
Which AI model built the Biotech Startup Website demo?
The Protein design biotech case was built by GLM-5.3 in ZCode; the Soil microbiome startup case was built by DeepSeek V4.1 Flash in DeepSeek Harness. Each build used the published prompt with nothing added, so you can compare the models side by side.
What tech stack and pages does the Biotech Startup Website template use?
Biotech Startup Website is a single-page site built with Tailwind CSS, Motion and React, with scroll animation and micro-interactions. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.
Can I use the Biotech Startup Website template for a client or a business?
The Biotech Startup Website prompt and DESIGN.md are free for personal, non-commercial projects under CC BY-NC 4.0. Client work and commercial use need VibeFather Pro, which also includes the source code of the live demo.
Does the Biotech Startup Website template work on mobile?
Yes. Every Biotech Startup Website build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.