Skip to main content

Colours

Use colour to signal structure, highlight or emphasize important information or elements, and display different states.

Use colour intentionally. It’s not decoration. Colour is supposed to be functional.

General guidelines​

We have different shades for every defined colour in Bright. For most of our colours, the following points should apply:

  • Every colour has specific guidelines for meaning. We honour these guidelines to maintain consistency across the product.
  • It’s usually safe to combine the Light and Dark shades of any colour. Text in the Dark shade should be readable on the Light background of its colour.
  • Every non-Dark colour has two additional shades defined: :active and :hover. These additional shades should only be used for very specific cases.

Text​

Text tokens are used for a variety of copy across the system. Each token is used in different contexts and should adhere to the guidelines below. Do not use these tokens on other elements (such as surfaces), instead use the surface token variant.

Text Main​

textPrimaryneutral700
#0A2233rgba(10, 34, 51, 1)hsla(205, 67%, 12%, 1)
textSecondaryneutral600
#475966rgba(71, 89, 102, 1)hsla(205, 18%, 34%, 1)
textDisabledneutral400
#92A5B3rgba(146, 165, 179, 1)hsla(205, 18%, 64%, 1)
textInvertwhite
#FFFFFFrgba(255, 255, 255, 1)hsla(0, 0%, 100%, 1)

Token guidelines​

TokenGuidelines
textPrimarytextPrimary is used as the main colour for all title and copy on light surfaces. This should be used for high emphasis text to communicate copy to the user.
textSecondarytextSecondary is used as a secondary colour for text that acts as helper or hints to the user (such as input descriptions).
textDisabledtextDisabled is used for text that is within a disabled component. This text will still be ligible but by using this colour token it is communicated to the user that the text is disabled and not relevent.

Text Links​

textLinkDefaultprimary700
#0057ADrgba(0, 87, 173, 1)hsla(210, 100%, 34%, 1)
textLinkHoverprimary600
#0070E0rgba(0, 112, 224, 1)hsla(210, 100%, 44%, 1)
textLinkActiveprimary500
#3399FFrgba(51, 153, 255, 1)hsla(210, 100%, 60%, 1)

Token guidelines​

TokenGuidelines
textLinkDefaulttextLinkDefault is used for the colour for text links. This can be used in a body of text or within components such as ButtonLinks. This colour has interactions with the variants below depending on its state.
textLinkHovertext links or ButtonLink text will change to this textLinkHover state when they are hovered over. This highlights to the user that the link is clickable and responsive.
textLinkActivetextLinkActive is the state textLinkHover will change to to indicate to the user that the link has been clicked

Text Assets​

textAccentaccent500
#E10078rgba(225, 0, 120, 1)hsla(328, 100%, 44%, 1)
textSuccessDarksuccess900
#004C26rgba(0, 76, 38, 1)hsla(150, 100%, 15%, 1)
textSuccessLightsuccess800
#006633rgba(0, 102, 51, 1)hsla(150, 100%, 20%, 1)
textErrorDarkerror800
#660000rgba(102, 0, 0, 1)hsla(0, 100%, 20%, 1)
textErrorLighterror500
#E51A1Argba(229, 26, 26, 1)hsla(0, 80%, 50%, 1)
textWarningDarkwarning900
#4D2600rgba(77, 38, 0, 1)hsla(30, 100%, 15%, 1)
textWarningLightwarning500
#E5801Argba(229, 128, 26, 1)hsla(30, 80%, 50%, 1)
textLightWarninglightWarning900
#503E00rgba(80, 62, 0, 1)hsla(47, 100%, 16%, 1)

Token guidelines​

