Typography

Our typography system will render at the following sizes for desktop, tablet, and mobile.

Headings

The following heading styles are supported.

    • 60px / 3.75rem
    • 48px / 3rem
    • 35px / 2.5rem

    H1 Main Heading

    • 48px / 3rem
    • 32px / 2rem
    • 28px / 2rem

    H2 Secondary Heading

    • 32px / 2rem
    • 32px / 2rem
    • 28px / 2rem

    H3 Tertiary Heading

    • 32px / 2rem
    • 20px / 1.25rem
    • 17.5px / 1.25rem

    H4 Heading

    • 20px / 1.25rem
    • 20px / 1.25rem
    • 14px / 1rem
    H5 Heading

Body

The following body styles are supported.

    • 16px / 1rem
    • 16px / 1rem
    • 14px / 1rem

    Body

    • 12px / 0.75rem
    • 12px / 0.75rem
    • 10.5px / 0.75rem

    Body (smaller)

    • 18px / 1.125rem
    • 18px / 1.125rem
    • 16px / 1.143rem

    Body (larger)

Modifiers

The following modifiers can be applied to any of the above headings or body text.

  • Normal

  • Bolded

  • Airy

  • Uppercase

  • Lowercase

  • Capitalize

Buttons

We support variants, sizes, and modifiers.

Variants

Sizes

Modifiers

Components

There are a number of components to make building features on our site easier. It seems like Shopify will convert the name of the component to a hyphenated format in the JSON when used. When looking for usage of a component it's best to filter by json files and search for the hyphenated formatting as shown. 

// This
"name": "KBDS: FAQ"

// Becomes this:
"type": "kbds-faq"

Separator

A simple horizontal line to separate content. By default, this contains no margin or padding. 

<hr class='kb-separator' />

If I were a fraction, I'd be the numerator!

This would be the denominator (isn't math fun?!)

FAQ

This FAQ component is reused in a few places. Right now it's not a reusable component from shopify, but it can be manually coded using the format below.

FAQ Section Title

This is the description copy, where you can also include a link if you'd like!

You can place some text here, but it isn't necessary. Please use the typography styles where applicable!

How do you organize a party in outer space?

You planet! (I'm sorry, I'll see myself out...)

What do you call a cow with three legs?

Tri-tip 👀

How about a cow with two legs?

Lean Beef... 🤦‍♂️

So what's a cow with one leg?

Steak 🥩

No legs?

Ground Beef 🍔

I'm done now, I promise 😅

<div class='kbds-faq'>
  <div class='kbds-faq__intro'>
    <h3 class='kb-text-h3 kbds-faq__title'>FAQ Section Title</h3>
    <p class='kb-text-large'>
      This is the description copy, where you can also
      <a href='#' target='_blank'>include a link</a> if you'd like!
    </p>
  </div>
  <div class='kbds-faq__items'>
    <p class='kb-text-body'>
      You can place some text here, but it isn't necessary. Please use the
      typography styles where applicable!
    </p>
    <div class='kbds-faq__item'>
      <h4 class='kbds-faq__question kb-text-large kb-text--normal'>
        How do you organize a party in outer space?
      </h4>
      <div class='kbds-faq__answer'>
        <p class='kb-text-body'>
          You planet! (I'm sorry, I'll see myself out...)
        </p>
      </div>
    </div>

    <div class='kbds-faq__item'>
      <h4 class='kbds-faq__question kb-text-large kb-text--normal'>
        What do you call a cow with three legs?
      </h4>
      <div class='kbds-faq__answer'>
        <p class='kb-text-body'>Tri-tip 👀</p>
      </div>
    </div>

    <div class='kbds-faq__item'>
      <h4 class='kbds-faq__question kb-text-large kb-text--normal'>
        How about a cow with two legs?
      </h4>
      <div class='kbds-faq__answer'>
        <p class='kb-text-body'><i>Lean</i> Beef... 🤦‍♂️</p>
      </div>
    </div>

    <div class='kbds-faq__item'>
      <h4 class='kbds-faq__question kb-text-large kb-text--normal'>
        So what's a cow with one leg?
      </h4>
      <div class='kbds-faq__answer'>
        <p class='kb-text-body'><i>Steak</i> 🥩</p>
      </div>
    </div>

    <div class='kbds-faq__item'>
      <h4 class='kbds-faq__question kb-text-large kb-text--normal'>
        No legs?
      </h4>
      <div class='kbds-faq__answer'>
        <p class='kb-text-body'><i>Ground</i> Beef 🍔</p>
        <p>I'm done now, I promise 😅</p>
      </div>
    </div>
  </div>
</div>

Tokens

These tokens are shared between the design and development team to keep us in sync when comparing values in design vs code.

Colors

Shared tokens between the Figma and our website.

--kb-color-brand-100

--kb-color-brand-200

--kb-color-brand-300

--kb-color-brand-400

--kb-color-brand-500

--kb-color-brand-600

--kb-color-brand-700

--kb-color-brand-800

--kb-color-neutral-100

--kb-color-neutral-200

--kb-color-neutral-300

--kb-color-neutral-400

--kb-color-neutral-500

--kb-color-neutral-600

--kb-color-neutral-700

--kb-color-neutral-800