# Design Studio Template

> An editorial website for design agencies, creative portfolios, architecture studios, publishers and product consultancies. FORME pairs bold typography with interactive identity artwork and expandable project stories.

Canonical: https://gsapvault.com/templates/design-studio-template
Live demo: https://gsapvault.com/demos/design-studio-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, stagger, interactive-artwork |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Warm paper, confident typography and expressive brand artwork give this design studio website a clear point of view. FORME is the worked example: an independent London practice presenting three considered identity projects.

Visitors drag between two Odd Hours cover editions, turn its graphic mark, open a journal spread and explore individual project stories without leaving the page. A quiet studio section, clear capabilities and a useful email brief bring the portfolio into a complete business website.

Replace the names, project material and contact address to adapt it for your own studio, agency or consultancy. The journal and coffee artwork are editable HTML and CSS; the furniture photograph is included as an optimised local image. No image subscription or build step is required.

## Features

- Reversible scroll-linked journal, cover and studio typography scenes
- Draggable journal cover with edition buttons and a keyboard-operable mark control
- Interactive journal spread and animated, reversible project disclosures
- Photographic furniture project with staggered reveal and an interactive detail view
- Scroll-driven coffee packaging and responsive navigation, buttons and service links
- Three identity projects with expandable case studies and additional artwork
- Responsive studio, capabilities, process and contact sections
- Email brief composer with a direct email alternative
- Readable native project details with JavaScript disabled
- Reduced-motion layouts and owned animation cleanup
- Contact capsules with expanding colour, rotating arrows and press feedback

## Use Cases

- Design agencies presenting identity and digital work
- Creative portfolios that need room for project context
- Architecture studios and product consultancies sharing a considered process
- Independent publishers showcasing a recognisable editorial system

## Questions about this template

### What kinds of businesses can use the FORME design?

The editorial layout suits design agencies, creative portfolios, architecture studios, independent publishers and product consultancies. FORME is a fictional worked example. Its three project stories, capabilities and working process can be replaced with your own without changing the overall page structure.

### Can I replace the Odd Hours cover and its edition controls?

Yes. Both cover editions are editable artwork built from local HTML and CSS. Change the cover title, captions and colours, or replace the entire artwork with your own project image. The edition controls and mark slider are optional and can be removed together with their behaviour hooks.

### How much project detail is included?

Each of the three projects has an introduction, an expandable creative story, a scope list and additional brand artwork. The project details use native disclosure controls, so visitors can read them without a separate page load. Duplicate or remove an entire project to suit your portfolio.

### Does the enquiry form send messages to the studio?

The contact area is a static front end that collects a name, email address, project type and short message. Its button prepares a draft in the visitor’s email application; it does not send or store anything itself. Replace the example email address, or connect the fields to Formspree, Netlify Forms or your own CRM.

### Are the brand graphics included in the download?

The Odd Hours editorial pieces and Common Ground coffee applications are editable HTML and CSS. Ordinary Objects includes a locally bundled, graded furniture photograph with credits in the README, plus editable catalogue artwork. Replace these fictional project examples with your own work while retaining the captions, detail viewer and case-study structure.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### A cover you can explore

The journal spread opens as visitors scroll and closes as they scroll back; its slider lets them take control at any point. The opening cover tilts as it leaves view, and visitors can drag between its two editions or rotate the graphic mark.

### Projects with room for context

Three selected projects pair distinctive brand applications with concise introductions. Expandable case studies add the brief, creative direction, scope and a second piece of work directly beside the portfolio.

### A complete studio story

Capabilities and a three-stage working process explain what the studio does and how a collaboration feels. The final enquiry area prepares an email draft, allowing a visitor to review the message before sending it from their own email app.

### A useful static foundation

Project details remain native document controls, and the content stays readable when motion is reduced or animation libraries are unavailable. The page adapts from spacious desktop compositions to a single-column mobile portfolio.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

1. Unzip the download and keep `index.html` beside the `assets` folder.
2. Open `index.html` in a browser, or upload the folder to your static host.
3. Replace the FORME name, fictional projects and `hello@forme.example` address before publishing.

No build process is required. Google Fonts and the two animation scripts need an internet connection; native content and project details remain usable if the animation CDN is unavailable.

### Using It With Your Own Design

The main sections are `#home`, `#work`, `#studio`, `#approach` and `#contact`. Any section can be removed; remove the navigation links pointing to it too. The journal and coffee artwork are editable HTML/CSS; the furniture project uses a bundled photograph. You can replace an `.artwork` block with your own image while retaining its project caption and native `<details>` story.

Keep the synchronous `.has-js` head boot before the stylesheet when using the entry animations. The script removes the reveal gate if GSAP is unavailable. The reveal targets use `data-hero-fade` and `data-reveal`; use these sparingly for new content.

### Options

| Hook | Purpose | Change |
| --- | --- | --- |
| `data-cover` | Interactive journal cover | Edit its title and default artwork in HTML |
| `data-edition-button` | Edition choices | `one` and `two`; captions live in `applyEdition` |
| `data-mark-range` | Turn the cover mark | Native range bounds in HTML |
| `data-case` | Expandable project story | Duplicate or remove a whole project |
| `data-enquiry` | Email draft composer | Change field options and direct email destination |
| `data-reveal` | Small section heading entrance | Add to suitable headings or remove |

