Zinox Studio is a Next.js 16 template for design studios, branding agencies and digital teams — anyone whose work has to look like the work before a client reads a word. Built on the App Router with React 19 and TypeScript in strict mode, it ships 16 page templates covering 32 fully static pages, with the case studies, articles and service pages driven by MDX files you edit directly. No CMS or backend required.

Whether you run a branding studio, a motion house, a UI/UX practice, a small creative agency or a one-person design business, Zinox gives you every page the pitch needs — seven case studies with their own client sheets and outcome figures, six service pages, a six-article journal, a pricing table, and an about page with the team, the awards and the process. Content lives in files: add a case study and it appears on the works page, in the related strip under every sibling, and at its own URL without touching a component.

Tech Stack

Next.js 16 — App Router, every page prerendered to static HTML at build time
React 19 — server components throughout, with one small client island for the interaction layer
TypeScript — strict mode, npm run typecheck clean
Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
Self-hosted webfonts — Anton, Inter Tight and Space Grotesk as woff2, no third-party font requests at runtime
MDX content layer — gray-matter frontmatter with a prose parser that renders into the design's own markup
Zero animation libraries — no jQuery, no GSAP, no Lenis: the character-level split text, the scroll reveals, the sliders, the services picker and the pointer arrow are one TypeScript file

Included Pages and Templates

Core pages

Home with a wordmark loader whose letters rise out of their own masks, a six-slot services picker that slides a stack of photographs, a featured case study, a team section, a tabbed testimonial set, an FAQ accordion and a journal slider
About the studio with the team, a ratings slider, the awards, the office locations, the vision and the process
Services with six service cards, the testimonials and an FAQ accordion
Contact with an enquiry form, the studio details and an FAQ accordion

Work

Works index across three lists, and 7 case study pages: the client sheet, four outcome figures, a photograph gallery and a closing note

Services

6 service pages: the hero, the sub-services, a write-up and a two-picture gallery

Journal

Journal index and 6 full-length articles, each with its category tags, a plate and a related strip

Utility pages

Pricing table, style guide, licences, instructions, changelog, a 401 password-protected page and a 404 page

16 page templates. 32 static pages.

Easy Content Editing

Everything you change lives in src/content/. Edit a file, rebuild, done.

src/content/blog/*.mdx — the 6 articles: the category tags, the card and hero images, the excerpt and the body
src/content/works/*.mdx — the 7 case studies: the summary, the four fact rows, the four outcome figures, six pictures and the closing note
src/content/services/*.mdx — the 6 services: the number, the three sub-services, the pictures and the write-up
src/content/layout.json — the home page's picker slots, and how many related cards each family shows

Each file states its own order, so the sequence the design was built around lives with the content instead of in a separate index. Add an article and it appears on the journal page, in the home page's slider and at its own route — with no component to touch.

Body copy is Markdown: section headings, bold lead-ins, paragraphs and full-width plates. A prose parser places each block inside the design's own markup, so the words stay editable and the layout stays exact. Reach past that grammar and the build stops and names the file, rather than rendering something the design has no styling for.

Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the :root block at the top of public/assets/css/styles.css. Change a value there and it propagates across every page.

Verified Against the Original

All 32 pages were compared against the original template tag for tag, attribute for attribute and text run for text run — in the body and in the head — both locally and against the deployed build. The stylesheet is the original, used unchanged. Nine components stand in for markup that repeated across pages, replacing 783 copies of the same blocks with nine definitions that render the original markup exactly.

Performance and SEO

Every page prerendered as static HTML, ready for a CDN
Per-page title, description and Open Graph and Twitter card metadata
Absolute share-image URLs so link previews resolve
Self-hosted fonts with font-display: swap and zero third-party requests
Lazy-loaded imagery with responsive srcset on every photograph
Semantic markup with one H1 per page, real buttons and landmarks
Keyboard-reachable tabs, accordion, sliders, picker and forms
Full prefers-reduced-motion support, and readable with JavaScript off

Deployment

Deploys to Vercel, Netlify, Cloudflare Pages or any static host. npm run build prerenders every page; there is no server, no database and no API to configure.

What You Get

The complete Next.js 16 project source
16 page templates covering 32 static pages
6 articles, 7 case studies and 6 services as editable MDX
The original stylesheet and self-hosted webfonts
Full HTML documentation
Changelog and third-party license file

Requirements

Node.js 20 or newer
npm 10 or newer, or pnpm, yarn or bun

Zinox - Next.js 16 Creative Agency & Design Studio Template