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