NKPG.Design Style Guide

NKPG Design website

Concept

The branding for NKPG Design has design elements that are primarily blue, with touches of pink, and limited use of yellow. The font paring combined Volkorn CS for the headers with Roboto Mono for the body text. The logo also combines these two fonts.

We tried to keep the elements simple, with two beautiful blue and pink buttons with a transparency and zoom on hover effect. And with some help from Undraw and Unsplash we were able to tie the design together beautifully with some additional photos and illustrations.

Logo

The logo for NKPD Design combines the two fonts Volkorn CS and Roboto Mono. The primary combination of colors is a white text on a blue  or transparent background, with the dot in pink. The secondary version of this logo has a white background with blue text, with the same pink dot.

NKPG Design logo

Colors

We wanted to give the design a hint of the colors that are tied to Norrköping. Blue from IFK, with hints of yellow from the iconic Norrköping Arbetsmuseum. Combined with a bright hot pink, to really stand out.

Primary Color

#1D467E

#397AB6

#88AFD3

#EBF1F7

Secondary Color

#FC6681

#F1C9CF

Highlight Color

#FFD037

Fonts

The font paring combined Roboto Mono as a primary font for the body text, and Volkorn CS as a secondary font for the headers. All fonts can be downloaded from fonts.google.com

We loved using Roboto Moto, as roboto itself is an iconic and popular font, and the Mono variety gives it a very digital feel. And Volkorn CS felt like a natural paring, with an easy to read font that looks beautiful in bigger and bolder sizes.

Primary Typeface

“The quick onyx goblin jumps over the lazy dwarf”

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 ( @ & $ * : ; ! ? )

Roboto Mono Regular

“The quick onyx goblin jumps over the lazy dwarf”

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 ( @ & $ * : ; ! ? )

Roboto Mono Bold

“The quick onyx goblin jumps over the lazy dwarf”

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 ( @ & $ * : ; ! ? )

Roboto Mono Italic

Secondary Typeface

“The quick onyx goblin jumps over the lazy dwarf”

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 ( @ & $ * : ; ! ? )

Vollkorn Black

Typography

Titles and Headings

Primary typeface, Roboto Mono, is used for all body text. This includes lists, button and hyperlinks. The secondary typeface, Vollkorn, is used for titles. Verdana can be used as a fallback font. All fonts can be downloaded from fonts.google.com

H1 – BLACK, 48PX
H2 – BLACK, 32PX
H3 – BLACK, 26PX
H4 – BLACK, 20PX
H5 – BOLD, 18PX
H6 – BOLD, 16PX

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed urna sed neque blandit gravida vitae bibendum dictum, nisl nisi. Hyperlink
  • Unordered list
  • Unordered list
  1. Ordered list
  2. Ordered list

Elements

Buttons

Primary Button

Secondary Button

Forms

Navigation

Illustrations

Supplimental rich media in form of illustrations are sourced from unDraw. Additional illustrations can be downloaded from undraw.co/illustrations and modified to match the colorpallet. UnDraw illustrations can use used for free for commercial purposes, find guidelines and updated terms of use on the website.

The branding for NKPG Design has design elements that are primarily blue, with touches of pink, and limited use of yellow.

Index