Design Guide

Design Guide

Typography

H1 Heading - Aa Bb Cc Dd

H2 Heading - Aa Bb Cc Dd

H3 Heading - Aa Bb Cc Dd

H4 Heading - Aa Bb Cc Dd

H5 Heading - Aa Bb Cc Dd
H6 Heading - Aa Bb Cc Dd

Subheading

Aa Bb Cc Dd

Body

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryz's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Body bold

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryz's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Body italic

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryz's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Body small

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryz's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Body small bold

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryz's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Body small italic

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryz's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Caption

Aa Bb Cc Dd

CTA Label

Aa Bb Cc Dd

Buttons

Primary

Light

View Code 

    

      
        <button
          class="button-primary button-icon-right"
          type="button"
        >
          Learn More
        </button>
        <button
          class="button-primary button-icon-right"
          type="button"
          disabled
        >
          Learn More
        </button>

Dark

View Code 

    

      
      <button
        class="button-primary-dark button-icon-right"
        type="button"
      >
        Learn More
      </button>
      <button
        class="button-primary-dark button-icon-right"
        type="button"
        disabled
      >
        Learn More
      </button>

Secondary

Light

View Code 

    

      
      <button
        class="button-secondary button-icon-right"
        type="button"
      >
        Learn More
      </button>
      <button
        class="button-secondary button-icon-right"
        type="button"
        disabled
      >
        Learn More
      </button>

Dark

View Code 

    

      
      <button
        class="button-secondary-dark button-icon-right"
        type="button"
      >
        Learn More
      </button>
      <button class="button-secondary-dark button-icon-right"
        type="button"
        disabled
      >
        Learn More
      </button>

Tertiary

Light

View Code 

    

      
      <button
        class="button-tertiary button-icon-right"
        type="button"
      >
        Learn More
      </button>

      <button
        class="button-tertiary button-icon-right"
        type="button"
        disabled
      >
        Learn More
      </button>

Dark

View Code 

    

      
      <button
        class="button-tertiary-dark button-icon-right"
        type="button"
      >
        Learn More
      </button>

      <button
        class="button-tertiary-dark button-icon-right"
        type="button"
        disabled
      >
        Learn More
      </button>

Links

Button Links

Link - Link Element

Learn more
View Code 

    

      
      <a href="/" class="link">
        Learn more
      </a>

Link - Button Element

View Code 

    

      
      <button
        class="link"
        type="button"
      >
        Learn More
      </button>

Inline Links - Link Elemeent

Inline Link

Learn more
View Code 

    

      
      <a href="/" class="link-inline">
        Learn more
      </a>

Inline link - Button Elemeent

View Code 

    

      
      <button type="button" class="link-inline">
        Learn more
      </button>

Colors

primary

  • 20 #D2D7DF
    View Code 
    
    
    
      bg-primary-20
  • 40 #A4AFBF
    View Code 
    
    
    
      bg-primary-40
  • 60 #77869E
    View Code 
    
    
    
      bg-primary-60
  • 80 #495E7E
    View Code 
    
    
    
      bg-primary-80
  • 100 #1C365E
    View Code 
    
    
    
      bg-primary-base
  • 120 #162B4B
    View Code 
    
    
    
      bg-primary-120

secondary

  • 20 #D9E5F2
    View Code 
    
    
    
      bg-secondary-20
  • 40 #B4CAE5
    View Code 
    
    
    
      bg-secondary-40
  • 60 #8EB0D9
    View Code 
    
    
    
      bg-secondary-60
  • 80 #6995CC
    View Code 
    
    
    
      bg-secondary-80
  • 100 #437BBF
    View Code 
    
    
    
      bg-secondary-base
  • 120 #366299
    View Code 
    
    
    
      bg-secondary-120

dark

  • 20 #CCCCCC
    View Code 
    
    
    
      bg-dark-20
  • 40 #9F9F9F
    View Code 
    
    
    
      bg-dark-40
  • 60 #737373
    View Code 
    
    
    
      bg-dark-60
  • 80 #464646
    View Code 
    
    
    
      bg-dark-80
  • 100 #191919
    View Code 
    
    
    
      bg-dark-base
  • 120 #000000
    View Code 
    
    
    
      bg-dark-120

light

  • 20 #FFFFFF
    View Code 
    
    
    
      bg-light-20
  • 40 #FCFCFC
    View Code 
    
    
    
      bg-light-40
  • 60 #F8F8F8
    View Code 
    
    
    
      bg-light-60
  • 80 #F4F4F4
    View Code 
    
    
    
      bg-light-80
  • 100 #F0F0F0
    View Code 
    
    
    
      bg-light-base
  • 120 #EEEEEE
    View Code 
    
    
    
      bg-light-120

