Raster

A Swiss Design architecture studio site.

Raster is a site for an architecture practice, in the Swiss Design style (the International Typographic Style): paper, ink and one cobalt blue, a single neo-grotesk in regular and medium only, a strict 12-column grid with deliberate asymmetry, caption rows under every image and hairline rules that show the grid rows. The sample studio, Kanten in Bergen, and every project, person, place and quote are invented sample content.

For: Architecture studio
Built with: HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
Pages: 3 designed pages
Themes: Light and dark, following the system, with a switch

Draft listing: this template is finished but still in review before it goes on sale.

Screens from the template

Raster home page, light theme, at 1440 pixels wide — Home

Raster home page, dark theme, at 1440 pixels wide — Home, dark theme

Raster on a phone, 390 pixels wide — Home on a phone

Raster: 404 page, dark theme — 404 page, dark theme

The 3D moment

A building section that draws itself line by line as you scroll, then the low sun's light swings in through its high window.

What you get

Straight from the template's README, the same file you will find in the repository.

Home (index.html): a stair-stepped uppercase headline beside a full-height facade photo with its caption row, a studio paragraph and a meta column; six projects placed asymmetrically on the grid; a position statement; the process block with a building section that draws itself and four numbered steps; a current-work table with phase bars; a cobalt closing band with contact details.
Project (project.html): Fjordhus, with a facts row, a wide plate, the brief set in two columns, a photo pair with a client quote, a particulars table and a link on.
404 (404.html).
Light and dark themes (follows the system, with a toggle that remembers the choice), phone to desktop.

Pages and stack

Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.

Stack

HTML
CSS
ES modules
Motion 14.6.0
anime.js 4.5.0 (no build step)

The licence, in short

One purchase covers every site you build. Read the whole licence

You can

Build as many websites and web apps with it as you like, for yourself or for clients.
Change anything: code, design, copy, colours and layout.
Charge clients for the work and hand them the finished site with its source code.

You cannot

Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.