Website template

Halftone: a free website template for architecture studios

A bold one-page site for an architecture or design practice, in a single index.html file. The demo studio, TAKU in Copenhagen, and its projects are fictional.

Short answer: Halftone is free under the MIT license. Download halftone.zip, replace fk_your_access_key in index.html with your Formgong access key, and upload the folder with its img directory to any static host.

See it working

5.0 out of 5 from 1 rating

Rate it:

Halftone home page
Halftone: the first screen of the demo.

Open the live demo Download the HTML Source on GitHub

The demo form is real: it posts to a Formgong demo form. Demo messages are kept for seven days and are not emailed to anyone.

What is inside

  • An entrance: an orange loader with the page tilted small in the middle; at 100% it straightens and fills the screen.
  • A halftone hero: a photo behind a fine dot screen, the title split to the two edges, turning into a second frame as you scroll.
  • Projects that stack: four full-screen photos slide over each other, each with a white bar for the name, a line of text and a button.
  • Scroll scenes: huge words that a strip of photos rises over before the middle photo opens to the whole screen, then services, numbers that count up on orange, and a big wordmark in the footer.
  • A contact card with name, email and message over a photo. It shows thanks only when the server answers success: true.
  • Images: ten WebP files generated for this template with FLUX.1 [schnell] (Apache 2.0). Reduced motion turns every scroll effect off.

Questions

Can I change the orange?

Yes. Set --accent, and --accent-2 for the end of the hero title gradient, at the top of the styles in index.html.

Does the loader play every time?

No. It plays once per visit (per browser tab) and never for visitors who ask for reduced motion.

Sources

Checked on 08.10.2026 against these public pages: Halftone on GitHub, MIT License (Open Source Initiative).

← Formgong