Sistema de diseño
Tipografía
La tipografía es un elemento central en la creación de un producto digital y un activo imprescindible de marca. Hacer un uso controlado de la tipografía y estilos de letra, contribuye además a la organización, jerarquización y visualización del contenido actuando como guía para el usuario a lo largo de toda su experiencia.
El sistema tipográfico de Oxygen cuenta con dos familias tipográficas, una tipografía primaria corporativa, diseñada exclusivamente para la marca y otra tipografía secundaria más neutral, fácilmente legible y universalmente disponible.
Tipografía Repsol
Se utiliza principalmente en titulares y mensajes clave, para destacar fácilmente.
Tipografía Roboto
Funciona en todo tipo de contenidos y cuerpos de texto, desde subtitulares hasta captions.
Reglas de uso
Tipografía primaria (Familia Repsol)
- No se debe utilizar en cuerpos de texto o en titulares largos
- Se debe aplicar en color naranja sobre fondos claros
- Se debe aplicar en blanco sobre fondos oscuros o de imagen
- La instalación y uso de la tipografía Repsol en un producto se debe autorizar por Marca
Tipografía secundaria (Familia Roboto)
- No se debe utilizar en tamaños inferiores a 12 píxeles
- Los únicos pesos permitidos son Regular y Medium
- Se recomienda utilizar el peso Regular por defecto, reservando Medium para subtitulares
- Se recomienda no aplicar en naranja
Escala tipográfica
Para garantizar el principio de multiplataforma y consistencia, en Repsol nos aseguramos que la tipografía funcione, tanto en dispositivos pequeños como en resoluciones más grandes. Por este motivo, trabajamos con unos estilos tipográficos responsive que varían tamaños y pesos según el tamaño de la pantalla.
De este modo, cuando diseñamos en un dispositivo y utilizamos una jerarquía dentro de la escala, al pasar a un dispositivo de breakpoint diferente, adaptaremos los estilos de forma responsive, manteniendo la misma jerarquía.
Los estilos de la escala tienen una nomenclatura específica acorde al contexto en el que se deberían utilizar, para facilitar su uso correcto, del mismo modo que los estilos de color.
De este modo, cuando diseñamos en un dispositivo y utilizamos una jerarquía dentro de la escala, al pasar a un dispositivo de breakpoint diferente, adaptaremos los estilos de forma responsive, manteniendo la misma jerarquía.
Los estilos de la escala tienen una nomenclatura específica acorde al contexto en el que se deberían utilizar, para facilitar su uso correcto, del mismo modo que los estilos de color.
Caption
Para textos de acompañamiento.
Token
Uso
Ejemplo M-L
Ejemplo XS-S
Caption 1
Textos de acompañamiento: Pies de foto, labels, notas legales...
I’m a Caption 1
I’m a Caption 1
Caption 2
Utlizado en elementos de tamaño muy pequeños, como tooltips, POIs...
I’m a Caption 2
I’m a Caption 2
Body
Para cuerpos de texto de lectura.
Token
Uso
Ejemplo M-L
Ejemplo XS-S
Body 1
Cuerpo de texto genérico
I’m a Body 1
I’m a Body 1
Body 2
Cuerpo de texto secundario
I’m a Body 2
I’m a Body 2
Highlighted Body
Entradilla y textos destacados
I’m a Highlighted Body
I’m a Highlighted Body
Underline Body Link
Para enlaces dentro de cuerpos de texto.
Token
Uso
Ejemplo M-L
Ejemplo XS-S
Body 1 underline
Links en cuerpo de texto genérico
Inline Link
Inline Link
Body 2 underline
Links en cuerpo de texto secundario
Inline Link
Inline Link
Headlines
Subtítulos y títulos.
Token
Uso
Ejemplo M-L
Ejemplo XS-S
Title 1
Subtítulos internos en bloques de texto
I’m a Title 1
I’m a Title 1
Title 2
Subtítulos internos en bloques de texto
I’m a Title 2
I’m a Title 2
Subheadline
Subtítulos separación de bloques de contenido
I’m a Subheadline
I’m a Subheadline
Headline 1
Grandes titulares
I’m a H1
I’m a H1
Headline 2
Títulos de página
I’m a H2
I’m a H2
Headline 3
Títulos de módulo
I’m a H3
I’m a H3
Headline Bold 1
Títulos comerciales de primer nivel
I’m a H1b
I’m a H1b
Headline Bold 2
Títulos comerciales de segundo nivel
I’m a H2b
I’m a H2b
Numbers
Jerarquías numéricas que aplican en todos los casos excepto: charts y tablas (Para estos dos casos tenemos las foundations de Data).
Token
Uso
Ejemplo M-L
Ejemplo XS-S
Numbers 1
Grandes cifras
0123
0123
Numbers 2
Cifras destacadas
0123
0123
Numbers 3
Cifras destacadas secundarias
0123
0123
Numbers 4
Cifras destacadas terciarias
0123
0123
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
