Design Agency Website Template

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

A six-page design agency site where every project owns a full-screen colour and one giant cropped mark, and scrolling floods the page from one project's world into the next. Visitors look through each mark at the photographed work, filter projects by discipline and take a client's mark apart. Worked example: an identity and motion studio in Glasgow.

ScrollTriggerFlip Lenis advanced

13 more details

pinningsnapclip-pathmask-revealsvg-animationscroll-linked-colorflip-layoutview-transitionskeyboard-navigationscroll-revealstaggerprogressive-enhancement 4 colour palettes

Colour

Released 24 October 2026

About this template

A six-page site for a design agency, branding studio or any practice whose work is its sales pitch. The interface has no colour of its own: it is grey and ink, and every saturated colour on the page belongs to a project. Each project carries one colour and one mark, and the home page is nothing but those six worlds, one screen each, with the mark cropped so hard it reads as shape before letter.

Read the full template overview

Scrolling the home page pins the screen and runs the projects in sequence: the current mark turns away, the next mark swings in and its colour floods out from it until it fills the screen. Every world has a short caption with capability pills and a button that shows the work: the project's photograph appears inside the mark's own shape, and on a mouse a soft lens follows the pointer to look through it. The colour and mark carry into the case study as the page changes, where browsers support it.

The two case studies open on a sentence headline above a client, year and role ledger, then run full-bleed photography, long-form prose, a construction plate where a slider takes the client's mark apart and puts it back, a sideways strip of photographs and the next project's colour. One of them compares the building before and after through an arch-shaped window. The Work page filters six projects by discipline and opens the other four as composed project sheets in their own colour; Studio lights up who works on each discipline, and on Contact the enquiry recolours the page to the project that best shows the chosen discipline.

To make it yours, set six project colours and their readable inks in the stylesheet, swap the six mark paths for your own clients' marks, replace the photographs and edit the copy. Four colour-and-type schemes are included.

Design Agency - website template preview

What's included

13 items

Six plain pages (home, work, two case studies, studio, contact) sharing one stylesheet and one script, with a cross-page view transition that carries a project's colour and mark into its case study where supported
Colour-per-project system: each project sets one field colour and one readable ink, and its home screen, work tile, sheet, case hero, next-project band and menu band all follow it
Home run of six full-screen colour worlds, pinned and snapped one project at a time; each new colour floods out from the centre of its own mark as the old mark turns away
The lens: each mark carries a photograph of the project clipped to the mark's own shape, opened with a button or explored with a soft pointer lens
Case studies in the agency register: sentence headline, client, year, role, team and duration ledger, full-bleed photography, prose with a pull figure, scope and related projects, previous and next project
Mark construction plate: a slider takes the client's mark apart into its pieces and construction guides and settles on the nearest of three authored states when released
Before and after through an arch: a slider opens the restored building over the derelict one in an arch-shaped window
Work page with discipline filter pills, a Flip reflow, a list view, and four projects shown as composed sheets in their own colour that open from a link such as work.html#ardgour and close with Escape or Back
Studio page whose discipline filter lights up who works on it, recolouring their portrait frames to that discipline's project
Contact page where choosing what the enquiry is for recolours the page and swaps the mark; a static enquiry form with validation and a status message
Phone navigation as a sheet of six colour bands, each carrying a cropped mark, with focus handling, Escape to close and the current page marked
Four colour-and-type schemes (Host Grotesk, Hedvig Letters Serif, Bowlby One, Sora), all self-hosted latin subsets
Readable without JavaScript: the worlds stack as six full screens, the before and after pair sits side by side and every page is reachable from a link row

Perfect for

5 use cases

Design agencies and branding studios showing case studies
Motion and animation studios, with the marks replaced by stills
Architecture and interior practices, one colour per building
Product design studios and industrial designers
Illustrators and photographers who want a bold portfolio

How it works

5 sections

Colour per project

Every project surface carries a data-project attribute, and one rule per project sets its field colour and its readable ink from tokens at the top of the stylesheet. Change a project's colour once and its home screen, tile, sheet, case hero and menu band all follow. Each scheme restates the six colours and inks, because no single ink stays readable on every saturated ground.

