Colors

Primary Colors

Teespring brand blue should be used for clickable elements such as call-to-actions and links. Secondary colors should be used for success, error, and alert indicator states.

Raspberry
#ee2761
$raspberry
Lemonade
#fff200
$lemonade
Jam
#282562
$jam
Blueberry
#5ec8d5
$blueberry
Green
#32b259
$green
Black
#0a0918
$black
White
#fff
$white

Grays

Lighter Gray
#f6f6f9
$gray-lighter
Light Gray
#edeff3
$gray-light
Gray
#d8dae0
$gray
Dark Gray
#b8bdc5
$gray-dark
Darker Gray
#6a6f72
$gray-darker

Tints

Light Blue Tint
#f2feff
$blue-tint-light
Blue Tint
#d9f7fa
$blue-tint
Light Red Tint
#fff5f8
$red-tint-light
Red Tint
#ffe6ee
$red-tint

Typography

Headings

Headings use GT Haptik with the exception of H5, which uses Mr Eaves XL Modern.

H1
.h1
GT Haptik Black
40px / 1.25

The quick brown fox jumps over the lazy dog.

H2
.h2
GT Haptik Black
28px / 1.5

The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack.

H3
.h3
GT Haptik Bold
22px / 1.5

The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack.

H4
.h4
GT Haptik Bold
18px / 1.5

The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack.

H5
.h5
Mr Eaves XL Modern
16px / 1.5
The quick brown fox jumps over the lazy dog.

Body

Body Copy
Mr Eaves XL Modern
16px / 1.75

The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack. Quick fox jumps nightly above wizard. The five boxing wizards jump quickly. Quilt frenzy jackdaw gave them best pox. A wizard's job is to vex chumps quickly in fog.

Inline Text Elements

Highlighted
.text--highlight

Sometimes a word or sentence should be highlighted to indicate importance.

Strikethrough
.text--strikethrough
<s>

Sometimes a word or sentence should be striked out to show irrelevance.

Bold
<strong>

Sometimes a word or sentence should be bold to emphasise importance.

Italics
<em>

Sometimes a word or sentence should be italic to demonstrate its character.

Small
<small>
13px

Sometimes a word should be small to deemphasize its importance to the user.

Code
<code>
Monaco

Sometimes a word should have a code style applied to it, to display a programming reference.

Blockquotes

Standard Blockquote
<blockquote>
Mr Eaves XL Modern
16px / 1.5
"The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack. Quick fox jumps nightly above wizard. The five boxing wizards jump quickly. Quilt frenzy jackdaw gave them best pox. A wizard's job is to vex chumps quickly in fog."
Large Blockquote
<blockquote>, .blockquote--large
GT Haptik
28px / 1.5
"The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack."
Code Block
<pre>
Monaco
13px / 1.5
local.onSpheresSpin = function() {
  var i=0;
  var limit = local.particleSystems.length;
  for ( i=0; i < limit; ++i ) {
    var xSign = 1,
        ySign = 1;
    local.particleSystems[i].rotation.x = local.spinValues.x;
    local.particleSystems[i].rotation.y = local.spinValues.y;
    local.particleSystems[i].rotation.z = local.spinValues.z;
  }
}

Lists

<ul> and <ol> will by default not have bullets or numbers. Formatting will be added by including the class .ul and .ol respectively.

Unordered Lists
.ul
Mr Eaves XL Modern
16px / 1.75
  • The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack. Quick fox jumps nightly above wizard.
  • The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack. Quick fox jumps nightly above wizard.
Ordered Lists
.ol
Mr Eaves XL Modern
16px / 1.75
  1. The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack. Quick fox jumps nightly above wizard.
  2. The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack. Quick fox jumps nightly above wizard.

Grid

Rows

Grid rows contain 12 columns and are defined using the @include row; mixin.

1
2
3
4
5
6
7
8
9
10
11
12

Columns

Grid columns are defined with the @include column(1); mixin. Set the numeric value to the number of columns to be occupied.

1
2
3
4
1
2
3

Offsets

Use the @include pull(1); and @include push(1); mixins with a numeric value set to the number of offset columns.

1
2
3
4
5
6
7
8

Icons

Teespring Icon Set

Icons can be paired with other elements such as buttons and forms, or can be used as standalone entities.

