All kits

Creative studio

DraftHaus

An architecture portfolio as considered as the work.

Best for: Studios that want a precise, gallery-grade portfolio without a custom build.

Meridian

Buildings that know exactly why every line is there.

See the projects
Open live preview

Overview

DraftHaus is built for studios whose drawings are exact and whose website should be too. The 'Blueprint' theme — concrete grey, graphite, a single blueprint blue, hard corners — frames the work like a set of plans. The flow is deliberate: a confident hero, a project showcase, the services on offer, the process from brief to handover, and the numbers that quietly prove a studio delivers. Config-driven, so a practice can publish a new book in an afternoon.

Who it's for

Architecture practicesInterior & spatial designersLandscape & urban studiosDesign-build firms

Highlights

  • Confident, structured hero
  • Project showcase grid
  • Signature brief-to-handover process
  • Delivery proof as stat cards
  • Client project room — drawing sets, stage sign-off, site notes

Pages included

  • Home
  • Sign in
  • Sign up
  • Terms of Service
  • Privacy Policy
  • Project detail
  • The book (all projects)
  • Client project room
  • Themed 404 / 500 / loading

Built with

Next.js 16React 19Tailwind v4TypeScript

What you'll get

A launch kit is more than code. Here's exactly what's in the box and what it takes to get it live.

DraftHaus Launch Kit

v1.0.0 · Single-project license

Coming soon

In the box

  • Next.js source codeThe complete, typed project — yours to keep and edit.
  • Content configEvery word, link, and price in one editable file.
  • Theme configColors, fonts, and shape as simple design tokens.
  • Auth screensThemed sign in & sign up — split layout, ready to wire up.
  • Legal starter pagesPractical Terms & Privacy you can customize, not legal advice.
  • 3 niche product screensDesigned for this kit — e.g. a dashboard, detail, or checkout.
  • Themed error & loading screensMatching 404, 500, and loading states — not generic fallbacks.
  • Guides + launch checklistCustomization, deployment, launch checklist, and troubleshooting.
  • DESIGN.md + AGENTS.mdSystem-design map + agent operating rules and starter prompts.
  • License + changelogPlain-language usage terms (placeholder) and version history.

To launch it

  • Difficulty: beginner
  • Setup time: About 35 minutes
  • Deploys to: Vercel · Netlify
  • Guides: 4 included
  • Support: Standard email support and optional setup help.
Request early access

Downloads open when checkout launches.

Customization & requirements

Everything renders from one config file, so editing copy, pricing, sections, or the theme is a data change — no component rewiring.

You'll need

Node 20+A code editorGitHub accountVercel account (free)

You can customize

Studio name & statementProjectsServicesProcess stepsTrack-record numbers

Built for AI agents

Customizing with Claude, Cursor, or another agent is the intended path — the kit tells the agent what it may touch. Use the “Build it with AI” button in the sidebar for a ready-made starter prompt.

  • AGENTS.mdOperating rules, project map, starter prompts.
  • DESIGN.mdDesign system and theming contract — tokens only.
  • configThe safe editing zone: copy, links, pricing, and theme as data — AGENTS.md names the files.

Launch checklist

Every kit ships with a practical, step-by-step checklist so you know exactly what to change before you go live.

Launch checklist

19 steps

Make it yours

  • Replace the logo and favicon
  • Update your business / brand name
  • Rewrite the hero copy
  • Update services, features, and pricing
  • Set your real contact email
  • Swap placeholder images for your own

Metadata & SEO

  • Update the page title and description
  • Set your Open Graph share image
  • Point metadataBase at your real domain

Quality check

  • Test the responsive layout on mobile
  • Test every button and contact CTA
  • Run a quick Lighthouse pass

Make it your practice

  • Replace the six projects with your own bookTitles, categories, and mock visuals live in the portfolio section of this kit's config.
  • Rewrite the process for how your studio actually worksThe brief→handover steps are in the process section — keep the four beats or rename them to your stages.
  • Set the track-record numbers to what's trueProjects delivered, years in practice, and awards are honest claims in the stats section — only keep what you can back.
  • Make the project room a live jobThe client sign-in leads here; swap the drawing sets, stages, and site notes for a real project's config.

Launch

  • Deploy to Vercel
  • Connect your custom domain
  • Do a final launch reviewOpen the live URL in a fresh browser

Ships with the kit as a Markdown checklist — tick it off as you go.

Don't want to set it up yourself?

Once you've got the kit, we can get it live for you. Tell us what you're building and we'll handle the technical bits.

  • Customize the kit to your brand
  • Replace content, copy, and images
  • Deploy it live on Vercel
  • Connect your custom domain
  • Walk your launch checklist with you
Request setup help

No commitment — we'll reply with options and a quote.

Related kits

Not quite it? Nearby on the shelf.

Browse the full gallery