AI ready Refreshed

Branding Agency Website Template

£29 View live demo or the whole Vault, £79.20

Includes the original v1 design as a separate download.

A six-page site for a branding agency or design studio whose work is identity in use: a dense wall of photographed signs, towels, tickets and posters, filtered by a sentence with two blanks. Case studies tile each client's system edge to edge, then hold the reasoning still while the applications scroll past.

ScrollTriggerFlip Lenis advanced

14 more details

flip-layoutfilterview-transitionsshared-elementcontainer-querieskeyboard-navigationfocus-managementdialog-animationscrollspymouse-followclick-toggleform-animationreduced-motionprogressive-enhancement

Updated 25 October 2026

About this template

A six-page site for a branding agency, design studio or packaging and signage practice: Home, Work, two case studies, Studio and Start a project. It opens on a dense wall of the work itself, small photographs of identities in use mixed with plain news tiles and coloured figure tiles, under one sentence: We design everything for everyone. Both blanks are controls. Pick signage and civic spaces and the wall re-sorts in place, the count updates and the address bar keeps the choice, so a filtered view can be shared or carried to the Work page. Work is the full archive: eight clients grouped newest first, each header holding still beside that client's pieces at their own proportions.

Read the full template overview

The worked example is Sato Brennan, a nine-person identity studio in a cotton mill in Ancoats, Manchester, with two full case studies: Ancoats Lido, a reopened 1930s outdoor pool, and Mayfield Print Fair, a weekend fair in an old railway depot. Each case tiles the client's applications edge to edge under underlined scope tags (Identity, Signage, Uniform, Print, Guidelines) that pick out their own tiles, then holds a paragraph still while the identity in use scrolls past beside it. Footnoted reasoning, people wearing the identity and a figure band in the client's colour follow.

The chrome is hairlines, boxed buttons and small type in Geist and Geist Mono, so the photographs carry all the colour. To make it yours, replace the photographs and the tile list, rename the sectors and disciplines in the sentence, and repaint the four client colours. The Studio page has a fourteen-week programme on a slider and the brief page writes the visitor's answers back as one sentence.

Branding Agency Template - website template preview

What's included

10 items

A wall of tiles in two widths and two heights on an 8-column grid, mixing photographs with news and figure tiles, that always finishes on a square last row
A filter written as a sentence: two inline blanks with keyboard-operable lists that re-sort the wall in place, update the count, keep the choice in the address and carry it to the Work page
A fixed bottom bar that carries the same sentence once the top of the page has scrolled away, and becomes the phone navigation
A phone Menu button at the top right that drops a contents sheet set like the contents page of a guidelines book, with folios, the current page marked, Escape and outside-tap close and focus kept inside
A Work page that is a real archive, not the Home wall again: eight clients grouped newest first, each with a header that holds still (year, sector, scope tags, the two brand colours as swatches, one figure) beside its pieces in justified rows at their own proportions, numbered and captioned; or an index of clients with a photograph that follows the pointer
Two case studies with a client ledger, scope tags that pick out their applications in an edge-to-edge system grid, a sticky split for the identity in use, footnoted reasoning and a figure band in the client's colour
A tile on Home or Work grows into the case hero as the next page opens, in browsers with cross-document view transitions, and a plain crossfade elsewhere
A Studio page with six portraits and a fourteen-week programme on a slider that changes the photograph, deliverables and timings stage by stage
A brief form whose chips and choices write the visitor's project back as one sentence beside the form
Self-hosted Geist and Geist Mono, preloaded hero images, reserved space for every image and lazy loading below the first screen

Perfect for

5 use cases

Branding agencies and identity studios showing systems in use across many surfaces
Design studios that want visitors to filter the work by sector and discipline
Packaging design studios with photographed packs, labels and bags
Signage and wayfinding practices with signs, maps and numbering in place
Creative agency portfolios with two or three deep case studies and a brief form

How it works

5 sections

The wall and the sentence

