Tipografía
Esta es Netto OT, la tipografía de la ESD.
Netto OT es la tipografía de la ESD. Es una tipografía sin serifa, de bajo contraste y especial para tamaños pequeños de texto. Fue diseñada por Indian Type Foundry.
Nos ayuda a trasmitir ...
Escala Tipográfica
Nuestra escala tipográfica es amplia aunque nosotros vamos a utilizar habitualmente los tamaños hasta Heading 5, teniendo los otros tamaños definidos en caso de que sean necesarios.
Heading 1
Netto OT
Regular
48px / 3rem
Heading 2
Netto OT
Bold
24px / 1.5rem
Heading 3
Netto OT
Regular
20.8px / 1.3rem
Heading 4
Netto OT
Bold
17.6px / 1.1rem
Heading 6
Netto OT
Bold
14.4px / 0.9rem
Link
Netto OT
Regular
14.4px / 0.9rem
Span 1
Netto OT
Regular
25.6px / 1.6rem
Span 2
Netto OT
Regular
15.2px / 0.95rem
Span 3
Netto OT
Regular
14.4px / 0.9rem
Esta es Source Sans Pro, la tipografía secundaria de la ESD.
Sorce Sans Pro es la tipografía para párrafos de la ESD. Es una tipografía sin serifa, de bajo contraste y especial para tamaños pequeños de texto. Fue diseñada por Indian Type Foundry.
Nos ayuda a trasmitir ...
Escala Tipográfica
Nuestra escala tipográfica es amplia aunque nosotros vamos a utilizar habitualmente los tamaños hasta Heading 5, teniendo los otros tamaños definidos en caso de que sean necesarios.
Heading 5
Source Sans Pro
Bold
48px / 3rem
Parrafo
Source Sans Pro
Regular
20.8px / 1.3rem
Parrafo 2
Source Sans Pro
Regular
16px / 1rem
Botones
Source Sans Pro
Regular
14.4px / 0.9rem
Parrafos
Title
Subtitle
Lorem ipsum dolor sit amet consectetur. Tristique eu vel ornare vulputate non. Nisi a posuere at vitae tristique. Imperdiet nunc libero velit at amet massa habitant ultrices. Cursus sit accumsan rutrum elementum pharetra eros mi metus.
Post Title
Lorem ipsum dolor sit amet consectetur. Tristique eu vel ornare vulputate non. Nisi a posuere at vitae tristique. Imperdiet nunc libero velit at amet massa habitant ultrices.
Footer Title
Lorem ipsum dolor sit amet consectetur. Tristique eu vel ornare vulputate non. Nisi a posuere at vitae tristique. Imperdiet nunc libero velit at amet massa habitant ultrices.
Clases CSS
.text-hX
.text-pX
.text-link
.text-spanX
.text-btn
Colores
Hemos definido una paleta de color básica que cubre todas nuestras necesidades
Primarios
Especiales
Grises
Clases CSS
.primary-XXX
.special-X
.gray-XXX
Icons
Hemos seleccionado un grupo de icónos para la ESDM.
Clases CSS
material-symbols-outlined : search
material-symbols-outlined : shift
material-symbols-outlined : send
Espaciado
Bordes
Button
radius: 2px
Pill
radius: 50px
Social / Card
radius: 0px
Botones
Estos son los botones de la ESD
facebook
twitter
linkedin
whatsapp
Inputs
Estos son los inputs de la ESD
Escribe lo que buscas y pulsa intro
Badges
Estos son los badges de la ESD
Grupos de botones
Estos son los grupos de botones de la ESD
Pill Button Group
Social Button Group
facebook
twitter
linkedin
whatsapp
Inputs con iconos
Estos son los inputs con icónos de la ESD
Alerts
Estos son los alerts de la ESD
Lo sentimos mucho Post no disponible
Cards
Estos son los cards de la ESD
Fecha
Post Title
Post text
Post Title
Fecha
Post Title
Post Title
Post text
Fecha
Post Title
Post text
Fecha
Post Title
Post text
Fecha
Post Title
Post text
Fecha
Post Title
Post text
Navbars
Estos son los navbars de la ESD
Social Nav
Menu Nav
escuela superior de diseño Madrid
e/s/d/m
Header
Este es el header de la ESD
escuela superior de diseño Madrid
e/s/d/m
Formulario
Este es el formulario de la ESD