Freeframe
Business8 pages · 4 downloads · Free

Studio

A minimal, Swiss-style website for a small design studio, with a filterable work index, case studies and a brief estimator.

Stack
v1.0.1 changelog
DocsLive demo Download .zip152 KB

About this template

Studio is a complete website for Raster, a fictional five-person design studio in Zürich working across identity, digital product, editorial and wayfinding. It is built on a strict 12-column grid with one typeface family, a monochrome palette and a single red accent, and pairs restrained typography with drawn project artwork: a work index with grid and list views, data-driven case studies, an indicative brief estimator and a five-step project enquiry.

Features

  • Work index with discipline filters, year sort, a live count and shareable ?discipline= and ?sort= URLs
  • Grid and list views (remembered on the device) with a pointer-following, keyboard-accessible preview in list view
  • Nine data-driven case studies at project.html?id= with overview, challenge, approach, results, quote and previous/next links
  • Generated SVG case study artwork in each project's palette: identity boards, posters, signage, app screens and book spreads
  • Brief estimator with scope, scale and timeline that shows an indicative CHF budget and duration, saved in localStorage
  • Five-step project enquiry with inline validation, a link field, a review step, prefill from the estimator and a success state
  • Journal with topic filters, ?tag= URLs and expandable notes that open from a link
  • Live Zürich clock, studio open/closed note, copy-to-clipboard email and a 12-column grid overlay toggle
  • Headline reveals, count-up numbers, a process timeline that fills in and scroll reveals, all off for reduced motion
  • Accessible mobile menu, skip link, visible focus styles, back-to-top button, SEO and Open Graph tags

Pages included

Quick start

unzip studio.zip && cd studioopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Studio documentation →

Changelog

  1. v1.0.1

    Fixed

    • The availability ("From Feb 2027", "Booking projects from February 2027"), the job start dates and the internship deadline are now rolling months from today, so they never go stale.

  2. v1.0.0

    Added

    • Eight pages: home, work index, case study, services, studio, journal, contact and a 404 page.
    • Work index with discipline filters, a year sort, a live count, shareable ?discipline= / ?sort= URLs and grid/list views remembered in localStorage, with a pointer-following and keyboard-accessible preview in list view.
    • Nine case studies rendered from data at project.html?id=, with generated SVG artwork in each project's palette and previous/next navigation.
    • Brief estimator (scope, scale, timeline) with an indicative CHF budget, duration and breakdown, saved in localStorage (validated on load) and linked to the enquiry form.
    • Five-step project enquiry with inline validation, a review step, prefill from the estimator and a success state.
    • Journal with topic filters, ?tag= URLs and expandable notes; newsletter sign-up form.
    • Live Zürich clock, studio open/closed note, copy-email button, 12-column grid overlay, headline and scroll reveals, count-up numbers, an accessible mobile menu and a back-to-top button.
    • SVG project covers, floor plan, favicon and a PNG social image (SVG source included). Full documentation in DOCS.md.

More templates