Web Design Agency Website Template

Quick Start

1. Unzip and open index.html in a browser, or serve the folder with any static server (npx serve .).
2. Every page is a plain HTML file: index.html (Home), work.html (all six projects), work-heavitree-bakehouse.html and work-creedy-cider.html (case studies), services.html (prices and the builder), studio.html (the team) and start.html (project planner).
3. All pages share assets/style.css and assets/script.js. There is no build step.
4. Deploy the folder as it is to any static host.

Using It With Your Own Design

• The studio colour: --signal (display text and fills) and --signal-ink (the cut for small text) at the top of assets/style.css, or one of the four ready palettes (see Palettes below). Tomato on stone is large-text contrast only, so it is used at 24px and up; anything smaller uses --signal-ink. Repaint the pair together and re-measure.
• Client colours: each band, case-study opener and next-project link carries its colours inline: style="--band: #C98A35; --band-ink: #1E1B18". --band-ink must read on --band at 4.5:1. Avoid a band colour close to your studio colour, or the one-colour idea blurs.
• Ground and ink: --ground, --ground-deep, --paper, --ink and --ink-soft in the same token block.
• Type: Anybody (display, a variable face with a width axis) and Work Sans (everything else), self-hosted in assets/fonts/. Display lines are fitted to their column on the width axis, so any replacement display face needs a wdth axis too, or remove the data-fit attributes and size the lines yourself.
• Copy and clients: all text is in the HTML. The six clients appear on the home page (poster states and three bands), on work.html (six bands) and in the two case studies.
• Photographs: see Images below.

Pages and Configuration

Every feature looks for its own data- hook and does nothing when the markup is missing, so you can delete a section, or a page and its links, without touching the script.

Navigation

Desktop links sit in the header with aria-current="page" on the current page. Under 900px the links give way to a Menu button that opens a full-height sheet in the signal colour listing every page, each name fitted to the sheet's width. Without JavaScript the Menu control is a link to the page list in the footer (#site-pages). When you add or remove a page, edit the header, the sheet and the footer list on every page.

The poster hero (Home)

[data-hero] holds three matching lists: the words ([data-word], each letter wrapped in <span class="ch">), the photographs ([data-shot], each a <figure> with a caption) and the index links ([data-goto="n"], numbered from 0). Keep the three in the same order. With motion allowed the section pins and scroll moves through the states; under reduced motion the index swaps word and photograph instantly. The first photograph is the page's largest image, so it is preloaded in the <head>; change that preload if you change the first photograph.

Client bands

An article.band with data-band and data-kind (space-separated: shopify, craft, booking, used by the Work filter). Inside: the name, a one-sentence outcome, a short list of services and place, then .band__screens with a .browser, a .phone and a .card. The browser screen's contents are ordinary HTML styled per client by a site--<name> class; swap them for screenshots (<img> inside .browser__view) if you prefer. While a band sits under the header, the header takes the band's colours.

Working screens

Each client's browser screen has one control: [data-slots] (collection slot), [data-creedy] (retail and trade prices, from each price's data-retail and data-trade), [data-marlowes] (catalogue search over the listed lines), the Quayside day tabs (CSS only), [data-okafor] (countdown to the next Thursday at 7pm, and the waitlist button) and [data-pellow] (age gate). None of them saves anything.

Work filter

Radio chips in [data-filter] filter the bands with CSS, so the filter works without JavaScript. To add a platform, add a chip with the id kind-<name>, the matching rule near .work:has(...) in the stylesheet, and the word in each band's data-kind.

Case study

The opener is a section.opener with the client's colours inline and the title split into two fitted lines. [data-build] is the scroll sequence: the site inside the frame ([data-bsite]) starts as grey bars (every text run is wrapped as <span class="wf"><span class="wt">…</span></span>), takes its words, then its colours and photographs, then scrolls. The four notes beside it light in step. [data-planner] is the collection planner; slot capacities are in the caps list inside initPlanner in the script.

Price builder (Services)

[data-builder] reads the chosen build and add-ons. Build prices, add-on prices and phase weeks are in the builds list and the add-on lines inside initBuilder; the labels in the markup show the same numbers, so change both.

Team (Studio)

