commonsku In-App Style Guide

Colors

Button Colors

Primary - Default
#02C0DA

Primary - Hover
#00A8BF

Primary - Pressed
#00889B

Secondary - Hover
#E6EFF2

Secondary - Pressed
#BEDBE5

Disabled
#DAE9EE

CTA - Default
#E91B70

CTA - Hover
#CF1360

CTA - Pressed
#B21154

Link Colors

Default
#02C0DA

Hover
#00A8BF

Typography Colors

Titles & Labels
#123952

Body Text
#52585C

Placeholder Text
#A4ABAE

Background Colors

Default
#FFFFFF

Alternative
#ECF4F7

Navigation Colors

Text
#FFFFFF

Background
#0C5A88

Hover 1
#2276A7

Hover 2
#ECF8FF

Field Colors

Default - Border
#ABC7D1

Active - Border
#02C0DA

Fill
#FFFFFF

Disabled
#DAE9EE

Table Colors

Header BG
#CFDBE3

Header BG
#EDF2F4

Titles & Labels
#123952

Body Text
#52585C

Speciality Colors

#FFD302

#00D374

#FA297C

Typography

Titles
#123952

Labels
#123952

Body Text
#52585C

Placeholder Text
#A4ABAE

TT Norms Pro

TT Norms Pro Bold

TT Norms Pro DemiBold

TT Norms Pro Medium

TT Norms Pro Regular

H1 - Heading 1 - TT Norms Pro Demibold - HEX: #123952

H2 - Heading 2 - TT Norms Pro Demibold - HEX: #123952

H3 - Heading 3 - TT Norms Pro Demibold - HEX: #123952

H4 - Heading 4 - TT Norms Pro Medium - HEX: #123952

H5 - Heading 5 - TT Norms Pro Medium - HEX: #123952
H6 - Heading 6 - TT Norms Pro Medium - HEX: #123952

Paragraph - body text - TT Norms Pro Regular - HEX: #52585C

Average Joe’s - Everyday Wear - Project #1267

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Buttons

Primary Button

Default - #02C0DA

Hover - #00A8BF

Pressed - #00889B

Text - #FFFFFF

Secondary Button

Border & Text - #02C0DA

Default Fill - #FFFFFF

Hover Fill - #E6EFF2

Pressed Fill - #BEDBE5

CTA Button

Default - #E91B70

Hover - #CF1360

Pressed - #B21154

Text - #FFFFFF

Disabled Button

Text - #02CODA

Fill - #DAE9EE

Large Dropdown Button
  • New Project
  • Edit Sales Target
  • Hit the doohickey on the donkey with the other donkey on the donkey tail

Default - #E91B70

Hover - #CF1360

Pressed - #B21154

Text - #FFFFFF

List Item BG - #FFFFFF

List Item BG Hover - #ECF8FF

List Item Text - #02C0DA

Small Dropdown Button
  • New Project
  • Edit Sales Target
  • Hit the doohickey on the donkey with the other donkey on the donkey tail

Default - #02C0DA

Hover - #00A8BF

Pressed - #00889B

Text - #FFFFFF

List Item BG - #FFFFFF

List Item BG Hover - #ECF8FF

List Item Text - #02C0DA

Link Buttons
+ Add charge + Add decoration + upcharge + Add range

Default - #02C0DA

Hover - #00A8BF

Radio

Border/ Circle - #02C0DA

Default Fill - #FFFFFF

Hover Fill - #02C0DA

Label - #52585C

Checkboxes

Border/ Circle - #02C0DA

Default Fill - #FFFFFF

Hover Fill - #02C0DA

Label - #52585C

Toggle Primary
Option1 Option 2

Selected BG - #02CODA

Selected Text - #FFFFFF

Unselected BG - #DAE9EE

Unselected Text - #02C0DA

Toggle Alternative

Circle - #02C0DA

Background Line - #00889B

Label - #52585C

Add/ Delete

Border & Text - #02C0DA

Default Fill - #FFFFFF

Hover Fill - #E6EFF2

Pressed Fill - #BEDBE5

X Button

Default Text - #02C0DA

Hover BG - #02C0DA

Hover Text - #FFFFFF

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the second panel of the basic tab example. This is the second panel of the basic tab example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.

Selected Titles
#123952

Selected Underline
#02C0DA

Unselected Titles
#123952
Opacity: .4

Unselected Hover
Underline
#02C0DA
Opacity: .4

Body Text
#52585C

Fields

Inactive Border
#ABC7D1

Active Border
#02C0DA

Labels
#123952

Body Text
#52585C

Placeholder Text
#A4ABAE

Disabled Fill
#DAE9EE

Tables

Header BG
#CFDBE3

Row Hover
##EDF2F4

Titles
#123952

Body Text
#52585C

Placeholder Text
#A4ABAE

Client Rep Order Rep Project Stage
Johnny Depp Leo Decaprio #128 - Movie Camp Gear
Caribean Titanic		 Opportunity
Converted
Zoey Julio #128 - Movie Camp Gear
Caribean Titanic		 Opportunity
Converted
Karen Randy #128 - Movie Camp Gear
Caribean Titanic		 Opportunity
Converted
$
Select Status
  • Open
  • Closed
  • Converted
$
Example
  • Open
  • Closed
  • Converted
$
Example
  • Open
  • Closed
  • Converted
$
Example
  • Open
  • Closed
  • Converted