Free design studio website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/design-studio-website-template · Live demo: 8bsite.github.io/design-studio-website-template/ · MIT license

About this template

Onda is a design studio website template for a brand, product or AI studio: case studies, long-term clients, services, process, team, news and two offices on one page. It works just as well for a digital agency, a UX team or a web design agency.

A one-page site for an invented brand, product and AI studio with offices in two cities: work, long-term clients, services, process, team, news and contact. Black, white and one violet; every heading ends in a violet dot, and the giant full stop after "Hello" is a round photo that travels into the next heading, while the case studies slide on a track that bends into a rotating wheel.

Good for:

Design, brand or digital agencyProduct or UX studioCreative or marketing agency with case studiesConsultancy that shows clients, services and process on one page

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation.

How to use the design studio website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a studio or agency site for <your business: what you make, for whom, where you are, your clients and services, how to get in touch>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, client names, results, dates, addresses and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/design-studio-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Design studio website design and motion

Palette

#0d0c11 near-black bands and text#ffffff white bands, text on black#6c3cff violet dots, buttons, process ring, contact section#efeef4 pale cards for services and the form#aaa7b4 muted text on black#5d5a67 secondary text on white#1f1d26 dark base under photos

Fonts

Gabarito: extra bold, tightly tracked headings; Hello and Bye fill the width
Onest: body, labels, buttons and badges

Black, white and one violet. Every heading ends in a round violet dot, echoed by the round photo full stops after Hello and Bye and the dot in each pill button. Cards have large rounded corners, studio photos form a scattered collage, and form fields are bare underlines.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Fixed top bar: wordmark, section links, Start a project button; phone menu overlay
Hello
First screen: a one-word greeting whose full stop is a giant round photo (demo: "Hello")
Smooth scrolling runs page-wide; headings rise as their dot drops in. Scrolling away carries the round Hello photo down into the next heading's dot.
We make the things people come back to
Two-line statement of what the studio does, a lead paragraph and an index of links into the page
Tied to scroll, the two heading lines slide up, the dot pops in, and the lead darkens word by word.
Selected work
Case studies: five large cards on a horizontal track (demo: five client launches)
Pinned, five case cards slide sideways with photos panning inside them, then bend onto a curve as the section ends.
Never a one-off
Long-term clients: six cards on a wheel that turns with scroll (demo: years of partnership)
Pinned, six client cards ride the rim of a large wheel that swings into place and turns as you scroll.
What we do
Services: five cards that stack as you scroll, each with deliverable badges and a photo
Service cards stick and stack, each shrinking and darkening under the next; photos open from a circle as they appear.
How we work
Process: four steps beside a ring the scroll draws round (demo: Listen, Make, Measure, Again)
Tied to scroll, a violet arc draws round the sticky ring and each station dot pops as its step brightens.
Inside the studio
Team and careers: photo collage that deals out from a pile, with open roles
Tied to scroll, the collage photos start as a tilted pile in the centre and deal out to their places.
Ideas and news
News and articles: four stories beside a sticky photo frame
The photo frame stays put while stories pass; each brightens on arrival and its photo opens in a circle.
Fair questions
Questions and answers (native <details>)
Let's talk
Violet contact field: big "Let's talk", email, two offices with phones, and a form (placeholders)
As the violet section scrolls in, Let's talk grows from regular to extra bold, then its white dot drops in.
Footer
Closing greeting "Bye" with the round photo full stop, link columns, newsletter, copyright and the Design: 8B credit
Tied to scroll, Bye rises while its full stop grows from a dot into a large round photo.

What is inside

Files: index.html (135 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Gabarito and Onest from Google Fonts (SIL Open Font License)
Photos: 26 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Instagram, LinkedIn and Vimeo links in the footer lead to the networks' home pages now; point them to your studio's profiles, or remove them.
Case cards in work and stories in journal lead to nothing (they are not links) now; point them to your case-study and article pages, by wrapping each card or story in a link.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
The contact form and the newsletter field send nothing; they check the fields in the browser and show a status text.
During the hero to statement handoff the travelling round photo briefly crosses the statement lines before it lands; on phones, during the work to again handoff, the rising wheel briefly overlaps the right side of the again lead. Both clear before the transition ends.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this design studio website template

How is the round photo after Hello made?

It is a circular frame over a square photo, sized to the full stop, with a thin orbit ring and a violet moon. Swap the picture in the markup; the footer repeats it after Bye.

Do the forms send anything?

Not yet. The project form in the contact section and the footer newsletter field check input and show a message, but send nothing until connected to a form service such as Formspree or Netlify Forms.