1. Brand

2. Typography

2.1 Body Text

+1 PBR&B four loko gochujang, lo-fi kombucha pug. Chicharrones vape beard, taxidermy mumblecore gorpcore yuccie sus truffaut cloud bread. Direct trade messenger bag yr fit. Selfies tacos health goth hell of fanny pack subway tile stumptown. Offal bodega boys godard venmo keffiyeh, actually forage 90's hashtag photo booth. Vibecession marxism humblebrag food truck selfies, praxis whatever selvage single-origin coffee. Banh mi viral offal tilde, shabby chic everyday carry ascot vexillologist pickled hot chicken.

2.1 Body Text Large

2.1 Body Text Small

2.1 Body Text Extra Small

<p>+1 PBR&B four loko gochujang, lo-fi kombucha pug. <strong>Chicharrones vape beard</strong>, taxidermy mumblecore gorpcore yuccie sus truffaut cloud bread. Direct trade messenger bag yr fit. Selfies tacos health goth hell of fanny pack subway tile stumptown. Offal bodega boys godard venmo keffiyeh, actually forage 90's hashtag photo booth. Vibecession marxism humblebrag food truck selfies, praxis whatever selvage single-origin coffee. Banh mi viral offal tilde, shabby chic everyday carry ascot vexillologist pickled hot chicken.</p>

2.2 Headings

<h1>h1. Heading 1</h1>

<h2>h2. Heading 2</h2>

<h3>h3. Heading 3</h3>

<h4>h4. Heading 4</h4>

<h5>h5. Heading 5</h5>

<h6>h6. Heading 6</h6>

3. Forms

4.1 Form Controls

<form action="" method="get" class="form">
  <div class="form__field">
    <label for="example-text-input">Text Input</label>
    <input id="example-text-input" type="text" placeholder="Text Here"/>
  </div>
  <div class="form__field">
    <label for="example-email-input">Email Input</label>
    <input id="example-email-input" type="email" placeholder="Email Here">
  </div>
  <div class="form__field">
    <label for="example-password-input">Password Input</label>
    <input id="example-password-input" type="password" placeholder="Password Here">
  </div>
  <div class="form__field form__field--select">
    <label for="example-form-control-select">Select</label>
    <select id="example-form-control-select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form__field">
    <label for="example-form-control-textarea1">Example textarea</label>
    <textarea id="example-form-control-textarea1" rows="3"></textarea>
  </div>
  <div class="form__field form__field--checkbox">
    <label>
      <input type="checkbox" value="">
      Check this out! Example checkbox
    </label>
  </div>
  <div class="form__field form__field--radio">
    <label>
      <input type="radio" name="exampleRadios" id="example-radios1" value="option1" checked>
      Example Radio Button 1
    </label>
    <label>
      <input type="radio" name="exampleRadios" id="example-radios2" value="option2">
      Example Radio Button 2
    </label>
  </div>
</form>

4.2 Validation States

4. Buttons

<a href="#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<button type="button" class="action action--primary">Action Primary</button>
<button type="button" class="action action--accent">Action Accent</button>
<div class="background-contrast"><button type="button" class="action action--light">Action Light</button></div>
<a href="#" role="button" class="action action--link">Action Link</a>
<a href="#" role="button" class="action action--link link--light">Action Link Light</a>

5. Imagery

Static

Lazy Loaded with srcset

      
        {%- comment -%}
          With slides generated with liquid
        {%- endcomment -%}

        <swiper-module>
          <template #slides>
            {%- for index in (1..5) -%}
              {% assign image_name = 'slide-' | append: index | append: '.jpg' %}
              {% assign image = images[image_name] %}
              <swiper-slide>
                {{ image | image_url: width: 2000 | image_tag: class: 'slide-image' }}
              </swiper-slide>
            {%- endfor -%}
          </template>
        </swiper-module>

        {% comment %}
          With slides data coming from js
        {% endcomment %}

        <template>
          <div>
            <swiper-module
              :settings="swiperSettings"
            >
              <template #slides>
                <swiper-slide
                  v-for="(image) in images"
                  :key="image.id"
                >
                  <swiper-slide>
                    <image-media
                      v-if="image"
                      :image="image"
                      :max-width="2000"
                    />
                  />
                </swiper-slide>
              </template>
            </swiper-module>
          </div>
        </template>

      
    

7. Spacing

8. Iconography