02
Color
El sistema de color permite aplicar colores a la interfaz de manera estratégica y coherente.
Se basa en la selección de dos colores primarios, uno secundario y uno terciario que representan la marca, junto con sus variantes claras y oscuras que permiten adaptarse a distintos contextos de uso.
Colores primarios
Los colores primarios son el color dominante que el usuario más ve en su producto. Uno o 2 colores como máximo es ideal. El color tiene una regla 60/30/10: 60% Color primario, 30% Color de acento, 10% Otros colores.
•
Brand
La paleta “brand” es una paleta complementaria de los colores corporativos del banco y no debe ser usada como el color primario en los diferentes productos digitales.
Los colores brand pueden utilizarse en elementos como:
- Iconos (véase más a detalle
- Botones flotantes tipo texto
- Progress Bar (opcional)
- Hipervínculos
900
$brand-900
#21A10F
600
P
$brand-600
#27C112
400
$brand-400
#34ef00
100
$brand-100
#D4F3D0
•
Primary
Esta es la tonalidad principal de la marca, diseñada para usarse en la interfaz y en la construcción de componentes.
Los colores primary pueden utilizarse en elementos como:
- Encabezados (headers)
- Botones primarios y secundarios
De esta forma, se logra garantizar coherencia visual y se refuerza la identidad de marca.
900
$primary-900
#0B3642
600
P
$primary-600
#105163
400
$primary-400
#87A8B1
100
$primary-100
#CFDCE0
Color secundario
El color secundario amplía las posibilidades de acento y refuerzo visual en el producto digital.
Complementa la jerarquía visual y aporta orden al resaltar detalles específicos dentro de la interfaz.
•
Secondary
Los colores secundarios pueden utilizarse en elementos como:
- Iconos (véase más a detalle
- Botones flotantes tipo texto
- Texto seleccionado
- Progress Bar (opcional)
- Hipervínculos
900
$Secondary-900
#FE680D
600
P
$Secondary-600
#F99B35
400
$Secondary-400
#FBBC78
100
$Secondary-100
#FEEBD7
Color terciario
El color terciario amplía la paleta cromática y se utiliza para acentuar detalles específicos en la interfaz.
•
Terciary
Aún está en evaluación su aplicación en componentes concretos, pero se considera su uso en elementos donde pueda aportar valor visual o funcional.
900
$Terciary-900
#006863
600
P
$Terciary-600
#0CDDD9
400
$Terciary-400
#5DE8E6
100
$Terciary-100
#CEF8F7
Colores neutrales
Los colores neutros ofrecen distintos grados de saturación que permiten equilibrar la paleta cromática del producto.
Su uso principal se enfoca en elementos como textos y fondos, aportando claridad y armonía visual.
•
Dark
900
$carbon dark-900
#000000
600
P
$carbon dark-600
#121212
400
$carbon dark-400
#1F1F1F
100
$carbon dark-100
#252525
•
Mid
900
$carbon mid-900
#434343
600
P
$carbon mid-600
#555555
400
$carbon mid-400
#7B7B7B
100
$carbon mid-100
#9D9D9D
•
Light
900
$carbon light-900
#C6C6C6
600
P
$carbon light-600
#E4E4E4
400
$carbon light-400
#F5F5F5
100
$carbon light-100
#FFFFFF
Colores semánticos
Los colores semánticos comunican visualmente los distintos estados del sistema, ofreciendo retroalimentación clara al usuario.
•
Warning
900
$warning-900
#CF812C
600
P
$warning-600
#F99B35
400
$warning-400
#FCCD9A
100
$warning-100
#FEEBD7
•
Error
900
$error-900
#A62325
600
P
$error-600
#F93538
400
$error-400
#FB787A
100
$error-100
#FED7D7
•
Success
900
$success-900
#1A6A0C
600
P
$success-600
#279F12
400
$success-400
#93CF88
100
$success-100
#D4ECD0
•
Info
900
$info-900
#3263A4
600
P
$info-600
#4B95F6
400
$info-400
#A5CAFA
100
$info-100
#DBEAFD
Gradaciones
Para garantizar una visibilidad adecuada y un contraste accesible, la opacidad debe ajustarse según cada combinación de texto y fondo.
$primary-grad
#26737f | #105163
Accent-grad
#27c112 | #279f12
Carbon dark-grad
#434343 | #121212
Carbon mid-grad
#C4C4C4 | #7B7B7B
Opacidad
$primary-88
88% | #105163 |
RGBA 16, 81, 99, 0.88
$primary-72
72% | #105163 |
RGBA 16, 81, 99, 0.72
$primary-64
64% | #105163 |
RGBA 16, 81, 99, 0.64
$primary-48
48% | #105163 |
RGBA 16, 81, 99, 0.48
$carbon-88
88% | #121212 |
RGBA 18, 18, 18, 0.88
$carbon-72
72% | #121212 |
RGBA 18, 18, 18, 0.72
$carbon-64
64% | #121212 |
RGBA 18, 18, 18, 0.64
$carbon-48
48% | #121212 |
RGBA 18, 18, 18, 0.48
This is fine 🔥 | All Rights Reserved
02
Color
El sistema de color permite aplicar colores a la interfaz de manera estratégica y coherente.
Se basa en la selección de dos colores primarios, uno secundario y uno terciario que representan la marca, junto con sus variantes claras y oscuras que permiten adaptarse a distintos contextos de uso.
Colores primarios
Los colores primarios son el color dominante que el usuario más ve en su producto. Uno o 2 colores como máximo es ideal. El color tiene una regla 60/30/10: 60% Color primario, 30% Color de acento, 10% Otros colores.
•
Brand
La paleta “brand” es una paleta complementaria de los colores corporativos del banco y no debe ser usada como el color primario en los diferentes productos digitales.
Los colores brand pueden utilizarse en elementos como:
- Iconos (véase más a detalle
- Botones flotantes tipo texto
- Progress Bar (opcional)
- Hipervínculos
900
$brand-900
#21A10F
600
P
$brand-600
#27C112
400
$brand-400
#34ef00
100
$brand-100
#D4F3D0
•
Primary
Esta es la tonalidad principal de la marca, diseñada para usarse en la interfaz y en la construcción de componentes.
Los colores primary pueden utilizarse en elementos como:
- Encabezados (headers)
- Botones primarios y secundarios
De esta forma, se logra garantizar coherencia visual y se refuerza la identidad de marca.
900
$primary-900
#0B3642
600
P
$primary-600
#105163
400
$primary-400
#87A8B1
100
$primary-100
#CFDCE0
Color secundario
El color secundario amplía las posibilidades de acento y refuerzo visual en el producto digital.
Complementa la jerarquía visual y aporta orden al resaltar detalles específicos dentro de la interfaz.
•
Secondary
Los colores secundarios pueden utilizarse en elementos como:
- Iconos (véase más a detalle
- Botones flotantes tipo texto
- Texto seleccionado
- Progress Bar (opcional)
- Hipervínculos
900
$Secondary-900
#FE680D
600
P
$Secondary-600
#F99B35
400
$Secondary-400
#FBBC78
100
$Secondary-100
#FEEBD7
Color terciario
El color terciario amplía la paleta cromática y se utiliza para acentuar detalles específicos en la interfaz.
•
Terciary
Aún está en evaluación su aplicación en componentes concretos, pero se considera su uso en elementos donde pueda aportar valor visual o funcional.
900
$Terciary-900
#006863
600
P
$Terciary-600
#0CDDD9
400
$Terciary-400
#5DE8E6
100
$Terciary-100
#CEF8F7
Colores neutrales
Los colores neutros ofrecen distintos grados de saturación que permiten equilibrar la paleta cromática del producto.
Su uso principal se enfoca en elementos como textos y fondos, aportando claridad y armonía visual.
•
Dark
900
$carbon dark-900
#000000
600
P
$carbon dark-600
#121212
400
$carbon dark-400
#1F1F1F
100
$carbon dark-100
#252525
•
Mid
900
$carbon mid-900
#434343
600
P
$carbon mid-600
#555555
400
$carbon mid-400
#7B7B7B
100
$carbon mid-100
#9D9D9D
•
Light
900
$carbon light-900
#C6C6C6
600
P
$carbon light-600
#E4E4E4
400
$carbon light-400
#F5F5F5
100
$carbon light-100
#FFFFFF
Colores semánticos
Los colores semánticos comunican visualmente los distintos estados del sistema, ofreciendo retroalimentación clara al usuario.
•
Warning
900
$warning-900
#CF812C
600
P
$warning-600
#F99B35
400
$warning-400
#FCCD9A
100
$warning-100
#FEEBD7
•
Error
900
$error-900
#A62325
600
P
$error-600
#F93538
400
$error-400
#FB787A
100
$error-100
#FED7D7
•
Success
900
$success-900
#1A6A0C
600
P
$success-600
#279F12
400
$success-400
#93CF88
100
$success-100
#D4ECD0
•
Info
900
$info-900
#3263A4
600
P
$info-600
#4B95F6
400
$info-400
#A5CAFA
100
$info-100
#DBEAFD
Gradaciones
Para garantizar una visibilidad adecuada y un contraste accesible, la opacidad debe ajustarse según cada combinación de texto y fondo.
$primary-grad
#26737f | #105163
Accent-grad
#27c112 | #279f12
Carbon dark-grad
#434343 | #121212
Carbon mid-grad
#C4C4C4 | #7B7B7B
Opacidad
$primary-88
88% | #105163 |
RGBA 16, 81, 99, 0.88
$primary-72
72% | #105163 |
RGBA 16, 81, 99, 0.72
$primary-64
64% | #105163 |
RGBA 16, 81, 99, 0.64
$primary-48
48% | #105163 |
RGBA 16, 81, 99, 0.48
$carbon-88
88% | #121212 |
RGBA 18, 18, 18, 0.88
$carbon-72
72% | #121212 |
RGBA 18, 18, 18, 0.72
$carbon-64
64% | #121212 |
RGBA 18, 18, 18, 0.64
$carbon-48
48% | #121212 |
RGBA 18, 18, 18, 0.48
This is fine 🔥 | All Rights Reserved
02
Color
El sistema de color permite aplicar colores a la interfaz de manera estratégica y coherente.
Se basa en la selección de dos colores primarios, uno secundario y uno terciario que representan la marca, junto con sus variantes claras y oscuras que permiten adaptarse a distintos contextos de uso.
Colores primarios
Los colores primarios son el color dominante que el usuario más ve en su producto. Uno o 2 colores como máximo es ideal. El color tiene una regla 60/30/10: 60% Color primario, 30% Color de acento, 10% Otros colores.
•
Brand
La paleta “brand” es una paleta complementaria de los colores corporativos del banco y no debe ser usada como el color primario en los diferentes productos digitales.
Los colores brand pueden utilizarse en elementos como:
900
$brand-900
#21A10F
600
P
$brand-600
#27C112
400
$brand-400
#34ef00
100
$brand-100
#D4F3D0
•
Primary
Esta es la tonalidad principal de la marca, diseñada para usarse en la interfaz y en la construcción de componentes.
Los colores primary pueden utilizarse en elementos como:
- Encabezados (headers)
- Botones primarios y secundarios
De esta forma, se logra garantizar coherencia visual y se refuerza la identidad de marca.
900
$primary-900
#0B3642
600
P
$primary-600
#105163
400
$primary-400
#87A8B1
100
$primary-100
#CFDCE0
Color secundario
El color secundario amplía las posibilidades de acento y refuerzo visual en el producto digital.
Complementa la jerarquía visual y aporta orden al resaltar detalles específicos dentro de la interfaz.
•
Secondary
Los colores secundarios pueden utilizarse en elementos como:
900
$Secondary-900
#FE680D
600
P
$Secondary-600
#F99B35
400
$Secondary-400
#FBBC78
100
$Secondary-100
#FEEBD7
Color terciario
El color terciario amplía la paleta cromática y se utiliza para acentuar detalles específicos en la interfaz.
•
Terciary
Aún está en evaluación su aplicación en componentes concretos, pero se considera su uso en elementos donde pueda aportar valor visual o funcional.
900
$Terciary-900
#006863
600
P
$Terciary-600
#0CDDD9
400
$Terciary-400
#5DE8E6
100
$Terciary-100
#CEF8F7
Colores neutrales
Los colores neutros ofrecen distintos grados de saturación que permiten equilibrar la paleta cromática del producto.
Su uso principal se enfoca en elementos como textos y fondos, aportando claridad y armonía visual.
•
Dark
900
$carbon dark-900
#000000
600
P
$carbon dark-600
#121212
400
$carbon dark-400
#1F1F1F
100
$carbon dark-100
#252525
•
Mid
900
$carbon mid-900
#434343
600
P
$carbon mid-600
#555555
400
$carbon mid-400
#7B7B7B
100
$carbon mid-100
#9D9D9D
•
Light
900
$carbon light-900
#C6C6C6
600
P
$carbon light-600
#E4E4E4
400
$carbon light-400
#F5F5F5
100
$carbon light-100
#FFFFFF
Colores semánticos
Los colores semánticos comunican visualmente los distintos estados del sistema, ofreciendo retroalimentación clara al usuario.
•
Warning
900
$warning-900
#CF812C
600
P
$warning-600
#F99B35
400
$warning-400
#FCCD9A
100
$warning-100
#FEEBD7
•
Error
900
$error-900
#A62325
600
P
$error-600
#F93538
400
$error-400
#FB787A
100
$error-100
#FED7D7
•
Success
900
$success-900
#1A6A0C
600
P
$success-600
#279F12
400
$success-400
#93CF88
100
$success-100
#D4ECD0
•
Info
900
$info-900
#3263A4
600
P
$info-600
#4B95F6
400
$info-400
#A5CAFA
100
$info-100
#DBEAFD
Gradaciones
Para garantizar una visibilidad adecuada y un contraste accesible, la opacidad debe ajustarse según cada combinación de texto y fondo.
$primary-grad
#26737f | #105163
Accent-grad
#27c112 | #279f12
Carbon dark-grad
#434343 | #121212
Carbon mid-grad
#C4C4C4 | #7B7B7B
Opacidad
$primary-88
88% | #105163 |
RGBA 16, 81, 99, 0.88
$primary-72
72% | #105163 |
RGBA 16, 81, 99, 0.72
$primary-64
64% | #105163 |
RGBA 16, 81, 99, 0.64
$primary-48
48% | #105163 |
RGBA 16, 81, 99, 0.48
$carbon-88
88% | #121212 |
RGBA 18, 18, 18, 0.88
$carbon-72
72% | #121212 |
RGBA 18, 18, 18, 0.72
$carbon-64
64% | #121212 |
RGBA 18, 18, 18, 0.64
$carbon-48
48% | #121212 |
RGBA 18, 18, 18, 0.48
This is fine 🔥 | All Rights Reserved