Colors
All colours have undergo tests Web Colour Contrast Accessibility Guidelines.
backgrounds Colors
Background 1
#feebd6
Crushed Cashew
Background 2
#ecdfcd
Asian Fusion
Background 3
#feece1
Organic Fiber
primary Colors
Primary 1
#fb9e69
Fresh Cantaloupe
Primary 2
#FF481F
Orange Chiffon
Tertiary colors
Tertiary 1
#ae4305
PEPPERONI
gradient colors
Gradient 1
Gradient 2
Gradient 3
text Colors
Text Black
#222222
Black Out
Text White
#f2f2f2
Bleached Silk
Text Grey
#808080
Grey
Neutral Colors
Neutral 800
#262626
Nero
Neutral 700
#404040
Scarabaeus Sacer
Neutral 600
#525252
Cavernous
Neutral 500
#737373
Industrial Revolution
Neutral 400
#a3a3a3
Dark Souls
Neutral 300
#d4d4d4
Pinball
Neutral 200
#e5e5e5
Cold Morning
Neutral 100
#F5F5F5
White Smoke
Typography
RUBIK - HEADINGS
Rubik - Headings 1
Heading 1 - 64px / 4rem
Rubik - Headings 2
Heading 2 - 56px / 3.5rem
Rubik - Headings 3
Heading 3 - 40px / 2.5rem
Rubik - Headings 4
Heading 4 - 32px / 2rem
Rubik - Headings 5
Heading 5 - 24px / 1.5Rem
Rubik - Headings 6
Heading 6 - 20px / 1.25rem
LATO - PARAGRAPH
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph large - 22.4px / 1.4Rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.
Paragraph medium - 19.2px / 1.2rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.
Paragraph regular - 16px / 1rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph small - 14px / 0.875rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph tiny - 12px / 0.75rem
others
text link - 16px / 0.83em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.
block quote
- Lorem ipsum dolor sit amet consectetur.
- Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
- Sapien in tempus lectus lorem quis est.
Bullet list
- Lorem ipsum dolor sit amet consectetur.
- Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
- Sapien in tempus lectus lorem quis est.
numbered list
Icons
Forms
Rich Text
Title
This is a header.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Latest updates
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Buttons
The different buttons used across the site.
Columns
The 12 column grid system to make it easy to align sections across different screen sizes.
1 Col
2 Col
3 Col
4 Col
5 Col
6 Col
7 Col
8 Col
9 Col
10 Col
11 Col
12 Col
Grids
Different grid layouts to use across your site
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
Spacers
Spacer elements using the 8-pt grid to give sections more room to breathe.