Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Color

Colors infuse life and dynamism into interfaces, expressing emotions and setting the tone for communication.

  • Overview
  • Specs
  • Guidelines

The color system was designed to bring clarity to interfaces and support information hierarchy. It consists of customizable colors for each product/platform and others that are consistent across the entire system.

The following concepts provide the foundation as we strive to achieve balance and harmony through our User Interface design.

Brand Colors

These are the default color variables we apply to components in our Design System. This color will be updated according to the product in which the component is used.

Primary

Theme colors are applied throughout the product, with the primary color being the main one used in screens and components. Variations enhance readability and distinction. There are seven theme colors, with Theme-100 being the primary. In the light theme, colors get lighter from Theme-Highlight to Theme-10. In the dark theme, colors get darker, with the highlight being the lightest.

Light Theme
Theme-Highlight
—-

#0038CC
rgb(0, 56, 204)

Theme-100

#0046FE
rgb(0, 70, 254)

Theme-80

#2E67FF
rgb(46, 103, 255)

Theme-60

#6690FF
rgb(102, 144, 255)

Theme-40
—-

#B3C8FF
rgb(179, 200, 255)

Theme-20

#CCDAFF
rgb(204, 218, 255)

Theme-10

#E5EDFF
rgb(229, 237, 255)

Dark Theme
Theme-Highlight
—-

#99AFEB
rgb(153, 175, 235)

Theme-100

#829DE6
rgb(130, 157, 230)

Theme-80

#6385E0
rgb(99, 133, 224)

Theme-60

#0038CC
rgb(0, 56, 204)

Theme-40
—-

#00278F
rgb(0, 39, 143)

Theme-20

#001C66
rgb(0, 28, 102)

Theme-10

#00113D
rgb(0, 17, 61)

Secondary

Secondary colors are used for accent icons and are less common in screens and system components. They come in seven variations, with Secondary-100 being the main one. In the light theme, Secondary-10 is the lightest, while Secondary-Highlight is darker. These colors are set by default for components in our Design System and will adjust based on the product context.

Light Theme
Secondary-Highlight
—-

#B43F24
rgb(180, 63, 36)

Secondary-100

#CC492A
rgb(204, 73, 42)

Secondary-80

#E6502C
rgb(230, 80, 44)

Secondary-60

#FF5C35
rgb(255, 92, 53)

Secondary-40
—-

#FF9D86
rgb(255, 157, 134)

Secondary-20

#FED6CC
rgb(255, 157, 134)

Secondary-10

#FCF7F6
rgb(252, 247, 246)

Dark Theme
Secondary-Highlight
—-

#FFBEAE
rgb(255, 190, 174)

Secondary-100

#FF9D86
rgb(255, 157, 134)

Secondary-80

#FF6C49
rgb(255, 108, 73)

Secondary-60

#FF5C35
rgb(255, 92, 53)

Secondary-40
—-

#B34025
rgb(179, 64, 37)

Secondary-20

#802E1A
rgb(128, 46, 26)

Secondary-10

#4D1C10
rgb(77, 28, 16)

Beware

Incorporate brand-specific hues strategically throughout different sections of the interface to enhance visual prominence and immerse users in unique product experiences. However, exercise restraint to avoid saturating the design with brand colors, particularly on large expanses, as this could obscure hierarchy and impede smooth navigation.

Use brand colors mainly to communicating important messages or actions.

Avoid using brand colors for decorative purposes.

Neutral Colors

These are the system’s default colors, which remain consistent across products and components to maintain group coherence and visual identity.

The neutral palette comprises black, white, and shades of gray, providing a fundamental backdrop for the interface.
These colors are applied to surfaces, text, and layout elements. Within components, they frequently signify a change of state.

Black and White

Black and white don’t change between light and dark themes..
They were created for specific situations where there is a desire to maintain white or black, regardless of the theme.
In the header search, the icon and the placeholder use white to ensure readability over the colors in the header group.

Greyscale

It consists of an eight-color scale, with variations between the light and dark themes. In the light theme, the scale ranges from lightest to darkest, while in the dark theme, the opposite occurs.

The color grey-3 in the dark theme is intentionally darker than grey-2 and grey-1 due to its specific use.
For more information on modifying it, please refer to Light vs Dark Theme

Light Theme
Grey-1
—-

#FEFEFE
rgb(254, 254, 254)

Grey-2

#F7F8F9
rgb(247, 248, 249)

Grey-3

#F3F7FE
rgb(243, 247, 254)

Grey-4

#DFE4EB
rgb(223, 228, 235)

Grey-5
—-

#CBD3DB
rgb(203, 211, 219)

Grey-6

#7A858D
rgb(122, 133, 141)

Grey-7

#5E7187
rgb(94, 113, 135)

Grey-8

#3F5670
rgb(63, 86, 112)

Grey-9

#002C52
rgb(0, 44, 82)