Each portrait is a button.person with data-first (the poster word) and data-role (the sentence under it). Clicking, tapping or pointing at a portrait sets the poster.

Project planner (Start)

A normal <form> with radio chips, a select and text fields. The brief card writes one sentence per answer and compares the budget with the build's starting price. start.html?project=<client> prefills the planner from a band's "Ask us about this project" link. The form sends nothing: it validates and shows a thank-you state. Set its action or post it to Formspree, Netlify Forms or your CRM before launch.

Palettes

The studio owns one signal colour; four palettes ship in assets/style.css. Each palette sets the ground, paper, ink and signal colours only. Client band colours belong to each project and stay the same in every palette, and so do the caption chips over photographs and the paper inside client mockups (the fixed --chip* and --mock-* tokens).

To use one, set it on the root element of every page: <html lang="en-GB" data-palette="cobalt">. Or copy that block's values into :root at the top of the stylesheet and delete the alternate blocks. The faces do not change between palettes, because the poster words rely on Anybody's width axis.

In the default the signal colour passes only as large text, so anything under 24px uses --signal-ink. Measured pairs for every palette are listed in the comment at the top of assets/style.css; re-measure if you mix your own.

Client bands in the example: ochre #C98A35, orchard #2F5A3A, navy #1F3A5C, aqua #7FC4CB, clay #D9B3A0, sea #0F4C5C. Each pairs with a dark or light ink set on the band.

Images

The photographs are bundled in assets/img/ as optimised WebP derivatives (about 2.6 MB in total), cropped, resized and lightly desaturated from the originals listed in assets/img-manifest.json. The stock photographs are from Pexels, used under the Pexels licence:

The seven team-* portraits and the cider-* and gin bottles are AI-generated images, made for this template; the people are not real and the labels are blank. Replace the portraits with photographs of your own team.

Files ending -600 and -800 are smaller copies that phones download instead; a replacement needs both sizes. To use your own photograph, replace a file with one of the same name and similar proportions and update its alt text and caption. If you work from this repository's tooling, edit the manifest and regenerate with bun scripts/build-template-assets.ts web-design-agency-template --force.

Accessibility

• Native links, buttons, radios, checkboxes, selects and inputs throughout, including inside the website screens; visible focus outlines on stone and on every client colour.
• The phone menu is a real button with aria-expanded, focus moved into the sheet and kept there, Escape and a tap outside to close, and focus returned to the button.
• The poster words are decorative copies of the index (hidden from assistive technology); the index links and photograph captions carry the same content as text.
• The team picker uses aria-pressed and announces the new name and role; the planner's brief card, the price builder and the working screens announce changes in polite live regions.
• Reduced motion: no pin, no letter animation and no cross-page fade; the hero index swaps states instantly, the case-study site shows finished and every figure shows its final value.
• Without JavaScript every page is a complete document: the hero shows its first client, the work filter and day tabs still work, and the phone menu links to the footer page list.

Dependencies

• GSAP with ScrollTrigger. Built against 3.15.0; works with 3.12+.
• Lenis for optional smooth scrolling. Built against 1.3.17. Turn it off with ?smooth=off in the URL or data-smooth="off" on <html>.
• Anybody and Work Sans, self-hosted in assets/fonts/.

Fonts

Anybody and Work Sans are self-hosted in assets/fonts/ as the Latin subsets Google Fonts serves (both are variable fonts; Anybody is cut to weight 900 across its full width range). Every page preloads Anybody, which sets the poster words; the inner pages also preload Work Sans, which sets their opening statement. The home page leaves Work Sans to load normally so the first photograph downloads sooner. Licence: SIL Open Font License 1.1, full text in assets/fonts/OFL.txt (Anybody: Copyright 2020 The Anybody Project Authors, https://github.com/Etceteratype/Anybody; Work Sans: Copyright 2019 The Work Sans Project Authors, https://github.com/weiweihuanghuang/Work-Sans).

Teardown

Each page is a plain document, so features run once on load and need no teardown between pages. The page's GSAP work lives in one gsap.context() (exposed as window.gsapContext) and one gsap.matchMedia(), reverted on pagehide; switching reduced motion on or off at runtime tears down the pins and Lenis and rebuilds the right version. A host page's own window.lenis is never created over or destroyed.