Rhone Style Guide

This style guide is a collection of UI elements that have been recently updated with the Design System 2.0 project. Last updated: 3/22/23.

Logos

Colors

Primary

#867256
desert-dusk
#706049
desert-dusk-hover
#1c1519
mine-shaft
#0F0E0E
mine-shaft-hover

Light Neutral

#fbf9f9
white
#fbf9f9
white
#fbf9f9
white
#F2F2F2
concrete
#F2F2F2
concrete
#F2F2F2
concrete
#e0e0e0
cloud
#e0e0e0
cloud
#e0e0e0
cloud
#828282
boulder
#828282
boulder
#828282
boulder

Dark Neutral

#4f4f4f
slate
#4f4f4f
slate
#1a281f
kelp
#1a281f
kelp
#000000
black
#000000
black

Alerts

#398855
success
#398855
success
#456DDF
active
#456DDF
active
#F2A73B
warning
#F2A73B
warning
#E22120
error
#E22120
error
#C90908
markdowns
#C90908
markdowns

Overlays

#000000
Category Tile
#000000
Hero Image

Shadows

#000000
Raised asset
#000000
Chevrons

Typography

Fonts

Bebas Neue
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Apercu (Regular)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Apercu (Medium)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Apercu (Bold)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Headings

Desktop H1

Bebas Neue Regular

Size: 80px

Line-Height: 64

Large headline

Desktop H2

Bebas Neue Regular

Size: 64px

Letter-Spacing: 0

Line-Height: 60

Medium headline that can wrap one time

Desktop H3

Bebas Neue Regular

Size: 48px

Letter-Spacing: 0

Line-Height: 44

Small Headline that can wrap multiple times

Mobile H1

Bebas Neue Regular

Size: 32px

Letter-Spacing: 0

Line-Height: 34

Large Headline that can wrap multiple times.

Mobile H2

Bebas Neue Regular

Size: 28px

Letter-Spacing: 0

Line-Height: 30

Medium headline that can wrap one time

Mobile H3

Bebas Neue Regular

Size: 24px

Letter-Spacing: 0

Line-Height: 26

Small Headline that can wrap multiple times

Subhead 1

Apercu Pro Bold

Size: 28px

Letter-Spacing: 0

Line-Height: 36

Large Subhead

Subhead 2

Apercu Pro Bold

Size: 24px

Letter-Spacing: 0

Line-Height: 32

Small subhead

Mobile Subhead 1

Apercu Pro Bold

Size: 18px

Letter-Spacing: 0

Line-Height: 22

All Caps

Large subhead

Mobile Subhead 2

Apercu Pro Bold

Size: 16px

Letter-Spacing: 0

Line-Height: 20

All Caps

Small subhead

Desktop Eyebrow

Apercu Pro Medium or Bold

Size: 18px

Line-Height: 20

Large eyebrow
Mobile Eyebrow

Apercu Pro Medium or Bold

Size: 14px

Line-Height: 16

Small eyebrow

Buttons

Style: solid

.btn .btn--solid .btn--desert-dusk

.btn--medium

.btn--small

.btn .btn--solid .btn--mine-shaft

.btn--medium

.btn--small

.btn .btn--solid .btn--white

.btn--medium

.btn--small

Style: outline

.btn .btn--outline .btn--desert-dusk

.btn--medium

.btn--small

.btn .btn--outline .btn--mine-shaft

.btn--medium

.btn--small

.btn .btn--outline .btn--white

.btn--medium

.btn--small

PDP UI Testing

Nuxt Link to PDP

Select

Form fields

Links

.btn .btn--link--medium

.btn .btn--link--small

.btn -btn--link--utility

UI Elements

Checkbox

Color Swatch

Misc UI

Review Stars

Carousel Progress Bar

Carousel Arrows

Pagination

1
2
3
4

Social media buttons

Icons

1
1
1

Product Card

Standard

Hidden Variants

Product Stack

Restocked

Sale

Sustainable

Product Card Grid