Logos

The Oxton Organics logo has been designed to be adaptive and responsive. The logo consists of two parts: the logogram and logotype. There are various options available with different degrees of simplification that can be used at different scales.




Main Stacked Logo

This version of the logo should be used when the logo is needed to be large. Ideally no smaller than 200px wide:

Main stacked logo
Main stacked logo with gutters

Main Inline Logo

This version of the logo should be used when the logo is needed to be large, but specifically in cases where the logo needs to be on one line, for example on the website header. Ideally no smaller than 350px wide:

Main inline logo
Main inline logo with gutters

Secondary Inline Logo

This version of the logo should be used when the logo is needed to be small.

Secondary inline logo
Secondary inline logo with gutters

Icon/Favicon Logos

This is a small simplified version of the Oxton Organics logo to be used across social media, for web browsers and mobile devices.

large
medium
small



The following code should be copied & pasted in between the <head> </head> on the website:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Colours

The Oxton Organics brand uses a wide range of vibrant contemporary colours inspired by nature and the work of the French Post-impressionist painter Henri Rousseau. The colour black is rarely used throughout the brand, but instead a dark green is used in areas such as typography and icongraphy.


Main Colours

Parchment

HTML:#f7f4e1
rgb(247, 244, 225)
cmyk(0%, 1%, 9%, 3%)

Dark Green

HTML:#1b341f
rgb(27, 52, 31)
cmyk(48%, 0%, 40%, 80%)

Fern Green

HTML: #63893e
rgb(99, 137, 62)
cmyk(28%, 0%, 55%, 46%)

Lime Green

HTML:#cfe56e
rgb(207, 229, 110)
cmyk(10%, 0%, 52%, 10%)

Sky Blue

HTML: #cfecea
rgb(207, 236, 234)
cmyk(12%, 0%, 1%, 7%)

Poppy Red

HTML: #f04c55
rgb(240, 76, 85)
cmyk(0%, 68%, 65%, 6%)


Secondary Colours

Pine Green

HTML:#355432
rgb(53, 84, 50)
cmyk(37%, 0%, 40%, 67%)

Olive Green

HTML:#acc067
rgb(172, 192, 103)
cmyk(10%, 0%, 46%, 25%)

Straw

HTML: #f7f5c4
rgb(247, 245, 196)
cmyk(0%, 1%, 21%, 3%)

Peach

HTML: #fdca9d
rgb(253, 202, 157)
cmyk(0%, 20%, 38%, 1%)

Rose Pink

HTML: #ff8f9a
rgb(255, 143, 154)
cmyk(0%, 44%, 40%, 0%)

Plum

HTML: #553250
rgb(85, 50, 80)
cmyk(0%, 41%, 6%, 67%)

Iconography

There are a selection of icons used. These icons fit into two categories, those that are stylist and those that are functional.


Stamp Icons

These icons are used to add brand value and are not to be used functionally in areas such as the user interface.

Main stacked logo
Main stacked logo with gutters


Typography

The font family used throughout the brand is Rubik.

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 1 2 3 4 5 6 7 8 9



To set up the webfont ensure that the following code should be copied & pasted in between the <head> </head> on the website:

<link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,500,500i" rel="stylesheet">

Two weights of the font are used - light and medium. The following type sizes and spacing should be used throughot the brand:

Our Boxes

Each contains a selection of in season salads, greens, staples, (potatoes, carrots & onions) root veg & herbs. These are mostly grown on the farm, although some items are bought in from certified suppliers (e.g. mushrooms, potatoes, and carrots).

FIND OUT MORE

The text above can be determined by the following CSS:

h4 {
font-family: 'Rubik', sans-serif;
font-size: 1.5rem;
line-height: 1.2rem;
font-weight: 500;
color: #1b341f;
margin-bottom: 1.4rem!important;
}

p {
font-family: 'Rubik', sans-serif;
font-size: 1rem;
line-height: 1.6rem;
font-weight: 300;
color: #1b341f;
}

.more-link {
text-transform: uppercase;
border-bottom: 4px solid #cfe56e;
padding-bottom: 4px;
letter-spacing: 2px;
font-size: 0.8rem;
line-height: 1.2rem;
font-weight: 700;
}


Illustration

Illustration is very important to the Oxton Organics brand. The following is an example of an Oxton Organics illustration that has been designed to work fullwidth across the website:




The illustrations have been designed to work across different screen sizes as shown here:

Example of desktop full width illustration
Example of a mobile condensed illustration