TokenGuidelines
textAccenttextAccent can be used as secondary link text for high emphasis actions (such as 'view full profile' on employees cards). It is also used as titles in branding for specific areas of they system (such as lightning). textAccent should be used sparingly and never used for body text.
textSuccessDarktextSuccessDark is one of two colours used for success messaging. This is used for text within a coloured background (eg; surfaceSuccessLight, surfaceBgSecondary). This darker variant is used to maintain a high contrast against the coloured background. For success messaging on white, see below. Despite being usable on coloured background, never use textSuccessDark on any 'default' or 'dark' surfaces.
textSuccessLighttextSuccessLight is the second colour used for success messaging. Unlike the darker variant above, this should not be used on coloured backgrounds as is instead used on white backgrounds only.
textErrorDarktextErrorDark is one of two colours used for error messaging. This is used for text within a coloured background (eg; surfaceErrorLight, surfaceError,Secondary). This darker variant is used to maintain a high contrast against the coloured background. For error messaging on white backgrounds, see below. Despite being usable on coloured backgrounds, never use textErrorDark on any 'default' or 'dark' durfaces.
textErrorLighttextErrorLight is the second colour used for error messaging. Unlike the darker variant above, this should not be used on coloured backgrounds as is instead used on white backgrounds only.
textWarningtextWarning is used for warning messaging titles to users (see alerts, see badge). This can be used on light and white surfaces. Do not use this on "dark" or "default" surfaces. Do not use this as a colour for body text (longer than 1-2 words) Instead use textWarningLight.
textWarningLighttextWarningLight is used for warning messaging body text to users (see alerts, see badge). This can be used on light and white surfaces. Do not use this on "dark" or "default" surfaces.
textLightWarningtextLightWarning is used for light warning messaging to users (see badge). This can be used on light and white surfaces. Do not use this on "dark" or "default" surfaces.

Surfaces​

Background surfaces​

surfaceBgPrimarywhite
#FFFFFFrgba(255, 255, 255, 1)hsla(0, 0%, 100%, 1)
surfaceBgSecondaryneutral50
#FAFDFFrgba(250, 253, 255, 1)hsla(204, 100%, 99%, 1)
surfaceBgNavneutral700
#102132rgba(16, 33, 50, 1)hsla(210, 52%, 13%, 1)

Token guidelines​

TokenGuidelines
surfaceBgPrimarysurfaceBgPrimary is the primary background for the UI. This allows us to create depth within the visual hierarchy and should be used in most usecases.
surfaceBgSecondarysurfaceBgSecondary is used as a secondary background colour for elements within the UI. this allows us to create further depth between the background and some elements. This can also be used within components such as tables and filter dialogues to create a flat contrast from the background or other elements within the component.
surfaceBgNavsurfaceBgNav is used as the background for the navigation bar within BrightHR's webapp. This is the only usecase for this colour and it should not be applied anywhere else. Always be sure to use light text tokens for copy or icons on this background.

Brand surfaces​

surfaceBrandDarkprimary700
#0057ADrgba(0, 87, 173, 1)hsla(210, 100%, 34%, 1)
surfaceBrandDefaultprimary400
#3DB0F7rgba(61, 176, 247, 1)hsla(203, 92%, 60%, 1)
surfaceBrandLightprimary50
#EBF7FFrgba(235, 247, 255, 1)hsla(204, 100%, 96%, 1)

Token guidelines​

TokenGuidelines
surfaceBrandDarksurfaceBrandDark can be used to communicate informational components and elements. This is the darkest variant for brand surfaces and has the highest contrast to any background (other than surfaceBgNav) and as such will act as one of most important elements in the UIs visual hierarchy if applied. This should only be used for elements which will have short, direct copy (eg, badge, buttons, tags)
surfaceBrandDefaultsurfaceBrandDefault is BrightHRs primary brand colour and runs as a constant throughout the entire system. This is also used for informational elements but be wary of using this too much to distract from branding elements. Similarly to surfaceBrandDark, this should only be used for mostly decorative surfaces and elements so please refrain from using this as a background for containers with large amounts of text.
surfaceBrandLightsurfaceBrandLight can be used to communicate informational components and elements. This is the lightest variant for brand surfaces and as such is lower in the visual hierarchy than other default or dark variants of this surface (and any other). This can be used for information elements that require more copy (such as alerts) and requires the darkest variants of any text token.

