Area | Design at Gem |
Expert(s) | Design |
Slack channel | #design |
This article was last verified on | 05/07/2024 |
🔍 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
- Balanced
- Comprehensive
- 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:
- Product palette
- Brand palette
- 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.
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.
Blues
Purples
Pinks
Reds
Should not be used for any branding. Refer to pink instead.
Yellows
Greens
Should not be used for any branding. Refer to teal instead.
Teals
Grays
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
Date | Version | Change type | Description |
September 8, 2020 | 0.1.2 | Color change | Fixed Gray 50 which Josh Williams forgot to remove some of the blue saturation from. |
August 4, 2020 | 0.1.1 | Documentation | Tanner has begun documenting all of the various color palettes as part of the brand refresh effort. |
April 30, 2020 | 0.1 | Documentation | Tanner has started the documentation for this feature. |
- Principles
- Accessibility
- Color list
- Product palette
- Brand palette
- Blues
- Purples
- Pinks
- Reds
- Yellows
- Greens
- Teals
- Grays
- Changelog