Colors

DesignAccessibilityCode

Brand Color

Teal

Main color of branding, communication and product.

The centerpoint of Labcodes color palette to preserve its identity in a constant evolving world. Represents the diversity, uniquiness and vibrancy of our organization.

The Complete Palette

We have a palette composed of two main colors, the ones present in our logo, teal and coral, both complementary to each other, one support and one additional color to make the way we show things more colorful, plural and interesting: purple and mustard, respectively, and also complementary.

The mineral stack, composes our neutral color base for use as texts and backgrounds. Mineral is a cool gray color shade that pairs perfectly with all of our color stacks. Mineral also includes pure white and black.

Color Pairing

If the difference between two values is 50 or greater, the colors are accessible and can be used overlapping each other (text over bg, e.g.)

If the difference value is 30, large text can be used, but it may fail accessibility standards. A double check is recommended.

Standard text and images of text must have a contrast ratio of at least 4.5:1.
Large text, at least 24px regular/light or 19px semibold, a contrast ratio of 3:1.
Visual information used to indicate states and boundaries of UI components also 3:1.

Color Families

The color palette has been organized into 2 distinct families, both containing the Labcodes teal stack.

Mkt Family

The Mkt, or Marketing family brings together all color stacks for use in institutional digital or printed/physical pieces, for example: sketchbooks, social media, website, banners, furniture, etc.

The main colors to use are teal and coral, but remember our brand color is teal. Both colors should preferably be applied in their default tones -40. If their use is not possible due to contrast issues, for example, use a darker shade like -60.

Purple is set to be used as a secondary color for mixing with teal and coral.

Yellow is the additional color, for use mostly in the lighter shades (less or equal to -40), in pair with teal, coral or purple.

App Family

The App, or Application family unites the brand color teal with support color purple and mineral neutrals. The color system for digital products is derived from the complete color palette. On default light and dark themes, mineral is meant to be the dominant stack, making use of subtle shade variations to help organize content into distinct areas.

The teal stack is set to be the primary action and highlight color and purple as secondary highlight and also action.

In addition for on-screen messages and special UI features and support, there are specific dual-tone color stacks.

Light and Dark Themes

Mineral light and dark themes work as an organizational scheme for color, with each theme instance able to function independently on the primary background color choice. Mineral Light can be used with >$mineral-10 or $white backgrounds, while Mineral Dark apps can be designed using $mineral-90 or $black backgrounds.

Work in progress

We use color tokens and themes to manage color. Tokens define color hex, and themes specify the roles that those colors have in the UI.

We are still implementing themes, so for now we will only display our color tokens

Main colors

The color system for digital products is derived from the complete color palette. Our main palette unites the brand color teal with support color purple and mineral neutrals

The teal stack is set to be the primary action and highlight color and purple as secondary highlight and also action.

Teal

Token	Hex	Color
`$teal-10`	`#DEF7F7`
`$teal-20`	`#A8F0F0`
`$teal-30`	`#54DEDC`
`$teal-40`	`#009699`
`$teal-60`	`#007B7D`
`$teal-70`	`#005F61`
`$teal-80`	`#004748`
`$teal`	`$teal-40`

Purple

Token	Hex	Color
`$purple-10`	`#F7F0FF`
`$purple-20`	`#E3D1FA`
`$purple-30`	`#C7A3F5`
`$purple-40`	`#935FD3`
`$purple-60`	`#5A3489`
`$purple-70`	`#3D235C`
`$purple-80`	`#201230`
`$purple:`	`$purple-60`

Additional colors

Mustard

Token	Hex	Color
`$mustard-10`	`#FDF8ED`
`$mustard-20`	`#FCE9CF`
`$mustard-30`	`#FFC978`
`$mustard-40`	`#E9A449`
`$mustard-60`	`#935E25`
`$mustard-70`	`#663F19`
`$mustard-80`	`#38210A`
`$mustard`	`$mustard-40`

Coral

Token	Hex	Color
`$coral-10`	`#FFF1F0`
`$coral-20`	`#FCD4D0`
`$coral-30`	`#FFACA4`
`$coral-40`	`#EC6056`
`$coral-60`	`#BC442F`
`$coral-70`	`#A2331C`
`$coral-80`	`#751F0E`
`$coral:`	`$coral-40`

Text Colors

For text colors, we prefer using `rgba` so we can have text with opacity.

Opacity Black

Token	RGBA	Color
`$black-87`	`rgba(0, 0, 0, .87)`
`$black-75`	`rgba(0, 0, 0, .75)`
`$black-50`	`rgba(0, 0, 0, .5)`
`$black-35`	`rgba(0, 0, 0, .35)`
`$black-20`	`rgba(0, 0, 0, .2)`
`$black-10`	`rgba(0, 0, 0, .1)`

Opacity White

Token	RGBA	Color
`$white-87`	`rgba(255, 255, 255, .87)`
`$white-75`	`rgba(255, 255, 255, .75)`
`$white-50`	`rgba(255, 255, 255, .5)`
`$white-35`	`rgba(255, 255, 255, .35)`
`$white-20`	`rgba(255, 255, 255, .2)`
`$white-10`	`rgba(255, 255, 255, .1)`

Minerals

Token	Hex	Color
`$white`	`#FFFFFF`
`$mineral-10`	`#E8EFF3`
`$mineral-20`	`#CDDBE4`
`$mineral-30`	`#97AEBE`
`$mineral-40`	`#8095A3`
`$mineral-60`	`#576975`
`$mineral-70`	`#414F58`
`$mineral-80`	`#2E3942`
`$mineral-90`	`#1B2327`
`$black`	`#000000`

Message and Support