Northfold

Durable-data SaaS with engraved art

by Owais

Repo Live site

Description

Northfold is a two-page marketing site for a made-up tool that backs up a software team's databases, keeps audit logs and restores with one click. Every visual is drawn live in code, with no image files: a pencil-engraved amphitheatre in the hero with a violet magnifier that follows the cursor, rotating 3D product models, a dot grid that reacts to the mouse and an engraved landscape in the footer. A second page books a demo with a working calendar.

Use it for:

a landing page for a developer, data or infrastructure product
a B2B SaaS site with pricing and a demo booking flow
a reference for generative canvas illustration instead of stock images

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. There is nothing to download: every drawing is made in code.
Preview and fix
Ask Claude to start a local preview. Move the cursor over the hero, scroll through Platform and book a test demo, then ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a two-page marketing site for Northfold, a data tool for software teams with versioned backups, immutable audit logs and one-click restore for every database they run. Pages: the landing page and a "Book a demo" page.

Use plain HTML, CSS and JavaScript with Lenis smooth scroll. No framework and no image files: draw every visual on a canvas.

Design: white and off-white page, black text, thin grey lines and one accent, violet #4b3bff, with a deep indigo footer. Instrument Sans for headings, Inter for text and DM Mono uppercase for labels and buttons. Labels start with a small violet square, like "■ DURABLE DATA FOR SAAS".

Hero: the headline "Ship fast. Keep everything." over a pencil-style engraving of a Roman amphitheatre drawn in perspective, with arches, cracks, hatching and scaffolding. A violet magnifier follows the cursor, recolours the drawing under it and names a layer of the product: Storage, Snapshots, Replication, Audit log or Restore.

Sections:
1. What we do: three cards (Snapshots, Immutable logs, Instant restore).
2. Platform: a rotating 3D object that is a white render above a violet line and a violet wireframe below it; the line rises as you scroll. An accordion (Vault, Archive, Edge) changes the object.
3. A trusted-by logo row and a statement that darkens word by word.
4. Features: four big rows that slide and turn violet on hover.
5. Pricing: Starter $0, Growth $149 and Enterprise, each with its own rotating 3D object.
6. A founders' letter on a tilted card that signs itself.
7. An FAQ and an indigo footer with an engraved hillside and a walking figure.

Book a demo page: pick a weekday, then a 30-minute slot in your own timezone, then fill in your details, and get a confirmation with a downloadable calendar file.

Add a dot grid background that reacts to the cursor. Only animate canvases that are on screen, respect reduced motion and keep it accessible.