alert

  • 20 #FAD7D7
    View Code 
    
    
    
      bg-alert-20
  • 40 #F5AFAF
    View Code 
    
    
    
      bg-alert-40
  • 60 #F08686
    View Code 
    
    
    
      bg-alert-60
  • 80 #EB5E5E
    View Code 
    
    
    
      bg-alert-80
  • 100 #E63636
    View Code 
    
    
    
      bg-alert-base
  • 120 #B82B2B
    View Code 
    
    
    
      bg-alert-120

Form

Text Input

View Code 

    

      
        <div class="field">
          <label class="field-label" for="Form-0225509931-text">Text Label</label>
          <input id="Form-0225509931-text" type="text" name="text" placeholder="Placeholder text">
        </div>

Search Input

View Code 

    

      
        <div class="field">
          <label class="field-label sr-only" for="Form-0225509931-search">Text Search </label>
          <search-input class="search-input-container">
            <span class="search-input-icon"></span>
            <input id="Form-0225509931-search" type="search" name="search" placeholder="Placeholder text"/>
            <button class="hidden" type="reset">
              <span class="sr-only">Reset</span>
              <span class="search-input-icon-reset"></span>
            </button>
            <button
              class="sr-only button-secondary button-icon-right"
              type="submit"
            >
              Search
              <span class="icon after:size-3 after:icon-search"  aria-hidden="true" focusable="false" role="presentation"></span>
            </button>
          </search-input>
        </div>

Passsword Input

View Code 

    

      
        <div class="field">
          <label class="field-label" for="Form-0225509931-password">Text Password</label>
          <input id="Form-0225509931-password" type="password" class="w-full" name="password" placeholder="Placeholder text">
        </div>

Select

View Code 

    

      
        <div class="field">
          <label class="field-label" for="Form-0225509931-select">Text Select</label>
          <select id="Form-0225509931-select" class="w-full" name="select">
            <option value="">Select an option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option> 
          </select>
        </div>

Text Area

View Code 

    

      
        <div class="field">
          <label class="field-label" for="Form-0225509931-textarea">Text Text Area</label>
          <textarea id="Form-0225509931-textarea" class="w-full" name="textarea" placeholder="Placeholder text"></textarea>
        </div>

Checboxes

View Code 

    

      
        <div class="field-inline field-inline-label">
          <input id="Form-0225509931-checkbox-1" type="checkbox" name="checkbox" value="1">
          <label for="Form-0225509931-checkbox-1">Option 1</label>
        </div>
        <div class="field-inline field-inline-label">
          <input id="Form-0225509931-checkbox-2" type="checkbox" name="checkbox" value="2">
          <label for="Form-0225509931-checkbox-2">Option 2</label>
        </div>
        <div class="field-inline field-inline-label">
          <input id="Form-0225509931-checkbox-3" type="checkbox" name="checkbox" value="3">
          <label for="Form-0225509931-checkbox-3">Option 3</label>
        </div>

Radio Buttons

View Code 

    

      
      <ul class="group">
        <li class="field-inline field-inline-label">
          <input id="Form-0225509931-radio-1" type="radio" name="radio" value="1">
          <label for="Form-0225509931-radio-1">Value 1</label>
        </li>
        <li class="field-inline field-inline-label">
          <input id="Form-0225509931-radio-2" type="radio" name="radio" value="2">
          <label for="Form-0225509931-radio-2">Value 2</label>
        </li>
        <li class="field-inline field-inline-label">
          <input id="Form-0225509931-radio-3" type="radio" name="radio" value="3">
          <label for="Form-0225509931-radio-3">Value 3</label>
        </li>
      </ul>

Quantity Selector

View Code 

    

      
    <div class="field w-fit">
      <label class="field-label" for="Form-0225509931-quantity-seclector">Quantity: </label>
      <div class="quantity-selector">
        <button
          type="button"
          name="minus"
          disabled
        >
          <span class="icon icon-minus quantity-selector-icon"></span>
        </button>
        <input
          id="Form-0225509931-quantity-seclector"
          name="Quantity"
          type="number"
          min="1"
          max="20"
          pattern="[0-9]*"
          value="1"
        >
        <button
          type="button"
          name="plus"
        >
          <span class="icon icon-plus quantity-selector-icon"></span>
        </button>
      </div>
    </div>

Navigation Arrows

Arrows light

View Code 

    

      
        <div class="flex p-4 gap-2">
          <button
            type="button"
            class="nav-arrow-light"
          >
            <span class="nav-arrow-icon-left"></span>
          </button>
          <button
            type="button"
            class="nav-arrow-light"
          >
            <span class="nav-arrow-icon-right"></span>
          </button>
        </div>

Arrows Dark

