Color

Text Colors

	Text/Main #1F2326	• Regular text • Titles
	Text/Secondary #737577	• Secondary text • Hints
	Text/Placeholder&Disabled #999999	• Placeholder text • Disabled text
	Text/Action #0080E5	• Text buttons
	Text/Main Action #FFFFFF	• Text on primary buttons • Titles on messages
	Text/Link #0F5B99	• Links • Blue variant of labels
	Text/Hovered #FF008C	• Hovered state of links, text buttons,    and tabs in tab bars
	Text/Error #C22731	• Error -, failure -, and critical text • Destructive action buttons
	Text/Warning #CC8B00	• Warning text
	Text/Success #C22731	• Text related to success -,    confirmation -, and availability

Icon Colors

	Icon/Standard                   #B8D1E5	• Regular icon buttons
	Icon/Main #0080E5	• Main icon buttons
	Icon/Hovered #FF008C	• Hovered state of icon buttons
	Icon/Supportive #999999	• Non-clickable supportive icons
	Icon/Disabled #D4D4D4	• Disabled icon buttons
	Icon/Error #DB5860	• Icons representing error -,    failure, and critical content
	Icon/Warning #EDA200	• Icons representing warning    content
	Icon/Success #59A869	• Icons representing success -,    confirmation -, and availability

Component Colors

	Component/Main #008EFF	• Main color for buttons,    radio buttons, etc.
	Component/Main Hover #007EE5	• Hovered state for buttons,    radio buttons, etc.
	Component/Border #C5D1DB	• Border of buttons, text fields, etc.
	Component/Border Error #DB5860	• Border of select field, text fields,    etc. in error state
	Component/Border Hover #80C6FF	• Border of select field, text fields,    etc. in hover state
	Component/Disabled #D4D4D4	• Standard border color for    disabled components
	Component/Unselected Disabled #E8E8E8	• Border color for disabled and    unselected checkboxes, radio buttons,    and switchers
	Component/Divider #DFE5EB	• Divider lines • Border of dialogs and tooltips

Background Colors

	Background/Main #FFFFFF	• Basic Background
	Background/Sidebar #F7F9FA	• Sidebar background
	Background/Hover #EBF6FF	• Background of hovered items in lists
	Background/Dropdown Hover #D4EDFF	• Background of hovered items in    drop-down lists
	Background/Tag #E6ECF2	• Background of labels
	Background/Tag Hovered #D3DAE0	• Background of labels in hovered state
	Background/Error #FFD5CB	• Background for erroneous -,    failed, and critical content
	Background/Warning #FAECCD	• Background for warning content
	Background/Success #D8F0D8	• Background for successful -,    confirmed -, and available content
	Background/Dark #111314	• Background for dark header bars • Background for messages
	Background/Disabled #F5F5F5	• Background for disabled components

Dark Theme

For each color in Ring UI, there is a corresponding dark theme color. When setting your UI to dark theme, all colors will be adjusted automatically. Usually, there should be no need to adapt the colors for the dark theme. However, you should still check if everything is legible and understandable.

You can find all dark theme colors in our Figma library or in our React library.

Minimum Contrast Requirements for Text

The minimum contrast requirement for text in RingUI is 4.0:1. To check if this is given in your design, you can use a web app (WebAim Contrast Checker) or install a plugin to Figma (Figma contrast plugin) .

Following this requirement ensures that the user can easily read the text, even if they have a minor vision loss, operate on screens with low contrast ratio, or use their laptop in bright lighting conditions.

Exceptions for Minimum Contrast Requirements

You don’t have to meet the minimum contrast requirement if the text is incidental or decorative and doesn’t serve any essential purpose. However, it might also be a good idea to omit elements in your interface that are incidental or decorative altogether.

Another case where you don’t have to meet the minimum requirements is text on disabled components. As long as a component is disabled it shouldn't serve an essential purpose.

Further Guidelines on Color

Always go for the existing colors before creating any new ones for your design. This ensures a consistent look of all RingUI applications.

Never use color as your only way of communication. Especially for color-blind people, this leads to major problems. If you use color to convey information, you need an extra cue, such as text or icons (WCAG, Use of Color).

Pay attention when using red, yellow, and green. These colors have established meanings and, in general, shouldn’t be used in any other way.

• Red: critical (error, failure, risk)

• Yellow: warning (attention or action required)

• Green: success (confirmation, availability)

It can cause problems when you use these colors otherwise. For example, if you use red in your interface for non-critical components, an actual critical component colored in red won’t grab as much attention anymore. (Interaction-Design, Understand Color Symbolism)

Use colors consistently. If you connect some color with a specific meaning, make sure to use this color for this meaning throughout the whole application.

If you can, test your colors in different lighting conditions and on different screens.