The home run

The six worlds are ordinary full-screen sections in the markup. With motion allowed, the script stacks them and pins the stack for one scroll distance per project, snapping to each world in the direction of travel. Each world is revealed by a growing circle centred on its own mark. Keyboard focus moving into a world's caption scrolls that world into place, and the small marks under the run jump straight to any project.

Looking through the mark

Each mark is an SVG path on a 1000-unit square, used twice: once as ink and once as the clip for that project's photograph. A soft circle in the photograph's mask follows the pointer or grows to fill the mark, and the photograph is sized to the visible screen so it reads as one whole frame seen through the shape.

Pages, sheets and navigation

Pages are standalone documents with ordinary links, so any script added to one page runs on load. The project sheets are native dialogs: opening one adds its name to the address, so a link to work.html#film opens it and the browser's Back button closes it. The phone menu stops page scrolling while it is open and returns focus to its button.

Fallbacks

Reveals are hidden only under a class set before first paint and removed if the animation library fails to load. Reduced motion keeps every feature with instant changes and lays the worlds out as stacked screens, and the cross-page transition is switched off.

Plugins ScrollTrigger, Flip

Difficulty Advanced

Smooth scroll Lenis integration

Colour palettes 4 ready-made palettes, each measured for AA contrast. Switch with one attribute, or copy the values you want into :root. Try them in the preview above.

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 an identity studio with six projects?

No. The design is one full-screen colour and one cropped graphic per project, so it suits a branding agency, a motion studio, an architecture practice or a product designer. Change the six project colours and inks in the stylesheet, replace each mark path with your client's mark or a cropped detail of the work, swap the photographs and rewrite the captions. Worlds can be added or removed; the run counts them.

How do I use my own clients' logos as the giant marks?

Each mark is a single SVG path drawn on a 1000 by 1000 square. Export a client's logo as one compound path at that size, paste it into the project's mark in the home page, the work tile, the case hero and the next-project band, and set the crop for each with the --mx, --my and --ms variables beside it. Phones take their own crop through the matching -s variables.

How do I add a third case study?

Copy clyde-ferries.html, rename it after the project and replace the hero headline, ledger, photographs and prose. Point that project's world link and work tile at the new file instead of opening a sheet, and update the previous and next bands on the neighbouring case studies. The construction plate needs the new mark's path and three piece rectangles, or can be deleted.

Is the enquiry form connected to anything?

No. It is a static front end that collects a name, email, organisation, discipline, budget band, timeline and a message, checks that a name and email are present and shows a thank-you message. To receive enquiries, give the form an action and method for Formspree, Netlify Forms or your CRM's form endpoint; once it has an action the script lets the browser submit it normally.

Can I keep the site in one colour instead of six?

You can, but the design depends on the colour changing between projects, so the home run would lose its point. A calmer option is to keep six colours from one family, such as the Harbour scheme's sea and industrial colours, or to set each project's colour from its client's own palette. Check every colour against its ink: the stylesheet comment lists the pairs that pass.

What are the photographs, and can I use them on a client site?

They are optimised derivatives of Pexels photographs plus generated images of the fictional projects: the ferry, signs, leaflet, restored pool hall, whisky labels, posters and the nine team portraits. The README credits every source. Replace them with your own work before launch; the generated images show invented brands and are there to demonstrate the layout.

Paid template

Purchase to unlock the code.

Buying Design Agency 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 the folder and open index.html in a browser, or serve the folder with any static server (npx serve .).
Every page is a plain HTML file sharing assets/style.css and assets/script.js. There is no build step.
Edit copy directly in the HTML. Colours, inks and type are tokens at the top of assets/style.css.

Using It With Your Own Design

The design is a system of three things, and each is one edit:

Six project colours and their inks. --p-<project> is the field colour and --p-<project>-ink the colour of the mark and every word set on that field. Change both together and check the pair reaches 4.5:1 (the stylesheet comment lists the pairs that pass).
Six marks. Each is one SVG path on a 1000 by 1000 square. Replace the d attribute with your client's mark exported as a single compound path at that size.
Grey chrome. Navigation, page grounds and long text use --chrome and --ink only, so the projects stay the only colour on the page.

