Digital brand book

The design system behind this website — colour, typography and components in one overview.

Design system · "Petrol Atelier"

Colour

The palette is based on the house style of Varzi Home Architect: deep petrol as the core colour, gold as the accent and warm paper as the document surface.

Petrol 500#062e3c

Petrol 700#084053

Gold 400#d9b844

Paper#f6f2ea

Ink 900#0b1b23

Mist#ece5d8

Typography

Marcellus & Source Sans Pro

Marcellus (Trajan-inspired) speaks for headings and figures; Source Sans Pro does the running work.

Display 1 · MarcellusAa Worldly experience

Heading 2 · MarcellusFor indoor & outdoor

Lede · Source Sans 400An eye for detail — in every design, from sketch to delivery.

Body · Source Sans 400Style comes and goes, good design is a language, not a style.

Dark mode

Dark palette

Every page is also available in a dark mode. The palette turns around the deep petrol tones; gold remains the accent. Your preference is remembered in the browser.

Switch with the moon/sun button in the header — with no choice, the site follows your system preference automatically.

Dark paper#0a1a23

Dark mist#0d2230

Petrol deep#041219

Link steel#9fc4d2

Gold#d9b844

Light text#b6c5cc

Components

Buttons, cards & steps

Primary button Secondary button Ghost button

Example card with project impression — Card with media, number and label

Step card

Numbered card for the approach in eight steps.

19years international

In & outarchitecture

“Stijl komt en gaat, goed ontwerp is een taal, geen stijl.”

Tile component · Delft blue