Table of Contents

Type

SYSTEM / HELVETICA NEUE BOLD

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


SYSTEM / HELVETICA NEUE

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Colors

Greyscale

Black
#000
$color-black

Dark Grey
#333
$color-dark-grey

Grey
#CCC
$color-grey

Lighter Grey
#C1C1C1
$color-lighter-grey

Lightest Grey
#D9E0E6
$color-lightest-grey

White
#FFF
$color-white

Main

Dark Blue
#001b28
$color-dark-blue

Navy
#003145
$color-navy

Beige
#FAF7EE
$color-beige

Mustard
#E2C98A
$color-mustard

Brick
#C17465
$color-brick

Typography

Numerals

Numerals Granville Light

Headings

H1 Granville Light

H2 Granville Light

H3 Granville Light

H4 Granville Light

H5 Granville Light
H6 GT America Bold

Type variations

Lead System / Helvetica Neue Regular

P1 Caslon 540

P2 Caslon 540

P3 Caslon 540

GT America 14

Blog Copy Caslon 540

Paragraphs

Lorem ipsum dolor sit amet, Urban Cowboy. Suspendisse eleifend, enim nec tempor facilisis, urna dui hendrerit odio, sed laoreet ex metus commodo enim. Praesent vehicula malesuada ornare. Nulla in velit sit amet ligula convallis placerat ut sit amet nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lobortis justo eu condimentum gravida. Aenean a sapien laoreet, scelerisque libero sit amet, ultrices est. Maecenas eu odio suscipit, maximus ligula eu, scelerisque sapien.

Mauris justo purus, bibendum ut molestie vitae, hendrerit in ipsum. Fusce commodo justo in lorem mattis, ut sagittis erat auctor. Maecenas dignissim, felis eu tempor varius, lorem nulla luctus augue, non volutpat massa sem nec felis. Suspendisse accumsan aliquam ornare. Suspendisse commodo nec arcu id imperdiet. Praesent tincidunt condimentum est non fermentum. Donec id malesuada enim. Nullam finibus arcu nulla, vestibulum egestas leo aliquet vel. Phasellus sed maximus eros.

Pellentesque imperdiet velit eu fringilla sagittis. Duis enim nibh, mattis id justo sed, euismod posuere diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas ultricies nunc a bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras volutpat tellus tincidunt blandit efficitur. Sed maximus leo ultricies massa auctor egestas. Pellentesque aliquet aliquam porta. Vestibulum convallis libero et metus ornare, sit amet posuere dolor semper.

Type styles

Text Utilities

  • .u-fw-normal
  • .u-fw-bold
  • .u-td-underline
  • .u-td-strike
  • .u-ls-base
  • .u-color-black
  • .u-color-dark-grey
  • .u-color-grey
  • .u-color-white

Background Color Utilities

  • .u-bg-black
  • .u-bg-navy
  • .u-bg-dark-grey
  • .u-bg-grey
  • .u-bg-lighter-grey
  • .u-bg-lightest-grey
  • .u-bg-pale
  • .u-bg-beige
  • .u-bg-white
  • .u-bg-mustard
  • .u-bg-brick

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

Lists

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four

RTE

Styles specific to text that comes out of the rich text editor.


  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with ordered child list
      1. Third level item
      2. Another third level item
  • Four

This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.

This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.

RTE Heading

This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.

Note: Any table elements that come out of the rich text editor are will automatically have a responsive wrapper applied to them. This allows them to scroll on small screens without breaking the site layout.

