Paleta de cores

Conceito

A cor da personalidade para nossa marca além de criar consistência entre os produtos. Usamos cores para dar destaque ao que as pessoas precisam ver. Dessa forma, nossa paleta de cores preza por garantir uma boa usabilidade através de contrastes de cores entre os elementos da interface para que pessoas com baixa visão possam ver e usar nossos produtos.

Brand colors

VERT-C OPS

Primary colors
$brand-color-primary-pure
Primary Pure
#00747A
$brand-color-primary-light
Primary Light
#E6F1F2
$brand-color-primary-medium
Primary Medium
#004649
$brand-color-primary-dark
Primary Dark
#123229
Neutral colors
$neutral-color-low-pure
Low Pure
#171919
$neutral-color-low-light
Low Light
#C9C9C9
$neutral-color-low-medium
Low Medium
#AAAAAA
$neutral-color-low-dark
Low Dark
#4A4A4A
$neutral-color-hight-pure
Hight Pure
#FFFFFF
$neutral-color-hight-light
Hight Light
#F4F4F4
$neutral-color-hight-medium
Hight Medium
#EEEEEE
$neutral-color-hight-dark
Hight Dark
#E0E0E0
Feedback colors
$feedback-color-helper-pure
Helper Pure
#F07363
$feedback-color-helper-light
Helper Light
#F8D7DA
$feedback-color-helper-medium
Helper Medium
#C05C4F
$feedback-color-helper-dark
Helper Dark
#783931
$feedback-color-warning-pure
Warning Pure
#E6CF42
$feedback-color-warning-light
Warning Light
#FFF9DB
$feedback-color-warning-medium
Warning Medium
#B8A635
$feedback-color-warning-dark
Warning Dark
#736721
$feedback-color-success-pure
Success Pure
#41D394
$feedback-color-success-light
Success Light
#D4EDDA
$feedback-color-success-medium
Success Medium
#34A976
$feedback-color-success-dark
Success Dark
#206A4A
$feedback-color-default-pure
Default Pure
#00747A
$feedback-color-default-light
Default Light
#E6F1F2
$feedback-color-default-medium
Default Medium
#004649
$feedback-color-default-dark
Default Dark
#004649

VERT Institucional

Primary colors
$brand-color-primary-pure
Primary Pure
#00747A
$brand-color-primary-light
Primary Light
#E6F1F2
$brand-color-primary-medium
Primary Medium
#004649
$brand-color-primary-dark
Primary Dark
#123229
Highlight colors
$brand-color-highlight-pure
Highlight Pure
#F4A053
$brand-color-highlight-light
Highlight Light
#FCE7D4
$brand-color-highlight-medium
Highlight Medium
#C38042
$brand-color-highlight-dark
Highlight Dark
#7A5029
Neutral colors
$neutral-color-low-pure
Low Pure
#171919
$neutral-color-low-light
Low Light
#C9C9C9
$neutral-color-low-medium
Low Medium
#AAAAAA
$neutral-color-low-dark
Low Dark
#4A4A4A
$neutral-color-hight-pure
Hight Pure
#FFFFFF
$neutral-color-hight-light
Hight Light
#F4F4F4
$neutral-color-hight-medium
Hight Medium
#EEEEEE
$neutral-color-hight-dark
Hight Dark
#E0E0E0
Feedback colors
$feedback-color-helper-pure
Helper Pure
#F07363
$feedback-color-helper-light
Helper Light
#F8D7DA
$feedback-color-helper-medium
Helper Medium
#C05C4F
$feedback-color-helper-dark
Helper Dark
#783931
$feedback-color-warning-pure
Warning Pure
#E6CF42
$feedback-color-warning-light
Warning Light
#FFF9DB
$feedback-color-warning-medium
Warning Medium
#B8A635
$feedback-color-warning-dark
Warning Dark
#736721
$feedback-color-success-pure
Success Pure
#41D394
$feedback-color-success-light
Success Light
#D4EDDA
$feedback-color-success-medium
Success Medium
#34A976
$feedback-color-success-dark
Success Dark
#206A4A
$feedback-color-default-pure
Default Pure
#00747A
$feedback-color-default-light
Default Light
#E6F1F2
$feedback-color-default-medium
Default Medium
#004649
$feedback-color-default-dark
Default Dark
#004649