Sistema de disseny | Vila Universitària UAB

Guia d'estil web

Aquest sistema de disseny ajuda a construir de forma escalable i consistent per mantenir la coherència i oferir una experiència d'usuari òptima en cada pàgina.

Basada en la Guia d'estil web de la UAB

Colors

Tipografia

Per garantir la llegibilitat en entorns digitals , s’utilitza la tipografia Mona Sans per la seva proximitat visual amb la Telegraf , la tipografia corporativa de la UAB, de manera que es manté la coherència amb la identitat gràfica de la institució.

Tipografia

Títols

Heading 01

Pas 10 : de 26.78 px a 58.45 px
--font-size-10: clamp(1.67rem, calc(0.55rem + 4.01vw), 3.65rem);

Heading 02

Pas 9 : de 25.10 px a 51.96 px
--font-size-9: clamp(1.57rem, calc(0.61rem + 3.40vw), 3.25rem);

Heading 03

Pas 8 : de 23.52 px a 46.18 px
--font-size-8: clamp(1.47rem, calc(0.66rem + 2.87vw), 2.89rem);

Heading 04

Pas 7 : de 22.04 px a 41.05 px
--font-size-7: clamp(1.38rem, calc(0.70rem + 2.41vw), 2.57rem);

Heading 05

Pas 6 : de 20.66 px a 36.49 px
--font-size-6: clamp(1.29rem, calc(0.73rem + 2.00vw), 2.28rem);

Heading 06

Pas 5 : de 19.36 px a 32.44 px
--font-size-5: clamp(1.21rem, calc(0.74rem + 1.66vw), 2.03rem);

H2 Heading

Variants de H2

Utilitzem diverses mides H2 per admetre diferents dissenys,
mentre mantenim un SEO i una accessibilitat correctes.

L'etiqueta d'encapçalament te funció semàntica i SEO,
i la mida predefinida controla l'aspecte.

H2 / Large(26px)

Heading 02

H2 / Large(24px)

Heading 02

H2 / Default (20px)

Heading 02

Tipografía

Paràgrafs

Paragraph-Large

Paragraph - 1.3rem, 1.95rem + 1.25vw, 1.6rem / 1.6em line-height / Semibold

Paragraph - 1.3rem, 1.95rem + 1.25vw, 1.6rem / 1.6em line-height / Medium

Paragraph - 1.3rem, 1.95rem + 1.25vw, 1.6rem / 1.6em line-height / Regular

Paragraph-Medium

Paragraph - 1rem, 0.95rem + 0.25vw, 1.125rem / 1.6em line-height / Semibold

Paragraph - 1rem, 0.95rem + 0.25vw, 1.125rem / 1.6em line-height / Medium

Paragraph - 1rem, 0.95rem + 0.25vw, 1.125rem / 1.6em line-height / Regular

Paragraph-Small

Paragraph - 0.9375rem, 0.9rem + 0.2vw, 1rem / 1.5em line-height / Semibold

Paragraph - 0.9375rem, 0.9rem + 0.2vw, 1rem / 1.5em line-height / Medium

Paragraph - 0.9375rem, 0.9rem + 0.2vw, 1rem / 1.5em line-height / Regular

Paragraph-Extra small

Paragraph - 14px or 0.875rem font-size / 1.5em line-height / Semibold

Paragraph - 14px or 0.875rem font-size / 1.5em line-height / Medium

Paragraph - 14px or 0.875rem font-size / 1.5em line-height / Regular

Colors

Patrons de color

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 e structurals o decoratius.

Color principal

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.

#008037
hsl(146, 100%, 25%)
rgb(0, 128, 55)

color-marca-primari (Campus)

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.

#004d21
hsl(146, 100%, 15%)
rgb(0, 77, 33)

color-marca-primari-b (Collserola)

Color de ressalt (:hover) per a elements interactius —per exemple, botons— originalment de color verd Campus.

#00cc58
hsl(146, 100%, 40%)
rgb(0, 204, 88)

color-marca-primari-c (Pèsol)

Color decoratiu o d’accent.

#52ff9d
hsl(146,100%,66%)
rgb(82, 255, 157)

color-marca-primari-d (Boreal)

Color decoratiu o d’accent i puntualment per a text d’impacte, sempre sobre fons molt fosc.

#d8f3e3
hsl(144,53%,90%)
rgb(216, 243, 227)

color-marca-primari-e (Jade)

Color de fons per blocs de text que calgui ressaltar amb el color de marca primari.

Colors neutres

Paleta de grisos

