Svet: a site for a branding studio

Fourth of six. The only case in this series where the site is the work: a studio is hired on how its own page looks.

Svet is a branding and launch studio. For that client the site is not a shop window but a specimen: a visitor does not read what the studio can do, they look at whether it can.

Hence the composition. `MediaHero` opens with a full-width frame. `SpecimenShowcase` and `TypeSpecimenMap` are two sections about type: the first shows the face as a specimen, the second lays the weights out on a plane. For a studio that is not decoration, it is evidence of craft.

`TypoScroll` gives a list at display size where a line lights up under the cursor and a frame appears beside it. `ParallaxSlideshow` runs the work as a strip. Both exist for one reason — so the page moves the way the studio's work moves.

A yellow you cannot write in

The primary here is an acid yellow, and it is a trap: as text on a light surface it cannot be read at all. In the template the heading colour and the brand colour are separate variables, so the yellow went into the heading highlight on dark, while the text itself is near-black on grey.

This is what the seven colour tokens are for, rather than one "accent". One colour for every role is the fastest way to get an unreadable button and a heading that only exists in the mockup.

What this build demonstrates

The display face is a narrow uppercase grotesque, the body face round and quiet. `LifeStories`, `PromoCards` and `PullQuotes` close the page: stories, offers, quotes. Not one section with figures: the studio has none, and there is nothing to invent.

02Keep reading

More from the blog

Two, never more. A longer strip turns the end of an article into a second index page, and the reader has already chosen once.