Inter Tipografías
Aa Aa
Tipografías
La mayoría de las fuentes tienen un peso particular que corresponde a
uno de los números en la asignación común de nombres de peso. Sin
embargo, algunas fuentes, llamadas fuentes variables, pueden admitir
una gama de pesos con una granularidad más o menos fina, y esto puede
brindar al diseñador un grado de control mucho más cercano sobre el
peso elegido.
Títulos / Subtitulos Body (Regular)
Name Font - Weight Font - Size Line Height
Heading 1 Bold 36 44
Heading 2 Bold 28 36
Heading 3 Bold 20 28
Body Text 1 Regular 16 24
Body Text 2 Bold 20 28
Body Text 3 Medim 14 20
Body Text 4 Regular 14 20
Body Text 5 Medium 12 16
Body Text 6 Regular 12 16
Tipografías
Aa Aa
Tipografías
La mayoría de las fuentes tienen un peso particular que corresponde a
uno de los números en la asignación común de nombres de peso. Sin
embargo, algunas fuentes, llamadas fuentes variables, pueden admitir
una gama de pesos con una granularidad más o menos fina, y esto puede
brindar al diseñador un grado de control mucho más cercano sobre el
peso elegido.
Century Gothic Segoe UI
Century Gothic
abcdefghi abcdefghi abcdefghi abcdefghi
jklmnñopq jklmnñopq jklmnñopq jklmnñopq
rstuvwxyz rstuvwxyz rstuvwxyz rstuvwxyz
Regular Italic Bold Bold Italic
Segoe UI
abcdefghi abcdefghi abcdefghi abcdefghi
jklmnñopq jklmnñopq jklmnñopq jklmnñopq
rstuvwxyz rstuvwxyz rstuvwxyz rstuvwxyz
Regular Italic Bold Bold Italic
Efectos / Shadow
X/0 Blur 16 X/0 Blur 24
Shadow / 1 Y/2 Spread 0 Shadow / 3 Y/6 Spread 0
423f44 10% 423f44 10%
X/0 Blur 20 X/0 Blur 28
Shadow / 2 Y/4 Spread 0 Shadow / 4 Y/8 Spread 0
423f44 10% 423f44 10%
Campos de textos
Acordión Toast alertas
Título de acordeón Toast
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quam illa ardentis amores excitaret sui! Cur tandem?
Satis est ad hoc responsum.
Título de acordeón
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quam illa
ardentis amores excitaret sui! Cur tandem? Satis est ad hoc res-
ponsum. Honesta oratio, Socratica, Platonis etiam. Quamvis enim
Toast
depravatae non sint, pravae tamen esse possunt. Sed tu istuc dixti
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
bene Latine.
Quam illa ardentis amores excitaret sui! Cur tandem?
Satis est ad hoc responsum.
Modales
Toast
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quam illa ardentis amores excitaret sui! Cur tandem?
Satis est ad hoc responsum.
Toast
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quam illa ardentis amores excitaret sui! Cur tandem?
Satis est ad hoc responsum.
Colores
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quam illa ardentis amores
excitaret sui! Cur tandem? Satis est ad hoc responsum. Honesta oratio, Socratica,
Platonis etiam. Quamvis enim depravatae non sint, pravae tamen esse possunt. Sed
tu istuc dixti bene Latine. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quam illa ardentis amores excitaret sui! Cur tandem? Satis est ad hoc responsum.
Honesta oratio, Socratica, Platonis etiam.
Colores primarios
Main Main Main Main Main Main
4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4
Main Main Main Main Main Main
4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4
Grises
Colores de peligro
Main Main Main Main Main Main
4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4
Colores de advertencia
Main Main Main Main Main Main
4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4
Colores de información
Main Main Main Main Main Main
4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4
Colores de éxito
Main Main Main Main Main Main
4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4 4F0DD4
Íconos
La primera tarea de un ícono es guiar a los usuarios hacia donde necesi-
tan ir. La funcionalidad oculta detrás de íconos que son difíciles de reco-
nocer puede causar problemas de usabilidad. Crear una familia de íconos
requiere un pensamiento cuidadoso y una pequeña cantidad de iteración
para lograr los siete principios de claridad, legibilidad, alineación, conci-
sión, consistencia, individualidad y facilidad de uso.
Acción 248 íconos
Alertas
Audio / Vídeo
Contenido
Comunicación
Textarea
Label Label
placeholder placeholder placeholder placeholder
Default
Helper Text 0/100 Helper Text 0/100
Label Label
placeholder placeholder placeholder placeholder
Hover
Helper Text 0/100 Helper Text 0/100
Label Label
placeholder placeholder placeholder placeholder
Focused
Helper Text 0/100 Helper Text 0/100
Label Label
placeholder placeholder placeholder placeholder
Disabled
Helper Text 0/100 Helper Text 0/100
Label Label
placeholder│ placeholder│ placeholder│ placeholder│
Filled
Helper Text 0/100 Helper Text 0/100
Otros elementos
Checkbox Radio Tag
Label Label
Label Label
Label Label
Label Label
Label Label
Label Label
Label Label
Label Label
Label
Label
Label
Label