Grid System

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Extra Large devices Desktops (≥1420px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px 1380px
Class prefix .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Content Grid

This is a more rigid grid for laying out content, typically products and articles. It uses the same sizing and gutters as the normal grid. There is one base version with several modifier classes that allow you some level of flexibility. The default layout is 1 across on mobile devices, and 3-col on screens larger than $screen-md-min.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

Alternate Content Grid Layouts

Modifier classes are available to create alternate grid layouts

Use .content-grid--2-col to create a 2 column grid on screens larger than $screen-md-min.

Grid item 1
Grid item 2
Grid item 3
Grid item 4


Use .content-grid--4-col to create a 4 column grid on screens larger than $screen-md-min.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6
Grid item 7
Grid item 8


Use .content-grid--2-4 to create a grid that switches from 2 to 4 columns.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6
Grid item 7
Grid item 8


Use .content-grid--1-2-4 to create a grid that switches from 1 to 2 to 4 columns.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6
Grid item 7
Grid item 8


Use .content-grid--1-2-3 to create a grid that switches from 1 to 2 to 3 columns.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

Alternate Content Grid Spacing

Use the content-grid--flush modifier class to make all grid items flush with each other.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

Combine with frames to make tiled layouts.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

Use the .content-grid--tight and .content-grid--loose modifier classes to adjust vertical spacing between grid items.


Tight Grid
Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

Loose Grid
Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

Tables

Responsive Tables

Wrap tables with a .table-responsive element to enable horizontal scrolling on small screens. All child table elements of an .rte element are wrapped by default via javascript.

Order Date Payment Status Fulfillment Status Total
#1001 December 22, 2015 Authorized Unfulfilled $43.03
#1002 December 23, 2015 Authorized Unfulfilled $44.03
#1003 December 24, 2015 Authorized Unfulfilled $45.03
#1004 December 25, 2015 Authorized Unfulfilled $46.03

Border-less Tables

Sizes XXS XS S M L
Bust 32"-34" 34"-36" 36"-38" 38"-40"
Under Bust 32"-34" 34"-36" 36"-38" 38"-40"
Waist 23.5"-24.5" 32"-34" 34"-36" 36"-38" 38"-40"
Hip 33"-34" 32"-34" 34"-36" 36"-38" 38"-40"

Buttons

Get the box Get the box

Get the box Get the box

Get the box Get the box

Block Level Primary Button Block Level Secondary Button Block Level Alt Button

Utility Links

Membership & perks

Forms

Default Forms

I'm helper text to explain what's going on with this form input.

Product Dropdown

I'm helper text to explain what's going on with this form input.

Utility Select

I'm helper text to explain what's going on with this form input.

Variant Selector

I'm helper text to explain what's going on with this form input.

Invisible labels

Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

Horizontal forms (customer, contact, etc)

Inline Forms

Other Form Elements

Example block-level help text here.

Note About Select Elements

This theme is using the Chosen library to enhance native select tags. By default, any select.form-control elements are targeted and initialized on page load. If you want to avoid this, add the data-no-chosen attribute to your select tag and it will be left alone.

Page Elements

Page Header

Use this element at the top of pages to add consistent titles + subtitles. You can also use this element without the subtitle if necessary. This element also works with left and right modifier classes to change text alignment.

Content Header / Footer

Use these elements to create sections of content throughout the body of the page. While page header should be used once at the top, the content header can be used multiple times.

Content Header Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Content
Content
Content

Frames

Use frames to create elements with defined aspect ratios. All frames require the .frame base class and a modifier class to define their aspect ratio. There is also a child element .frame__inner that is positioned absolutely and stretches the full dimensions of the frame.

16x9
6x4
4x3
1x1
3x4
4x6
9x16

Responsive Frames

There are responsive modifier classes for all frame sizes and all breakpoints.

.frame
.frame--xs-16x9
.frame--sm-6x4
.frame--md-1x1
.frame--lg-3x4
.frame--xl-4x6

Panels

Panels are generic containers for content that have a header and a body. They don't get used very much, but the base .panel element is needed for the collapse / accordion plugin to work so we've included it here. The base element should remain unstyled. All the styling you see below is set on the child .panel__* classes.

Panel Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wrap multiple panels with a .panel-group element to make them vertically flush with eachother.

Panel Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel Item Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Miscellaneous elements

Horizontal Rules

Default hr


Alerts

I'm a success alert
I'm a danger alert

Iconography

Read more about using, creating, and editing SVG icons in Slate's documentation.

Logo

Social icons

Social Icons Circle

General icons

Small UI Elements

  • Liquid error: Could not find asset snippets/icon-expand-copy.liquid

Medium UI Elements

Medium UI Elements

Large UI Elements

Arrows

Arrow elements are mostly used for slideshow controls. The root element has the base arrow class applied to it and directional modifier classes are available. By default, it has one child element that makes up the actual arrow icon.



This child element easily be swapped out for a png, svg, or other icon made of pseudo elements.

Breadcrumbs

Pagination Counter

Social Sharing

Minimal Input

Normal



Inverted



Large

Dots

Dots are an alternate UI used primarily for displaying / selecting variant option values. They respond to the two state classes .is-active and .is-disabled. Active dots will show a border around them, disabled dots will show with partial opacity and a strike through.

S
M
L
XL
OS


Use the .dots--small modifier class to create smaller dots when space is tight.

S
M
L
XL
OS


Apply a background color or background image to the .dot__inner element to use them as swatches.



Or apply a modifier class to apply a background color as defined in the swatch palette. The list of available color-modifier classes is below.