.ts-icon-composer-sendtoback
.ts-icon-composer-reflect-horizontal
.ts-icon-composer-reflect-vertical
.ts-icon-composer-center
.ts-icon-composer-copy
.ts-icon-sidebar-orders
.ts-icon-sidebar-partnerships
.ts-icon-sidebar-community
.ts-icon-sidebar-ads
.ts-icon-sidebar-campaigns
.ts-icon-sidebar-crosssell
.ts-icon-sidebar-messages
.ts-icon-sidebar-payout
.ts-icon-sidebar-promotions
.ts-icon-sidebar-settings
.ts-icon-sidebar-store
.ts-icon-sidebar-upsells
.ts-icon-toolbar-bold
.ts-icon-toolbar-center
.ts-icon-toolbar-embed
.ts-icon-toolbar-image
.ts-icon-toolbar-italic
.ts-icon-toolbar-left
.ts-icon-toolbar-link
.ts-icon-toolbar-underline
.ts-icon-analytics
.ts-icon-boost
.ts-icon-alert
.ts-icon-nav
.ts-icon-search
.ts-icon-close
.ts-icon-close-thin
.ts-icon-circle-close
.ts-icon-html
.ts-icon-reload
.ts-icon-tip
.ts-icon-circle-checkmark
.ts-icon-code
.ts-icon-copy
.ts-icon-calendar
.ts-icon-trash
.ts-icon-document
.ts-icon-down-arrow
.ts-icon-right-arrow
.ts-icon-right-arrow-double
.ts-icon-left-arrow
.ts-icon-left-arrow-double
.ts-icon-up-arrow
.ts-icon-download
.ts-icon-archive
.ts-icon-edit
.ts-icon-expand
.ts-icon-globe
.ts-icon-hide
.ts-icon-link
.ts-icon-list-view
.ts-icon-mail
.ts-icon-photo
.ts-icon-secure
.ts-icon-settings
.ts-icon-time
.ts-icon-stop-time
.ts-icon-tag
.ts-icon-thumbnail
.ts-icon-view

Forms

Text Inputs

Text inputs contain multiple states controlled by classes with the general class .form__textfield. Input labels are included by using the placeholder property.

Input
.form__textfield
Label
.label
Sub Label
.sub-label
Note: Please allow 2-4 business days for transfers to complete
States
And sometimes there’s contextual feedback for an input error

Select

Include the select HTML element with the class name .form__select_menu to present a list of options in a dropdown.

Select

Dropdown

Include a div HTML element with the class name .dropdown--list to present a list of options in a dropdown. Add .dropdown__toggle--border to add a border to the toggle. Use .dropdown--popover class on a div HTML element to present a list of options in a dropdown popover.

Checkboxes, Radios & Toggles

A checkbox should be used for selecting one or several options in a list, while a radio Input should be used for selecting one option from many. Toggles should be used when a user has the ability to turn a setting on or off. Text for checkboxes and radios should always be wrapped in a label tag.

Checkbox
<input type="checkbox" />

Radio
<input type="radio" />

Toggles
<input type="checkbox" />, .switch__input + .switch__el




Tooltip

A tooltip should be used when there is a need to include further information about a form or table column. To create a tooltip, include an div with the class .tooltip with the content declared in data-tooltip=“…”. Then, simply create an HTML icon with the class of .ts-icon-tip to activate the tooltip on hover.

Tooltip
<div>, .tooltip, data-tooltip=“…”
.tooltip

.tooltip--bottom

.tooltip--topleft

.tooltip--topright

.tooltip--bottomleft

.tooltip--bottomright

Buttons

Sizes

Small buttons should be used when trying to deemphasize an action, while Large buttons should only be used for major call-to-actions scenarios.

Small, Medium, Large
.button--small, .button--medium, .button--large

Styles

Primary
.button--primary
Secondary
.button--secondary
Tertiary – Stroked
.button--tertiary
Tertiary – Filled
.button--tertiary-filled
Transaction
.button--transaction
Danger
.button--danger
Link Underline
<a>, .link--underline
Link Arrow
<a>, .link--arrow

Cards

Product Cards

Use these cards in Marketplace, Search, Homepage, and anywhere else under the teespring.com domain.

Category Cards

Use these cards in Marketplace, Search, Homepage, and anywhere else under the teespring.com domain.

Desktop
Mobile

Featured Cards

Use these cards in Marketplace, Search, Homepage, and anywhere else under the teespring.com domain when featuring products or storefronts.

Container Cards

These are used as containers in specific context to create additional emphasis and hierarchy.

Elevation = 0
.container_card

The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack.

Elevation = 1
.container_card--high-up

The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack.

Elevation = 2
.container_card--higher-up

The quick brown fox jumps over the lazy dog. Grumpy wizards make toxic brew for the evil queen and jack.

Header Navigation

Desktop

Mobile

Desktop - Logged Out

Mobile - Logged Out

Desktop - Logged In w/ Cart

Mobile - Logged In w/ Cart

Desktop - with Marketplace Nav

Mobile - with Marketplace Nav

Desktop - Minimal

Mobile - Minimal