Style Guide

Sperry Color Palette Showcase

The basic palette itself is constant between light and dark themes

palette-gold-10
#fff3e3
palette-gold-20
#ffeac9
palette-gold-30
#fcd497
palette-gold-40
#ebb967
palette-gold-50
#cd993f
palette-gold-60
#af7d1b
palette-gold-70
#8f6300
palette-gold-80
#764a0c
palette-gold-90
#633a12
palette-gold-95
#46260f
palette-lobster-10
#ffebeb
palette-lobster-20
#facccc
palette-lobster-30
#f3a9a7
palette-lobster-40
#f2827f
palette-lobster-50
#e75347
palette-lobster-60
#da1200
palette-lobster-70
#bf1000
palette-lobster-80
#9f0a00
palette-lobster-90
#741007
palette-lobster-95
#541009
palette-sea-glass-10
#d3ffe4
palette-sea-glass-20
#a3ffcb
palette-sea-glass-30
#70edb1
palette-sea-glass-40
#48d597
palette-sea-glass-50
#2dba79
palette-sea-glass-60
#1c9d64
palette-sea-glass-70
#007b4b
palette-sea-glass-80
#00613a
palette-sea-glass-90
#004729
palette-sea-glass-95
#062c1a
palette-denim-10
#c5dbe9
palette-denim-20
#abc9dc
palette-denim-30
#93b7cd
palette-denim-40
#79a0b7
palette-denim-50
#63879d
palette-denim-60
#446378
palette-denim-70
#2a4356
palette-denim-80
#1b364b
palette-denim-90
#11293c
palette-denim-95
#071c2c
palette-concrete-5
#f7f7f7
palette-concrete-10
#ededed
palette-concrete-15
#e5e5e5
palette-concrete-20
#e2e2e2
palette-concrete-30
#d3d3d3
palette-concrete-40
#b7b7b7
palette-concrete-50
#929292
palette-concrete-55
#8a8a8a
palette-concrete-60
#6e6e6e
palette-concrete-70
#515151
palette-concrete-80
#3c3c3c
palette-concrete-90
#222222
palette-concrete-95
#111111
palette-white-0
#ffffff
palette-black-100
#000000

Additional Color Palette Showcase - Light Theme

basic-custom-bg
#ffd3a6
basic-on-custom-bg-custom
#773200
basic-state-layers-basic-hover
#00000008
basic-state-layers-basic-pressed
#0000001a
speciality-state-layers-branded-highlight-hover
#00000008
speciality-state-layers-branded-highlight-pressed
#0000001a
transparency-scrim-dim
#00000080
transparency-scrim-bright
#ffffffa6
transparency-drop-shadow-opacity-25
#00000040
transparency-drop-shadow-opacity-50
#d0d0d080
transparency-gradients-default-end
#f7f7f700
transparency-gradients-custom-end
#ffd3a600

Additional Color Palette Showcase - Dark Theme

basic-custom-bg
#773200
basic-on-custom-bg-custom
#ffd3a6
basic-state-layers-basic-hover
#ffffff08
basic-state-layers-basic-pressed
#ffffff1a
speciality-state-layers-branded-highlight-hover
#ffffff08
speciality-state-layers-branded-highlight-pressed
#ffffff1a
transparency-scrim-dim
#000000bf
transparency-scrim-bright
#000000a6
transparency-drop-shadow-opacity-25
#ffffff40
transparency-drop-shadow-opacity-50
#3f3f3f80
transparency-gradients-default-end
#11293c00
transparency-gradients-custom-end
#77320000

Typography Display Showcase

Fixed - Display XL

The quick brown fox jumps over the lazy dog.

Fixed - Display L

The quick brown fox jumps over the lazy dog.

Fixed - Display M EM

The quick brown fox jumps over the lazy dog.

Fixed - Display S EM

The quick brown fox jumps over the lazy dog.

Fixed - Display XS EM

The quick brown fox jumps over the lazy dog.

Fixed - Display XS

The quick brown fox jumps over the lazy dog.

Typography Heading Showcase

Fixed - Heading XL EM

The quick brown fox jumps over the lazy dog.

Fixed - Heading XL

The quick brown fox jumps over the lazy dog.

Fixed - Heading L EM

The quick brown fox jumps over the lazy dog.

Fixed - Heading L

The quick brown fox jumps over the lazy dog.

Fixed - Heading M

