PJ Stekhoven-Smith
Creative Direction & Graphic Design
PJ Stekhoven-Smith

Creative Direction
& Graphic Design
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.
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
Paragraph

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 ↘Gutter:01REM/16px ↘Margin:03REM/48px ↘Breakpoint:1408
Tablet
Columns:08 ↘Type:Stretch ↘Gutter:0.875rem/14px ↘Margin:1.5REM/24px ↘breakpoint:991PX
mobile
Columns:04 ↘Type:Stretch ↘Gutter:0.5rem/08px ↘Margin:1rem/16px ↘breakpoint:767PX
Buttons
Style
Desktop
Tablet
Mobile:Large
Mobile
PILLBOX Fill
DarkDarkDarkDark
navigation
Colours
Primary
Roland Remix logo.
Roland Remix logo.
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