Raster

A Swiss design studio site.

Raster is a website for a design agency, in the Swiss Design style: paper white, black hairlines, one grotesk (Host Grotesk) from 400 to 800, a strict 12-column grid held with empty columns, captions and index numbers on everything, and one signal yellow used only as flat fields (a full stop, a bar, a row highlight, the contact band). The sample studio, Kontur in Basel, its clients, people, dates and projects are invented sample content.

For: Design agency
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

Raster: case study page — Case study page

Raster: poster wipe page — Poster wipe page

The 3D moment

The hero poster changes by grid column: the next one rises in six column strips, left to right, 70 ms apart, driven by an 'On the wall now' index, with Prev, Next and Pause.

What you get

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

Home (index.html): the lowercase wordmark across seven columns with a yellow square for its full stop; an "On the wall now" index of four posters beside the poster itself, which changes column by column; the studio statement and a meta list; six projects on an asymmetric grid, each with a caption row; a ruled disciplines table with weeks; a week-by-week process chart with tabs for Identity, Signage and Book; a statement with an outline word running under it; the studio with a photo and a numbered list of nine people; a yellow contact band with a brief form.
Case study (work.html): title, lead, meta table, the four-poster set with captions, brief, idea, system and a specification table.
404 (404.html): a full-width 404 with the yellow full stop and four ways back.
Form states: missing fields named in one line, invalid email, sending, sent. Visible focus everywhere; the tabs work with arrow keys; the poster carousel has Prev, Next and Pause.
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.