Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Fundamentos
Color
Color
El esquema de color y sus usos correspondientes.
Primaria: para distinguir las acciones y los elementos de interpolación.
Grises: para componer la página con sus secciones y dar forma a los textos.
Retroalimentación: asignar significados semánticos afirmativos, de advertencia, negativos e informativos a los elementos de la composición.
Decorativo: para resaltar determinadas zonas y detalles en los diseños.
Otros: para estilos muy concretos que se repiten en todo el sistema.
Primarios
Ayudan a distinguir las acciones y elementos de interacción.
200
#E8EFFA
rgb(232, 239, 250)
hsl(217, 64, 95)
300
#D7E2F5
rgb(215,226, 245)
hsl(218 60, 90)
400
#9CB9E5
rgb(156, 185, 229)
hsl(216, 58, 75)
500
#114DA6
rgb(17,77, 166)
hsl(216, 81, 36)
600
#093473
rgb(9, 52, 115)
hsl(216, 85, 24)
700
#04214D
rgb(4, 22, 77)
hsl(216, 90, 16)
Secundarios
Permiten resaltar ciertas zonas y detalles en los diseños.
500
#C33400
rgb(173, 21, 25)
hsl(358, 78, 38)
600
#802200
rgb(128, 34, 0)
hsl(16, 100, 25)
700
#521600
rgb(82, 22, 0)
hsl(16, 100, 16)
Grises
Ayudan a componer la página con sus secciones y dar forma a los textos.
000
#FFFFFF
rgb(255, 255, 255)
hsl(0, 0, 100)
100
#F7F7F8
rgb(247, 247, 248)
hsl(240, 7, 97)
200
#EEEFF0
rgb(238, 239, 240)
hsl(210, 6, 94)
300
#DCDFE3
rgb(220, 223, 227)
hsl(214, 11, 88)
400
#B5B8BE
rgb(181, 184, 190)
hsl(220, 6, 73)
500
#696E75
rgb(105, 110, 117)
hsl(215, 5, 44)
600
#363D47
rgb(54, 61, 71)
hsl(215, 14 25)
700
#0A0E14
rgb(10, 14, 20)
hsl(216, 33, 6)
Feedback
Permiten asignar significados semánticos de tipo afirmativo aviso, negativo e informativo a los elementos de la composición.
Error
100
#FCF6F5
rgb(252, 246, 245)
hsl(9, 54, 97)
200
#F5E1DC
rgb(245, 225, 220)
hsl(12, 56, 91)
300
#E8886F
rgb(232, 136, 111)
hsl(12, 72, 67)
400
#C44727
rgb(196, 71, 39)
hsl(12, 67, 46)
500
#5E1503
rgb(94, 21, 3)
hsl(12, 94, 19)
600
#330C02
rgb(51, 12, 2)
hsl(12, 92, 10)
Éxito
100
#F3F9F6
rgb(243, 249, 246)
hsl(150, 33, 96)
200
#E5F5EC
rgb(299, 245, 236)
hsl(146, 44, 93)
300
#4DB277
rgb(77, 178, 119)
hsl(145, 40, 50)
400
#198044
rgb(25,128,68)
hsl(145, 67, 30)
500
#015223
rgb(1, 82, 35)
hsl(145, 98, 16)
600
#0A2B18
rgb(10, 43, 24)
hsl(145, 62, 10)
Advertencia
100
#FFFAF2
rgb(255, 250, 242)
hsl(37, 100, 97)
200
#FCF0DC
rgb(252, 240, 220)
hsl(37, 84, 93)
300
#DBB251
rgb(219, 178, 81)
hsl(42, 66, 59)
400
#AD8821
rgb(173, 126, 33)
hsl(44, 68, 40)
500
#594100
rgb(89, 65, 0)
hsl(44, 100, 17)
600
#332302
rgb(51, 35, 2)
hsl(40, 92, 10)
Información
100
#F2F2FC
rgb(242, 242, 252)
hsl(240, 63, 97)
200
#E9E7F6
rgb(233, 231, 246)
hsl(248, 45, 94)
300
#928FC2
rgb(146, 143, 194)
hsl(244, 29, 66)
400
#605AAD
rgb(96, 90, 173)
hsl(244, 34, 52)
500
#1E1655
rgb(30, 22, 85)
hsl(248, 59, 21)
600
#030121
rgb(3, 1, 33)
hsl(244, 94, 7)
Otros
Utilizados en estilos muy específicos que se repiten a lo largo del sistema.
overlay
#515C6D
rgba(7, 22, 46, 0.7)
hsla(217, 74, 10, 0.7)
focus
#C33400
rgba(207, 112, 0, 1)
hsla(216 14%, 25%, 1)
focus negative
#E59100
rgba(229 145, 0, 1)
hsla(38, 100%, 45% 1)
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.