PJ Stekhoven-Smith
Creative Direction & Graphic Design
PJ Stekhoven-Smith
Creative Direction
& Graphic Design
Style Guide
↙
Introduction
↙
This style guide is a living document — an active source of truth for the brand and creative styling applied across pj-smith.com.
Built as a real-time design reference, this page collates all current brand elements in use across the site. As design decisions are made, re-evaluated, and refined, this document updates automatically to reflect their live state.

Each section addresses a core area of the brand system, and as the site evolves, these may expand or contract to stay aligned with the most relevant mechanics in play.
Typeface
↙
Helvetica Now Display Set In H2
↙

Helvetica
Now Display

Helvetica Now Display is a contemporary reimagining of the classic Helvetica typeface, specifically optimized for large-scale use such as headlines, signage, and branding.
Part of the Helvetica Now type family, which was released in 2019 by Monotype. The Helvetica Now project was led by Charles Nix, Jan Hendrik Weber, and Paul van der Laan, who aimed to update Helvetica for modern design needs while preserving the essence of its iconic aesthetic.

The “Display” cut within the family was carefully crafted to perform beautifully at large sizes, featuring tighter spacing, more refined curves, and higher contrast than its Text and Micro counterparts.
Glyphs
↙
Uppercase
↙
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
↙
abcdefghijklmnopqrstuvwxyz
Numerals
↙
0123456789
Special
↙
&@%#$€£¥
Headings
↙
Style
Desktop
Tablet
Mobile: Large
Mobile
Heading 01

H1

H1

H1

H1

Heading 02

H2

H2

H2

H2

Heading 03

H3

H3

H3

H3

Heading 04

H4

H4

H4

H4

Heading 05
H5
H5
H5
H5
Heading 06
H6
H6
H6
H6
Typesetting
↙
Style
Desktop
Tablet
Mobile: Large
Mobile
Title
The Vignelli Canon
The Vignelli Canon
The Vignelli Canon
The Vignelli Canon
Body

We like Design to be beyond fashionable modes and temporary fads. We like Design to be as timeless as possible. We despise the culture of obsolescence. We feel the moral imperative of designing things that will last for a long time. It is with this set of values that we approach Design everyday, regardless of what it may be: two or three dimensional, large or small, rich or poor.

We like Design to be beyond fashionable modes and temporary fads. We like Design to be as timeless as possible. We despise the culture of obsolescence. We feel the moral imperative of designing things that will last for a long time. It is with this set of values that we approach Design everyday, regardless of what it may be: two or three dimensional, large or small, rich or poor.

We like Design to be beyond fashionable modes and temporary fads. We like Design to be as timeless as possible. We despise the culture of obsolescence. We feel the moral imperative of designing things that will last for a long time. It is with this set of values that we approach Design everyday, regardless of what it may be: two or three dimensional, large or small, rich or poor.

We like Design to be beyond fashionable modes and temporary fads. We like Design to be as timeless as possible. We despise the culture of obsolescence.
We feel the moral imperative of designing things that will last for a long time. It is with this set of values that we approach Design everyday, regardless of what it may be: two or three dimensional, large or small, rich or poor.

Text
Massimo Vignelli
Massimo Vignelli
Massimo Vignelli
Massimo Vignelli
Caption
Excerpt from the Vignelli Canon. Originally self-published by Massimo Vignelli in 2009 as a free pdf. An expanded print version was later released by Lars Müller Publishers in 2010.

Download Here
Excerpt from the Vignelli Canon. Originally self-published by Massimo Vignelli in 2009 as a free pdf. An expanded print version was later released by Lars Müller Publishers in 2010.

Download Here
Excerpt from the Vignelli Canon. Originally self-published by Massimo Vignelli in 2009 as a free pdf. An expanded print version was later released by Lars Müller Publishers in 2010.

Download Here
Excerpt from the Vignelli Canon. Originally self-published by Massimo Vignelli in 2009 as a free pdf. An expanded print version was later released by Lars Müller Publishers in 2010.