La paleta de grisos defineix una escala de colors neutres per aplicar en textos, fons, línies divisòries, marcs i altres elements funcionals de la interfície. Els diferents tons d’aquesta escala serveixen per establir jerarquies visuals, contrastos suaus i fons neutres.

Base color

color-negre (Exosfera)

color-gris-85 (Pissarra)

color-gris-70 (Àncora)

color-gris-60 (Tauró)

color-gris-45 (Colom)

color-gris-30 (Cendra)

color-gris-15 (Columna)

color-gris-5 (Boira)

color-blanc (Coco)

Colors secundaris

Paleta secundària

Els colors de la paleta secundària complementen la paleta principal i ofereixen flexibilitat creativa sense generar estridències. Aporten varietat al disseny, però no haurien d’assumir un protagonisme superior al del color principal en el seu conjunt.

Cada color secundari disposa d’una variant més fosca, que s’ha d’utilitzar com a ressalt visual (:hover) en elements interactius.

#99c95e
hsl(87, 50%, 58%)
rgb(153, 201, 94);

color-marca-secundari-1 (Eruga)

#73a437
hsl(87, 50%, 43%)
rgb(115, 164, 55)

color-marca-secundari-1b (Arbequina)

#004D5E
hsl(191, 100%, 18%)
rgb(0, 77, 94)

color-marca-secundari-2 (Cala)

#003a47
hsl(191, 100%, 14%)
rgb(0, 58, 71)

color-marca-secundari-2b (Abissal)

#faae57
hsl(32, 94%, 66%)
rgb(250, 174, 87)

color-marca-secundari-3 (Cantalup)

#f88c12
hsl(32, 94%, 52%)
rgb(248, 140, 18)

color-marca-secundari-3b (Ocàs)

Accent Color

Color focus

Els colors d’interacció s’han d’utilitzar per diferenciar accions
i estats vinculats a la navegació , especialment els enllaços i l’estat de focus. Això contribueix a reforçar la claredat funcional i l’accessibilitat del lloc web.

L'utilitzem amb moderació per a preus, aspectes destacats i interaccions, de manera que les accions importants destaquin sense sobrecarregar el disseny.

Base Color

color-enllac

color-enllac-b

color-enllac-c

Base Color

color-focus

color-focus-b

Paleta semàntica

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.

color-positiu-text (Campus)

color-positiu (Pèsol)

color-positiu-fons (Jade)

color-alerta-text (Romesco)

color-alerta (Cantalup)

color-alerta-fons (Mongeta)

color-negatiu-text (Cor)

color-negatiu (Corall)

color-negatiu-fons (Porquet)

color-info-text (Blavet)

color-info (Llampec)

color-info-fons (Romaní)

Dimensionar i aliniar

Sistema de quadrícula de 8pt

El sistema de quadrícula de 8 punts és una pràctica de disseny d'interfície d'usuari que utilitza múltiples de 8 píxels per dimensionar, espaiar i alinear els elements de disseny. Els passos principals d'escalat inclouen 8px, 16px, 24px, 32px, 40px i 48px, cosa que garanteix l'harmonia visual i un escalat ràpid en diversos dispositius.

Space 0.25

4px or 0.25rem

Space 0.5

8px or 0.5rem

Space 1

16px or 1rem

Space 1.5

24px or 1.5rem

Space 2

32px or 2rem

Space 2.5

40px or 2.5rem

Space 3

48px or 3rem

Space 3.5

56px or 3rem

Space 4

64px or 4rem

Space 4.5

72px or 4.5rem

Space 5

80px or 5rem

Space 5.5

88px or 5.5rem

Space 6

96px or 6rem

Space 6.5

104px or 6.5rem

Space 7

112px or 7rem

Space 7.5

120px or 7.5rem

Space 8

128px or 8rem

Files

Mides de fila

La secció controla el ritme vertical. La fila controla l'amplada del contingut. El farciment de les files protegeix el contingut de les vores de la pantalla.

Row 01

Fila estreta

Row size Normal / 1024px or 64rem

Row 02

Fila per defecte

Row size Defaultl / 1,280px or 80rem

Row 03

Fila ampla

Row size Wide / 1,440px or 96rem

Columnes de text

Mida de columnes

72ch - Compact / UI text

Amplada recomanada per a continguts llargs que requereixen una lectura continuada i còmoda.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sodales ex. Vestibulum iaculis velit at pulvinar gravida. Mauris eget risus euismod, feugiat erat nec, faucibus tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non tristique lorem. Morbi dapibus eget lorem sed varius. Praesent semper nulla sed lacus dignissim varius. Integer in accumsan urna, nec facilisis ligula. Maecenas eu vehicula purus, id iaculis est.