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
    • 24px / 2rem
    • 21px / 2rem

    H3 Tertiary Heading

    • 28px / 2rem
    • 20.8px / 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
    • 14px / 0.875rem
    • 12px / 0.75rem

    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

Modals

Modals can be placed on any page with simple markup. The global javascript for showing / closing modals lives in the global.js file.

To open a modal, add the class kb-modal-trigger to any element.

Then place the modal content inside of the trigger with the class kb-modal-content. 

<button class='kb-modal-trigger kb-beta-btn'>
  Click to demo the modal

  <div
    class='kb-modal-content'
  >
      <h3 class='kb-text-h3'>Which license am I?</h3>
      <p>One does not choose the license, the license chooses you.</p>
  </div>
</button>

Forms

This isn't fully built out yet, but we do support basic input states.

Text

Cards

Also in beta, but this is the first stab at a card component.

A card to change all cards.

Coming soon to a kitbash site near you.

A hoverable card example.

Coming soon to a kitbash site near you.

A minimal card example.

This card has no padding, so you can do things like have full bleed images.

An alternate style card example.

This card is primarily used as a big feature card.