Missatges i retroacció
Els colors d’aquesta paleta s’utilitzen per comunicar missatges amb una intencionalitat semàntica específica i per mostrar respostes del sistema. Cada color té una funció específica:
- Verd: expressa disponibilitat, o bé que l'acció s'ha completat correctament.
- Vermell: expressa la no disponibilitat o error, o bé que es necessita l’atenció urgent de l'usuari.
- Taronja: comunica una alerta o avís, indicant la necessitat d’atenció.
- Blau violat: proporciona informació útil, però sense requerir una acció per part de l'usuari.
Colors de la paleta de missatges i retroacció
Campus
#008037
hsl(146, 100%, 25%)
rgb(0, 128, 55)
(--color-marca-primari)
El color principal, verd Campus, és una versió lleugerament més fosca del verd institucional. S’ha ajustat per garantir el contrast necessari sobre fons blancs o molt clars.
Pèsol
#00cc58
hsl(146, 100%, 40%)
rgb(0, 204, 88)
(--color-marca-primari-c)
Color decoratiu o d’accent.
Jade
#d8f3e3
hsl(144,53%,90%)
rgb(216, 243, 227)
(--color-marca-primari-e)
Color de fons per blocs de text que calgui ressaltar amb el color de marca primari.
Cor
#b91313
hsl(0, 81%, 40%)
rgb(185, 19, 19)
(--color-negatiu-text)
Color de text per a missatges d’error.
Corall
#f07070
hsl(0, 81%, 69%)
rgb(240, 112, 112)
(--color-negatiu)
Color decoratiu o d’accent per a missatges d’error.
Porquet
#fcdfdf
hsl(0, 81%, 93%)
rgb(252, 223, 223)
(--color-negatiu-fons)
Color de fons per a missatges d’error.
Romesco
#c93700
hsl(16, 100%, 39%)
rgb(201, 55, 0)
(--color-alerta-text)
Color de text per a missatges d’alerta.
Cantalup
#faae57
hsl(32, 94%, 66%)
rgb(250, 174, 87)
(--color-marca-secundari-3)
Mongeta
#feecd7
hsl(32, 94%, 92%)
rgb(254, 236, 215)
(--color-alerta-fons)
Color de fons per a missatges d’alerta
Blauet
#5842eb
hsl(248, 81%, 59%)
rgb(88, 66, 235)
(--color-info-text)
Color de text per a missatges informatius.
Llampec
#8170f0
hsl(248, 81%, 69%)
rgb(129, 112, 240)
(--color-info)
Color decoratiu o d’accent per a missatges informatius.
Romaní
#e3dffc
hsl(248, 81%, 93%)
rgb(227, 223, 252)
(--color-info-fons)
Color de fons per a missatges informatius.
Usos correctes i incorrectes
La paleta de colors de missatges i retroacció afegeix una capa semàntica i visual que ajuda a identificar ràpidament la naturalesa d’una comunicació.
Ara bé, el color mai no pot ser l’únic canal per transmetre aquesta informació. Els usuaris amb limitacions visuals, com la visió baixa i el daltonisme, o amb dificultats cognitives, han de poder entendre el missatge també pel seu contingut textual o per altres indicadors visuals (icones, títols, jerarquia tipogràfica...).
Aplicació correcta:
- Fons: només s’ha d’utilitzar la variant clara del color (Jade, Porquet, Mongeta, Romaní) per marcar el fons del missatge.
- Títols: per títols, negretes o destacats dins d’un missatge es pot utilitzar el negre (Exosfera) o les variants fosques del color (Campus, Cor, Romesco, Blavet), garantint un contrast suficient.
- Text: pel text s’ha d’utilitzar sempre el color negre (Exosfera).
- Accents: es pot aplicar la variant intermèdia o decorativa (Pèsol, Corall, Cantalup, Llampec) per reforçar la semàntica visual, per exemple amb un línia lateral.
- Icones: si el missatge conté icones, aquestes poden ser negres (Exosfera) o de la variant fosca del color (Campus, Cor, Romesco, Blavet).