Every tile carries its sector and disciplines as data attributes, so adding a project is one list item in the HTML. The two blanks in the sentence are buttons that open listboxes; a choice re-sorts the wall with Flip while the page below lands once at its new height, and the choice is written to the URL hash. A last tile fills whatever the final row leaves free, at any width and any filter.

Case studies

Each case page has a ledger, a system grid, an In use split, notes, plates and an outcome band. The scope tags are real buttons: one press keeps that scope's tiles in full colour and greys the rest, a second press clears it. The left column of the split is CSS sticky, so it works without JavaScript; the script only updates the folio and caption as each frame passes.

Plain pages that still connect

All six pages are ordinary documents that share one stylesheet and one script. Supporting browsers crossfade between them, and the tile you clicked grows into the case photograph; the top and bottom bars hold still. Elsewhere the links simply load the next page.

Phones

Below 768 pixels the top links give way to a filled Menu button at the top right, carrying the page's folio. It drops a contents sheet from the top bar, every page listed with a dotted leader and page number, the current one filled in, and the sheet's Close button sits where Menu was. On Home and Work the bottom bar keeps the two blanks of the sentence to hand. Without JavaScript, Menu is a link to the page list in the footer.

Without JavaScript or motion

With scripting off or the CDN blocked, every tile shows, the sentence reads as plain words, the programme stages are listed in order and the form is an ordinary form. Under reduced motion the filter swaps instantly, the page crossfade and photo transition are off and smooth scrolling is not started.

Plugins ScrollTrigger, Flip

Difficulty Advanced

