Carhartt logo

Style Guide

Colors

Carhartt Gold
Hex:
#fdb913
Text color:
.gold
Background Color
.bg-gold
Brown Dark
Hex:
#975f20
Text color:
.brown-dark
Background Color
.bg-brown-dark
Brown Light
Hex:
#c37c13
Text color:
.brown-light
Background Color
.bg-brown-light
Gray 700
Hex:
#222222
Text color:
.gray-700
Background Color
.bg-gray-700
Gray 600
Hex:
#333333
Text color:
.gray-600
Background Color
.bg-gray-600
Gray 500
Hex:
#717171
Text color:
.gray-500
Background Color
.bg-gray-500
Gray 400
Hex:
#949494
Text color:
.gray-400
Background Color
.bg-gray-400
Gray 300
Hex:
#cccccc
Text color:
.gray-300
Background Color
.bg-gray-300
Gray 200
Hex:
#e5e5e5
Text color:
.gray-200
Background Color
.bg-gray-200
Gray 100
Hex:
#f7f7f7
Text color:
.gray-100
Background Color
.bg-gray-100
Alert Red
Hex:
#e31f26
Text color:
.alert-red
Background Color
.bg-alert-red
Alert Red Light
Hex:
#ffe0e1
Text color:
.alert-red-light
Background Color
.bg-alert-red-light
Success Green
Hex:
#277d29
Text color:
.success-green
Background Color
.bg-success-green

Theme Toggle

By switching the theme toggle above, a class of .dark-theme is added to the containing div below, which switches the theme to have a dark background with reversed text.

The default theme for any containing div is a white background with dark text.

Font Sizes

A note on fonts: a licensed version of the correct font (Conduit) was unavailable for this styleguide. Saira from Google fonts has been substituted in its place. To change back to Conduit:

  1. Put the files for Conduit in /dist/fonts
  2. Uncomment the font variables for Conduit in variables.scss and comment out the variables for Saira.
  3. Uncomment the font face rules for Conduit in fonts.scss and ensure the names in the font face rules match the filenames of the fonts.
Font Size Font Weight: Bold Font Weight: Medium Font Weight: Italic Font Weight: Regular Font Weight: Light
Font Size 1000
4.5rem / 72px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 900
4rem / 64px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 800
3.5rem / 56px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 700
3rem / 48px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 600
2.5rem / 40px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 500
2rem / 32px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 400
1.5rem / 24px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 300
1.25rem / 20px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 200
1.125rem / 18px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 100
1rem / 16px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 75
0.875rem / 14px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 50
0.75rem / 12px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Font Size 25
0.625rem / 10px
 Conduit Bold Conduit Medium Conduit Italic Conduit Regular Conduit Light
Paragraph Large

This is introduction text. It has a fixed size, and a custom line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium.

Paragraph Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua.

Paragraph Small

This is introduction text. It has sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium.

Text link
This is a text link
List style link
This is a link
Bulleted list style link
This is a link

Dividers

Buttons

Button colors

Default button
Secondary button
Transparent button

Button Sizes

Small button
Default size button
Large button

Combining Options

Button classes such as .btn-small or .btn-transparent can be combined.

Small and transparent button
Large and secondary button

Forms

Inputs

This is an optional caption for the input. It can wrap to multiple lines.

This is an optional caption for the input. It can wrap to multiple lines.

Note the inline style (padding-left) required for the select with internal label. This value will need to be set based on the length of the label text.

Size and Fit Guide

This is a caption below a select element

Checkboxes
Radio Buttons

Toggle Buttons

Toggle buttons must have a text label. There are two ways to achieve this.

  1. Toggle button labelled by another element

    Enable Dark Mode

  2. Toggle button labelled by aria-label

Disabled toggle button

Color Selection
Color Selection - small

Accordions

Iconography

Each individual icon in this set can be invoked by including an SVG element which references the icon's ID attribute. For example, the icon with ID "icon-zoom-in" is referenced as follows.

<svg viewBox="0 0 24 24" focusable="false"> <use xlink:href="#icon-zoom-in"/> </svg>

Icons are also available as variables which can be used in CSS urls. Look in _variables.scss for more info

24px Grid Icons

icon-zoom-in
icon-zoom-out
icon-view-visible
icon-view-hidden
icon-trashcan
icon-tier-discount
icon-sort
icon-share
icon-search
icon-print
icon-personalize
icon-pdf
icon-location
icon-help
icon-email
icon-ellipsis
icon-edit
icon-chat
icon-account-yellow
icon-account
icon-account-brown
icon-360
icon-youtube
icon-twitter
icon-pinterest
icon-linkedin
icon-instagram
icon-facebook
icon-star-empty
icon-star-half
icon-star-full
icon-save-yellow
icon-save-brown
icon-save
icon-heart
icon-heart-yellow
icon-heart-brown
icon-cart
icon-cart-yellow
icon-cart-brown
icon-x
icon-plus
icon-minus
icon-arrow
icon-x-outline

16px grid icons

icon-check-small
icon-circle-arrow-small
icon-help-small
icon-saved-small
icon-select-small
icon-success-small
icon-warning-small
icon-x-small