Color

Establecemos pautas que hacen el contenido accesible, con el objetivo de facilitar la comunicación y la interacción de los usuarios por medio de buenas prácticas aplicadas desde el color.

---

Paleta Primaria

Los colores primarios definen parte de la identidad visual del Banco de Bogotá. Estos colores hacen parte de la imagen de marca del banco en la actualidad.

AAA

Midnight-800

#0043A9

Color principal

AAA

Carbon-900

#000000

Color neutro oscuro

AAA

White

#FFFFFF

Color blanco base

---

Variantes de Paleta Azul

Midnight-900

#00317E

Estado hover

Midnight-800

#0043A9

Interactivo base

Midnight-700

#1054B7

Backgrounds no interactivos

Midnight-600

#4D86D4

Borde focus

Midnight-50

#F6FAFF

Backgrounds suaves

---

Variantes de Paleta Gris

Carbon-900

#000000

Títulos principales

Carbon-800

#444444

Párrafos y subtítulos

Carbon-600

#808080

Placeholders / Inactivos

Carbon-200

#E6E6E6

Bordes y fondos inactivos

Carbon-50

#F2F2F2

Backgrounds neutros

---

Paleta Semántica

Success (Positivo)

AA

Success-900

#105C00

AA

Success-800

#198500

Success-500

#95E077

Success-100

#ECFFE2

Warning (Alerta)

AAA

Warning-900

#773E00

AA

Warning-800

#B15C00

AA

Warning-500

#ECC192

AA

Warning-100

#FFF0E0

Error (Negativo)

AA

Error-900

#940700

AA

Error-800

#C94740

Error-500

#EDA4A1

Error-100

#FFE7E6

Info (Informativo)

AA

Info-900

#004F99

AA

Info-800

#2076C2

Info-500

#9AC7EB

Info-100

#EDF7FF

---

Paleta Corporativa

BlueBrand-800

#14327D

YellowBrand-800

#FFBE00

RedBrand-900

#CD3232

---

Notas de Implementación

• Los colores están diseñados siguiendo pautas de accesibilidad WCAG.
• Cada token de color tiene un propósito específico definido en el design system.
• Se recomienda usar los nombres de token en lugar de valores hex para mantener coherencia.