Fundación Americana del Hígado

Guía de estilo

Esta página describe los estilos y estándares actuales para el Fundación Americana del Hígado sitio web.

Colores

Una descripción general de los colores de la marca de este sitio.

Colores y Tonos

Transparencias

primario

Primaria

Ultra ligero

Ligero

Medio

Oscuro

Ultra oscuro

Comp

secundario

Secundaria

Ultra ligero

Ligero

Medio

Oscuro

Ultra oscuro

Comp

énfasis

Accent

Ultra ligero

Ligero

Medio

Oscuro

Ultra oscuro

Comp

bases

El pareo de bases

Ultra ligero

Ligero

Medio

Oscuro

Ultra oscuro

Comp

sombra

sombra

Ultra ligero

Ligero

Medio

Oscuro

Ultra oscuro

primario

transporte 10

transporte 20

transporte 40

transporte 60

transporte 80

transporte 90

secundario

transporte 10

transporte 20

transporte 40

transporte 60

transporte 80

transporte 90

énfasis

transporte 10

transporte 20

transporte 40

transporte 60

transporte 80

transporte 90

bases

transporte 10

transporte 20

transporte 40

transporte 60

transporte 80

transporte 90

sombra

transporte 10

transporte 20

transporte 40

transporte 60

transporte 80

transporte 90

Tipografía

A continuación se muestra una descripción general de los tamaños y pesos de la tipografía receptiva para este sitio. Estos se calculan a partir de un tamaño base y una escala matemática.

Encabezado

H1 (--xl)

Título 1 Ordinario

Título 1 Medio

Encabezado 1 Negrita

H2 (--xl)

Título 2 Ordinario

Título 2 Medio

Encabezado 2 Negrita

H3 (--l)

Título 3 Ordinario

Encabezado Medio

Encabezado 3 Negrita

H4 (--m)

Título 4 Ordinario

Título 4 Medio

Encabezado 4 Negrita

H5 (--s)

Título 5 Ordinario

Encabezado Medio

Encabezado 5 Negrita

H6 (--xs)

Título 6 Ordinario

Título 6 Medio

Encabezado 6 Negrita

Cuerpo de texto

CUERPO DEL TEXTO (--m)

Texto m Regular

Texto m Medio

Texto m Negrita

TEXTO PEQUEÑO (--s)

Texto s Regular

Texto s Medio

Texto en negrita

TEXTO EXTRA PEQUEÑO (--xs)

Texto xs Regular

Texto xs Medio

Texto x negrita

Ejemplos

Título 1 (H1)

Este es un texto grande. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 5 (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 6 (H6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Botones

Los botones sólidos y de contorno están disponibles en todos los conjuntos de colores, incluido el blanco y el negro.

BOTONES SOBRE FONDO CLARO

Primaria
Esquema primario
Secundaria Esquema secundario
Accent
Contorno de acento El pareo de bases
Esquema base

BOTONES SOBRE FONDO OSCURO

Primaria
Esquema primario
Secundaria Esquema secundario
Accent
Contorno de acento Blanco
Contorno blanco

ESCALA DE BOTONES

btn--primario/btn--xs

btn--primario/btn--xs

btn--primario / btn--m

btn--primario / btn--l

btn--primario/btn--xl

btn--primario/btn--xxl

Anchos

Hay seis valores que puede usar para controlar el ancho del elemento. Responden automáticamente.

--ancho-xs

--ancho-s

--ancho-m

--ancho-l

--ancho-xl

--ancho-xxl

Acolchado de sección

El relleno de las secciones responde y se basa en un multiplicador del sistema de espaciado central.

Ninguna

XS

S

M

L

XL

XXL

Distanciamiento

Hay seis niveles de espaciado de respuesta calculados a partir de un tamaño base y una escala matemática. Esto garantiza que el margen, el relleno y los espacios coincidan perfectamente.

--espacio-xs

--espacio-s

--espacio-m

--espacio-l

--espacio-xl

--espacio-xxl

Relleno de elementos

Aquí están los seis niveles de espaciado visualizados como relleno.

Tarjeta

Esta es una tarjeta con relleno XS. Su contenido está bastante cerca de los bordes.

Tarjeta

Esta es una tarjeta con relleno S. Tiene un acolchado un poco más ajustado.

Tarjeta

Esta es una tarjeta con relleno M. Tiene sala de respiración estándar.

Tarjeta

Esta es una tarjeta con relleno L. Tiene espacio adicional para respirar.

Tarjeta

Esta es una tarjeta con relleno XL. Tiene un importante respiro.

Tarjeta

Esta es una tarjeta con relleno XXL. Evite usar esto en un espacio confinado.

oscuridad

Hay tres sombras de caja multicapa para elegir.

Caja sombra M

Caja sombra L

Caja sombra XL

Radio de borde

Hay seis valores de radio de borde calculados a partir de un tamaño base y una escala matemática.

XS redondeada

S redondeada

M redondeada

L redondeada

XL redondeado

Redondeado XXL