Rename a project by changing its data-project value everywhere it appears and the matching rule near the top of the stylesheet.

Pages and Configuration

Page	What it holds
`index.html`	The home run of six project worlds, a studio statement with a mark index, clients and recognition
`work.html`	All six projects, a discipline filter and list view, and four project sheets
`clyde-ferries.html`	Full case study with mark construction and a photograph strip
`tollcross-baths.html`	Full case study with the before and after arch
`studio.html`	Studio, capabilities, nine people with a discipline filter, and process
`contact.html`	Enquiry hero that recolours, enquiry form, and how to find the studio

Navigation

The bar is one grey slab holding the name and links, fixed at the top of every page. Below 760px the links are replaced by a Menu button that opens #menu-sheet, a full-screen list of colour bands (one per page, each with a cropped mark). Mark the current page on both lists with aria-current="page". Without JavaScript the links stay visible as a sideways scrolling row.

Marks and crops

A mark instance looks like this:

Code snippet omitted: it ships with the download.

--mx and --my place the mark's top-left corner as a percentage of its frame, --ms sets its size. The -s versions apply below 760px. Crop hard: the mark should leave at least two edges, and the caption area of the frame should stay clear of its ink.

The home run (`[data-worlds]`)

Each <section class="world" data-world data-project="..."> is one project: a mark carrying a photograph (data-mark) and a caption. Add or remove sections freely; the script counts them. With motion allowed the script stacks the worlds, pins them for one scroll distance per world and snaps to each in the direction of travel. The small marks below the run (data-world-jump="n") jump to world n. With reduced motion or without JavaScript the worlds are six ordinary full-screen sections.

The lens (`[data-mark]`)

A mark with data-mark carries the project photograph in an SVG <image data-href="...">, clipped to the mark's own path. The photograph loads on first use. The Show the work button (data-lens-toggle) fills the mark with it; on a mouse a soft lens follows the pointer. On the Work page a keyboard-focused tile opens its photograph too. To change the photograph, change data-href.

Work filter and sheets

Each tile and list row carries data-tags="Identity|Wayfinding". Filter buttons use data-filter with the same names. A project without its own case study opens a <dialog class="sheet" data-sheet="slug"> from a button with data-sheet-open="slug"; work.html#slug opens that sheet on load, and Escape, the Close button, the backdrop or Back close it.

Mark construction (`[data-construct]`)

Each piece is the finished mark clipped to a rectangle, with data-dx, data-dy and data-rot giving how far it sits from home when the slider is at Parts. [data-guides] holds dashed construction lines and labels that peak at the middle state. Releasing the slider settles on Parts, Guides or Finished.

Before and after (`[data-compare]`)

Two stacked images; the slider opens the second through an arch-shaped clip-path. Without JavaScript they sit side by side. Both photographs need the same viewpoint.

Studio filter (`[data-caps-filter]`)

Each person lists their disciplines in data-caps. Each filter button names a discipline, the project colour to light it with (data-cap-project) and that project's mark path (data-mark-d).

Contact recolour (`[data-choice]`)

Each discipline radio carries data-project-choice; choosing it sets the field's data-project and shows the matching data-contact-mark.

Palettes

Four colour-and-type schemes ship in assets/style.css. Set one with data-palette on <html>, or copy its values into :root and delete the other blocks. Each scheme restates the chrome, both mark inks and all six project colours with their inks, measured to 4.5:1.

Scheme	`data-palette`	Chrome	Display face
Clyde	(default)	Grey `#E6E4E0`, ink `#18120F`	Host Grotesk 700
Night shift	`night`	Near-black `#121111`, ink `#EDE8E1`	Hedvig Letters Serif 400
Riso	`riso`	Paper `#F4F1EA`, ink `#1B1A1F`	Bowlby One 400
Harbour	`harbour`	Cool grey `#D9DCDD`, ink `#101417`	Sora 600

Images

