everlane

H1 Primary Headings

H2 Secondary Headings

H3 Minor Headings

Standard body copy. Use by default.

Helper text copy

H3 small caps

H3 Serif Title

Serif body copy. Rarely used.

Colors

$white
#fff $tone-grey
#f7f7f8 $light-accent-grey
#dfe0e1

$everlane-grey
#949698 $dark-accent-grey
#4c4c4b $black
#000

$copper
#bb8b7d $dark-copper
darken($copper, 10%)

$accent-color
#bb8b7d

Application

Text Coloration

On white backgrounds, standard body copy renders in $font-color.
Text links are expressed in $link-color, with underline on hover and an inline glyph for additional visual signaling.

Secondary Text

A secondary copy color, $font-color-lt, or can be utillized for text that falls lower in the IA spectrum.
Use sparingly and only as supporting text for existing primary text.
Text links are expressed in the standard $link-color

Accented Text Treatments

$tone-grey can be used as a secondary background color to provide slight visual contrast

When a light accent is required, it is appropriate to use $white text on an $light-accent-grey background

When a heavy accent is required, it is appropriate to use $white text on an $everlane-grey background
Use sparingly

Error Text Treatments

Standard error text is rendered in $error-font-color and can be paired with $white or $tone-grey backgrounds

For very aggressive error messaging, it is appropriate to use a $error-color background

Border Treatments

Borders are rendered in $border-color

Example list item 1

Example list item 2

Heavy borders are $border-color-bd

Buttons

Primary CTA

Use mainly for direct e-commerce actions

Inactive State

Secondary CTA

Use for non-commerce actions.