UI KIT

Colors

Brand Colors

$pink-light
#fff0ed

$pink
#fbccc2

Contrast Boost

$pink-contrast-1
#e87278

$pink-contrast-2
#d81961

Slightly Darker Contrast colors (NOT THE SAME AS ABOVE)

$pink-contrast-3
#d9646a

$pink-contrast-4
#c41551

Neutrals

$gray-light
#ecece1

$gray
#dcdcd2

$gray-medium
#b6b6ae

$gray-dark
#919189

Function

$color-error
#ff6d6d

$color-success
#21695d

Typography

HEADLINES

$walsheim: "GT Walsheim Regular";

AaBbCc123!&
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

BODY COPY - BOLD

$walsheim-medium: "GT Walsheim Medium";

AaBbCc123!&
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

BODY COPY

$centra-light: "Centra No 1 Light";

AaBbCc123!&
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

ITALICS

$centra-light-italic: "Centra No 1 Light Italic";

AaBbCc123!&
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

DISPLAY TYPEFACE

$adelaide: "Adelaide-Regular";

AaBbCc123!&
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

Structure of type

Primary Headlines

Headline One

Product Names on PDP

Headline Two

H3

Headline Three

H4

Headline Four

H5

Headline Five

H6

Headline Six

CTA Text

Button Style

PARAGRAPH TEXT

Lorem ipsum Developed by a professional photographer, LuMee Duo is an iPhone case with studio-quality front and back facing lights. Its warm, natural light gives you freedom of perspective - you can capture what you want, how you want it.

D1 - Display Font

Headline One

D2 - Display Font -Needs High Contrast colors - Suggest not Smaller than 30px for legibility

Headline One

Form Label - Desktop

PDP Price

$49.95

Grid Price

$49.95

Shipping Label

Shipping Label

Review Title

Title of Review

Date

11/21/16

Reviews Text

Lorem ipsum Developed by a professional photographer, LuMee Duo is an iPhone case with studio-quality front and back facing lights. Its warm, natural light gives you freedom of perspective - you can capture what you want, how you want it.

Buttons

Solid CTA

Solid CTA

Outlined CTA

Optional Color CTA

Iconography

menu Created with Sketch.

Form Elements

Fields

You go girl!

Damn girl. What happened?

You go girl!

Damn girl. What happened?

You go girl!

Damn girl. What happened?

You go girl!

Damn girl. What happened?

You go girl!

Damn girl. What happened?

Select 1

Active Option

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Option 7

Option 8

Option 9

Option 10

Option 11

Option 12

Option 13

Option 14

Option 15

Option 16

Option 17

Option 18

Option 19

Option 20

Option 21

Option 22

Option 23

Option 24

Option 25

Option 26

Option 27

Option 28

Option 29

Option 30

Option 31

Select 2

Active Option

Value 1

Value 2

Value 3

Value 4

Value 5

Value 6

Value 7

Value 8

Value 9

Value 10

Checkbox




Radio Buttons







Toggle

Toggle Checked

Toggle Disabled

Toggle Text

Option 1
Option 2

Toggle Text Disabled? (not in mockup)

Option 1
Option 2