View Code 

    

      
        <div class="flex p-4 gap-2">
          <button
            type="button"
            class="nav-arrow-dark"
          >
            <span class="nav-arrow-icon-left"></span>
          </button>
          <button
            type="button"
            class="nav-arrow-dark"
          >
            <span class="nav-arrow-icon-right"></span>
          </button>
        </div>

Icons

arrow down
arrow left
arrow right
arrow up
back arrow
bag
box
box2
cart
check
chevron down
chevron left
chevron right
chevron up
circled check
circled cross
clear
close
configs
envelope
hamburger
heart
heart filled
long arrow down
long arrow left
long arrow right
long arrow up
minus
pause
phone
play
profile
remove
search
spinner
tag
triangle down
truck
View Code 

    

      
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon icon-arrow-down size-6 bg-current"></span>
            <span class="capitalize block text-center">arrow down</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-arrow-left size-6 bg-current"></span>
            <span class="capitalize block text-center">  arrow left</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-arrow-right size-6 bg-current"></span>
            <span class="capitalize block text-center">  arrow right</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-arrow-up size-6 bg-current"></span>
            <span class="capitalize block text-center">  arrow up</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-back-arrow size-6 bg-current"></span>
            <span class="capitalize block text-center">  back arrow</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-bag size-6 bg-current"></span>
            <span class="capitalize block text-center">  bag</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-box size-6 bg-current"></span>
            <span class="capitalize block text-center">  box</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-box2 size-6 bg-current"></span>
            <span class="capitalize block text-center">  box2</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-cart size-6 bg-current"></span>
            <span class="capitalize block text-center">  cart</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-check size-6 bg-current"></span>
            <span class="capitalize block text-center">  check</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-chevron-down size-6 bg-current"></span>
            <span class="capitalize block text-center">  chevron down</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-chevron-left size-6 bg-current"></span>
            <span class="capitalize block text-center">  chevron left</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-chevron-right size-6 bg-current"></span>
            <span class="capitalize block text-center">  chevron right</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-chevron-up size-6 bg-current"></span>
            <span class="capitalize block text-center">  chevron up</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-circled-check size-6 bg-current"></span>
            <span class="capitalize block text-center">  circled check</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-circled-cross size-6 bg-current"></span>
            <span class="capitalize block text-center">  circled cross</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-clear size-6 bg-current"></span>
            <span class="capitalize block text-center">  clear</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-close size-6 bg-current"></span>
            <span class="capitalize block text-center">  close</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-configs size-6 bg-current"></span>
            <span class="capitalize block text-center">  configs</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-envelope size-6 bg-current"></span>
            <span class="capitalize block text-center">  envelope</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-hamburger size-6 bg-current"></span>
            <span class="capitalize block text-center">  hamburger</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-heart size-6 bg-current"></span>
            <span class="capitalize block text-center">  heart</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-heart-filled size-6 bg-current"></span>
            <span class="capitalize block text-center">  heart filled</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-long-arrow-down size-6 bg-current"></span>
            <span class="capitalize block text-center">  long arrow down</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-long-arrow-left size-6 bg-current"></span>
            <span class="capitalize block text-center">  long arrow left</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-long-arrow-right size-6 bg-current"></span>
            <span class="capitalize block text-center">  long arrow right</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-long-arrow-up size-6 bg-current"></span>
            <span class="capitalize block text-center">  long arrow up</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-minus size-6 bg-current"></span>
            <span class="capitalize block text-center">  minus</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-pause size-6 bg-current"></span>
            <span class="capitalize block text-center">  pause</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-phone size-6 bg-current"></span>
            <span class="capitalize block text-center">  phone</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-play size-6 bg-current"></span>
            <span class="capitalize block text-center">  play</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-profile size-6 bg-current"></span>
            <span class="capitalize block text-center">  profile</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-remove size-6 bg-current"></span>
            <span class="capitalize block text-center">  remove</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-search size-6 bg-current"></span>
            <span class="capitalize block text-center">  search</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-spinner size-6 bg-current"></span>
            <span class="capitalize block text-center">  spinner</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-tag size-6 bg-current"></span>
            <span class="capitalize block text-center">  tag</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-triangle-down size-6 bg-current"></span>
            <span class="capitalize block text-center">  triangle down</span>
          </div>
        
          <div class="flex flex-col gap-2 items-center">
            <span class="icon   icon-truck size-6 bg-current"></span>
            <span class="capitalize block text-center">  truck</span>
          </div>

Top Header

Add a tagline

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem Epsium: Naturally Enhanced Performance

Bold - Lorem Epsium: Naturally Enhanced Performance

Italic - Lorem Epsium: Naturally Enhanced Performance

Link text copy

  • List item 1
  • List item 2
  • List item 3
  • List item 4

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Button label Button label 2

Talk about your brand

Add a tagline

Add a tagline

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.

Button label Button label 2