Color

Branding

Primary

Los colores primarios son usados para asignar un rol protagónico en las acciones UI. Generalmente los vemos en acciones que cambian o confirman un flujo. Usamos el mismo token para EasyBroker y Pincali.

Key color

Shared Design System

EasyBroker

50

#F0F3FE

$c-primary-50
100

#E7EBFE

$c-primary-100
200

#CCD4FF

$c-primary-200
300

#99AAFF

$c-primary-300
400

#667FFF

$c-primary-400
500

#3354FF

$c-primary-500
600

#0D32F2

$c-primary-600
700

#142FB8

$c-primary-700
800

#172982

$c-primary-800

Pincali

50

#FEF0F3

$c-accent-50
100

#FDCED6

$c-accent-100
200

#FB9DAE

$c-accent-200
300

#F85471

$c-accent-300
400

#F62348

$c-accent-400
500

#EB0A32

$c-accent-500
600

#C4082A

$c-accent-600
700

#6C0517

$c-accent-700
800

#31020A

$c-accent-800

Key Colors

Acento y neutrales

El acento o color complementario nos ayuda a destacar una acción o componente sobre el plano dando más importancia en la vista pero sin socavar nuestras acciones primarias. Los colores neutrales los usamos para diferenciar planos, dividir elementos, delimitar espacios o acciones secundarias.

50

#FBFAFF

$c-purple-50
100

#F0ECFE

$c-purple-100
200

#FEEAF2

$c-purple-200
300

#B299FF

$c-purple-300
400

#8C66FF

$c-purple-400
500

#6633FF

$c-purple-500
600

#4C1AE5

$c-purple-600
700

#3D15B7

$c-purple-700
800

#2C1966

$c-purple-800

50

#F9F9FA

$c-gray-50
100

#EEEEF1

$c-gray-100
200

#DDDDE3

$c-gray-200
300

#C7C7D1

$c-gray-300
400

#94949E

$c-gray-400
500

#5F5F6D

$c-gray-500
600

#474752

$c-gray-600
700

#2E2E38

$c-gray-700
800

#0B0B0E

$c-gray-800

Adicionales

Estados

Los colores de estado no forman parte de la UI como tal pero sí representan un sistema semántico universal. De este modo podemos asignar estados a mensajes o elementos.

Puedes ver el uso de estos colores en las Alertas.