Warm grey, wide lowercase type, Klein blue and a project index
A warm-grey editorial page with wide lowercase type, Klein blue and a project index for design and branding studios, architects, photographers and freelancers.
Switch devices, scroll the full page, or open the live demo. This is the exact layout, photos and sample text a new page starts with.
The headings are the demo's own sample text. Your brief, or the AI copy pass, replaces them; the structure stays.
we design products people keep.
6 of 38
three practices
berlin & london
14 weeks, typical
Studios with a strong body of work do not need to shout. A well-kept index of projects says more about taste and discipline than a hero video. Studio Index is warm grey with wide lowercase type and one Klein blue, organised around a numbered project index and a few candid sections about how the studio works.
It suits design and branding studios, product and web agencies, motion and creative-technology shops, freelance designers and developers, architecture and interior practices and photographers.
The hero states the studio’s purpose in lowercase, “we design products people keep”, with cities, founding year and team size. Selected work is a numbered index showing a selection of projects with client, what changed, discipline and year.
A client strip scrolls names. What we do describes three practices with deliverables and starting prices. The studio explains why only a few projects are taken each year. How a project runs sets out a typical timeline week by week.
A year after launch quotes clients looking back, questions answers what prospects ask on the first call, and start a project asks visitors to describe what is actually wrong in two paragraphs, read by a partner.
The invitation to explain the problem rather than fill in a brief filters for the kind of client the studio wants: people who can articulate what is not working and are open to being challenged.
Four schemes are included: Klein blue, Black, Vermilion and Moss. Headings can be Unbounded, Bricolage Grotesque or Epilogue. Only two photographs are used; the index carries the page, so project thumbnails can be added if you want them.
The index, practices and process are editable. Ask the AI to turn your project list into index entries.
Starting from the template costs no credits. For about 20 credits, the AI writes your copy into the design. Include who you work with, locations and team size, your project list, practices and starting prices, how many projects you take, your process, client reflections and how enquiries are handled.
This template makes the list of work the main event: numbered rows, each swapping one large preview on hover. Before editing, choose the projects and write each row the way it will appear, with the client name, a one-line description of what changed, the discipline and the year. The line should describe the result or the decision, such as “onboarding rebuilt around one screen”, not the deliverables.
Each project needs one strong preview image, ideally the same aspect ratio for all rows, so the swap feels steady. Decide how many projects to show; six from a larger archive, with the total noted, reads as selective. The services section needs each practice with its typical scope, starting price and duration. The studio section works best as a short statement of how you choose work and who does it, with the team size. The testimonial from a year after launch is persuasive because it is not written in the excitement of handover, so ask a past client for a line about what lasted.
Keep the lowercase typography consistent in the copy you write. Mixed capitals in headings break the calm, index-like tone that makes the layout feel considered.
A web development agency can add the stack to each row and replace brand services with build packages. Motion and creative-technology shops can use short silent video loops as previews. Architecture and interior practices can index projects by type and location with the area in square metres. Photographers and directors working with business clients can turn the rows into commissions with client and format, and list day rates in the services section.
Studio Index is quiet and editorial. A studio wanting bold type and case study numbers fits Product Design Studio, and a dark technical studio Digital Studio. Architecture practices selling rigour belong on Swiss Grid, and wedding photographers on Wedding Photographer.
See every studio layout on the agency and studio templates page.
Broadsheet EditorialCreative & studios · Playfair Display
Drop LaunchCreative & studios · Archivo
Wedding AtelierCreative & studios · Lora
Bold AgencyCreative & studios · Archivo
Digital StudioCreative & studios · Epilogue
Swiss GridProfessional services · Archivo
Starting from the theme costs no credits. Or describe the offer and the AI draws a new page in this style, usually in about two minutes.