The quick brown fox jumps over the lazy dog.

Fixed - Heading S XXEM

The quick brown fox jumps over the lazy dog.

Fixed - Heading S

The quick brown fox jumps over the lazy dog.

Fixed - Heading XS XXEM

The quick brown fox jumps over the lazy dog.

Fixed - Heading XS EM

The quick brown fox jumps over the lazy dog.

Fixed - Heading XS

The quick brown fox jumps over the lazy dog.

Fixed - Heading XXS XXEM

The quick brown fox jumps over the lazy dog.

Fixed - Heading XXS

The quick brown fox jumps over the lazy dog.

Typography Subheading Showcase

Fixed - Subheading XL EM

The quick brown fox jumps over the lazy dog.

Fixed - Subheading XL

The quick brown fox jumps over the lazy dog.

Fixed - Subheading L EM

The quick brown fox jumps over the lazy dog.

Fixed - Subheading L

The quick brown fox jumps over the lazy dog.

Fixed - Subheading M EM

The quick brown fox jumps over the lazy dog.

Fixed - Subheading S EM

The quick brown fox jumps over the lazy dog.

Fixed - Subheading XS EM

The quick brown fox jumps over the lazy dog.

Fixed - Subheading Eyebrow M

The quick brown fox jumps over the lazy dog.

Fixed - Subheading Eyebrow S

The quick brown fox jumps over the lazy dog.

Typography Body Showcase

Fixed - Body L

The quick brown fox jumps over the lazy dog.

Fixed - Body M

The quick brown fox jumps over the lazy dog.

Fixed - Body S EM

The quick brown fox jumps over the lazy dog.

Fixed - Body S

The quick brown fox jumps over the lazy dog.

Typography Utility Showcase

Fixed - Utility XL EM

The quick brown fox jumps over the lazy dog.

Fixed - Utility XL

The quick brown fox jumps over the lazy dog.

Fixed - Utility L EM

The quick brown fox jumps over the lazy dog.

Fixed - Utility L

The quick brown fox jumps over the lazy dog.

Fixed - Utility M EM

The quick brown fox jumps over the lazy dog.

Fixed - Utility M

The quick brown fox jumps over the lazy dog.

Fixed - Utility S EM

The quick brown fox jumps over the lazy dog.

Fixed - Utility S

The quick brown fox jumps over the lazy dog.

Fixed - Utility S MN

The quick brown fox jumps over the lazy dog.

Fixed - Utility XS EM

The quick brown fox jumps over the lazy dog.

Typography Hyperlinks Showcase

Fixed - Hyperlinks L

This is a large hyperlink.

Fixed - Hyperlinks S

This is a small hyperlink.

Typography Specialty Showcase

Fixed - Specialty S

$99.99

Fixed - Specialty M Markdown Price PDP

$99.99

Fixed - Specialty L

$99.99

Fluid Typography Showcase

Fluid - Display L

The quick brown fox jumps over the lazy dog.

Fluid - Display S EM

The quick brown fox jumps over the lazy dog.

Fluid - Display S EM

The quick brown fox jumps over the lazy dog.

Fluid - Display XS EM

The quick brown fox jumps over the lazy dog.

Fluid - Heading L

The quick brown fox jumps over the lazy dog.

Fluid - Heading S

The quick brown fox jumps over the lazy dog.

Fluid - Heading XS

The quick brown fox jumps over the lazy dog.

Fluid - Heading XXS

The quick brown fox jumps over the lazy dog.

Fluid - Subheading S

The quick brown fox jumps over the lazy dog.

Fluid - Body M

The quick brown fox jumps over the lazy dog.

Fluid - Body S

The quick brown fox jumps over the lazy dog.

Fluid - Utility XL EM

The quick brown fox jumps over the lazy dog.

Fluid - Utility L EM

The quick brown fox jumps over the lazy dog.

Fluid - Utility L

The quick brown fox jumps over the lazy dog.

Fluid - Utility M

The quick brown fox jumps over the lazy dog.

Fluid - Utility S

The quick brown fox jumps over the lazy dog.

Fluid - Utility S MN

The quick brown fox jumps over the lazy dog.

Fluid - Specialty Promo Tile Header

The quick brown fox jumps over the lazy dog.

Fluid - Specialty Promo Tile Body

The quick brown fox jumps over the lazy dog.

Fluid - Specialty M Markdown Price

$99.99