Colores
La paleta de colores de Smart Chip refleja su personalidad divertida y dinámica. Nuestros colores principales —el blanco y el negro— crean una base atrevida y atemporal. Los colores de contraste aportan flexibilidad y vitalidad, lo que nos ayuda a adaptarnos a diferentes estados de ánimo y contextos, sin dejar de mantener un aspecto fresco y coherente.
Colores primarios
La paleta de colores es Negro y Blanco junto con un Color de resaltado. El blanco y el negro son sencillos y garantizan el mayor contraste y legibilidad posibles. Los distintos colores de resaltado, que se muestran como un degradado lineal, aportan un toque de energía y reflejan la forma divertida en que Smart Chip te facilita la vida.
Negro
CMYK (negro intenso)
60/40/40/100
Hex
#000000
Blanco
CMYK
0/0/0/0
Hex
#ffffff te lo cuento
Colores destacados
Los colores de acento complementan y amplían los colores principales. Son una parte fundamental de nuestra identidad visual dinámica. Los usamos para dar variedad a los diseños y dar vida a nuestro lenguaje visual.
Ten en cuenta el ambiente o el tono de tu diseño a la hora de elegir un color. Cada degradado transmite una sensación diferente. Por ejemplo, Morado chulo Es un color tranquilo, lo que lo hace ideal para temas más relajados. Por otro lado, Naranja intenso Es un color vivo y enérgico, perfecto para contenidos dinámicos o llenos de acción. Piensa en el mensaje que quieres transmitir y elige el color que mejor se adapte a esa historia.
Hay una regla muy importante: no uses más de un color en el mismo diseño. Cada color de resaltado debe destacar por sí solo.
Naranja intenso
CMYK
0/46/78/0 > 0/86/70/0
Hex
#ffa041 > #fc3a3c
Deep Blue
CMYK
79/24/6/2 > 90/69/0/0
Hex
#0393bc > #004cd5
Morado chulo
CMYK
47/59/0/0 > 80/82/0/0
Hex
#9d77c4 > #554195
Cobre
CMYK
0/46/78/0 > 24/58/86/15
Hex
#ffa041 > #b26e31
Azul eléctrico
CMYK
65/0/0/0 > 70/54/0/0
Hex
#23c8fe > #647cff te lo cuento
Morado cálido
CMYK
40/72/0/0 > 68/74/0/0
Hex
#a85fa2 > #6e539e
Bonito rosa
CMYK
5/54/34/0 > 0/85/69/0
Hex
#ea9091 te informo > #ed4343
Verde tranquilo
CMYK
62/0/92/0 > 86/29/88/16
Hex
#71b541 informo > #197642
Alerta Roja
CMYK
0/76/55/0 > 0/100/68/0
Hex
#ff5a5a inform > #e6003c
Degradados y curvas
Siempre que podemos, usamos degradados para los colores de resaltado, combinados con un elemento de diseño central llamado el Curvas. Aquí aprenderás a prepararlos y a usarlos.
Curvas
Las curvas se usan sobre todo para los fondos. Les aportan más interés visual, profundidad y una sensación de movimiento.
Las curvas se crean escalando, girando y recortando el icono del chip. La escala, la rotación y el recorte los decides tú, pero no enseñes demasiado del icono. Deberían parecer curvas y rayas abstractas, no el icono en sí.
Las curvas siempre se colocan sobre un fondo. El fondo tiene el mismo degradado que las curvas, pero en una dirección diferente.
La dirección de los degradados no es inamovible. Puedes cambiarlos como quieras en cada nuevo diseño e incluso animarlos. Así, las curvas se mantienen vivas y frescas.
No hace falta que uses todo el rango del degradado de principio a fin. Puedes “acercarte” solo a una parte del mismo. Esto amplía aún más nuestra paleta de colores sin que dejen de ser reconocibles.
Pero asegúrate de que se siga reconociendo como un degradado. No elijas una parte tan pequeña que parezca un color liso.
Las curvas no son obligatorias; a veces, menos es más. Evita usarlas en elementos más pequeños, como botones o imágenes pequeñas.
Crear nuevos colores
La paleta de colores destacados está pensada para que combinen bien entre sí y se adapten a muchos contextos diferentes. Pero si ningún degradado te convence para tu diseño concreto, puedes crear uno propio.
Crear nuevos degradados resulta especialmente útil a la hora de combinar un titular con una imagen. En este ejemplo se utiliza un degradado personalizado para el titular que encaja perfectamente con la imagen.
Los colores se han creado tomando muestras de la imagen y aumentando después la saturación y el brillo. Así, el nuevo degradado encaja con la paleta de colores ya existente.
Hay algunas reglas que debes tener en cuenta a la hora de crear nuevos colores:
¡No te pases! Intenta ceñirte a la paleta de colores aprobada y crea nuevos colores solo si es necesario.
No crees un nuevo degradado que se parezca demasiado a uno que ya existe. Si un color ya existente te vale, quédate con ese.
Mantén la gama de tonos. No pases del rojo al azul, sino del rojo vivo al rojo medio.
Mantén los valores en consonancia con los degradados que ya hay. No los hagas demasiado saturados, apagados, claros ni oscuros.
Principios básicos del color
A la hora de diseñar una nueva maquetación, puedes elegir entre usar un fondo negro o un fondo blanco. Un fondo blanco da una sensación de limpieza, amplitud y calidez. Un fondo negro evoca tecnología, elegancia y poder. Elige el que mejor se adapte a tu proyecto, tu mensaje y el público al que te diriges.
Elijas la que elijas, usa un color de contraste para romper la monotonía del diseño, resaltar cierta información, guiar la mirada o destacar un punto.
Cuando hagas diseños de varias páginas, no cambies de color sin ton ni son. Organiza tu diseño en temas o capítulos, y asigna a cada uno su propio color. Mantén ese color en cada capítulo. Así te aseguras de que todo quede coherente y evitas que las páginas parezcan desordenadas.
Puedes usar colores para fondos, títulos, iconos o cualquier otro elemento en el que quede bien un toque de color.
Para mantener un diseño limpio y coherente, Nunca lo mezcles diferentes colores en la misma página, salvo cuando sea necesario para elementos funcionales (como mensajes de error o alertas).
Lo que no debes hacer
Por favor, evita cometer los siguientes errores.
No uses colores diferentes en el mismo diseño.
No uses las curvas sin fondo.
No uses las curvas sobre un fondo de otro color.
No enseñes demasiado el icono del chip.
No combines un degradado con otro color.
No crees nuevos degradados que incumplan las normas.
No uses colores para las marcas ni para bloques de texto completos.
No uses colores lisos, salvo que sea absolutamente necesario.
Ejemplos
Estos son algunos ejemplos del uso del color y las curvas. Fíjate en las diferencias de escala, factor de recorte, rotación y rango de gradiente de las curvas.
