How this site was designed and built
A short, honest walkthrough of the stack, the design decisions, and the AI-generation workflow — so you can build something like it yourself.
Stack at a glance
1. Define the brief and the brand
The brief called for a premium, $10M-agency-feeling website for an AI automation agency, with an emphasis on visual craft: 3D-influenced imagery, otherworldly animation, and a tight, confident color system. We named the company Crux AI — "the essential core of your business, automated" — and set the visual language before writing any code: true black (#050507) and off-white paper, with a single electric indigo-violet accent (#7c5cff) used at every level from buttons to gradients to glow effects. Constraining the palette to one accent color made the whole system feel intentional instead of decorative.
2. Choose a stack that matches the ambition
Next.js 16 (App Router, Turbopack, React 19.2) with TypeScript, Tailwind CSS v4, and Framer Motion. Tailwind v4's CSS-first @theme configuration let us define the entire design system — colors, fonts, custom keyframes for marquee/float/glow — directly in globals.css instead of a JS config file. Framer Motion handles scroll-triggered reveals, staggered grids, animated counters, and the mobile menu.
3. Typography as a design lever
Headlines use Bricolage Grotesque, a distinctive variable grotesque with real personality at large sizes; body copy uses Inter for maximum legibility. Both load through next/font/google, which self-hosts the fonts and eliminates layout shift.
4. Generate original art instead of stock photography
Rather than sourcing images from Pinterest or stock libraries (a copyright and licensing risk for a commercial site), we generated all key visual assets from scratch using a connected AI media-generation toolchain (Nano Banana 2, via an MCP-based creative suite that also exposes Higgsfield/Kling-style video and 3D models). Prompts were written for a consistent visual identity: abstract, sculptural, dark-chrome-and-glass forms lit with a single violet rim light, always leaving negative space for headline copy. Source renders came back at 2K; we ran them through sharp (already a Next.js image-optimization dependency) to resize and re-encode as compressed JPEGs, cutting each asset from 5-7MB down to under 90KB before they ever shipped to the browser.
5. Build the system, not the pages
Before writing a single page, we built the primitives: Container, Button, Badge, SectionHeading, GlowOrb, Reveal/RevealGroup (scroll-triggered motion wrappers), and an animated Counter. Every page — Landing, Services, Pricing, About, Contact — composes the same handful of primitives, which is what makes a large site feel coherent instead of assembled from mismatched templates.
6. Depth without extra weight
Most of the site's 'advanced visual technique' comes from CSS, not images: a fixed SVG-noise grain overlay for texture, a subtle background grid masked with a fade, glass-morphism panels (backdrop-filter blur), floating gradient orbs animated with CSS keyframes, and gradient-clipped text. This keeps the site fast while still feeling dimensional and premium.
7. Three iteration passes
After the first working build, we ran three dedicated design-QA passes across every page — checking type scale and rhythm, contrast and accessibility, animation timing, responsive behavior, and copy consistency — tightening spacing, motion easing, and micro-interactions each round rather than shipping the first draft.
8. Ship it
The production build was verified locally (TypeScript, ESLint, next build) before deploying to Netlify. Netlify's Next.js runtime handles the App Router's mixed static/server rendering automatically — no custom server config required.
Want to replicate this? Start from a design constraint (one accent color, two fonts), build your primitives before your pages, generate original art instead of scraping stock sites, and budget time for at least a couple of dedicated polish passes before you call it done.