Design
Guide

OXD Introduction Design Thinking Tables & List View Cards & Shaps Modals & Popups Advance Componets Charts

QA Standards

Developer

Colors

Color is a great way to provide status information, give feedback in response to user actions, and help people visualize data. Use color judiciously for communication. In general, color should be used sparingly, like when you need to call attention to important information. For example, a red triangle that warns people of a critical problem becomes less effective when you use red elsewhere in an app for noncritical reasons.

Brand Colors

Primary Orange

#ff7b1d
rgb(255, 123, 29)

PrimaryColor1

leave Green

#17a954
rgb(23 169 84)

PrimaryColor2

Yellow Orange

#ffaa00
rgb(255, 170, 0)

SecondaryColor1

Beach Brown

#f4eec7
rgb(244, 238, 199)

SecondaryColor2

Lemon Green

#ccda46
rgb(204, 218, 70)

SecondaryColor3

Pear Green

#76bc21
rgb(118, 188, 33)

SecondaryColor4

Interface Colors

Midnight Gray

#38455d
rgb(56, 69, 93)

InterfaceColors1

Steel Gray

#64728c
rgb(100, 114, 140)

InterfaceColors2

Space Gray

#929baa
rgb(146, 155, 170)

InterfaceColors3

Pastel Gray

#cfd3de
rgb(207, 211, 222)

InterfaceColors4

Moon light

#e8eaef
rgb(232, 234, 239)

InterfaceColors5

Light gray

#f1f2f5;
rgb(241 242 245);

BackgroundColor1

Pastel White

#f6f5fb
rgb(246, 245, 251)

BackgroundColor2

White Shadow

#fafafc;
rgb(250 250 252);

BackgroundColor3

Feedback Colors

Info

#1e6ceb
rgb(30, 108, 235)

FeedbackColor1

Danger

#eb0910
rgb(235, 9, 16)

FeedbackColor2

Reject

#ac0c0c
rgb(172, 12, 12)

FeedbackColor3

Warning

#ffa62f
rgb(255, 166, 47)

FeedbackColor4

Success

#34bc40
rgb(52, 188, 64)

FeedbackColor5

Accessible Colors (AA)

Orange

#C75300
rgb(255, 123, 29)

PrimaryColor1

Green

#138844
rgb(23 169 84)