Dark Theme
Grey-1
—-

#0D212F
rgb(13, 33, 47)

Grey-2

#192C3A
rgb(25, 44, 58)

Grey-3

#001524
rgb(0, 21, 36)

Grey-4

#4C5B66
rgb(76, 91, 102)

Grey-5
—-

#5D6B74
rgb(93, 107, 116)

Grey-6

#7A858D
rgb(122, 133, 141)

Grey-7

#CDD2D4
rgb(205, 210, 212)

Grey-8

#F0F2F3
rgb(240, 242, 243)

States

State colors convey immediate information by leveraging real-world associations, such as red for danger, yellow for caution, and green for positive feedback. Consistent usage and pairing with other indicators reinforce these contexts, reducing cognitive load.

Info

States solely for information, novelty, or minimal impact.

Light Theme
Info-Highlight
—-

#003063
rgb(0, 48, 99)

Info-100

#004B98
rgb(0, 75, 152)

Info-80

#44A5FD
rgb(68, 165, 253)

Info-60

#71BBFD
rgb(113, 187, 253)

Info-40
—-

#9ED1FC
rgb(158, 209, 252)

Info-20

#C0E2FB
rgb(192, 226, 251)

Info-10

#E2F2FA
rgb(226, 242, 250)

Dark Theme
Info-Highlight
—-

#9FCBFF
rgb(159, 203, 255)

Info-100

#5FA8FF
rgb(95, 168, 255)

Info-80

#3E85D8
rgb(62, 133, 216)

Info-60

#2E6BB1
rgb(46, 107, 177)

Info-40
—-

#1F528A
rgb(31, 82, 138)

Info-20

#0F3863
rgb(15, 56, 99)

Info-10

#001F3C
rgb(0, 31, 60)

Error

Situations where critical errors or warnings are triggered.

Light Theme
Error-Highlight
—-

#710815
rgb(0, 48, 99)

Error-100

#B80D19
rgb(184, 13, 25)

Error-80

#DB3646
rgb(219, 54, 70)

Error-60

#F18894
rgb(241, 136, 148)

Error-40
—-

#F6B8BF
rgb(246, 184, 191)

Error-20

#F9CFD4
rgb(249, 207, 212)

Error-10

#FCE7EA
rgb(252, 231, 234)

Dark Theme
Error-Highlight
—-

#FF8C8C
rgb(255, 140, 140)

Error-100

#FF5E5E
rgb(255, 94, 94)

Error-80

#FF4646
rgb(255, 70, 70)

Error-60

#F32323
rgb(243, 35, 35)

Error-40
—-

#800D0F
rgb(128, 13, 15)

Error-20

#4B0305
rgb(75, 3, 5)

Error-10

#3C0001
rgb(60, 0, 1)

Warning

Intermediate states of validation or pending status.

Light Theme
Warning-Highlight
—-

#913300
rgb(145, 51, 0)

Warning-100

#B24F00
rgb(178, 79, 0)

Warning-80

#F8A326
rgb(248, 163, 38)

Warning-60

#FBC87D
rgb(251, 200, 125)

Warning-40
—-

#FDDFB3
rgb(253, 223, 179)

Warning-20

#FEEDD4
rgb(254, 237, 212)

Warning-10

#FEF6E9
rgb(254, 246, 233)

Dark Theme
Warning-Highlight
—-

#FAB875
rgb(250, 184, 117)

Warning-100

#F79530
rgb(247, 149, 48)

Warning-80

#D17214
rgb(209, 114, 20)

Warning-60

#AC5B0F
rgb(172, 91, 15)

Warning-40
—-

#88440A
rgb(136, 68, 10)

Warning-20

#632D05
rgb(99, 45, 5)

Warning-10

#3E1600
rgb(62, 22, 0)

Success

Used following the validation or completion of an action.

Light Theme
Success-Highlight
—-

#07422A
rgb(7, 66, 42)

Success-100

#0E5E3F
rgb(14, 94, 63)

Success-80

#397D62
rgb(57, 125, 98)

Success-60

#7CCFAE
rgb(124, 207, 174)

Success-40
—-

#97E8C7
rgb(151, 232, 199)

Success-20

#B2ECD3
rgb(178, 236, 211)

Success-10

#E5F7EE
rgb(229, 247, 238)

Dark Theme
Success-Highlight
—-

#91E7C4
rgb(145, 231, 196)

Success-100

#56DEAB
rgb(86, 222, 171)

Success-80

#24B780
rgb(36, 183, 128)

Success-60

#1FA371
rgb(31, 163, 113)

Success-40
—-

#1A5D42
rgb(26, 93, 66)

Success-20

#09492F
rgb(9, 73, 47)

Success-10

#002615
rgb(0, 38, 21)

Accent

This is the thematic set of colors to be used in categories and events as informative markers. These colors are optimized to work in light and dark themes. There is no distinction between themes to make it easier for the user to identify the type, regardless of the theme being used.

