Colors

Colors are used to reflect a product's style with consistency across all components used on the Admin UI. Each color has some specific function when applied to an element on the screen. The following concepts are part of our efforts to make the user interface harmonious and consistent. We are committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios.

Tones

The usage of the colors in our system reflect the product’s tone of voice with consistency across all components used on the applications. We make available a spectrum of tones which are leveraged across the entire component suite.

Main

The principal interactive element on the screen. It should drive the user’s attention to the tasks that should be done using the application.

Critical

Inform to the user that that something went wrong or that they need extreme caution before taking some action.

Warning

It informs to the user that something is not working as it expected or that they need some caution before taking some action.

Positive

It represents something good or new things. Get the user to be aware that something good happened.

Neutral

Information that do not need emphasis. Already actioned in the past.

Info

It informs or guides the user in a calm and non-urgent way.

Semantic

	Main	Critical	Warning	Positive	Neutral	Info
actions	primary	destructive
form fields		invalid			valid
messages		error	warning	success	description	notification
status		removed	pending	added	default
priority		major	medium		trivial	minor
payments		cancelled	in progress	completed	archived

Palettes

Blue

We use blue40 for primary actions (which will move the user forward in the flow) like buttons, text links, etc., and interactive elements like element selection, drag states, etc. Elements that are not actionable or interacting must not use this color.

Name

blue05

HEX

#F1F4FC

Name

blue10

HEX

#DDE5F7

Name

blue20

HEX

#BBCBF0

Name

blue30

HEX

#96B2F2

Name

blue40

HEX

#2953B2

Name

blue50

HEX

#20408C

Name

blue60

HEX

#172F66

Do

• Use blue40 for primary actions.

Dont's

• Do not use blue40 for highlighting information. Because using this color for actions may confuse when used on something like highlighting some information or text.

• Do not use blue40 for the color of the backgrounds. It can interfere with the visual priorities on the page and draw attention to non-action elements. Generally, buttons should be the only elements with dark backgrounds. Nothing on the page should draw attention away from them.

Green

• Green color is mainly used for backgrounds in positive messages, states (completed, paid, added, etc.), and progress.
• Do not use green color for next buttons.

Name

green05

HEX

#ECF7EC

Name

green10

HEX

#DFF1E0

Name

green20

HEX

#AEDDB0

Name

green30

HEX

#83D187

Name

green40

HEX

#38853C

Name

green50

HEX

#285F2B

Name

green60

HEX

#1C431E

Orange:

• Orange color is mainly used for backgrounds in warning messages, actions and in states.
• Use orange50 for text on white backgrounds.

Name

orange05

HEX

#FFF5EC

Name

orange10

HEX

#FFEBD7

Name

orange20

HEX

#FFCD9B

Name

orange30

HEX

#F5AE70

Name

orange40

HEX

#D56A00

Name

orange50

HEX

#A65200

Name

orange60

HEX

#5C2C00

Red

• Red color is mainly used for backgrounds in critical messages, remove, delete and in states (canceled, failed) actions.
• Use red color for critical buttons.

Name

red05

HEX

#FBF2F2

Name

red10

HEX

#F8E3E3

Name

red20

HEX

#EDBABA

Name

red30

HEX

#F49494

Name

red40

HEX

#CC3D3D

Name

red50

HEX

#962828

Name

red60

HEX

#782020

Light Blue

• Light Blue color is mainly used for backgrounds in information messages, and status.
• Use lightBlue color for highlighting information such as text or numbers.
• Use lightBlue color for line charts.

Name

lightBlue05

HEX

#EDF5FB

Name

lightBlue10

HEX

#DEECF7

Name

lightBlue20

HEX

#B9DAF3

Name

lightBlue30

HEX

#7CBBEA

Name

lightBlue40

HEX

#2978B5

Name

lightBlue50

HEX

#216090

Name

lightBlue60

HEX

#143C5C

gray

• Use black color for main text.
• Use gray40 for secondary texts, which have a lower of importance than main texts, such as captions, subtitles, descriptions, etc.
• Use gray40 for icons colors.
• Use white color for main pages background.
• Use gray10 color for highlighting background in specific scenarios like a sidebar component.
• Use gray20 color for the main border (cards, lines, dividers, etc.)

Name

white

HEX

#FFFFFF

Name

gray05

HEX

#F4F4F4

Name

gray10

HEX

#E6E6E6

Name

gray20

HEX

#DDDDDD

Name

gray30

HEX

#B9B9B9

Name

gray40

HEX

#747474

Name

gray50

HEX

#545454

Name

gray60

HEX

#3B3B3B

Name

black

HEX

#000000

Purple

Name

purple05

HEX

#F6F3FA

Name

purple10

HEX

#EDE8F4

Name

purple20

HEX

#D3C4E4

Name

purple30

HEX

#C6A5EA

Name

purple40

HEX

#835AB3

Name

purple50

HEX

#684391

Name

purple60

HEX

#462D63

Cyan

Name

cyan05

HEX

#EFF9FB

Name

cyan10

HEX

#D5EFF4

Name

cyan20

HEX

#A4DEE9

Name

cyan30

HEX

#63CBDB

Name

cyan40

HEX

#1C99A8

Name

cyan50

HEX

#207883

Name

cyan60

HEX

#093F46

Teal

Name

teal05

HEX

#E8F7F3

Name

teal10

HEX

#CDEFE7

Name

teal20

HEX

#A6E0D2

Name

teal30

HEX

#66CBB7

Name

teal40

HEX

#007969

Name

teal50

HEX

#006053

Name

teal60

HEX

#00463C

Pink

• The pink color palette represents the colors corresponding to VTEX branding. These colors should only be used in specific cases such as the VTEX logo, illustrations, etc.

Name

pink05

HEX

#FBF2F5

Name

pink10

HEX

#F5E0E7

Name

pink20

HEX

#EAB2C4

Name

pink30

HEX

#F48AAB

Name

pink40

HEX

#DA3561

Name

pink50

HEX

#B1204B

Name

pink60

HEX

#850D35

How to use

Design Tokens

Check the tokens table to learn more about each token and where you can use them.

Figma Library

Admin UI Foundations

Use the Admin UI Foundations library to use colors in your Figma files. To use the library enable from the Figma Libraries tab. Within the library, styles are divided into three categories:

• Background: has all colors related to backgrounds.
• Foraground: has all colors related to text and icons.
• Border: has all colors related to the border color.

We even have a grouping where you can find all colors in the Admin UI; use them only if you don't see any token for the usage context you need. If it is a global context, talk to the Admin UI team about creating this new token that way, we can maintain the semantic and thematic structure throughout the entire system.

Each category is made up of a group of contextual tokens. Each token group is related to an element/component. We've created some internal groupings to make it easier to navigate and use each of the tokens.

• Actions: it contains all the colors related to the buttons we have in the Admin UI, including the different states (Default, Hover, Pressed, Disabled).
• Overlay: contains all colors related to overlay components, for example, popup, modal, popover.
• Structure: contains all colors related to components used in the Admin UI interface structure, for example, Sidebar, Topbar, Page Header, etc.
• Notifications: contains all colors related to components used to notifications messages, like Toasts and Alerts.
• Fields: contains all colors related to field texts components, like Inputs, TextAreas, and Selects.
• Controls: contains all colors related to controls components, like Checkbox, Radio Buttons, and Toggle.
• Loading: contains all colors related to loading components, like Skeleton.
• List Box Item: contains all colors related to listing item, like Icons on Sidebar component.