Success surfaces​

surfaceSuccessDarksuccess800
#006633rgba(0, 102, 51, 1)hsla(150, 100%, 20%, 1)
surfaceSuccessDefaultsuccess700
#00994Crgba(0, 153, 76, 1)hsla(150, 100%, 30%, 1)
surfaceSuccessLightsuccess100
#CCFFE5rgba(204, 255, 229, 1)hsla(149, 100%, 90%, 1)
TokenGuidelines
surfaceSuccessDarksurfaceSuccessDark can be used to communicate success components and elements. This is the darkest variant for success surfaces and has the highest contrast to any background (other than surfaceBgNav) and as such will act as one of most important elements in the UIs visual hierarchy if applied. This should only be used for elements which will have short, direct copy (eg, badge, buttons, tags)
surfaceSuccessDefaultsurfaceSuccessDefault is used for success elements that similarly to surfaceSuccessDark don't contain much text. This can be used for progress bars and icons. If text is required, please use textInvert.
surfaceSuccessLightsurfaceSuccessLight is used for success elements that have a larger body of text (such as alerts). textPrimary and textSecondary can be used on this as a container background, but refrain from using textInvert.

Warning surfaces​

Warning​

Use Warning tokens for elements that need to be brought to the attention of the user urgently, but do not stop the users current flow. These may affect other settings or processes, or even the how data is stored and altered, however the user can continue with their actions. Elements that the user need to be brought attention to in order to continue their flow, should user the 'error' tokens.

surfaceWarningDarkWarning800
#663300rgba(102, 51, 0, 1)hsla(30, 100%, 20%, 1)
surfaceWarningDefaultWarning500
#E5801Argba(229, 128, 26, 1)hsla(30, 80%, 50%, 1)
surfaceWarningLighttWarning100
#FFE5CCrgba(255, 229, 204, 1)hsla(29, 100%, 90%, 1)
TokenGuidelines
surfaceWarningDarksurfaceWarningDark can be used to communicate warning components and elements. This is the darkest variant for error surfaces and has the highest contrast to any background (other than surfaceBgNav) and as such will act as one of most important elements in the UIs visual hierarchy if applied. This should only be used for elements which will have short, direct copy (eg, badge, buttons, tags)
surfaceWarningDefaultsurfaceWarningDefault is used for warning elements that similarly to surfaceSuccessDark don't contain much text. This can be used for components like; alert, butons aswell as error icons. If text is required, please use textInvert.
surfaceWarningLightsurfaceWarningLight is used for warning elements that have a larger body of text (such as alerts). textPrimary and textSecondary can be used on this as a container background, but refrain from using textInvert.
Light Warning​

LightWarning tokens; similarly to Warning tokens, highlight areas that need attention from the user but aren't urgent or need to be actioned immediately. LightWarning surfaces and borders are used sparingly over the product estate, so think carefully if these tokens should be used and will bring the attention of components or elements to the user correctly.

surfaceLightWarningDarklightWarning800
#5C450Argba(92, 69, 10, 1)hsla(43, 80%, 20%, 1)
surfaceLightWarningDefaultlightWarning500
#E5AC1Argba(229, 172, 26, 1)hsla(43, 80%, 50%, 1)
surfaceLightWarningLightlightWarning100
#FFFACCrgba(255, 250, 204, 1)hsla(54, 100%, 90%, 1)
TokenGuidelines
surfaceLightWarningDarksurfaceLightWarningDark can be used to communicate error components and elements. This is the darkest variant for warning surfaces and has the highest contrast to any background (other than surfaceBgNav) and as such will act as one of most important elements in the UIs visual hierarchy if applied. This should only be used for elements which will have short, direct copy (eg, badge, buttons, tags)
surfaceLightWarningDefaultsurfaceLightWarningDefault is used for warning elements that similarly to surfaceSuccessDark don't contain much text. This can be used for components like; alert, butons aswell as error icons. If text is required, please use textInvert.
surfaceLightWarningLightsurfaceLightWarningLight is used for warning elements that have a larger body of text (such as alerts). textPrimary and textSecondary can be used on this as a container background, but refrain from using textInvert.

Error surfaces​

Error surfaces are used to convey components or elements that require immediate attention and will either stop the user from completing their task, have a negative effect on their task, or even provide a destructive action (such as deleting).

surfaceErrorDarkerror800
#990000rgba(153, 0, 0, 1)hsla(0, 100%, 30%, 1)
surfaceErrorsDefaulterror500
#E51A1Argba(229, 26, 26, 1)hsla(0, 80%, 50%, 1)
surfaceErrorLighterror50
#FFE5E6rgba(255, 229, 230, 1)hsla(358, 100%, 95%, 1)
TokenGuidelines
surfaceErrorDarksurfaceErrorDark can be used to communicate error components and elements. This is the darkest variant for error surfaces and has the highest contrast to any background (other than surfaceBgNav) and as such will act as one of most important elements in the UIs visual hierarchy if applied. This should only be used for elements which will have short, direct copy (eg, badge, buttons, tags)
surfaceErrorDefaultsurfaceErrorDefault is used for error elements that similarly to surfaceSuccessDark don't contain much text. This can be used for components like; alert, butons aswell as error icons. If text is required, please use textInvert.
surfaceErrorLightsurfaceErrorLight is used for error elements that have a larger body of text (such as alerts). textPrimary and textSecondary can be used on this as a container background, but refrain from using textInvert.

Borders​

Like surfaces; there are a number of borders that are used in different contexts through the system and are used to communicate a components purpose quickly. Some border tokens should only be used with other surface tokens, these are outlined below. Do not use a surface variant as a border instead use the token variant.

borderPrimaryborder
#0000001Argba(0, 0, 0, 0.1))hsla(0, 0%, 0%, 0.1)
borderNeutralneutral400
#92A5B3rgba(146, 165, 179, 1)hsla(205, 18%, 64%, 1)
borderSuccesssuccess700
#00994Crgba(0, 153, 76, 1)hsla(150, 100%, 30%, 1)
borderBrandDarkprimary700
#0057ADrgba(0, 87, 173, 1)hsla(210, 100%, 34%, 1)
borderBrandLightprimary400
#3DB0F7rgba(61, 176, 247, 1)hsla(203, 92%, 60%, 1)
borderDestructiveerror700
#990000rgba(153, 0, 0, 1)hsla(0, 100%, 30%, 1)
borderErrorerror500
#E51A1Argba(229, 26, 26, 1)hsla(0, 80%, 50%, 1)
borderWarningwarning500
#E5801Argba(229, 128, 26, 1)hsla(30, 80%, 50%, 1)
borderLightWarninglightWarning500
#E5AC1Argba(229, 172, 26, 1)hsla(43, 80%, 50%, 1)
TokenGuidelines
borderPrimaryUse this for an surfaces with a dark or default variant. This border has 10% opacity and as such will add a darker border of your surface colour.
borderNeutralUse for neutral containers and components. This should be used with light surfaces. If you need a border for your dark or default surfaces, use borderPrimary.
borderSuccessUse for success containers and components. This should be used with the light variant of success surfaces. If you need a border for your dark or default surfaces, use borderPrimary.
borderBrandDarkUse for informational containers and components and secondary outline CTAs.
borderBrandLightUse for informational containers and components. This should be used with light variant of brand surfaces, this border can also be used for surfaceBgPrimary. If you need a border for your dark or default surfaces, use borderPrimary.
borderDestructiveUse for destructive containers and components destructive outline CTAs.
borderErrorUse for error containers and components. This should be used with light variant of error surfaces. If you need a border for your dark or default surfaces, use borderPrimary.
borderWarningUse for warning containers and components. This should be used with the light variant of warning surfaces. If you need a border for your dark or default surfaces, use borderPrimary.
borderLightWarningUse for warning containers and components. This should be used with the light variant of light warning surfaces. If you need a border for your dark or default surfaces, use borderPrimary.