fbpx

Natural Pools NZ

Website Style Kit

This page outlines the current colours, styles and design standards for the Natural Pools NZ website.

Colours

Pick a colour to see it's variants
Primary
#23849f
var(--primary)
Secondary
#e2e5ee
var(--secondary)
Accent
#151f32
var(--accent)
Base
#2d2f34
var(--base)
Shade
#000000
var(--shade)

Primary colour variants

Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
trans-90
trans-80
trans-60
trans-40
trans-20
trans-10
Complimentary

Secondary colour variants

Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
trans-90
trans-80
trans-60
trans-40
trans-20
trans-10
Complimentary

Accent colour variants

Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
trans-90
trans-80
trans-60
trans-40
trans-20
trans-10
Complimentary

Base colour variants

Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
trans-90
trans-80
trans-60
trans-40
trans-20
trans-10
Complimentary

Shade colour variants

Light
Ultra Light
Medium
Dark
Ultra Dark
trans-90
trans-80
trans-60
trans-40
trans-20
trans-10

Typography

Heading h1

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

  • Bulleted list item
  • Bulleted list item
  1. Numbered list item
  2. Numbered list item

A blockquote style for quoted text

Heading h2

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h3

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h4

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h5

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h6

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading Font: Inter (Google fonts)

Body font: DM Sans (Google fonts)

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
Paragraph text
Larger text (text--l)
smaller text (text--s)
extra small text (text--xs)

Nā tō rourou, nā taku rourou, ka ora ai te iwi

With your food basket and my food basket the people will thrive

Heading font
ā ē ī ō ū
Ā Ē Ī Ō Ū

Body font
ā ē ī ō ū
Ā Ē Ī Ō Ū