A creative agency is judged on its own website before anyone reads a word of the pitch. Formix is a hand-coded HTML template for design studios, branding agencies, product teams and creative collectives that need to show the work, explain the thinking, hire the next person and sell a retainer — all from the same site.

Built with clean HTML5, CSS3 and vanilla JavaScript, Formix pairs a confident black-and-white editorial layout with a complete site: a nine-project portfolio with full case-study pages, five service pages with their own process reels, a careers section with four job listings, three retainer plans with monthly and yearly billing, a ten-article journal, and a working cart with a three-page checkout — all running in the browser with no jQuery, no GSAP, no framework and no build step.

Whether you run a branding studio, a product design consultancy, a UI/UX practice, a motion and 3D house or a full-service creative agency, Formix provides every page and component needed to win the brief and take the order.

Designed for Creative Studios

Formix is organised around the way clients actually evaluate a studio: what have you made, how do you work, who does it, and what does it cost. The template includes purpose-built sections for a scroll-linked work stack, a draggable project rail, a five-step service process reel that advances as you scroll, an awards row, a team grid, an interactive "our story" panel, a cross-fading testimonial carousel with video, an FAQ accordion, and monthly and yearly pricing tabs.

With a palette of near-black, white and soft pearl, Inter Tight set at display sizes, and character-by-character text reveals applied with restraint, every page keeps attention on the work rather than on the interface.

Key Features

• Confident editorial design in black, white and pearl
• Fully responsive across all devices
• Built with HTML5, CSS3 and vanilla JavaScript
• No jQuery, no GSAP, no frameworks, no build step
• Nine-project portfolio with full case-study pages
• Five service pages with their own process reels
• Scroll-linked work stack that scales as cards layer
• Draggable work rail with pointer, touch and keyboard
• Careers section with four full job listings
• Three retainer plans with monthly and yearly variants
• Slide-out cart and a three-page checkout, all in localStorage
• Ten full-length journal articles with author and category
• Blog category filter as a real ARIA tab set
• Cross-fading testimonial carousel with video lightbox
• Character-by-character text reveals on scroll and hover
• Three scrolling marquees at two speeds
• Ten scroll-linked sections, each transcribed from the original
• Four buttons that drift toward the cursor
• Smooth scrolling that switches itself off on touch
• FAQ accordion and five keyboard-navigable tab sets
• Contact page with an enquiry form and office details
• Password-protected, 404 and style-guide pages
• Self-hosted web font, no third-party requests
• One stylesheet and one script, easy to maintain
• SEO-friendly, semantic code structure with a single H1 per page
• Accessible markup with real buttons, skip link and landmarks
• Full reduced-motion support
• Cross-browser compatibility
• Clean, organized and easy-to-edit code
• Simple customization through CSS variables

Included Pages

• Home
• About Us
• Work
• Work Details
• Service
• Service Details
• Career
• Career Details
• Pricing
• Plan Details
• Plan Category
• Blog
• Blog Details
• Contact
• Checkout
• PayPal Checkout
• Order Confirmation
• Style Guide
• Licenses
• Changelog
• Instructions
• Password Protected
• 404 Not Found

Ideal For

• Branding and identity design studios
• Product design and UX consultancies
• Digital and full-service creative agencies
• Motion, animation and 3D studios
• Web design and front-end practices
• Independent designers and small collectives
• Photography and art direction studios
• Architecture and interior practices
• Marketing and content studios
• Any studio with work worth showing

Performance & User Experience

Formix ships as one stylesheet, one script and its own font. The Webflow export it was rebuilt from loaded jQuery, a 2.3 MB runtime bundle, three GSAP files and Lenis on every page; none of that is here. There is no runtime to boot, no framework to parse and no third-party request on any page, so a case-study page paints as soon as its HTML arrives. Images are served in modern formats at the sizes the layout actually asks for.

Every interaction is a real control. The navigation, the five tab sets, the accordion, the carousel, the draggable rail, the cart and the lightbox are all reachable from a keyboard and nameable by a screen reader, each page has a skip link and exactly one H1, and every animation stops when the visitor's system asks for less motion. With JavaScript switched off the whole site still reads: nothing is hidden behind a script that has to run first.

Why Choose Formix?

Formix gives a creative studio the two things its site has to do well — make the work credible, and make the next step easy — in code clean enough to hand to any developer, with no framework to learn, no build to run and nothing to keep up to date.