Free UK standard delivery on orders over £50*

Join our newsletter for 15% off your first order**

Every order supports our conservation research

01. Colour Scheme
White
Name: $white
#ffffff
Black
Name: $black
[$primary]
#000000
Gray 600
Name: gray-600
[$secondary]
#ced4da
Gray 875
Name: gray-875
[$dark]
#2A2A2A
Gray 150
Name: gray-150
[$light]
#eeeded



Positive
Name: green-leaf
#2e6e0b
Negative
Name: miliano-red
#b70e0e
Caution
Name: sunflower
#ded31e
Neutral
Name: picton-blue
#1BA8E9
02. Typography
Header Font

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>
Body Font

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890!@#$%^&*()_+<>
Header Styles with Responsive Fluid Scaling

H1 Heading Level 1

H2 Heading Level 2

H3 Heading Level 3

H4 Heading Level 4

H5 Heading Level 5
H6 Heading Level 6


Extra Bold title

Semi-bold title

Regular title

Body Copy Sizing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam architecto at beatae consectetur debitis eligendi esse harum magni natus perspiciatis provident quidem quod quos sequi totam unde, velit veritatis! Excepturi harum hic impedit nostrum rem repudiandae. Aliquam dolor, minima nam pariatur qui quibusdam quod rerum unde velit voluptas? Cumque doloremque et incidunt iure laborum! Accusamus aliquid atque blanditiis consequuntur culpa cupiditate, doloribus facere fugiat inventore itaque iure iusto labore magnam magni maiores natus nobis officiis quae quibusdam ratione rem voluptas voluptatibus. Ad deleniti ducimus eligendi expedita impedit, incidunt odio officia? Assumenda ex facilis in itaque laborum ratione sequi temporibus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur commodi eos fugit hic necessitatibus nemo nisi, odit quae reprehenderit! Aspernatur corporis culpa deleniti dolorem et impedit in incidunt

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eligendi error minima molestiae! Corporis doloribus dolorum eveniet ex facilis id illum modi nemo, nulla officia praesentium quaerat quis reprehenderit vitae.

This is an example title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi quae ut? Dignissimos, dolorem magnam mollitia quasi quos ratione sapiente! A architecto facilis itaque magni, minus quod reiciendis tempora voluptates!

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
03. UI Elements
Buttons (Loudness Guide)
Link
Type
Volume
Frequency
Use
Graphic
Scream
Selectively
Promo
button-base button-promo
Button
Yell
Rare
Brand, Registration, help
button-base button-yell
Button
Shout
Occasionally
Editing, Actions
button-base button-shout
Shop Now Shop Now Shop Now
Button
Cheer
Cheer Inverted
Often
Primary Button
button-base button-cheer
button-base button-cheer-inverted
Button
Murmur
Occasionally
Secondary Button
button-base button-murmur
Link
Whistle
Often
Primary text link
button-base button-whistle
Link
Whisper
Occasionally
Secondary text link
button-base button-whisper
03. Inputs
Form
This is a required field.
Checkboxes
Radio Button
04. Site Messages
Successfully completed the action that has happened.
Failed to complete the action that has happened.
This message is a warning.
This message is for your information.
This section is empty.
This section is for your notice.

Popular products