Web Design Agency Template
A one-page site for a web design and development studio, built around a browser mockup that scroll-scrubs through the three stages of a real project: wireframe, then structure, then the finished thing. Services lead with plain price bands and timelines, and the whole page is keyed to one brand colour you swap.
About This Template
A production-ready one-page site for a studio that designs and builds websites for other people. It ships as a finished site for a fictional six-person studio, Northbound, with real engagement types, plain price bands, honest timelines and a week-by-week process already written, so what you open reads as a working business rather than a grid of placeholder headings.
Read the full template overview
It is built to be re-pointed. The whole page is keyed to a single brand colour: set two values, your accent and the type colour that sits on it, and every button, chip, rule, node and progress fill follows. The accent is never used as a text colour anywhere, which is what makes that swap safe for any hue rather than only for the blue it ships with. The rest of the system is a warm greige ground, a lighter card surface and one dark band, all resolved from RGB triples so there is not a single colour literal to hunt down.
The centrepiece is a browser mockup that a pinned, scrubbed timeline moves through three fidelities as you scroll: grey boxes first, then real type at real sizes, then colour and imagery last. It is the studio's own argument about how a project should run, made by showing it rather than claiming it. Around that sit four engagement types with scope lists and price bands, six project cards drawn in CSS with documented image swap points, a process rail that draws week by week, and an enquiry form that asks what a studio actually needs to know.
There is no bundled photography and none is needed: the project cards are composed mockups, so a buyer drops in their own screenshots rather than fighting a graded photo set. Every section is found by a data attribute and separately guarded, so delete the hero, the build sequence, the services, the work grid, the process or the enquiry block and the rest keeps running.
What's Included
- A pinned browser mockup that scroll-scrubs through wireframe, structure and finished states, with the wireframe bars and the real type occupying the same grid cell so no line ever changes height between stages
- Keyed to one brand colour: set an accent and its paired on-accent type colour, and buttons, chips, rules, nodes, focus rings and the progress fill all follow, with the accent barred from carrying text so any hue stays legible
- Four engagement types with plain scope lists, indicative price bands and honest timelines, which is the commercial heart of the page and the part most studios have to write from scratch
- Six project cards drawn entirely in CSS, each a browser-framed mockup with a documented image swap point and a designed plate behind it, so an unloaded screenshot leaves the page looking art-directed rather than broken
- A week-by-week process rail with a DrawSVG line that draws as it enters and lit nodes marking each stage
- A work filter built on radio inputs and CSS, so it still filters with JavaScript disabled, with Flip animating the reflow and a min-height lock so nothing below the grid lurches mid-tween
- Count-up studio figures with accent tick marks, and a magnetic primary call to action on fine pointers only
- A hero whose vertical rhythm answers to viewport height as well as width, so the primary call to action stays above the fold on short laptop screens instead of falling below it
- Every measured contrast ratio written into the stylesheet header, including why the relaxed large-text exemption is deliberately not used anywhere
- Accessible throughout: a complete static document with no JavaScript, a full page under reduced motion with the mockup showing its finished state and nothing pinned, and a blocked CDN that degrades to the plain document
Perfect For
- Web design and development studios that need a site for their own business
- Freelance designers and developers presenting services, process and rates on one page
- Small digital and branding agencies that sell scoped projects rather than retainers alone
- Any studio that wants to lead with what it sells and how it works, rather than with a portfolio wall
- Consultancies that need plain price bands and timelines on the page before the first call
- A starting point for any service business, since the palette is one brand colour and the sections are independent
How It Works
Structure
One script initialises every section inside a single gsap.context, with one gsap.matchMedia whose condition sets cover coarse pointers as well as desktop, so exactly one branch runs on every device. Each block is found by a data attribute and returns early if it is absent, so deleting any section leaves the others working. The page is a complete static document before any script runs.
The three fidelities
One mockup, one layout, three sets of hooks. Each slot is a grid cell holding both a grey wireframe bar and the real type in the same cell, so a line never changes height as the stages swap. The scrubbed timeline holds on wireframe, crosses the bars out and the type in, holds on structure, then brings colour and imagery up last. The finished state is the default in CSS and the JavaScript gating class winds it back to the wireframe, which is why it renders finished with no JavaScript and under reduced motion.
One colour to change
The accent and the type colour that sits on it are separate tokens, because which one you need depends on your hue: a mid blue, red, green, purple, teal or pink wants white on it, while orange, yellow and lime want near-black. The accent never colours text anywhere on the page, only fills and non-text marks, so a swap cannot leave a figure or a label unreadable. Every translucent value resolves from an RGB triple, so a reskin is the token block and nothing else.
The work filter
The filter is radio inputs and CSS selectors rather than JavaScript buttons, so it still works with scripting disabled and the control bar is never a row of dead chips. Flip only animates the reflow on top of that. The grid's height is locked for the duration of the tween and released on completion, because a Flip reflow lifts its items out of normal flow and would otherwise drop the container height and jolt everything below it.
Without JavaScript
The gating class goes on in the head before first paint, so reveal start states apply to the first frame and nothing is painted visible and then hidden; the script removes that class when GSAP is missing, so a blocked CDN degrades to the plain document. With scripting off the mockup shows its finished state, the filter still filters, the process rail is fully drawn, and every figure shows its final value.