Maria Tash

Design System

Typography

Design System

Our Typography System

Our web typeface is URW Din. You can find this typeface on Adobe Type Kit. Our system is very simple with several of the type sizes being shared between desktop and mobile. All of our type styles, with the exception of our accent colored headlines, are either MT Grey text #F8F9F9 or Grey #565A60

BG grey

MT Grey Text
#F8F9F9

BG dark grey

Body Copy
#565A60

DESKTOP SPECIFIC TYPE SIZES

H1 Headline

H2 Headline

H3 Headline

H1 Headline

H2 Headline

H3 Headline

DESKTOP SPECIFIC TYPE SIZES

H4 Headline

H5 Headline
H6 Special Headline

Body copy

Body copy thin

Copyright information

H4 Headline

H5 Headline
H6 Special Headline

Body copy

Body copy thin

Color

Design System

Our Color System

PRIMARY COLOR

BG Charcoal

Darl Charcoal
#1E222A

component backgrounds, carousel button background, dark icon color

BG Gold

Gold
#DEC18A

Current nav selection, and nav underline / hover color

BG Rose Gold

Rose Gold
#BC876E

Vertical rule color, special headlines, nav category color

NEUTRALS

bg Dark Grey

Slate (TEXT)
#565A60

Font color when appearing on a light background

BG Dark Slate

Dark Slate
#262B36

Used behind the quote components

BG Grey

MT Gray
#F8F9F9

component and product backgrounds, light text color, light icon color

DESIGN STYLES

Input (field) styles

Rose Gold Divider
#BC876E

Gold Divider
#DEC18A

Background Styles

BG Grey

MT Gray
#F8F9F9

Input (field) styles

Input focus
#848C90

Input error
#D22C01

Buttons

Design System

Our Button System

These are our button styles across Desktop and Mobile.

DEFAULT STATE

Class:button-dark

Class:button-disabled

HOVER / TAP STATE

DEFAULT STATE

Class:button-light

Class:button-light

HOVER STATE

Icons

Design System

Our Icon System

User
Logged
Wishlist
Wishlist Fill
Hamburger
Close
Cart
Location
Caret Down
Close Filter
caret up
caret down
User
Logged
Wishlist
Wishlist Fill
Hamburger
Search
Close
Cart
Location
Caret Down

Links

Design System

Our Links System

Our web typeface is URW Din. You can find this typeface on Adobe Type Kit. Our system is very simple with several of the type sizes being shared between desktop and mobile. All of our type styles, with the exception of our accent colored headlines, are either MT Grey text #F8F9F9 or Grey #565A60

DEFAULT STATE

Class: link-dark

HOVER / TAP STATE

DEFAULT STATE

Class: link-light

FOOTER

HOVER STATE

Input

Design System

Our Input System

FOOTER SIGNUP

GENERAL

DROPDOWN

ERROR

This is a required field.

DISABLED DROPDOWN

CHECKBOX LIST

RADIO BUTTON LIST

DROPDOWN EXPANDED