Smooth scroll Lenis integration

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (6 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Does this only suit a branding studio in Manchester?

No. The design is a dense wall of photographed work under a filter sentence, which suits any branding agency, design studio, packaging studio, signage and wayfinding practice or creative agency. Replace the photographs, rename the sectors and disciplines in the sentence, and rewrite the case studies. Sato Brennan, the lido and the print fair are a worked example, not a niche.

How do I add a project to the wall and the filter?

On the Work page, copy one piece inside a client group, point its image at your photograph, set --ar to its width divided by its height and list its sector and disciplines in the data attributes; the row reflows around it. To add a client, copy a whole client group and change its header, its two colours and its pieces. To show it on Home too, copy a tile into the wall and set its span. The filter and the counts pick everything up with no script changes.

Can I change the words in the filter sentence?

Yes. Each blank is a short list of options in the HTML, with a value and the words shown. Change them to your own sectors and services, keep an all option first, and use the same values in your tiles' data attributes. The sentence also appears in the bottom bar, so edit both copies, which share one state.

Were the client photographs taken for real projects?

No. The clients are fictional and every application, from the lido and print fair to the ferry, theatre, rowing club and children's charity, is a generated scene. Short wordmarks were generated in the scene; longer signs, posters and tickets were typeset onto blank surfaces afterwards so every word reads correctly. They show how the layout carries identity work; replace them with photographs of your own projects. Studio portraits and print-room shots are Pexels photographs, credited in the README.

How many case study pages can I have?

As many as you like. The two case pages share one structure: duplicate either file, swap the ledger, system tiles, In use frames, notes and figures, and set the client colour on the body. Link it from its wall tiles, its Work group and index row, and the footer page list (the phone Menu sheet is built from that list), and point the previous case's Next case link at it.

Does the Start a project form send anything?

Not yet. It is an unwired front end: it collects what the client is making, the services needed, a budget band, timing, name, email, organisation and a message, writes them back as a sentence and shows a thank-you in place. Point the form at Formspree, Netlify Forms or your CRM and remove the line in the script that stops the submission.

Paid template

Purchase to unlock the code.

Buying Branding Agency Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

Unzip and open index.html in a browser, or serve the folder with any static server (npx serve .).
The pages are plain HTML files: index.html (Home), work.html (the archive of all work, grouped by client or as an index), ancoats-lido.html and mayfield-print-fair.html (case studies), studio.html (people, programme, fees) and start-a-project.html (brief form).
Every page shares assets/style.css and assets/script.js. There is no build step.
Deploy the folder as it is to any static host.

Using It With Your Own Design

The work: Home's wall is a curated selection; each tile is one <li data-tile> in index.html. Replace its image and caption, set its size with style="--span:2;--rows:1" (columns and rows on the 8-column grid) and tag it with data-s (one sector) and data-d (space-separated disciplines). Work is the full archive, one <section class="client" data-group> per client (see The Work archive below).
The sentence: the two blanks are lists of options inside the sentence markup (.slot__opt with a data-value). Rename them to your own services and sectors, keep an all option first, and use the same values in your tiles. The sentence appears twice on Home and Work (the heading and the bottom bar); edit both.
Colour: the studio's own surfaces are only --ground, --paper, --ink and --ink-2. The client colours (--lido, --fair, --fenn, --tenter) fill figure tiles, case-page bands and scope highlights; rename them for your clients and add tone-<name> rules alongside the existing ones. On the Work page each client group sets its own two colours inline (style="--c1:#C8232C;--c2:#F3EFE6") for its colour strip, swatches and figure rule.
Type: Geist for everything and Geist Mono for tags, folios and counts, self-hosted in assets/fonts/. Swap the files, the @font-face rules and --font-body / --font-mono.
Case studies: duplicate a case page, then replace the ledger, system tiles, In use frames, notes, plates and figures. Set the body class (tone-lido) to your client's tone.

Pages and Configuration

Page	Sections	Hands-on piece
Home	Sentence and wall, selected cases, clients, brief strip	Sentence filter
Work	Sentence, the archive of eight clients, index view	Sentence filter, clients or index, index preview
Case study (two)	Ledger and hero, the system, in use, why it looks like this, plates, outcome, next case	Scope tags, sticky split
Studio	Statement and photograph, people, programme, fees, recognition	Fourteen-week programme slider
Start a project	Live brief sentence and form, what happens next	Brief builder

Every feature looks for its own markup and does nothing when it is missing, so a section or a page can be deleted without touching the script.

Navigation

The top bar is the same on every page: boxed buttons, with aria-current="page" on the current one (case pages underline Work instead). The fixed bottom bar shows the page folio and a Start a project button on desktop; on Home and Work the compact sentence replaces the folio once the heading has scrolled away.

On phones (below 768px) the top links give way to a filled Menu button at the top right of the bar, carrying the page's folio (02/05) as a contents page would. It drops a contents sheet from the top bar listing every page with a dotted leader and page number, the current one filled in and marked aria-current; the sheet's Close button sits exactly where Menu was. It closes on Escape, a tap outside or Close, keeps focus inside while open, returns focus to Menu and pauses smooth scrolling. The bottom bar stays for the sentence's two blanks on Home and Work, and for Start a project elsewhere. The sheet is built by the script from the footer's page list (#footer-pages), so that list is the one to edit when you add a page, along with the top bar. Without JavaScript, Menu is a link to that footer list.

The wall

[data-wall] is a CSS grid of 8 columns (6 below 1100px, 4 below 768px) whose row height follows the column width. Text tiles (.tile--text) and figure tiles (.tile--stat tone-<client>) take the same data-s / data-d tags, so they filter with the work. The last tile, [data-end], is placed by the script into whatever the final row leaves free, so the wall always finishes square; if the last row is full it stays hidden and the "See all the work" button below shows instead. [data-empty] is the message for a pairing with no work.

The choice is kept in the address as #<discipline>/<sector> (for example work.html#signage/civic), so a filtered view can be linked to. Links with data-carry-filter take the current choice with them.

The Work archive

Work is not the Home wall again. It lists every client as a group, newest first: a header that holds still beside the work on wide screens (number, name, one line, year, sector, scope tags, the two brand colours as swatches with their values, one figure and, for clients with a case study, a Read the case link), then that client's pieces in justified rows at their own proportions, each numbered (03.2) and captioned. Nothing is cropped to a grid cell.

Each piece is <li class="piece tile--photo" data-tile data-s data-d style="--ar:1.5">, where --ar is the photograph's width divided by its height. The rows are flexbox: every piece grows in proportion to --ar, so the pieces in a row share one height; --row-h on .archive sets the target height. The sentence filters pieces the same way as Home's wall, and a client with nothing left in the chosen pairing folds away, header and all. To add a client, copy a <section class="client" data-group> and change its colours, header and pieces.

The Clients / Index buttons swap the archive for an index of clients (.index__row), filtered by the same sentence. Each row's data-preview names the small image that follows the pointer over it; touch screens show no preview.

Case pages

Scope tags in the system head are <button data-scope="signage">; each system tile names its scope with data-scope-of. The tags in the ledger (data-scope-link) scroll to the system and select the same scope. The In use frames ([data-split-frame], with the caption in data-cap) update the folio and caption in the sticky left column as they pass. Footnote numbers link to their notes and back.

Studio programme

Each stage is an <li class="stage" data-from="6" data-to="9"> with its photograph, weeks, title and deliverables. The slider runs from week 1 to 14 and shows the stage covering that week; the buttons under it jump to the first week of each stage. Change the stage ranges and the slider's max together. Without JavaScript the stages are a plain ordered list.

Brief form

Chips and choices carry the words they add to the sentence in data-say; the sentence's blanks are [data-fill="what|need|when|budget"]. The form is a static front end: it validates, writes a thank-you in place and sends nothing. Point action at Formspree, Netlify Forms or your CRM and delete the preventDefault() in the submit handler in assets/script.js.

Page transitions

@view-transition { navigation: auto; } in the stylesheet crossfades between pages in supporting browsers. Images marked data-vt="<case page>" grow into that case's hero photograph (named case-hero) as it opens, and back again on Back. The top and bottom bars hold still. Other browsers load pages normally; reduced motion turns the transition off.

Palette

Token	Value	Role
`--ground`	`#F3F3F1`	Page ground
`--paper`	`#FFFFFF`	Text tiles, lists, form fields
`--ink`	`#141414`	Text, hairlines, active buttons
`--ink-2`	`#55554F`	Secondary text (7.0:1 on ground)
`--lido` / `--lido-2`	`#0E5E50` / `#F2643B`	Ancoats Lido tiles and band (white text on green)
`--fair` / `--fair-2`	`#FF4FA3` / `#FFE14D`	Mayfield Print Fair (ink text only)
`--fenn`	`#5C3A21`	Fenn
`--tenter`	`#1E2B48`	Tenter Yard (white text)

The Work archive also shows each client's two brand colours as swatches: Pomona Ferry signal red #C8232C and canal white #F3EFE6, Cornbrook Playhouse plum #5B1E46 and powder blue #A9CCE6, Hollins Children's Charity teal #11707D and marigold #F3A43A, Irwell Rowing Club cobalt #2445B5 and sand #E7D7B1. They are set inline on each group and never carry text.

Measured contrast for every pair is in the comment at the top of assets/style.css.

Images

Photographs are bundled in assets/img/ as optimised WebP derivatives in two or three widths each (the srcset picks the right one), cropped and resized from the masters listed in assets/img-manifest.json.

The client photographs are generated, not real projects, and the clients are fictional. Every application scene for the eight clients (Ancoats Lido, Mayfield Print Fair, Fenn, Tenter Yard, Pomona Ferry, Cornbrook Playhouse, Hollins Children's Charity and Irwell Rowing Club) was generated with Codex (gpt-6-luna) for this template; the masters are in assets/img-src/. Short wordmarks (LIDO, MPF, FENN, POMONA, CORNBROOK, IRWELL, hollins) were generated in the scene. Where a longer wordmark or a line of copy has to read exactly, the scene was generated with a blank surface (kept as *-blank.jpg) and the artwork was typeset in HTML and projected onto it: the Lido entrance fascia, the changing-rooms sign, season cards and tickets, the timetable poster, the guidelines spread, the pasted and flat poster series, the programme cover, the Tenter Yard hoarding and brochure, the Cornbrook canopy and the Pomona Ferry stop totem. Replace these with photographs of your own work.

Studio photographs are from Pexels, used under the Pexels licence:

File	Shows	Source
`studio-press-room`	A printmaker lifting a fresh print at the press	https://www.pexels.com/photo/a-woman-working-in-a-printing-house-9313701/
`studio-table`	Two designers sorting samples at a table	https://www.pexels.com/photo/man-and-woman-working-in-interior-design-office-6580554/
`stage-listen`	Two women reading printed spreads	https://www.pexels.com/photo/two-women-doing-their-paperwork-7681085/
`stage-wall`	Two designers marking up sheets on a wall	https://www.pexels.com/photo/a-man-and-a-woman-looking-at-the-printed-papers-posted-in-the-wall-6614821/
`stage-draw`	A designer holding a large blue print	https://www.pexels.com/photo/curly-woman-with-painting-in-studio-5641995/
`stage-proof`	A printer checking a proof by a letterpress	https://www.pexels.com/photo/man-working-in-carpentry-workshop-6620973/
`person-ciaran`	Portrait, yellow shirt	https://www.pexels.com/photo/man-wearing-eyeglasses-on-white-background-7562316/
`person-hannah`	Portrait, red jumper	https://www.pexels.com/photo/portrait-photo-of-woman-in-red-sweater-in-front-of-white-background-3771123/
`person-ama`	Portrait, white t-shirt	https://www.pexels.com/photo/a-woman-in-white-crew-neck-shirt-10159280/
`person-freya`	Portrait, black t-shirt	https://www.pexels.com/photo/woman-in-black-crew-neck-t-shirt-9558766/
`person-tariq`	Portrait in profile, black shirt	https://www.pexels.com/photo/bearded-man-in-black-collared-shirt-8372348/
`person-joel`	Portrait in profile, white top	https://www.pexels.com/photo/man-in-white-long-sleeve-shirt-on-white-background-10211577/

To use your own, replace a file with one of the same name and similar proportions in each width, and update its alt text and caption. The first wall tile and each case hero are preloaded in the page <head>; change those preloads if you replace them. If you work from this repository's tooling, edit the manifest and regenerate with bun scripts/build-template-assets.ts branding-studio-template --force.

Accessibility

The sentence blanks are buttons that open listboxes: arrow keys, Home, End, Enter and Escape work, focus returns to the blank, and the count is announced politely.
The phone Menu button has aria-expanded and aria-controls; the contents sheet it opens is a modal dialog with a focus trap, Escape and outside tap to close, and focus returned to Menu.
Scope tags and view toggles are buttons with aria-pressed; the programme slider is a native range input with a spoken week and stage.
Every photograph has alt text describing what it shows; hover captions repeat the alt and are hidden from assistive technology.
Reduced motion: the filter swaps instantly, the page transition and smooth scrolling are off.
Without JavaScript every page is a complete document: every tile and piece shows, the sentence reads as text, Menu links to the footer's page list, the programme is a list and the form is a plain form.

Dependencies

GSAP with ScrollTrigger on every page and Flip on Home and Work. 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>.
Geist and Geist Mono, self-hosted in assets/fonts/.

Fonts

Geist and Geist Mono are self-hosted as the Latin subsets Google Fonts serves, declared by the @font-face rules at the top of assets/style.css and preloaded on every page. Licence: SIL Open Font License 1.1, full text in assets/fonts/OFL.txt (Copyright 2024 The Geist Project Authors, https://github.com/vercel/geist-font).

Teardown

Each page is a plain document, so features run once on load. The page's GSAP work lives in one gsap.context() (exposed as window.gsapContext) inside one gsap.matchMedia(); switching reduced motion at runtime tears down listeners, ScrollTriggers and Lenis and rebuilds the right version. Nothing is reverted on unload, so a page restored from the back-forward cache comes back working; call window.gsapContext.revert() yourself if you embed the pages in an app. A host page's own window.lenis is never created over or destroyed.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.