Canada-wide Free shipping over $60!
0
our Cart
Power up! Updated! Sad to see that go No more items in stock Sorry, we can not do that

No products in the cart.

Login or

register
Snak • Real Food

tyle guide

This page outlines the current styles and standards for the Snak • Real Food website.

olors

An overview of this site's brand colors.

Primary: Blueberry
Primary
Trans 90
Trans 80
Trans 60
Trans 40
Trans 20
Trans 10
Secondary: Maple
Secondary
Trans 90
Trans 80
Trans 60
Trans 40
Trans 20
Trans 10
Tertiary: Peachy
Tertiary
Trans 90
Trans 80
Trans 60
Trans 40
Trans 20
Trans 10
Accent: Minty
Accent
Trans 90
Trans 80
Trans 60
Trans 40
Trans 20
Trans 10
Shade: Peanutshuk
Shade
Trans 90
Trans 80
Trans 60
Trans 40
Trans 20
Trans 10
Base: Oaty
Base
Trans 90
Trans 80
Trans 60
Trans 40
trans 20
Trans 10

Gradients

Some pre-made gradients using brand colours

Brand A
Brand B
Brand C
Brand D
Bars
Bites
Cups

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.

Headings
H1 (--xxl)

Heading 1 Regular

H2 (--xl)

Heading 2 Regular

H3 (--l)

Heading 3 Regular

H4 (--m)

Heading 4 Regular

H5 (--s)
Heading 5 Regular
H6 (--xs)
Heading 6 Regular
Body Text
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Examples

Heading 1 (H1)

This is x-large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

This is large text.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 5 (H5)

This. is small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 6 (H6)

This is x-small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Icon List
A super simple icon list element.
It has several list items you can easily edit.
Delete rows you don't need.
Duplicate existing rows to add more.
Change the icons per row.
Change the icon padding to adjust the left spacing.
Classes for easy editing.
List anything with fancy icons.

Buttons

Solid and outline buttons are available across all color sets and are shown here against the main background colours. Not all buttons are suitable for each background. 

BUTTON SCALE
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Colour combinations
Primary
Primary Outline
SecondarySecondary Outline
Accent
Accent Outline
SecondarySecondary Outline
Accent
Accent OutlineBase
Base Outline
Primary
Primary Outline
SecondarySecondary Outline
Base
Base Outline
Primary
Primary Outline
SecondarySecondary Outline
Base
Base Outline
Primary
Primary Outline
Accent
Accent OutlineBase
Base Outline
Primary
Primary Outline
Accent
Accent OutlineBase
Base Outline

Widths

There are six values you can use to control element width. They're automatically responsive.

--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Section padding

Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Border radius

There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL

Element Padding

Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL
General Enquiries
  • Name
  • Enquiry
  • Email

ost password?

Enter your username or email address. You will receive a link via email to create a new password.

Lo in

New customer registration