Paleta principal
La paleta principal adapta el color institucional de referència per al seu ús digital. Se n’han definit diverses variacions, pensades per aplicar-se en títols, capçaleres, destacats i components estructurals o decoratius.
Colors de la paleta principal
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.
Collserola
#004d21
hsl(146, 100%, 15%)
rgb(0, 77, 33)
(--color-marca-primari-b)
Color de ressalt (:hover) per a elements interactius —per exemple, botons— originalment de color verd Campus.
Pèsol
#00cc58
hsl(146, 100%, 40%)
rgb(0, 204, 88)
(--color-marca-primari-c)
Color decoratiu o d’accent.
Boreal
#52ff9d
hsl(146,100%,66%)
rgb(82, 255, 157)
(--color-marca-primari-d)
Color decoratiu o d’accent i puntualment per a text d’impacte, sempre sobre fons molt fosc.
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.
Usos correctes i incorrectes
El verd Campus es pot fer servir en títols i textos destacats, però no com a color principal del cos de text d’una pàgina.
Campus també es pot utilitzar per ressaltar elements dins d’un menú de navegació, sempre que estigui clarament identificat com a tal.
En canvi, no s’ha d’utilitzar mai per marcar enllaços dins del cos de text o en zones on no sigui evident que es tracta d’un element interactiu. Si es fa, és impossible per l’usuari diferenciar a simple vista entre un títol verd i un enllaç, amb l’impacte negatiu que això tindria per la usabilitat i accessibilitat.
Exemples d’ús correcte del verd Campus. A l’esquerra, ressaltant un element dins d’una navegació; a la dreta, aplicat en un text d’entradeta i en un destacat.
Exemples d’ús incorrecte del verd Campus. A l’esquerra, aplicat a tot el text d’una pàgina; a la dreta, aplicat a enllaços dins del cos de text.
El color Pèsol només s’ha d’utilitzar amb finalitat decorativa. No és apte per a text o elements que necessitin un contrast mínim (4.5:1).
Exemples d’ús del color verd Pèsol. A l’esquerra, aplicat a un element decoratiu (correcte); a la dreta, aplicat a un text (incorrecte).
Es pot utilitzar el color Boreal amb finalitat decorativa i, puntualment, en text d’impacte sobre fons fosc.
Exemple d’ús del color verd Boreal, en el títol d’una secció Hero amb fons negre.