#### Cover artwork

Odd Hours has two cover editions. Edit the copy in `applyEdition` alongside the default cover markup, and set each edition's material in `.cover[data-edition]`. The range affects only the decorative mark. Remove the complete cover controls to present a static poster; the artwork still reads as a finished composition.

#### Handling the journal

Drag the hero cover horizontally to change its edition; the numbered buttons provide the same choice by keyboard and touch. Vertical phone gestures remain page scrolling. Scroll position opens the first project's printed spread and reverses it on the way back. The `data-journal-range` input takes over the pose until the scene is left, with native Home, End and arrow-key support. Reduced motion keeps these controls immediate. Remove the complete `data-journal-control` label for static artwork.

#### Project stories

Each project contains an artwork block, title and discipline caption, and a native `details` element. Its `summary` remains keyboard operable without JavaScript. With motion enabled, opening and closing animate their height, including an immediate reversal before the transition finishes. The detail contains a creative story, definition list and second artwork. The fictional client graphics are included for adaptation; they are not claims of commissioned work.

#### Furniture photography and detail view

`assets/img/ordinary-chair.webp` is the bundled 1000 × 1120 graded image. Replace it with your own photograph and update its alt text and dimensions in `index.html`. The image uses an object position of 50% 100%; check the complete chair at phone width after changing it. For repository regeneration, edit `assets/img-manifest.json` and run `bun scripts/build-template-assets.ts design-studio-template`.

The `data-photo-inspect` button switches between the whole image and a closer view. Mouse movement explores the detail; touch and keyboard users toggle the same enlarged centre view with the button. The five decorative shutters reveal on scroll and are removed from the experience when motion is reduced or JavaScript is unavailable. No WebGL dependency is required.

#### Scroll scenes and contact actions

The hero cover's `data-cover-scroll` wrapper tilts and lifts as it exits, independently of the cover's edition drag. The two `data-studio-statement` lines move into alignment; the studio symbol rotates into place. Each uses a reversible scroll-linked timeline with no pinning. Remove the relevant hook or element to remove a scene. Reduced motion leaves the final static composition and manual journal control.

The contact capsules use `data-contact-cta` for their spreading accent, arrow turn and press feedback. The large contact link targets `#enquiry`; the form button still prepares a local email draft and does not send or save a submission. Keyboard focus receives the same colour and arrow response as hover.

#### Supporting responses

The coffee applications separate as they enter the viewport. Navigation underlines, action arrows and linked capability rows respond to hover and keyboard focus. Capability links lead to the contact brief. All motion belongs to the template context and respects the motion preference.

#### Enquiry composer

The form collects a name, email, project type and message, then opens an email draft addressed to the `.email-link` destination. Nothing is transmitted or stored by this page. Replace `hello@forme.example`, the greeting and the sample copy. Visitors without JavaScript can use the native email form action or the direct email link.

For server submissions, replace the draft handler with your own endpoint or connect Formspree, Netlify Forms or a CRM. Update the visible button, status and disclosure to accurately describe the new behaviour.

### Palette

`assets/style.css` starts with semantic tokens for paper, ink, muted text, orange cover stock, pale olive and the secondary ground. Each has a matching RGB triple for translucent rules. Keep dark ink over the orange and olive materials; the orange is not intended for small text on paper.

Instrument Sans carries the studio interface, while Georgia belongs to the fictional journal identity. Replace both typography roles to change the studio and client separately. The font stylesheet uses Google Fonts with `display=swap`, not a Vault-hosted font path.

### Accessibility

- Native links, form controls, range and project disclosure controls support keyboard and touch.
- Visible focus, a skip link and labelled artwork are included.
- Reduced-motion visitors receive immediate cover changes and a static, readable page.
- With JavaScript disabled, all content and project disclosures remain available; optional cover controls are hidden; the form retains its native email action and direct email remains available.
- Blocked animation scripts remove the reveal gate and leave the cover controls functional without motion.
- The page has no scroll pins or automatic looping animation.

### Dependencies

- GSAP 3.15.0 and ScrollTrigger, loaded from CDN. Compatibility floor: GSAP 3.12+.
- Instrument Sans from Google Fonts; system and Georgia fallbacks remain available.
- No Lenis, three.js, framework or buyer build step.

### Teardown

Call `window.gsapContext.revert()` when removing this template inside a client-side application. It reverts its media contexts and ScrollTriggers, removes owned listeners and reveal gates, and preserves unrelated page animations. Do not replace it with a global ScrollTrigger kill.

### Assets and credits

The fictional Odd Hours and Common Ground graphics, and the Ordinary Objects catalogue typography, are local HTML/CSS compositions created for this template. The chair photo is by iJoxi Studios: https://www.pexels.com/photo/a-brown-wooden-chair-12965306/ (Pexels licence: https://www.pexels.com/license/). It illustrates a fictional portfolio project; no photographer endorsement or commissioned client work is implied. The bundled WebP is cropped and graded for this template. Instrument Sans is served by Google Fonts; follow its font licence if self-hosting it. FORME and all client content are worked examples: replace names, dates and contact details for your business.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Design Studio Template](https://gsapvault.com/templates/design-studio-template)
- [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt