React UI
Edit page
Home
Getting Started
Customize
Foundation
Breakpoints Colors
General Guidelines Brand Colors UI Colors Grays Typography Icons Spacing
Components: UI
Components: Layouts
CSS Helpers
Readme

# Colors

Colors help you communicate the structure of your UI, emphasize any important information, or signal different states of the UI.
Use colors intentionally — they are not a decoration, they should always serve a purpose.

##
General Guidelines

We have different shades for all of our brand and UI colors in React UI. The following principles apply for them:

- Every color has three additional shades defined: light, dark, and darker. These additional shades should only be used for specific cases.
- Light shade of any color should only be used for background.
- Dark shades should be used for text on light shade background to improve contrast, or to reflect a state of a component (hover, focus, active).
- Every color suggests what color should be used for text placed on it. You don't have to think if black or white is better — just use
  `on-primary` for text on primary color background or `on-success` for success color background, and you should be safe.

A full scale of shades of gray is here at your disposal. But remember it's better to choose just a couple of them rather than using all shades of gray impulsively. Reducing your gray color palette to three or four shades will help you keep your UI clean and unobtrusive.

All colors can be changed by
overriding the corresponding CSS custom properties.

## Brand Colors

Primary and secondary brand colors represent the visual identity of your project.

primary
`--rui-color-primary`
primary-dark
`--rui-color-primary-dark`
primary-darker
`--rui-color-primary-darker`
primary-light
`--rui-color-primary-light`
on-primary
`--rui-color-on-primary`
secondary
`--rui-color-secondary`
secondary-dark
`--rui-color-secondary-dark`
secondary-darker
`--rui-color-secondary-darker`
secondary-light
`--rui-color-secondary-light`
on-secondary
`--rui-color-on-secondary`

## UI Colors

UI colors are used to communicate a meaning: green means success, orange means warning, red means danger or error, etc.

success
`--rui-color-success`
success-dark
`--rui-color-success-dark`
success-darker
`--rui-color-success-darker`
success-light
`--rui-color-success-light`
on-success
`--rui-color-on-success`
warning
`--rui-color-warning`
warning-dark
`--rui-color-warning-dark`
warning-darker
`--rui-color-warning-darker`
warning-light
`--rui-color-warning-light`
on-warning
`--rui-color-on-warning`
error
`--rui-color-error`
error-dark
`--rui-color-error-dark`
error-darker
`--rui-color-error-darker`
error-light
`--rui-color-error-light`
on-error
`--rui-color-on-error`
help
`--rui-color-help`
help-dark
`--rui-color-help-dark`
help-darker
`--rui-color-help-darker`
help-light
`--rui-color-help-light`
on-help
`--rui-color-on-help`
info
`--rui-color-info`
info-dark
`--rui-color-info-dark`
info-darker
`--rui-color-info-darker`
info-light
`--rui-color-info-light`
on-info
`--rui-color-on-info`
note
`--rui-color-note`
note-dark
`--rui-color-note-dark`
note-darker
`--rui-color-note-darker`
note-light
`--rui-color-note-light`
on-note
`--rui-color-on-note`

## Grays

Shades of should be used to communicate structure, either with backgrounds, or with borders. They are all neutral grays, which means they are derived from pure white color (`#fff`).

white
`--rui-color-white`
black
`--rui-color-black`
gray-50
`--rui-color-gray-50`
gray-100
`--rui-color-gray-100`
gray-200
`--rui-color-gray-200`
gray-300
`--rui-color-gray-300`
gray-400
`--rui-color-gray-400`
gray-500
`--rui-color-gray-500`
gray-600
`--rui-color-gray-600`
gray-700
`--rui-color-gray-700`
gray-800
`--rui-color-gray-800`
gray-900
`--rui-color-gray-900`

Next: Typography →