🔍 Articles in This Section

Please use the following list to see additional internal articles regarding Gem Extension:

• (Internal) Design at Gem
• (Internal) Gem Design Principles
• (Internal) Gem Brand Guide and Resources
• (Internal) Gem Product Personas
• (Internal) Color (📍you are here)

Go link: go/colors

Figma: https://www.figma.com/file/KERZO4B4m3LGYq7QDHR2f9/Color?node-id=0%3A1

We use color to communicate clearly with customers and users across our marketing and products.

When used well, color can help someone discover and understand part of our product. When used carefully, color can help establish Gem from the competition. Refer to the below guidelines and color palettes when using color.

Principles

1. Balanced
2. Comprehensive
3. Gem-ified

Accessibility

Because our color palette is so comprehensive we must keep accessibilities of colors in-mind. The product and color palettes have been designed to accommodate low-vision or colorblindness.

When using text over a color, the text flips from dark (primary text) to light (white) once the color surpasses the 500 mark.

For example: if you were to create an element that has a background of Gray 500 or higher you would use white text. However, if you were creating an element that has a background of Gray 400 or smaller you should use dark text.

This ensures a minimum visibility of 4.0 or higher, as identified by WCAG 2.0.

Color list

Each color palette is broken into a core palette theme, with there being three dominant varieties:

1. Product palette
2. Brand palette
3. Color palettes

All UX product work can leverage any of the available palettes, but should primarily leverage the product palette.

All brand related work (ie. marketing collateral or brand representation, such as swag, editorial, or conference collateral) should primarily use the brand palette.

The color palettes represent various colors to be used in product and editorial design, however each other palette uses the colored palettes as a source. So, you may see the color “Gem blue” defined in the brand palette but referencing a color from the Blues color palette. This is to ensure whenever we make changes to any of our core colors they are represented across the entire product and brand experience.

In short: if you want to use any of these colors, refer to the appropriate palette. If it’s unclear what color is being referenced, refer to the colors palette.

Product palette

To be used exclusively in-product.

Untitled

	Name	HEX code	Description	Files
	Primary	Gem blue	Actions and dominant elements in a UI. Branding.
	Primary text	Gem black
	Primary gray	Gray 600	Icons
	Secondary gray	Gray 500	Secondary-level text and icons
	Border	Gray 200	Borders and dividers on buttons, cards, tables, dialogs, etc.
	Label	Gray 600	Labels, including table header labels.
	Primary Background	White
	Secondary Background	Gray 50	Table headers, containing cards, etc.
	White	White	Solid white reference.
	Positive	Green 500	Positive or constructive elements, including charts and icons.
	Negative	Red 500	Negative or destructive, including charts and icons, or for irreversible actions.
	Warning	Yellow 300	Warning or important status that is not negative or positive. Cannot be used for text.

Brand palette

To be used exclusively for brand.

Untitled

	Name	HEX code	Description	Files
	Gem blue	Blue 500	Logo and dominant brand elements such as CTAs
	Gem black	Gem black	All text, anywhere we’d otherwise use black
	Gem Teal	Teal 300
	Gem Purple	Purple 500
	Gem Pink	Pink 500
	Gem Yellow	Yellow 300
	White	White

Blues

Untitled

	Name	HEX code	Description	Files
	Blue 50	#F5F9FF
	Blue 100	#DDE9FF
	Blue 200	#ADCAFF
	Blue 300	#7BAAFF
	Blue 400	#4888FF
	Blue 500	#0D61FF	Primary color for actions and dominant elements in a UI. Also preserved for brand details such as the Gem logo.
	Blue 600	#004CDB
	Blue 700	#003CAD
	Blue 800	#002D80
	Blue 900	#001E56

Purples

Untitled

	Name	HEX code	Description	Files
	Purple 50	#F8F2FC
	Purple 100	#ECDBF8
	Purple 200	#D5B0F0
	Purple 300	#BE84E7
	Purple 400	#A558DF
	Purple 500	#8627CE
	Purple 600	#7121AE
	Purple 700	#5D1B8E
	Purple 800	#49156F
	Purple 900	#361052

Pinks

Untitled

	Name	HEX code	Description	Files
	Pink 50	#FFF5FA
	Pink 100	#FFE2F0
	Pink 200	#FFBCDD
	Pink 300	#FF93C7
	Pink 400	#FF64AF
	Pink 500	#FF0D81
	Pink 600	#D20065
	Pink 700	#A40050
	Pink 800	#78003B
	Pink 900	#500027

Reds

Should not be used for any branding. Refer to pink instead.

Untitled

	Name	HEX code	Description	Files
	Red 50	#FEF1F2
	Red 100	#FDE4E6
	Red 200	#FFBEC1
	Red 300	#FF9599
	Red 400	#FD676D
	Red 500	#F23041
	Red 600	#C8293B
	Red 700	#9F2433
	Red 800	#771E2A
	Red 900	#511820

Yellows

Untitled

	Name	HEX code	Description	Files
	Yellow 50	#FFFBE8
	Yellow 100	#FFF5C2
	Yellow 200	#FFED97
	Yellow 300	#FFDF40	Warning
	Yellow 400	#E1BA00
	Yellow 500	#BA9A00
	Yellow 600	#937A00
	Yellow 700	#6F5C00
	Yellow 800	#4D4000
	Yellow 900	#2E2700

Greens

Should not be used for any branding. Refer to teal instead.

Untitled

	Name	HEX code	Description	Files
	Green 50	#EEFBF1
	Green 100	#DEF8E4
	Green 200	#9CE6A8
	Green 300	#2FD455
	Green 400	#27B749
	Green 500	#209A3E
	Green 600	#197F32
	Green 700	#136427
	Green 800	#0D4B1C
	Green 900	#083312

Teals

Untitled

	Name	HEX code	Description	Files
	Teal 50
	Teal 100	#C5F5F5
	Teal 200	#9AF1F1
	Teal 300	#00F2F2
	Teal 400	#01D9D9
	Teal 500	#02B8B8
	Teal 600	#039292
	Teal 700	#036C6C
	Teal 800	#034949
	Teal 900	#022929

Grays

Untitled

	Name	HEX code	Description	Files
	White	#FFFFFF	Flat white, used primarily for backgrounds.
	Gray 50	#F8F8F8	Secondary background color.
	Gray 75	#EDEEF0
	Gray 100	#E1E3E6
	Gray 200	#D1D3D6	Borders and dividers on buttons, cards, tables, dialogs, etc.
	Gray 300	#B2B5B8
	Gray 400	#979A9E
	Gray 500	#7D8085	Primary icons.
	Gray 600	#686A6E	Secondary text and icons, labels.
	Gray 700	#525457
	Gray 800	#3D3F42
	Gray 900	#292B2D
	Gem black	#17181A	Primary text color. Also to be used anywhere we would otherwise use black.

Changelog

• Principles
• Accessibility
• Color list
• Product palette
• Brand palette
• Blues
• Purples
• Pinks
• Reds
• Yellows
• Greens
• Teals
• Grays
• Changelog