More colors may exist, if needed, to cover a broader range of content.

Tangerine
—-

#F4511E
rgb(244, 81, 30)

Pumpkin

#EF6C00
rgb(239, 108, 0)

Eucalyptus

#009688
rgb(0, 150, 136)

Grape

#8E24AA
rgb(142, 36, 170)

Citron
—-

#E4C441
rgb(228, 196, 65)

Cherry-Blossom

#D81B60
rgb(216, 27, 96)

Blueberry

#3F51B5
rgb(63, 81, 181)

Beetroot

#AD1457
rgb(173, 20, 87)

Basil
—-

#0B8043
rgb(11, 128, 67)

Avocado

#C0CA33
rgb(192, 202, 51)

Lavender

#828BC2
rgb(130, 139, 194)

Charts

This is the thematic set of colors to be used in charts. These colors are optimized to work in light and dark themes. There is no distinction between themes to make it easier for the user to identify the type, regardless of the theme being used. In the other hand a colorful version is available.

Main

Chart 1 – 4 data
Chart-2
—-

#4372D3
rgb(67, 114, 211)

Chart-5

#9EACE2
rgb(158, 172, 226)

Chart-10

#F3D497
rgb(243, 212, 151)

Chart-11

#EBBB4A
rgb(235, 187, 74)

Chart 5 – 8 data
Chart-1
—-

#1C4EB7
rgb(28, 78, 183)

Chart-2

#4372D3
rgb(67, 114, 211)

Chart-5

#9EACE2
rgb(158, 172, 226)

Chart-6

#C6CCE8
rgb(198, 204, 232)

Chart-8
—-

#FAEDD7
rgb(250, 237, 215)

Chart-10

#F3D497
rgb(243, 212, 151)

Chart-11

#EBBB4A
rgb(235, 187, 74)

Chart-13

#DDA82D
rgb(221, 168, 45)

Chart 9 – 13 data
Chart-1
—-

#1C4EB7
rgb(28, 78, 183)

Chart-2

#4372D3
rgb(67, 114, 211)

Chart-3

#6690E6
rgb(102, 144, 230)

Chart-4

#8BA1E6
rgb(139, 161, 230)

Chart-5
—-

#9EACE2
rgb(158, 172, 226)

Chart-6

#C6CCE8
rgb(198, 204, 232)

Chart-7

#EFEFEF
rgb(239, 239, 239)

Chart-8

#FAEDD7
rgb(250, 237, 215)

Chart-9
—-

#F8E1B9
rgb(248, 225, 185)

Chart-10

#F3D497
rgb(243, 212, 151)

Chart-11

#EBBB4A
rgb(235, 187, 74)

Chart-12

#E2B243
rgb(226, 178, 67)

Chart-13
—-

#DDA82D
rgb(221, 168, 45)

Colorful

Chart 1 – 4 data
Chart-2
—-

#598EF8
rgb(89, 142, 248)

Chart-5

#A378F8
rgb(163, 120, 248)

Chart-10

#F3D497
rgb(255, 92, 53)

Chart-11

#FE8E49
rgb(254, 142, 73)

Chart 5 – 8 data
Chart-1
—-

#0046FE
rgb(0, 70, 254)

Chart-2

#598EF8
rgb(89, 142, 248)

Chart-5

#A378F8
rgb(163, 120, 248)

Chart-6

#6F43C0
rgb(111, 67, 192)

Chart-8
—-

#E61A61
rgb(230, 26, 97)

Chart-10

#F3D497
rgb(255, 92, 53)

Chart-11

#FE8E49
rgb(254, 142, 73)

Chart-13

#FFE081
rgb(255, 224, 129)

Chart 9 – 13 data
Chart-1
—-

#0046FE
rgb(0, 70, 254)

Chart-2

#598EF8
rgb(89, 142, 248)

Chart-3

#7FADF0
rgb(127, 173, 240)

Chart-4

#B1C5FF
rgb(177, 197, 255)

Chart-5
—-

#A378F8
rgb(163, 120, 248)

Chart-6

#6F43C0
rgb(111, 67, 192)

Chart-7

#BC004B
rgb(188, 0, 75)

Chart-8

#E61A61
rgb(230, 26, 97)

Chart-9
—-

#FF4E7C
rgb(255, 78, 124)

Chart-10

#FF5C35
rgb(255, 92, 53)

Chart-11

#FE8E49
rgb(254, 142, 73)

Chart-12

#FEC55C
rgb(254, 197, 92)

Chart-13
—-

#FFE081
rgb(255, 224, 129)

Last Update

Previous version of the greyscale
Updated version of the greyscale
  • New variation on the grey scale: the new grey-7;
  • Grey-7 and grey-8 have changed to grey-8 and grey-9, respectively.
Não foram encontrados artigos.