Color
Cimientos
El uso constante del color crea una experiencia de usuario cohesionada que mejora el reconocimiento y la confianza de la marca en todas las plataformas digitales.
Colores base
Nuestra paleta base incluye colores de marca primaria y colores neutros. Esto permite que nuestro contenido destaque asegurando el contraste suficiente. Cada color cumple un propósito específico para mejorar la experiencia del usuario.
Marca Blue (Blue 50): Este es el color principal de interacción para todos los sitios y aplicaciones de TxDOT. Se utiliza para elementos interactivos como enlaces, botones y entradas, creando coherencia y alineación de marca.
Azul oscuro (Azul 80): Se usa como nuestro azul secundario.
Gray 100: Se usa para fuente primaria.
Blanco (Gris 0):Nuestro color de fondo principal.
Colores semánticos
Éxito (Verde):Se utiliza para indicar el éxito en acciones del usuario, como la actualización de contraseñas.
Info (Verde azulado):Llama la atención sobre información importante que no es urgente ni está relacionada con la acción del usuario, como etiquetas de estado o paneles de información.
Error (Rojo): Indica riesgos, peligros, errores o acciones destructivas, como introducir una contraseña incorrecta.
Alerta (naranja):Resalta alertas para captar la atención del usuario, como mensajes nuevos.
Advertencia (amarillo):Advierte sobre posibles acciones, centrando la atención del usuario.
Gris neutro:Se utiliza en todo el sistema de diseño para texto, campos de formulario, fondos, separadores, etc.
Accesibilidad
La accesibilidad es una pieza fundamental en el sistema de diseño digital. El uso del color debe seguir las mejores prácticas de accesibilidad, incluyendo:
- Alto contraste: Asegurando que el texto y los elementos importantes destaquen sobre los fondos.
- Amigable para daltónicos: Evitar combinaciones de colores difíciles de distinguir para usuarios daltónicos.
- Uso constante: Aplicar colores de forma constante para ayudar a los usuarios a reconocer y entender su significado.
Marca
Blue 10
HEX: #c8ecfa
RGB: 200 / 236 / 250
Blue 20
HEX:#93d5f6
RGB: 147 / 213 / 246
Blue 30
HEX:#5bafe5
RGB: 91 / 175 / 229
Blue 40
HEX:#3288cb
RGB: 50 / 136 / 203
Blue 50
HEX:#0056a9
RGB: 0 / 86 / 169
Blue 60
HEX:#004291
RGB: 0 / 66 / 145
Blue 70
HEX:#003179
RGB: 0 / 49 / 121
Blue 80
HEX:#002262
RGB: 0 / 34 / 98
Blue 90
HEX:#001851
RGB: 0 / 24 / 81
Éxito
Green 10
HEX:#DAFFC1
RGB: 218 / 255 / 193
Green 20
HEX:#B7F190
RGB: 183 / 241 / 144
Green 30
HEX:#86DC4C
RGB: 134 / 220 / 76
Green 40
HEX:#4AAC0B
RGB: 74 / 172 / 11
Green 50
HEX:#3A8709
RGB: 58 / 135 / 9
Green 60
HEX:#2C6D0D
RGB: 44 / 109 / 13
Green 70
HEX:#1C5308
RGB: 28 / 83 / 8
Green 80
HEX:#134705
RGB: 19 / 71 / 5
Green 90
HEX:#0B3A03
RGB: 11 / 58 / 3
Información
Teal 10
HEX:#C8F7FA
RGB: 200 / 247 / 250
Teal20
HEX:#96EDF3
RGB: 150 / 237 / 243
Teal30
HEX:#5EDAE2
RGB: 94 / 218 / 226
Teal40
HEX:#32C1CB
RGB: 50 / 193 / 203
Teal50
HEX:#009EA9
RGB: 0 / 158 / 169
Teal60
HEX:#007780
RGB: 0 / 119 / 128
Teal70
HEX:#00646B
RGB: 0 / 100 / 107
Teal80
HEX:#004C52
RGB: 0 / 76 / 82
Teal90
HEX:#003E42
RGB: 0 / 62 / 66
Error
Rojo 10
HEX:#FBB5B5
RGB: 251 / 181 / 181
Red20
HEX:#FF8F8F
RGB: 255 / 143 / 143
Red30
HEX:#FF5C5C
RGB: 255 / 92 / 92
Red40
HEX:#F43434
RGB: 244 / 52 / 52
Red50
HEX:#D90D0D
RGB: 217 / 13 / 13
Red60
HEX:#B60909
RGB: 182 / 9 / 9
Red70
HEX:#990606
RGB: 153 / 6 / 6
Red80
HEX:#720303
RGB: 114 / 3 / 3
Red90
HEX:#5A0101
RGB: 90 / 1 / 1
Alerta
Orange10
HEX: #FBCDB5
RGB: 251 / 205 / 181
Orange20
HEX: #FFB68F
RGB: 255 / 182 / 143
Orange30
HEX: #FF955C
RGB: 255 / 149 / 92
Orange40
HEX: #F47734
RGB: 244 / 119 / 52
Orange50
HEX: #DF5C16
RGB: 223 / 92 / 22
Orange60
HEX: #C34A09
RGB: 195 / 74 / 9
Orange70
HEX: #A23D06
RGB: 162 / 61 / 6
Orange80
HEX: #852E00
RGB: 133 / 46 / 0
Orange90
HEX: #702700
RGB: 112 / 39 / 0
Advertencia
Yellow10
HEX: #FEF9D1
RGB: 254 / 249 / 209
Yellow20
HEX: #FDF3A3
RGB: 253 / 243 / 163
Yellow30
HEX: #FBE975
RGB: 251 / 233 / 117
Yellow40
HEX: #F7DE52
RGB: 247 / 222 / 82
Yellow50
HEX: #F2CE1B
RGB: 242 / 206 / 27
Yellow60
HEX: #D0AD13
RGB: 208 / 173 / 19
Yellow70
HEX: #AE8D0D
RGB: 174 / 141 / 13
Yellow80
HEX: #8C6F08
RGB: 140 / 111 / 8
Amarillo 90
HEX: #745905
RGB: 116 / 89 / 5
Neutro
Gray 0
HEX: #FFFFFF
RGB: 255 / 255 / 255
Gray10
HEX: #F1F1F1
RGB: 241 / 241 / 241
Gray20
HEX: #CECECE
RGB: 206 / 206 / 206
Gray30
HEX: #B0B0B0
RGB: 176 / 176 / 176
Gray40
HEX: #969696
RGB: 150 / 150 / 150
Gray50
HEX: #757575
RGB: 117 / 117 / 117
Gray60
HEX: #616161
RGB: 97 / 97 / 97
Gray70
HEX: #525252
RGB: 82 / 82 / 82
Gray80
HEX: #474747
RGB: 71 / 71 / 71
Gray90
HEX: #3D3D3D
RGB: 61 / 61 / 61
Gray 100
HEX: #1A1A1A
RGB: 26 / 26 / 26