The photographs are bundled in assets/img/ as optimised WebP derivatives (about 2.6 MB in total), cropped and resized from the sources listed in assets/img-manifest.json.

Stock photographs, from Pexels under the Pexels licence:

File	Shows	Source
`lens-tollcross.webp`, `baths-swim.webp`	Swimmer in a blue cap beside the lane rope	https://www.pexels.com/photo/3775158/
`lens-ardgour.webp`	Copper pot stills in a glazed stillhouse	https://www.pexels.com/photo/34635802/
`lens-film.webp`	One person among rows of red cinema seats	https://www.pexels.com/photo/7991297/
`lens-marr.webp`	Silver track bike against a red wall	https://www.pexels.com/photo/28216172/
`lens-stromness.webp`	Potter at a sunlit worktable	https://www.pexels.com/photo/37827259/
`clyde-route.webp`	Aerial of a boat on the Firth of Clyde	https://www.pexels.com/photo/7519087/
`clyde-deck.webp`	Passengers on an open ferry deck	https://www.pexels.com/photo/30942322/
`baths-before.webp`	Derelict indoor pool hall	https://www.pexels.com/photo/18889091/
`baths-stretch.webp`	Swimmer stretching at the poolside	https://www.pexels.com/photo/6012208/
`sheet-marr.webp`	Bicycle frame-building workshop	https://www.pexels.com/photo/31628832/
`sheet-stromness.webp`	Two women in a pottery shop	https://www.pexels.com/photo/9304564/
`studio-bakery.webp`, `studio-bakery-sm.webp`	White-brick studio with factory windows	https://www.pexels.com/photo/6045039/
`studio-type.webp`	Designers sorting type cards and swatches	https://www.pexels.com/photo/8546590/
`studio-review.webp`	Hands laying out printed photographs	https://www.pexels.com/photo/36765874/
`contact-crane.webp`, `contact-crane-sm.webp`	The Finnieston Crane at sunset	https://www.pexels.com/photo/19881642/

Generated images of the fictional projects: lens-clyde.webp, clyde-livery.webp and clyde-livery-sm.webp (the ferry), clyde-pier.webp (pier sign), clyde-leaflet.webp (timetable leaflet), baths-after.webp (the restored hall, derived from the before photograph), baths-sign.webp (tiled sign), sheet-ardgour.webp (whisky labels), sheet-film.webp (poster wall) and portrait-1.webp to portrait-9.webp (the team). They show invented brands and people; replace them with your own work and team before launch.

To use your own, replace a file with one of the same name and similar proportions and update its alt text and caption. The phone versions (-sm) are separate crops; replace both. If you work from this repository's tooling, edit the manifest and regenerate with bun scripts/build-template-assets.ts design-agency-template --force.

Accessibility

Every page has a skip link, one h1, and landmarks; marks are decorative (aria-hidden) and each world's photograph is described in hidden text beside its toggle.
All text on a project colour uses that project's ink at full opacity, measured to 4.5:1 in every scheme.
The home run is reachable by keyboard: focusing a world's link brings that world on screen. Filters, toggles and sliders are native buttons, radios and range inputs with aria-pressed or value text.
The phone menu and the project sheets move focus in, close with Escape and return focus to what opened them.
Reduced motion keeps every feature with instant changes and stacks the home worlds; without JavaScript every page and project is still readable and reachable.

Dependencies

GSAP 3.15.0 core and ScrollTrigger on every page, Flip on work.html only, loaded from jsDelivr. The template needs GSAP 3.12+.
Lenis 1.3.17 from unpkg, optional. Remove its script tag, or add data-smooth="off" to <html>, to use native scrolling.

Fonts

Self-hosted latin subsets in assets/fonts/ under the SIL Open Font Licence (OFL.txt): Host Grotesk (variable 400 to 700), Hedvig Letters Serif, Bowlby One and Sora 600. Only Host Grotesk is preloaded; the others load only when their scheme is in use.

Teardown

Everything the script creates lives in one gsap.context, exposed as window.gsapContext. Calling window.gsapContext.revert() kills every tween and ScrollTrigger, unpins the home run, removes the script's listeners and destroys the Lenis instance it created.

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