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-8888% | #105163 |
RGBA 16, 81, 99, 0.88
$primary-7272% | #105163 |
RGBA 16, 81, 99, 0.72
$primary-6464% | #105163 |
RGBA 16, 81, 99, 0.64
$primary-4848% | #105163 |
RGBA 16, 81, 99, 0.48
$carbon-8888% | #121212 |
RGBA 18, 18, 18, 0.88
$carbon-7272% | #121212 |
RGBA 18, 18, 18, 0.72
$carbon-6464% | #121212 |
RGBA 18, 18, 18, 0.64
$carbon-4848% | #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-8888% | #105163 |
RGBA 16, 81, 99, 0.88
$primary-7272% | #105163 |
RGBA 16, 81, 99, 0.72
$primary-6464% | #105163 |
RGBA 16, 81, 99, 0.64
$primary-4848% | #105163 |
RGBA 16, 81, 99, 0.48
$carbon-8888% | #121212 |
RGBA 18, 18, 18, 0.88
$carbon-7272% | #121212 |
RGBA 18, 18, 18, 0.72
$carbon-6464% | #121212 |
RGBA 18, 18, 18, 0.64
$carbon-4848% | #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-8888% | #105163 |
RGBA 16, 81, 99, 0.88
$primary-7272% | #105163 |
RGBA 16, 81, 99, 0.72
$primary-6464% | #105163 |
RGBA 16, 81, 99, 0.64
$primary-4848% | #105163 |
RGBA 16, 81, 99, 0.48
$carbon-8888% | #121212 |
RGBA 18, 18, 18, 0.88
$carbon-7272% | #121212 |
RGBA 18, 18, 18, 0.72
$carbon-6464% | #121212 |
RGBA 18, 18, 18, 0.64
$carbon-4848% | #121212 |
RGBA 18, 18, 18, 0.48
This is fine 🔥 | All Rights Reserved