BL-009Website / Product
FoundationMattie Labs Website & Design System
The consulting-first site itself: a dark lab-interface design system, a fully prerendered Next.js build, and a connected ecosystem of learning, prompts, tools, and intake.
01The problem
What needed to change
Mattie Labs needed a home that proves its approach — practical, honest, beginner-safe — instead of claiming it. A template site or generic agency page would undercut the entire positioning.
02Context & constraints
What shaped the build
You're looking at it. Every feature on this site — the learning platform, prompt library, tools, and intake lab — is built on this foundation.
No backend, database, accounts, or payments
No AI API calls anywhere on the site
AA contrast throughout — including dark-on-accent buttons
Mobile-clean at 375px on every page
All content in local JSON, editable without code changes
03Goals
What success meant
- A design identity that isn't a SaaS template: dark AI lab crossed with a technical field guide
- Static generation for every route
- A component kit that keeps every new page consistent
- Documentation that lets any future session pick up the work
04Approach
How it was built
Design the system first
Tokens, typography, and a field-guide component kit — technical labels, spec rows, editorial paper cards — were built before pages, so every later feature inherits them.
Keep data out of components
All content is typed local JSON; pages look entities up by slug and pass typed props down.
Prerender everything
Static and SSG routes only — dynamic segments generate from data, and unknown slugs 404 at build time.
Document as a system
Architecture, design system, decisions, and a session-by-session build log keep the project maintainable across sessions.
05What was built
Capabilities on record
Token-driven dark design system with a technical field-guide voice
3D lab-core hero with capability and reduced-motion fallbacks
A fully prerendered route tree with sitemap and per-page metadata
Validated localStorage stores powering progress, saves, and drafts
A documented component kit reused across every feature
06System view
How it flows
Design tokens
One source of truth in CSS
Typed data
Local JSON, validated shapes
Static pages
Every route prerendered
Device state
localStorage — no accounts
07Outcome
Where it landed
A stable foundation that has absorbed a learning platform, a prompt library, four tools, a services hub, and a guided intake without an architecture rewrite.
On the record
100% prerendered routes — no server runtime logic
6 validated localStorage stores
0 backend services, accounts, or AI API calls
Only verifiable facts appear here — no estimated business metrics, ever.
08Field notes
Lessons & what's next
What was learned
- A strict tokens-never-raw-hex rule made every later feature consistent by default.
- A static-only architecture keeps scope honest — features must work without a server, which forces simpler designs.
Future work
- Deploy to production with the real domain
- Brand OG image and full favicon set
- Wire forms to a real submission target
09Related resources
Keep going from here
More from the build log
Related builds
BL-008Consulting Experience
Project Intake Lab
A guided intake that turns "I think AI could help" into a structured project brief — with a readiness snapshot, a service match, and a draft master prompt, all derived by plain rules.
View Case StudyBL-003Prompt System
Prompt Library
A searchable, filterable library of 65 working prompts with starter packs, a fill-in-the-blanks customizer, and a shareable page for every prompt.
View Case StudyBL-006Learning Experience
Learning Platform
A free, progress-tracked learning system: 8 guided paths and all 48 lessons built, with sequential unlocks, interactive exercises, path capstones, and quizzes — no account required.
View Case StudyHave a problem shaped like this one?
The Project Intake Lab turns your situation into a structured brief — readiness snapshot, service match, and a draft master prompt included. No commitment, nothing sent until you send it.