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
Light Neutral
Dark Neutral
Alerts
Overlays
Shadows
Typography
Fonts
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Headings
Bebas Neue Regular
Size: 80px
Line-Height: 64
Large headline
Bebas Neue Regular
Size: 64px
Letter-Spacing: 0
Line-Height: 60
Medium headline that can wrap one time
Bebas Neue Regular
Size: 48px
Letter-Spacing: 0
Line-Height: 44
Small Headline that can wrap multiple times
Bebas Neue Regular
Size: 32px
Letter-Spacing: 0
Line-Height: 34
Large Headline that can wrap multiple times.
Bebas Neue Regular
Size: 28px
Letter-Spacing: 0
Line-Height: 30
Medium headline that can wrap one time
Bebas Neue Regular
Size: 24px
Letter-Spacing: 0
Line-Height: 26
Small Headline that can wrap multiple times
Apercu Pro Bold
Size: 28px
Letter-Spacing: 0
Line-Height: 36
Large Subhead
Apercu Pro Bold
Size: 24px
Letter-Spacing: 0
Line-Height: 32
Small subhead
Apercu Pro Bold
Size: 18px
Letter-Spacing: 0
Line-Height: 22
All Caps
Large subhead
Apercu Pro Bold
Size: 16px
Letter-Spacing: 0
Line-Height: 20
All Caps
Small subhead
Apercu Pro Medium or Bold
Size: 18px
Line-Height: 20
Apercu Pro Medium or Bold
Size: 14px
Line-Height: 16
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
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
Social media buttons
Icons
Product Card
Standard
Hidden Variants
Product Stack
Restocked
Sale
Sustainable