Style Guide

Colors

available globally as var(--color-(colorName))

Neutral grey 100

Neutral grey 300

Neutral grey 500

Neutral grey 700

Brand dark blue

Brand blue

Accent blue

Accent blue 100

Info sale

Info error

Info warning

Info success

Info

Typography

H1 Example

<h1>H1 Example <h1>

H2 Example

<h2>H2 Example <h2>

H3 Example

<h3>H3 Example <h3>

H4 Example

<h4>H4 Example <h4>
H5 Example
<h5>H5 Example <h5>
H6 Example
<h6>H6 Example <h6>

This is a paragraph of text.

<p>This is a paragraph of text.</p>

Body size large

<p class="text-size--large">Body size large</p>

Body size small

<p class="text-size--small">Body size small</p>

Body size regular

<p class="text-size--regular">Body size regular</p>

Buttons

Button Primary Brand Blue {%- render 'button', label: 'Button Primary Brand Blue', style: 'blue', icon: 'shopping-basket-add' -%}
Button Primary Brand Blue {%- render 'button', label: 'Button Primary Brand Blue', style: 'blue', icon: 'no_icon' -%}
{%- render 'button', label: '', style: 'blue only-icon', only_icon: true, icon: 'shopping-basket-add' -%}
Button Primary Brand Blue {%- render 'button', label: 'Button Primary Brand Blue', style: 'blue', icon: 'shopping-basket-add', disabled: true -%}
Button Primary Brand Blue {%- render 'button', label: 'Button Primary Brand Blue', style: 'blue', icon: 'no_icon', disabled: true -%}
{%- render 'button', label: '', style: 'blue only-icon', only_icon: true, icon: 'shopping-basket-add', disabled: true -%}
Button Primary Brand White {%- render 'button', label: 'Button Primary Brand White', style: 'white', icon: 'shopping-basket-add' -%}
Button Primary Brand White {%- render 'button', label: 'Button Primary Brand White', style: 'white', icon: 'no_icon' -%}
{%- render 'button', label: '', style: 'white only-icon', only_icon: true, icon: 'shopping-basket-add' -%}
Button Primary Brand White {%- render 'button', label: 'Button Primary Brand White', style: 'white', icon: 'shopping-basket-add', disabled: true -%}
Button Primary Brand White {%- render 'button', label: 'Button Primary Brand White', style: 'white', icon: 'no_icon', disabled: true -%}
{%- render 'button', label: '', style: 'white only-icon', only_icon: true, icon: 'shopping-basket-add', disabled: true -%}
Button Secondary Outlined {%- render 'button', label: 'Button Secondary Outlined', style: 'outlined', icon: 'arrow-custom-right' -%}
Button Secondary Outlined {%- render 'button', label: 'Button Secondary Outlined', style: 'outlined', icon: 'no_icon' -%}
{%- render 'button', label: '', style: 'outlined only-icon', only_icon: true, icon: 'arrow-custom-right' -%}
Button Secondary Outlined {%- render 'button', label: 'Button Secondary Outlined', style: 'outlined', icon: 'arrow-custom-right', disabled: true -%}
Button Secondary Outlined {%- render 'button', label: 'Button Secondary Outlined', style: 'outlined', icon: 'no_icon', disabled: true -%}
{%- render 'button', label: '', style: 'outlined only-icon', only_icon: true, icon: 'arrow-custom-right', disabled: true -%}
Button Tertiary Soft {%- render 'button', label: 'Button Tertiary Soft', style: 'soft', icon: 'arrow-custom-right' -%}
Button Tertiary Soft {%- render 'button', label: 'Button Tertiary Soft', style: 'soft', icon: 'no_icon' -%}
{%- render 'button', label: '', style: 'soft only-icon', only_icon: true, icon: 'arrow-custom-right' -%}
Button Tertiary Soft {%- render 'button', label: 'Button Tertiary Soft', style: 'soft', icon: 'arrow-custom-right', disabled: true -%}
Button Tertiary Soft {%- render 'button', label: 'Button Tertiary Soft', style: 'soft', icon: 'no_icon', disabled: true -%}
{%- render 'button', label: '', style: 'soft only-icon', only_icon: true, icon: 'arrow-custom-right', disabled: true -%}

Inputs

Links

Link Example Link Example