Colors
The GL Homes color palette is a concise and effective selection of hues that was created using our GL Homes blue as its cornerstone.Primary Colors
Our four primary colors are composed of equidistant tones of blue that allow interaction and overlays between colors with at least one step distance, as well as creating multiple levels of hierarchy for complex layouts that might need some extra guidance. All of that in true GL Homes blue.Light Blue
#DBECFD
.primary-100
Cool Blue
#81BDFC
.primary-200
Standard Blue
#3378C7
.primary
Dark Blue
#13263C
.primary-900
Secondary Colors
The secondary colors provide a perfect balance of contrast and visual interest when juxtaposed, highlighting important content for our users through color differentiation. These colors are to be used mainly in alerts (clickable or not).Warning
#F3CE2E
.warning
Light
#FCEC8A .warning-100Dark
#574B0F .warning-900Success
#3A9D20
.success
Light
#C1F296 .success-100Dark
#1C5110 .success-900Danger
#D63E3E
.danger
Light
#FF9D9E .danger-100Dark
#370E06 .danger-900Neutral Colors
The lighter spectrum of the Neutral Palette (Gray 1—4) serves to inform the user about differentiation in backgrounds, layout spacing, and muted/ghost CTAs or highlights. Just like all other palettes, contrast is an essential factor when pairing colors together. The darker spectrum (Gray 5—7) serves for text, the lighter tone can be implemented into smaller headers and column titles, while body text should mostly rely on the darker tones.Gray 1
#F5F5F5
.gray-100
Gray 2
#DBDBDB
.gray-200
Gray 3
#AAABB0
.gray-300
Gray 4
#84868D
.gray-400
Gray 5
#58585F
.gray-500
Gray 6
#36363B
.gray-600
Gray 7
#101012
.gray-700
Make sure your texts are ADA compliant!
Accessibility is one of our most important design cornerstones. Our design system was created so everyone would be able to use it to its full capabilities. Checking if your text is readable is extremely important to ensure that all of our users are able to navigate and comprehend our content; that means that the contrast between the text and the background should be high enough for it to pass the WCAG test. To test the readability of your text, please visit the page below and add the HEX code (#) of both background and text colors:
In order to be usable, your contrast should pass all five tests
(Normal WCAG AA & AAA, Large WCAG AA & AAA, and Graphical Objects.
Principles
Communication is Key
Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.
Colors have meaning
Colors have assigned roles, which hold a specific meaning based on how they function within the interface. Defined color roles make things easy to modify and customize later. They also extend the color system so it works across any touchpoint at Shopify.
Colors follow accessibility guidelines
The color system is designed within the HSLuv color space to generate themes that meet WCAG 2.1 compliant contrast ratios. This makes things easier to find, identify, and interact with. It also makes the whole experience more accessible for merchants who are color blind or who have low vision. However you should never convey information using color alone.Download the UI Kit
The UI Kit contains all of the components and guidelines used in our system. It can be downloaded for Adobe XD.
If you have any questions, concerns, or suggestions, click on the “Talk to
the UIUX Team” button on the navigation bar and send a message to our
team.