Download Here
Scale
↙
All spacing and element sizing is set to an 8px scale. When finer adjustments are required a multiple of 4 may be used.
112px
↖
104px
↖
96px
↖
88px
↖
80px
↖
72px
↖
64px
↖
56px
↖
48px
↖
40px
↖
32px
↖
24px
↖
Spacing
↙
Size
Desktop
Tablet
Mobile: Large
Mobile
Large Display
XX-Small
X-Small
Small
Medium
Large
X-Large
XX-Large
XXX-Large
Columns
↙
Desktop / Large Display
↙
↘Columns: 12 ↘Type: Stretch ↘Margin: 02rem/32px ↘Gutter: 01rem/16px ↘Breakpoint: 1408px
Tablet
↙
↘Columns: 08 ↘Type: Stretch ↘Margin: 1.5rem/24px ↘Gutter: 0.875rem/14px ↘Breakpoint: 991px
Mobile: Large
↙
↘Columns: 08 ↘Type: Stretch ↘Margin: 1rem/16px ↘Gutter: 0.5rem/08px ↘Breakpoint: 767px
Mobile
↙
↘Columns: 04 ↘Type: Stretch ↘Margin: 1rem/16px ↘Gutter: 0.5rem/08px ↘Breakpoint: 478px
Buttons
↙
Style
Desktop
Tablet
Mobile: Large
Mobile
Pillbox
DarkDarkDarkDark
Pillbox Fill
DarkDarkDarkDark
Navigation
Colour
↙
Primary
HEX:F5F5F5
RGB:245/245/245
HSL:000/000/096
HSB:000/000/096
Roland Remix logo.
HEX:181818
RGB:024/024/024
HSL:000/000/009
HSB:000/000/009
Roland Remix logo.
HEX:FF3729
RGB:255/055/041
HSL:004/100/058
HSB:004/084/100
Roland Remix logo.
Secondary
HEX:D7D7D7
RGB:215/215/215
HSL:000/000/084
HSB:000/000/084
Roland Remix logo.
HEX:282828
RGB:040/040/040
HSL:000/000/015
HSB:000/000/015
Roland Remix logo.
HEX:636363
RGB:099/099/099
HSL:000/000/038
HSB:000/000/038
Roland Remix logo.
HEX:BCBCBC
RGB:188/188/188
HSL:000/000/073
HSB:000/000/073
Roland Remix logo.
HEX:FF877E
RGB:255/135/126
HSL:005/075/100
HSB:005/051/100
Roland Remix logo.
HEX:FFAFA9
RGB:255/175/169
HSL:005/083/100
HSB:005/034/100
Roland Remix logo.

HEX:FFC3BE
RGB:255/195/190
HSL:005/087/100
HSB:005/025/100

Roland Remix logo.
HEX:FFEBE9
RGB:255/235/233
HSL:005/096/100
HSB:005/009/100
Roland Remix logo.
Themes
↙
Light
Image of a poster for musica viva. Designed by Josef Müller-Brockmann. An example of the Swiss International Style. Circa 1959.
Musica Viva, Kleiner Tonhallesaal (1959)
Josef Müller-Brockmann
The Grid
A Fundamental Principle in Structuring and Elevating Graphic Design
The grid is the bedrock principle of graphic design—organising content, ensuring consistency and establishing visual heirarchy.
By defining clear structural relationships between elements, the grid facilitates a harmonious flow of information, enabling the designer to create a balanced and coherent visual experience. It serves as a guide that maintains the integrity of the design, allowing for both creative flexibility and systematic control, ultimately elevating the design’s impact and effectiveness.
Learn More
Dark
Image of a poster for musica viva. Designed by Josef Müller-Brockmann. An example of the Swiss International Style. Circa 1959.
Musica Viva, Kleiner Tonhallesaal (1959)
Josef Müller-Brockmann
The Grid
A Fundamental Principle in Structuring and Elevating Graphic Design
The grid is the bedrock principle of graphic design—organising content, ensuring consistency and establishing visual heirarchy.
By defining clear structural relationships between elements, the grid facilitates a harmonious flow of information, enabling the designer to create a balanced and coherent visual experience. It serves as a guide that maintains the integrity of the design, allowing for both creative flexibility and systematic control, ultimately elevating the design’s impact and effectiveness.
Learn More
Brand
Image of a poster for musica viva. Designed by Josef Müller-Brockmann. An example of the Swiss International Style. Circa 1959.
Musica Viva, Kleiner Tonhallesaal (1959)
Josef Müller-Brockmann
The Grid
A Fundamental Principle in Structuring and Elevating Graphic Design
The grid is the bedrock principle of graphic design—organising content, ensuring consistency and establishing visual heirarchy.
By defining clear structural relationships between elements, the grid facilitates a harmonious flow of information, enabling the designer to create a balanced and coherent visual experience. It serves as a guide that maintains the integrity of the design, allowing for both creative flexibility and systematic control, ultimately elevating the design’s impact and effectiveness.
Learn More
←