{% render 'logo', type: 'full' %}
{% render 'logo', type: 'simple' %}
Brands primary brand color is the recognisable brand Blue. The brands secondary color, Cream, functions as a base tone for contrast, while the Accent Blue is used to highlight important information.
Primary
Hex: #0000a0
var(--color-primary)
Secondary
Hex: #F9F9F6
var(--color-secondary)
Should be used for accents and backgrounds paired with text for a good contrast ratio.
Accent One
Hex: #0000a0
var(--color-accent-blue)
Accent Two
Hex: #4bacd2
var(--color-accent-secondary-blue)
Should be used for accents and backgrounds paired with text for a good contrast ratio.
Background One
Hex: #f9f9f6
Background Two
Hex: #ffffff
Signal Colours are used solely for warnings and status messages.
Success
Hex: #6bbd4f
20 %
Alert
Hex: #f0b743
20 %
Fail Red
Hex: #e45f5f
20 %
A range of provided patterns and textures are available to use from the brand style guide in the patterns library.
Ab
font-family: var(--font-heading-family);
.font-heading
Monosten is the primary font and will be used throughout the Brands site (including headings, paragraphs and statements) as well as across all UI components.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789$£€/&@#%^*•()_+:;™
Light
Regular
Semi-bold
Ab
font-family: var(--font-body-family);
.font-body
Plaax Ney is the secondary font and will be used throughout the Brands site (including headings, paragraphs and statements) as well as across all UI components.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789$£€/&@#%^*•()_+:;™
Light
Regular
Semi-bold
.h1/h1
40px
.h1/h1
32px
.h2/h2
32px
.h2/h2
24px
.h3/h3
24px
.h3/h3
16px
.h4/h4
16px
.h4/h4
14px
Paragraph Default. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra fringilla iaculis.
p, body
16px
Paragraph Small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.
.p-small, small
14px
Paragraph Tiny. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.
.p-tiny
12px
Paragraph Tiny. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.
.p-xtiny
10px
Supertitles provide context or additional information to the main title.
It helps to improve the layout.
<h5 class="supertitle"><span class="icon"></span><span class="text">Research</span></h5>
<h5 class="supertitle supertitle--blue"><span class="icon"></span><span class="text">Key Ingredients</span></h5>
Buttons are used to initiate an action or trigger a link. Button labels express what action will occur when interacted with.
They should have clear and concise labels, with the option of a supporting icon if necessary for further clarification.
All button types accept icons, the icon can be rendered either before or after the text node
<button class="button button--anatomy">Button Label</button>
Primary
<button class="button">Button</button>
<button class="button frozen-hover">Button</button>
Secondary
<button class="button button--secondary">Button</button>
<button class="button button--secondary frozen-hover">Button</button>
Tertiary
<button class="button button--tertiary">Button</button>
<button class="button button--tertiary frozen-hover">Button</button>
Accordion Button Icon
<span class="accordion__trigger-icon">
{% render 'icon-plus' %}
</span>
<span class="accordion__trigger-icon">
{% render 'icon-minus' %}
</span>
Text Link
<a class="text-link text-link--black" href="#">Biotech skincare for urban life</a>
<a class="text-link text-link--black frozen-hover" href="#">Biotech skincare for urban life</a>
In the icon library there are a wide range of icons available for all applications.
Global icons will be used consistently, whereas custom icons add unique character across the brand.
The icons have been simplified and made primarily monotone. Use the render 'icon-[name]' method to render an icon snippet.
Forms allow people to enter data for further use or to configure options. They are used to obtain information and guide users through a series of steps.
They should have clear and concise labels, with the option of a supporting icon if necessary for further clarification.
<input type="email" value="" name="email" id="RecoverEmail" autocorrect="off" autocapitalize="off" autocomplete="email" placeholder="">
Primary
<input type="email" value="" name="email" id="RecoverEmail" autocorrect="off" autocapitalize="off" autocomplete="email" placeholder="">
<input type="email" value="" name="email" id="RecoverEmail" autocorrect="off" autocapitalize="off" autocomplete="email" placeholder="">
Dropdowns are togglable, contextual overlays for displaying lists of links and options.
<select id="Option-" class="select__select"><option value="blue">Blue</option><option value="red">Red</option><option value="purple">Purple</option><option value="orange">Orange</option></select>
<select id="Option-" class="select__select"><option value="blue">Blue</option><option value="red">Red</option><option value="purple">Purple</option><option value="orange">Orange</option></select>
Checkboxes are input controls for making selections that are not mutually exclusive.
Checkboxes are input controls for making selections that are not mutually exclusive.
Accordions allow the design to stay focused, while displaying critical information, and allowing the user to explore further in-depth information if required.
Use the custom-accordion custom element for an animated, accessible accordion.
Primary
<custom-accordion>
<div class="accordion">
<button
class="accordion__trigger js-accordion-trigger"
id="accordion-trigger-{{ id }}"
aria-expanded="false"
aria-controls="accordion-content-{{ id }}"
>
Title {{ id }}
<span class="accordion__trigger-icon">
{% render 'icon-plus' %}
</span>
<span class="accordion__trigger-icon">
{% render 'icon-minus' %}
</span>
</button>
<div
class="accordion__content js-accordion-content"
id="accordion-content-{{ id }}"
role="region"
aria-hidden="true"
aria-labelledby="accordion-trigger-{{ id }}"
>
<div>
<p>
Content
</p>
</div>
</div>
</div>
</custom-accordion>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
aria-hidden="false"
Unordered List
<ul class="ul-primary"><li>Vegan</li><li>Cruelty-free</li><li>Fragrance-free</li><li>Dermatologist tested and approved</li><li>Suitable for sensitive skin</li><li>Non-comedogenic</li><li>Microbiome-friendly</li><li>PH 5.5</li><li>Made in Switzerland</li></ul>